Membuat Sort Table Dengan Bootstrap 4 Dan jQuery

Assalamu’alaikum warahmatullahi wabarakatuh

Halo Dumenity, selamat datang kembali di website tips dan trik Dumet School. Berjumpa kembali dengan saya pada pembahasan tips seputar dunia website, pada kesempatan kali ini saya akan memberikan tips tentang Membuat Sort Table Dengan Bootstrap 4 Dan jQuery. Sekarang ini sangat populer sekali dengan plugin data tables dimana pada plugin data table ini terdapat beberapa fitur diantaranya pagination, sort data, search data, view data dengan pilihannya mau berapa data yang ingin ditampilkan, dan masih ada yang lainnya.

Di artikel kali ini kita akan membuat sebuat sort data table dengan jQuery dengan tampilan bootstrap 4, baik langsung saja kita langsung saja implementasikan Membuat Sort Table Dengan Bootstrap 4 Dan jQuery. Pertama – tama buat terlebih dahulu tampilan table nya, kita load terlebih dahulu library jQuery dan bootstrap 4 nya.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

Kemudian berikan script html nya untuk membuat tablenya

<div class="container mt-3">
  <h2>Membuat Sort Table Dengan Bootstrap 4 Dan jQuery</h2>
  <input class="form-control" id="sortData" type="text" placeholder="Search..">
  <br>
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Nama</th>
        <th>Alamat</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody id="table">
      <tr>
        <td>Reno</td>
        <td>Grenvile</td>
        <td>Reno@gmail.com</td>
      </tr>
      <tr>
        <td>Joko</td>
        <td>Ringrut</td>
        <td>Joko@mail.com</td>
      </tr>
      <tr>
        <td>Nely</td>
        <td>Jakarta</td>
        <td>july@mail.com</td>
      </tr>
      <tr>
        <td>Rudy</td>
        <td>Bekasi</td>
        <td>a_r@mail.com</td>
      </tr>
    </tbody>
  </table>
</div>

Jika sudah save dengan nama index.html dan jalankan pada browsernya, maka akan tampil seperti gambar di bawah ini

Kemudian langkah terakhir berikan fungsi jQuery nya untuk menjalankan sort data table

<script>
$(document).ready(function(){
$("#sortData").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#table tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>

Jika sudah save dan refresh pada browsernya, kemudian masukkan salah satu nama di dalam form search nya

Nah itulah tips tentang Membuat Sort Table Dengan Bootstrap 4 Dan jQuery bisa teman – teman gunakan di dalam project nya. Kita jumpa kembali pada artikel selanjutnya, terimakasih dan sampai jumpa.

Semoga bermanfaat.

Membuat Sort Table Dengan Bootstrap 4 Dan jQuery

Kategori