Membuat Sort Table Dengan Bootstrap 4 Dan jQuery

Assalamu’alaikum warahmatullahi wabarakatuh

Halo Dumenity, selamat datang kembali di laman tips dan trik Source Code Aplikasi. Berjumpa kembali dengan saya di pembahasan tips seputar dunia laman, di kesempatan kali ini saya akan memberikan tips mengenai Membuat Sort Table Dengan Bootstrap 4 Dan jQuery. Sekarang ini ini benar-benar populer sekali dengan plugin data tables dimana di 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 merancang sebuat sort data table dengan jQuery dengan tampilan bootstrap 4, bagus seketika saja kita seketika saja implementasikan Membuat Sort Table Dengan Bootstrap 4 Dan jQuery. Pertama-tama – tama bikin 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 bagi merancang tablenya

<div class=container mt-3>
  <h2>Membangun 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>Domisili</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>

Seandainya telah save dengan nama index.html dan jalankan di browsernya, karenanya akan tampil seperti gambar di bawah ini

Kemudian langkah terakhir berikan guna jQuery nya bagi 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>

Seandainya telah save dan refresh di browsernya, kemudian masukkan diantara nama di pada form search nya

Nah demikianlah tips mengenai Membuat Sort Table Dengan Bootstrap 4 Dan jQuery dapat teman – teman gunakan di pada project nya. Kita jumpa kembali di artikel berikutnya, terimakasih dan hingga jumpa.

Semoga bermanfaat.

 

Sumber https://kursuswebsite.org