Cara Membuat Tabel Dengan Jquery DataTables

Cara Membuat Tabel Dengan Jquery DataTables - DataTables adalah library Jquery yang banyak digunakan untuk menampilkan data dalam bentuk tabel disertai dengan fitur autosearch, paging, sorting, filter dan masih banyak lagi.

Fitur-fitur tersebut tentu sangat berguna bagi pengguna dalam mengelola data.

Pada tutorial ini kita akan belajar membuat tampilan sebuah data dalam bentuk tabel dengan bantuan library DataTables.

Cara Menggunakan Jquery DataTables

Dengan bantuan plugin jquery datatables, akan menghemat waktu kita karena fitur search, pagination, sort data, filter data sudah tersedia.

Kita hanya tinggal menghubungkan tabel data yang sudah kita buat dengan plugin datatables.

Cara Menggunakan Datatables di HTML

Baiklah pada tutorial kali ini saya akan membagikan tentang cara membuat dataTables responsive.

Menyisipkan Plugin Jquery DataTables

Plugin Data Tables yang saya gunakan pada tutorial kali ini adalah versi online dengan memanfaatkan CDN. Apa itu CDN ? Anda bisa membacanya penjelasannya Cara Meningkatkan Loading Blog/Web dengan CDN.

Jika anda ingin menggunakan Jquery DataTables versi offline, bisa langsung download di situs resminya melalui https://datatables.net/download/

Berikut ini cara menyisipkan Jquery Data Tables melalui CDN.

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>

Jika anda menggunakan plugin ini versi offline, maka ubah nilai src dengan alamat path folder anda menyimpan file plugin Jquery DataTables, seperti ini contohnya.

<script src="/nama-folder/jquery-3.1.0.js"></script>
<script src="/nama-folder/jquery.dataTables.min.js"></script>

Penting: Susunan penyisipan script untuk menampilkan data tabel JQuery harus berada di atas Data tables, karena Data Tables membutuhkan Plugin JQuery untuk dapat berjalan normal.

Script HTML DataTable

Script HTML berupa tag tabel yang diberikan ID unik atau class sebagai selector yang berfungsi untuk memilih tabel data mana yang menerapkan plugin Jquery DataTable.

Berikut contoh kode HTML.

<table id="tabel-data" class="table table-striped table-bordered" width="100%" cellspacing="0">
    <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>Charde Marshall</td>
            <td>Regional Director</td>
            <td>San Francisco</td>
            <td>36</td>
            <td>2008/10/16</td>
            <td>$470,600</td>
        </tr>
        <tr>
            <td>Haley Kennedy</td>
            <td>Senior Marketing Designer</td>
            <td>London</td>
            <td>43</td>
            <td>2012/12/18</td>
            <td>$313,500</td>
        </tr>
        <tr>
            <td>Tatyana Fitzpatrick</td>
            <td>Regional Director</td>
            <td>London</td>
            <td>19</td>
            <td>2010/03/17</td>
            <td>$385,750</td>
        </tr>
        <tr>
            <td>Michael Silva</td>
            <td>Marketing Designer</td>
            <td>London</td>
            <td>66</td>
            <td>2012/11/27</td>
            <td>$198,500</td>
        </tr>
        <tr>
            <td>Paul Byrd</td>
            <td>Chief Financial Officer (CFO)</td>
            <td>New York</td>
            <td>64</td>
            <td>2010/06/09</td>
            <td>$725,000</td>
        </tr>
        <tr>
            <td>Gloria Little</td>
            <td>Systems Administrator</td>
            <td>New York</td>
            <td>59</td>
            <td>2009/04/10</td>
            <td>$237,500</td>
        </tr>
        <tr>
            <td>Bradley Greer</td>
            <td>Software Engineer</td>
            <td>London</td>
            <td>41</td>
            <td>2012/10/13</td>
            <td>$132,000</td>
        </tr>
        <tr>
            <td>Dai Rios</td>
            <td>Personnel Lead</td>
            <td>Edinburgh</td>
            <td>35</td>
            <td>2012/09/26</td>
            <td>$217,500</td>
        </tr>
        <tr>
            <td>Jenette Caldwell</td>
            <td>Development Lead</td>
            <td>New York</td>
            <td>30</td>
            <td>2011/09/03</td>
            <td>$345,000</td>
        </tr>
        <tr>
            <td>Yuri Berry</td>
            <td>Chief Marketing Officer (CMO)</td>
            <td>New York</td>
            <td>40</td>
            <td>2009/06/25</td>
            <td>$675,000</td>
        </tr>
        <tr>
            <td>Caesar Vance</td>
            <td>Pre-Sales Support</td>
            <td>New York</td>
            <td>21</td>
            <td>2011/12/12</td>
            <td>$106,450</td>
        </tr>
        <tr>
            <td>Doris Wilder</td>
            <td>Sales Assistant</td>
            <td>Sidney</td>
            <td>23</td>
            <td>2010/09/20</td>
            <td>$85,600</td>
        </tr>
        <tr>
            <td>Angelica Ramos</td>
            <td>Chief Executive Officer (CEO)</td>
            <td>London</td>
            <td>47</td>
            <td>2009/10/09</td>
            <td>$1,200,000</td>
        </tr>
        <tr>
            <td>Gavin Joyce</td>
            <td>Developer</td>
            <td>Edinburgh</td>
            <td>42</td>
            <td>2010/12/22</td>
            <td>$92,575</td>
        </tr>
    </tbody>
</table>

Buat Fungsi Untuk Memanggil DataTable

Setelah selesai membuat tabel data, selanjutnya adalah kita buat fungsi datatables nya agar di jalankan ketika browser berhasil di load.

<script>
    $(document).ready(function(){
        $('#tabel-data').DataTable();
    });
</script>

Penting: perhatikan pada selector yang ditandai dengan pagar #. #tabel-data, kata kunci tersebut merujuk pada tag html tabel diatas dengan attribute id="tabel-data".

Lalu method .DataTable() berfungsi untuk memanggil function DataTable dan menerapkannya ke dalam ID yang dipilih.

Demo Hasil

Sampai disini kita sudah berhasil menerapkan JQuery DataTables pada tabel data yang kita miliki, namun sayangnya masih ada yang kurang.

Yakni tampilan yang kurang enak dilihat, didalam Plugin Jquery DataTables juga menyediakan template CSS yang bisa kalian gunakan.

Gunakan Tempa Bootstrap Untuk DataTables

Disini saya akan menggunakan template CSS yang sudah familiar bagi developer web atau bagi pemula sangat mudah untuk dipelajari.

Lagi-lagi kita akan menggunakan CDN, kita perlu menyisipkan CSS Boostrap dan CSS Tema Data Tabel untuk Bootstrap dan juga Javascript Data Table untuk Bootstrap. CDN Boostrap DataTables


<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"></link>

CDN Javascript Boostrap DataTables


<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>

Hasil Setelah Memasang Tema Boostrap di DataTables

Bisa dilihat hasil dari demo datatables, jika kalian perhatikan sudah tersedia form pencarian lengkap dengan pagination yang bisa langsung kita gunakan.

Untuk kustomisasi fitur dari Jquery DataTables dapat kalian temukan di situs resmi datatables atau kalian bisa ikuti tautan https://datatables.net/examples/index

Begitulah tadi tutorial Cara Membuat Tabel Dengan Jquery DataTables sangat mudah bukan untuk di praktekan. Jika kalian mengalami kesulitan saat mencobanya, silahkan tinggalkan komentar.

Tutorial