Monday, January 28, 2019

Cara menginstal dan menggunakan plug-in DataTable

How To Use DataTables ?

disini saya akan menjelaskan cara menggunakan plug-in DataTables. Dengan menggunakan Bootstrap, Tapi disini saya tidak akan menjelaskan cara menggunkan bootstrapnya langsung kepada data table.






DataTables merupakan sebuah plug-in jQuery untuk memanipulasi data pada tabel HTML.


Langkah langkah :


1.Download DataTables 
2.Menyisipkan DataTables
   
>>Menyisipkan DataTables Melalui Online

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

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



>>Menyisipkan DataTables Melalui Offline pertama download plug-in nya lalu panggil



3.Membuat tambel



<table class="table table-striped table-bordered table-hover" id="dataTables-example">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Nama Kategori Dokumen</th>
                                            <th>Keterangan</th>
                                            <th>Urutan</th>
                                            <th>Slug</th>
                                            <th>Option</th>
                                        </tr>
                                    </thead>

                                    <tbody>

                                        <tr class="odd gradeX">
                                            <td>Internal</td>
                                            <td>Post</td>
                                            <td>1</td>
                                            <td>Share</td>
                                            <td></td>
                                        </tr>
                                      
                                    </tbody>
</table>

4. Panggil DataTables dengan JavaScript sesuai dengan langkah ke-2 pada gambar

       
      <script>
            $(document).ready(function () {
                $('#dataTables-example').dataTable();
            });

        </script>


Hasil Akhir kurang lebihnya


~Selesai selamat mencoba~