Membuat Template TableSorter pada Bootstrap 3

Pernahkah kalian melihat sekumpulan data yang sangat banyak yang ditampilkan pada sebuah website atau aplikasi. dan data tersebut berada dalam sebuah table. Hal yang harus di ketahui oleh para pengembang website adalah dalam menampilkan data yang sangat banyak, kita butuh fasilitas sort atau mengurutkan data dari yang terbesar dan juga sebaliknya beberapa waktu saya mencari sebuah plugin yang dapat melakukan hal tersebut dan saya telah mendapatkannya.

Plugin yang saya dapatkan bernama TableSorter.js table sorter sendiri adalah plugin yang sangat umum digunakan oleh para pengembang website dan aplikasi karena penggunaannya yang bisa dibilang cukup mudah untuk dipelajari. Kali ini saya akan coba menerapkan Table Sorter yang akan dipadukan dengan tampilan table yang ada pada Bootstrap 3.

Pertama, kita hubungkan semua file bootstrap seperti berikut

<!DOCTYPE html>
<head>
    <title>Bootstrap 3 Collapsible Sidebar</title>
    <!-- Bootstrap CSS CDN -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- Our Custom CSS -->
    <link rel="stylesheet" href="css/custom.css">
</head>
<body>

    <!-- jQuery CDN -->
    <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
    <!-- Bootstrap Js CDN -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

 

Sselanjutnya kita akan membuat struktur table yang akan kita gunakan pada penerapan plugin ini.Berikut adalah contoh struktur yang akan kita gunakan.

<div class="container">
        <div class="row">
            <div class="col-md-10 col-md-offset-1">
                <h3 class="margin">Table Sorter With Bootstrap</h3>
                <div class="panel panel-default panel-table">
                  <div class="panel-body">
                    <table id="myTable" class="table table-striped table-bordered table-list tablesorter">
                      <thead>
                        <tr>
                            <th><em class="fa fa-cog"></em></th>
                            <th class="hidden-xs">ID</th>
                            <th>Name</th>
                            <th>Email</th>
                        </tr>
                      </thead>
                      <tbody>
                              <tr>
                                <td align="center">
                                  <a class="btn btn-default"><em class="fa fa-pencil"></em></a>
                                  <a class="btn btn-danger"><em class="fa fa-trash"></em></a>
                                </td>
                                <td class="hidden-xs">1</td>
                                <td>Leo</td>
                                <td>leo@example.com</td>
                              </tr>
                              <tr>
                                <td align="center">
                                  <a class="btn btn-default"><em class="fa fa-pencil"></em></a>
                                  <a class="btn btn-danger"><em class="fa fa-trash"></em></a>
                                </td>
                                <td class="hidden-xs">2</td>
                                <td>Andi BR</td>
                                <td>andi@example.com</td>
                              </tr>
                              <tr>
                                <td align="center">
                                  <a class="btn btn-default"><em class="fa fa-pencil"></em></a>
                                  <a class="btn btn-danger"><em class="fa fa-trash"></em></a>
                                </td>
                                <td class="hidden-xs">3</td>
                                <td>Sirlink</td>
                                <td>sirlink@example.com</td>
                              </tr>
                              <tr>
                                <td align="center">
                                  <a class="btn btn-default"><em class="fa fa-pencil"></em></a>
                                  <a class="btn btn-danger"><em class="fa fa-trash"></em></a>
                                </td>
                                <td class="hidden-xs">4</td>
                                <td>Surya</td>
                                <td>surya@example.com</td>
                              </tr>
                              <tr>
                                <td align="center">
                                  <a class="btn btn-default"><em class="fa fa-pencil"></em></a>
                                  <a class="btn btn-danger"><em class="fa fa-trash"></em></a>
                                </td>
                                <td class="hidden-xs">5</td>
                                <td>Rio</td>
                                <td>rio@example.com</td>
                              </tr>
                              <tr>
                                <td align="center">
                                  <a class="btn btn-default"><em class="fa fa-pencil"></em></a>
                                  <a class="btn btn-danger"><em class="fa fa-trash"></em></a>
                                </td>
                                <td class="hidden-xs">6</td>
                                <td>Hendro</td>
                                <td>hendro@example.com</td>
                              </tr>
                        </tbody>
                    </table>
                  </div>
                </div>
            </div>
        </div>
    </div>

 

Sampai disini kita akan mendapatkan tampilan seperti ini.

Membuat Template TableSorter pada Bootstrap 3

Pada tampilan tabel tersebut akan kita terapkan plugin Table Sorter yang kita miliki. Pada artikel selanjutnya akan kita bahas tentang cara menerapkan table sorter pada table bootstrap dengan benar. Sampai jumpa pada artikel selanjutnya

30 November 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat