menggunakan plugin datatables pada codeigniter kini semakin mudah, karena sudah ada library khusus codeigniter :))
- selesai, selamat mencoba :))
asumsi :
- sudah install xampp
- sudah install codeigniter
-sudah install jquery
- sudah install file2 datatables di codeigniter
file yang dibutuhkan:
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 :))
