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.

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