Cara menggunakan Datatables

latihan datatables table HTML 02

Sebelum membahas mengenai cara menggunakan Datatables, terlebih dahulu setidaknya saya akan menjelaskan tentang Datatables itu sendiri. 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

struktur 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.

cara menggunakan datatables

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>

cara menggunakan datatables

Bagaimana hasilnya ? cukup menarik kan ? dengan perintah dasar JQuery seperti ini :

$(document).ready( function () {
    $('#ngoding').DataTable();
} );

Pada 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.

Be the first to comment

Leave a Reply

Your email address will not be published.


*


This site uses Akismet to reduce spam. Learn how your comment data is processed.