Membuat Data Tabel menggunakan Codeigniter
Membuat Data Tabel menggunakan Codeigniter
Setelah siap tahap memisahkan template dengan content menggunakan codeigniter maka langkah selanjutnya adalah membuat data tabel menggunakan codeigniter.
Data tabel sangat diperlukan untuk menampilkan database dengan rapi dan terstruktur sehingga pengguna dengan mudah menganalisa tabel yg kita tampilkan.
Dan data tabel ini pun juga nanti nya banyak kita gunakan di semua view CRUD, sehingga harus dipelajari dengan baik.
OK langsung saja, untuk langkah awalnya kita harus memasukkan css data tabel di bagian tag html template.php antara <head> dengan </head> sesuai coding dibawah
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
Lalu script untuk jquery juga pindahkan yang awalnya dari tag footer pindahkan ke bagian tag head seperti css diatas
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22%3C%3Fphp%20echo%20base_url()%3B%20%3F%3Eassets%2Fbower_components%2Fjquery%2Fdist%2Fjquery.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
OK selanjutnya kita buat file baru di view dan beri nama file nya datatable.php dengan coding sebagai berkut
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
Data Tables
<small>advanced tables</small>
</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
<li><a href="#">Tables</a></li>
<li class="active">Data tables</li>
</ol>
</section>
<!-- Main content -->
<section class="content">
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="box-header">
<h3 class="box-title">Data Table With Full Features</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Trident</td>
<td>Internet
Explorer 4.0
</td>
<td>Win 95+</td>
<td> 4</td>
<td>X</td>
</tr>
<tr>
<td>Trident</td>
<td>Internet
Explorer 5.0
</td>
<td>Win 95+</td>
<td>5</td>
<td>C</td>
</tr>
</table>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</section>
<!-- /.content -->
<!-- DataTables -->
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22%3C%3Fphp%20echo%20base_url()%3B%20%3F%3Eassets%2Fbower_components%2Fdatatables.net%2Fjs%2Fjquery.dataTables.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22%3C%3Fphp%20echo%20base_url()%3B%20%3F%3Eassets%2Fbower_components%2Fdatatables.net-bs%2Fjs%2FdataTables.bootstrap.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20%20%20%20%20%20%24(function()%20%7B%0A%20%20%20%20%20%20%20%20%24('%23example1').DataTable()%0A%20%20%20%20%20%20%20%20%24('%23example2').DataTable(%7B%0A%20%20%20%20%20%20%20%20%20%20'paging'%3A%20true%2C%0A%20%20%20%20%20%20%20%20%20%20'lengthChange'%3A%20false%2C%0A%20%20%20%20%20%20%20%20%20%20'searching'%3A%20false%2C%0A%20%20%20%20%20%20%20%20%20%20'ordering'%3A%20true%2C%0A%20%20%20%20%20%20%20%20%20%20'info'%3A%20true%2C%0A%20%20%20%20%20%20%20%20%20%20'autoWidth'%3A%20false%0A%20%20%20%20%20%20%20%20%7D)%0A%20%20%20%20%20%20%7D)%0A%20%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
Dan tahap akhir, kita buat file baru di controller yang namanya Tabel.php dimana coding nya sebagai berikut
<?php defined('BASEPATH') or exit('No direct script access allowed'); class Tabel extends CI_Controller { public function index() { // $this->load->view('template');
$this->template->load('template', 'datatable');
}
}
Nah coba sekarang kita lihat perubahannya di browser kam ketikkan http://localhost/crudci/index.php/tabel
OK sudah siap tahap Membuat Data Tabel menggunakan Codeigniter, semoga bermanfaat dan nantikan artikel kalanjutannya