Tutorial JavaScript DataTable

Bagi anda yang kesulitan membuat tampilan data interaktif beserta pengaturan tata letak untuk aplikasi yang anda bangun. Mungkin artikel ini sedikit membantu anda dalam mengatasi permasalahan yang anda hadapi. Posting kali ini adalah membahas tentang DataTable.

DataTable ini merupakan plugin jQuery yang dibuat untuk mengelola data informasi dalam bentuk grid / table. Fitur yang ada pada plugin ini cukup interaktif dan lengkap, diantaranya adalah:

1. Fitur Pagination / Halaman.
2. Fitur Sort / Pengurutan Data.
3. Fitur Limit Data / Batas Tampilan data perhalaman.
4. Fitur Search / Pencarian Data

Lebih menarik lagi DataTable juga memiliki beberapa theme/style yang dapat kita gunakan sehingga kita lebih mudah dalam custom tampilan. Lalu bagaimana cara menggunakan plugin ini, silahkan ikuti langkah-langkah berikut ini.

1. Silahkan Download plugin / file pendukung DataTable di www.datatable.net.

www.code.jquery.com/jquery-1.11.1.min.js

www.cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js

2. Lalu simpan kedua file tersebut pada direktori project anda.
3. Pada halaman index.php anda tuliskan script HTML berikut.

<table id=”example” class=”display table table-striped table-bordered ” >
<div class=”dataPengarang”>
<thead>
<tr>
<th>Nama</th>
<th>Level Pengarang</th>
</tr>
</thead>

<tfoot>
<tr>
<th>Nama</th>
<th>Level Pengarang</th>
</tr>
</tfoot>

<tbody >
<?php
foreach($author AS $data){
?>
<tr >
<td><label><input type=’checkbox’ name=’author_id[]’ value='<?php echo $data[‘author_id’]; ?>’
<?php
if(isset($biblio_author)){
foreach($biblio_author AS $ba){
if($data[‘author_id’] == $ba[‘author_id’]){ echo ‘checked’;}
}
}
?> /> <?php echo $data[‘author_name’]; ?> </label></td>
<td>
<select class=’form-control input-small’ name=’level[]’ style=”padding: 1px;”>
<option value=”0″></option>
<?php
$no1 = 0;
foreach($author_level AS $datas){ $no1++;
?>
<option value=”<?php echo $datas[‘author_level_id’]; ?>”
<?php
foreach($biblio_author AS $ba){
if ($data[‘author_id’] == $ba[‘author_id’] && $ba[‘level’]==$datas[‘author_level_id’]) { echo ‘selected’; }
}
?>
><?php echo $no1.’. ‘.$datas[‘author_level_name’]; ?></option>
<?php
}

?>
</select>
</td>
</tr>
<?php
}
?>
</tbody>
</div>
</table>
<script>
$(document).ready(function() {
$(‘#example’).DataTable();
} );

</script>

4. Simpan, kemudian jalankan melalui browser maka, akn tampil hasilnya seperti gambar dibawah ini.