Membuat paging tabel Codeigniter menggunakan plugin Datatables

Pada pembuatan sebuah project pasti anda sering menggunakan sebuah tabel pada views untuk menampilkan data dari database, jika data anda ada 20 atau 50 mungkin tidak akan bermasalah jika data tersebut muncul pada sebuah page views namun bagaimana jika data anda ada lebih dari 200 data tabel anda akan tampil sangat panjang ke bawah dan user harus menscroll ke bawah lumayan melelahkan, untuk memudahkan maka kita harus membuat sebuah paging tabel agar data bisa dibagi menjadi beberapa bagian. di Di tutorial ini akan menjelaskan cara membuat tabel dengan plugins datatables, kenapa mesti harus menggunakan  plugins datatables? Dengan menggunakan plugin datatables anda tidak perlu membuat script paging pada controllers hanya dengan memanggil data array dari database. Apa ke untungan menggunakan plugin datatables? Selain untuk membuat sebuah pagging plugins data tables juga bisa digunakan untuk membuat search data, sort data, select download data dll. Untuk lebih jelas nya berikut tutorial nya.

1. Download plugins datatables disini atau disini

2. Buat sebuah folder assets pada project lalu Extract hasil download.

3. Sekarang buat sebuah Controllers untuk menampilkan data.

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class data_alat extends CI_Controller {
    public function index() { 
 data = array ('alat' => $this->MyModels->show_alat());
 $this->load->view('v_alat', $data);
    }

} 

4.Buat sebuah sebuah Models untuk query database dan jangan lupa panggil model di autoload.

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class MyModels extends CI_Model {
 function get_all_alat(){
    $query = $this->db->select('*')
            ->from('tbalat')
        ->get();
        
    if ($query->num_rows() > 0) {
      foreach ($query->result() as $data) {
        $hasil[] = $data;
    }
    return $hasil;
  } 

 }
} 

5. Selanjutnya buatlah sebuah Views untuk menampilkan data disini saya menggunakan css Bootstrap.

<link href="<?php echo base_url(); ?>assets/css/bootstrap.min.css" rel="stylesheet"/>
<link href="<?php echo base_url(); ?>assets/datatables/media/css/dataTables.jqueryui.min.css" rel="stylesheet"/>
<script src="<?php echo base_url(); ?>assets/js/bootstrap.min.js"></script>     
<script src="<?php echo base_url(); ?>assets/js/jquery-2.2.3.min.js"></script>
<script src="<?php echo base_url(); ?>assets/datatables/media/js/jquery.dataTables.min.js"></script> 


<table id="example" class="table table-bordered table-striped">
  <thead>
    <tr>
   <th class="text-center">No</th>
   <th class="text-center">Kode Alat</th>
   <th class="text-center">Nama Alat</th>
   <th class="text-center">No Seri</th>
   </tr>
    </thead>
    <tbody>
    <?php
    if ($alat == NULL) {
    ?>
     <!-- kosongkan jika tidak ada data -->
    <?php
   } else {
   $no = 1;
   foreach ($alat as $row) {
    ?>
   <tr>
   <td><?php echo $no; ?></td>
   <td><<?php echo $row->kode_alat; ?></td>
   <td><?php echo $row->namaalat; ?></td>
   <td><?php echo $row->merk; ?></td>
   <td><?php echo $row->noseri; ?></td>
   <?php
   $no++;
   }
     }
   ?>
  </tr>
 </tbody>
</table>

6. Tambahkan Script berikut untuk menampilkan datatables.

<script>
  $(function () {
    $('#datatables').dataTable();
  });
</script>

7. Jika sudah jalankan web nya.

 8. Selain itu anda juga bisa mengatur paging atau menonaktifkan fitur yang ada dengan menambahkan script berikut dengan menggubah true menjadi false untuk menonaktifkan.

<script>
  $(function () {
    $('#datatables').dataTable({
          "scrollX": true, // Menampilkan scroll
   "paging": true, // Menampilkan paging
   "searching": true, // Menampilkan Searching
   "ordering": true, // Menampilkan Order tabel
   "info": true, // menampilkan info 
   "language": {
       "zeroRecords": "Tidak ada data" //Menampilkan text jika data kosong
   }    
    });
  });
</script>

Selain script diatas masih banyak fitur yang bisa digunakan oleh datatables dengan mengunjungi website resminya datatables.net. anda juga bisa mengeksplor lebih jauh penggunaan datatables pada project anda.


Demo

Semoga bermanfaat