Membuat Tabel Dinamis Dengan jQuery Data Table

Assalamualaikum Wr. Wb.

Alhamdulillah, kali ini Webhozz akan berbagi ilmu lagi. Kali ini kita akan belajar tentang JQuery. Dan disini kita akan belajar membuat tabel yang dinamis. Namanya adalah JQuery Datatable.

Datatable adalah sebuah plugin yang dibangun oleh JQuery yang sudah meliputi search, paging, hingga penomoran otomatis di tabel yang nanti kita buat. Makanya disini kita sebut tabel dinamis.

Mempelajari datatable ini sangat mudah. Kita tinggal download aja pluginnya. Dan pluginnya sudah lengkap dengan file css dan javascript. Jadi, kita hanya memanggil beberapa classnya aja. Untuk download filenya, bisa dengan mengunjungi website resminya disini (https://datatables.net/).

Jika kita menggunakan bahasa HTML maupun PHP, datatable tetap bisa digunakan.

Oke, langsung aja kita mulai ya.

  1. Pertama-tama, kita buat dulu file baru. Sebagai contoh databel.html. Seperti biasa, kita isi dulu dengan tag html awal.

2. Kemudian download file datatablenya pada website resminya (https://datatables.net/download/index). Jika sudah dibuka linknya, silahkan scroll ke bawah hingga ada pilihan downloadnya seperti gambar di bawah ini.

3. Jika sudah didownload, kemudian buka filenya pada direktori download. Selanjutnya silahkan klik kanan pilih Extract to DataTables. 

4. Copy folder hasil extract tadi ke dalam folder dimana kita menyimpan html tadi.

5. Selanjutnya, kita buka file HTML kita tadi. Kita isi pada tag <body></body>. Kita isi dengan perintah table.

Maka jadinya seperti ini.

6. Kemudian download file Jquery disini(https://jquery.com/download/), dan satukan file jquerynya jadi satu folder dengan html, seperti langkah no. 4.

7. Selanjutnya pada tag <head></head>, kita panggil file pendukung datatablenya yang berupa CSS dan JAVASCRIPT dari datatable dan jquery tadi.

<script type=”text/javascript” src=”jquery-3.2.1.min.js”></script>

<link rel=”stylesheet” type=”text/css” href=”DataTables/datatables.min.css”>

<script type=”text/javascript” src=”DataTables/datatables.min.js”></script>

8. Kemudian tambahkan script berikut ini di tag <head></head>, tepat di bawah pemanggilan file yang tadi.

<script type=”text/javascript”>

$(document).ready(function()

{

$(‘#myTable’).DataTable();

});

</script>

9. Selanjutnya pada tag <table></table>. Panggil fungsi datatable yang tadi pada tag <head></head> supaya tabelnya berubah. Seperti di bawah ini.

<table id=”myTable”>

10. Maka dari itu, jika semua disatukan maka tampilan kode secara keseluruhan.

Saat dijalankan di browser, maka tampilan tabelnya jadi seperti ini.

Nah, tampilan tabel yang kita buat tadi jadi lebih dinamis dan praktis. Tentunya sangat efisien dalam pencarian data.

Alhamdulillah untuk postingan kita kali ini. Silahkan mencoba dan semoga bermanfaat ya, Amin.

Wassalamualaikum Wr. Wb. 

Sumber : https://www.webhozz.com/blog/membuat-tabel-dinamis-dengan-jquery-data-table/

admin