Tampilkan postingan dengan label ci. Tampilkan semua postingan
Tampilkan postingan dengan label ci. Tampilkan semua postingan

Selasa, 01 Mei 2012

implementasi datatables di codeigniter

menggunakan plugin datatables pada codeigniter kini semakin mudah, karena sudah ada library khusus codeigniter :))

asumsi :
- sudah install xampp
- sudah install codeigniter
-sudah install jquery
- sudah install file2 datatables di codeigniter

file yang dibutuhkan:
- library Datatables: datatables.php

berikut langkah2nya :
- buat database dan tabel beserta isinya. contoh saya membuat tabel obat:
- lalu set database name sesuai dengan nama database yang kamu buat di 'application/config/database.php

- buat file controller dgn nama misal 'testControl' dengan isi sebagai berikut:

<?php
 class testControl extends CI_Controller
 {
    function view_obat()
  {
   $this->load->view('view_obat');
  }
    function ajax_view_obat()
  {
   $this->load->library('Datatables');
   $this->datatables->from('obat');
   $this->datatables->select('kode_obat,nama_obat,kode_satuan,kode_supplier');
   echo $this->datatables->generate();
  }
 }
//end of file testControl


 - buat view dengan nama 'view_obat' dengan isi sbb:
<head>
 <script type="text/javascript" src="<?php echo base_url();?>lib/js/jquery-1.4.4.min.js"></script>
 <script type="text/javascript" src="<?php echo base_url();?>lib/js/jquery.dataTables.js"></script>
  <link rel="stylesheet" type="text/css" media="screen" href="<?php echo base_url(); ?>lib/css/demo_table_jui.css"/>
   <link rel="stylesheet" type="text/css" media="screen" href="<?php echo base_url(); ?>lib/css/demo_table.css"/>
</head>
<body>
 <h2>data obat</h2>
 <hr>
 <table id="tbl"  cellpadding="0" cellspacing="0" border="0" class="display" >
  <thead>
   <tr>
    <th>kode obat</th>
    <th>nama obat</th>
    <th>kode satuan</th>
    <th>kode supplier</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td colspan="5" class="dataTables_empty">Loading data from server</td>
   </tr>
  </tbody>
  <tfoot>
   <tr>
   </tr>
  </tfoot>
 </table>
  <script type="text/javascript" charset="utf-8">
  $(document).ready(function() {
   $('#tbl').dataTable( {
    "bProcessing": true,
    "bServerSide": true,
    'sPaginationType': 'full_numbers',
    "sAjaxSource": "<?=base_url()?>index.php/testControl/ajax_view_obat/",
    "aaSorting": [[ 0, "desc" ]]
   } );
  } );  </script>
 </body>
- dan hasilnya sebagai berikut:

- selesai, selamat mencoba :))