Sebelum membahas mengenai cara menggunakan Datatables, terlebih dahulu saya akan memberikan penjelasan tentang Datatables. Datatables pada situs resminya menjelaskan bahwa datatables merupakan plugin dari pustaka javascript yaitu JQuery. Oleh karena itu disarankan sebelum menggunakan plugin ini setidaknya anda sudah bisa & mengerti perintah dasar pada JQuery agar tidak begitu kesulitan dalam menggunakan plugin ini kedepannya. Sesuai dengan namanya plugin ini hanya terfokus pada penggunaan yang berkaitan dengan tag table HTML. Meskipun bukan hanya sekedar tampilan saja yang didapat tetapi juga cukup banyak kelebihan yang dapat kita gunakan sesuai dengan kebutuhan.
Kelebihan Datatables
Pastinya sebelum menjelaskan cara menggunakan datatables, seharusnya anda mempunyai alasan terlebih dahulu kenapa anda ingin menggunakan datatables dibanding dengan plugin lainnya / dengan table biasa pada HTML. Adapun diantara kelebihan dan kemudahan yang didapatkan dengan menggunakan datatables diantaranya :
- Pagination, anda tidak perlu pusing dan menghabiskan waktu saat ngoding agar table yang anda buat bisa memiliki banyak halaman.
- Instant search, begitu pula untuk masalah pencarian data. Karena fungsi tersebut sudah ada dan tinggal digunakan saja sesuai dengan kebutuhan kita.
- Multi-column ordering, Untuk mengurutkan data pun sudah disediakan bahkan bukan hanya satu kolom tapi bisa urutkan berdasarkan banyak kolom.
- Supports almost any data source, Untuk masalah sumber data plugin ini hampir semua sumber data(secara umum) dapat diprosesnya seperti DOM, Javascript, Ajax & Server-side processing.
- Easily theme-able, untuk tampilannya pun tidak monoton karena sudah disediakan beberapa theme yang siap pakai seperti bawaan dari DataTables, jQuery UI, Bootstrap, Foundation.
- dll (karena cukup banyak, anda bisa lihat langsung dari situs resminya 😀 )
Instalasi & Cara menggunakan Datatables
Selanjutnya cara menggunakan datatables yaitu anda harus men-download terlebih dahulu datatables disini, kemudian selanjutnya copy-kan 3 folder css, images & js seperti pada gambar disamping ke folder baru, misalkan ‘Latihan’. Selanjutnya tambahkan file baru dengan nama latihan.html dan masukkan source code berikut :
<html>
<head>
<title>Latihan Datatables</title>
</head>
<body>
<!-- Contoh Table -->
<table id="ngoding" border="1" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
</body>
</html>
Bila kita lihat dari browser tampilannya sangat biasa, hanya menggunakan table pada HTML. Bila kita ingin menambahkan fungsi sorting, pagination, searching setidaknya kita butuh memakan waktu lagi untuk pengerjaannya, terlebih bila kita diawal memang belum memiliki pengetahuan / source code dari fungsi tersebut.
Coba selanjutnya pada source code tersebut kita tambahkan seperti ini pada tag head HTML :
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.min.css">
<script type="text/javascript" charset="utf8" src="js/jquery.js"></script>
<script type="text/javascript" charset="utf8" src="js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
$(document).ready( function () {
$('#ngoding').DataTable();
} );
</script>
Bagaimana hasilnya ? cukup menarik kan ? dengan perintah dasar JQuery seperti ini :
$(document).ready( function () {
$('#ngoding').DataTable();
} );
Kesimpulan dari postingan tentang Cara menggunakan Datatables ini kita sudah dapat langsung memanfaatkan fungsi diantaranya sorting, pagination, instant search pada table yang telah kita buat. Terlebih ini baru cara menggunakan datatables secara default, karena masih banyak lagi fungsi lainnya yang cukup menarik dan dapat kita gunakan. Semoga dengan posting singkat ini mengenai cara menggunakan datatables dapat dengan mudah dipahami dan dapat bermanfaat.
5 Comments
Cara menampilkan data pada datatables - Bebas Ngoding
(July 9, 2018 - 2:57 am)[…] Cara menggunakan Datatables […]
jono
(February 21, 2019 - 2:07 am)mau tanya mas, itu kalo semisal kolom nya banyak(misal 20 lebih kolom)
la gimana caranya biar tetep muncul search dan pagination nya?
karena saya sudah coba banyak cara tetap saja tidak muncul
admin
(March 6, 2019 - 2:26 am)ini maksudnya search dan pagination nya hilang / harus digeser kekanan dulu baru bisa muncul ?
klo hilang kemungkinan ada pengaturan CSS nya yang perlu diubah, coba lihat link berikut mungkin dapat membantu disini.. Klo dirasa masih kesulitan bisa tolong kirimkan file / link spt jsfiddle dsb supaya bisa dipelajari lebih lanjut. Atau cara mudahnya pastikan table yg dibuat sudah flexible
alif purnama
(May 8, 2020 - 6:20 am)Saya mau tanya. kalo ini kan tabel dan data dibuat sendiri. tapi bagaimana jika kita load data dari database?
disini saya menggunakan database sql server. makasih
admin
(June 13, 2020 - 2:15 pm)Sebelum bicara datatables, apa kamu sdh bisa menampilkan output data menggunakan db sql server? klo sudah, coba bisa liat disini : https://bebas-ngoding.com/cara-menampilkan-data-pada-datatables/ . Tapi klo belum mungkin ini bisa jadi sebagai referensi : https://razorsql.com/articles/sqlserver_column_names_values.html