Cara menggunakan datatables / bootstrap 5

Sebelum kita masuk ke praktiknya saya jelasnya dulu apa sih datatables itu, datatables adalah plugin yang di sediakan Oleh Jquery Datatables dan ini mempunyai fiut-fitur seperti pencarian otomastis berdasarkan disemua row table ,pagination otomatis dan kita bisa sorting data, jadi kita tidak direpotkan lagi untuk membuat fitur pencarian maupun paginationya, penerapanyapun bisa dibilang cukup mudah, untuk itu kita praktikan bersama-sama..

1. Sebelum masuk ke Editor kalian masing alangkah baiknya siapkan segelas Black Coffee untuk menghindari rasa ngantuk =D
2. Sekarang download Plugin Datatablesnya website resminya disini atau punya kami disini
3  Sekarang kita buat Document baru berinama contoh datatable.html dan simpan dalam 1 folder
4. Sekarang Panggil Css Bootstrap,Datatables dan JSnya seperti dibawah ini

<link rel="stylesheet" href="./asset/bootstrap.min.css">
<script src="asset/jquery-1.7.2.min.js"></script>
<script src="asset/bootstrap.min.js"></script>
<script src="asset/datatables/jquery.dataTables.min.js"></script>
<script src="asset/datatables/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="asset/datatables/dataTables.bootstrap.css">

 Dan jangan lupa bbuatlah fungtion datatablenya seperti dibwah ini

<script type="text/javascript">
  $(function () {
    $("#example1").DataTable();
  });
  </script>

5. Kalo kita udah menerapkan pemanggilan plugin-plugin diatas sekarang kita hanya membuat tablenya menggunakan table untuk contohnya bisa di ikutin struktur tabel dibawah ini

<table id="example1" class="table table-bordered table-striped">
                                        <thead>
                                            <tr>
                                                <th>Rendering engine</th>
                                                <th>Browser</th>
                                                <th>Platform(s)</th>
                                                <th>Engine version</th>
                                                <th>CSS grade</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>Trident</td>
                                                <td>Internet
                                                    Explorer 4.0</td>
                                                <td>Win 95+</td>
                                                <td> 4</td>
                                                <td>X</td>
                                            </tr>
                                            <tr>
                                                <td>Trident</td>
                                                <td>Internet
                                                    Explorer 5.0</td>
                                                <td>Win 95+</td>
                                                <td>5</td>
                                                <td>C</td>
                                            </tr>
                                            <tr>
                                                <td>Trident</td>
                                                <td>Internet
                                                    Explorer 5.5</td>
                                                <td>Win 95+</td>
                                                <td>5.5</td>
                                                <td>A</td>
                                            </tr>
                                            <tr>
                                                <td>Trident</td>
                                                <td>Internet
                                                    Explorer 6</td>
                                                <td>Win 98+</td>
                                                <td>6</td>
                                                <td>A</td>
                                            </tr>
                                            <tr>
                                                <td>Trident</td>
                                                <td>Internet Explorer 7</td>
                                                <td>Win XP SP2+</td>
                                                <td>7</td>
                                                <td>A</td>
                                            </tr>
                                            <tr>
                                                <td>Trident</td>
                                                <td>AOL browser (AOL desktop)</td>
                                                <td>Win XP</td>
                                                <td>6</td>
                                                <td>A</td>
                                            </tr>
                                            <tr>
                                                <td>Gecko</td>
                                                <td>Firefox 1.0</td>
                                                <td>Win 98+ / OSX.2+</td>
                                                <td>1.7</td>
                                                <td>A</td>
                                            </tr>
                                            <tr>
                                                <td>Gecko</td>
                                                <td>Firefox 1.5</td>
                                                <td>Win 98+ / OSX.2+</td>
                                                <td>1.8</td>
                                                <td>A</td>
                                            </tr>

                                            <tr>
                                                <td>Presto</td>
                                                <td>Opera 9.2</td>
                                                <td>Win 88+ / OSX.3+</td>
                                                <td>-</td>
                                                <td>A</td>
                                            </tr>
                                            <tr>
                                                <td>Presto</td>
                                                <td>Opera 9.5</td>
                                                <td>Win 88+ / OSX.3+</td>
                                                <td>-</td>
                                                <td>A</td>
                                            </tr>
                                            <tr>
                                                <td>Presto</td>
                                                <td>Opera for Wii</td>
                                                <td>Wii</td>
                                                <td>-</td>
                                                <td>A</td>
                                            </tr>
                                        </tbody>
                                    </table>

Mudah bukan konsep membuat datatables, terimakasih sudah mengikutin tutorial yang kami berikan semoga bermanfaat buat kalian yang masih bingung anda bisa dapatkan source codenya dibwbah ini :

Salam Kami
S-WIDODO.COM