Menerapkan TableSorter pada Bootstrap 3

Pada artikel sebelumnya kita telah membuat sebuah template table dengan beberapa data yang bisa kita kelola. Data tersebut akan menjadi sebuah indikator dalam penerapan plugin table sorter. Table Sorter sendiri adalah plugin yang dibuat untuk mengolah dan memanipulasi data yang ada pada table, dimana nantinya plugin ini akan bekerja ketika diletakkan pada sebuah table dengan mengurutkan data dari yang terkecil ataupun yang terbesar.

Plugin yang saya dapatkan bernama TableSorter.js table sorter juga 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.

dalam penerapannya misal kita memiliki struktur table seperti berikut

                 <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>
                                ...
                              </tr>
                              <tr>
                                ...
                              </tr>
                              <tr>
                               ...
                              </tr>
                        </tbody>
                    </table>

Pada struktur diatas kita memiliki indikator berupa id dengan nama muTable, dimana myTable ini adalah id yang digunakan sebagai selectoryang dipilih untuk menjalankan fungsi table sorter. untuk menjalankan fungsi table sorter kita memerlukan javascript plugin yang bisa kita ambil secara online dengan kode script berikut:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.29.0/js/jquery.tablesorter.min.js"></script>

Jika file sudah terhubung kita akan menjalankan fungsi table sorter dengan baris kode javascript berikut menggunakan fungsi tablesorter() dengan selector myTable

<script>
    $(document).ready(function() {
      $(function() {
        $("#myTable").tablesorter();
      });
    });
</script>

Baiklah teman teman, kiranya seperti itulah cara untuk membuat dan menerapkan plugin tablesorter dengan mudah, banyak sekali kegunaan yang bisa kalian terapkan untuk membuat penampilan data dapat tersusun dengan rapi serta memudahkan pengguna dalam mencari data yang diperlukan.