NgiG BloZezt: Membuat Pencarian Data Table Dengan JavaScript

Membuat Pencarian Data Table Dengan JavaScript

Pencarian yang akan saya buat disini menggunakan event onkeyup, jadi dari pencarian tersebut tidak membutuhkan tombol button untuk menghandle dari textbox pencarian tersebut. Dan dari event onkeyup tersebut tentunya dapat dibuat dengan JavaScript supaya pencarian nantinya tidak membutuhkan penyegaran halaman di browser dari pencarian tersebut.

Bagi teman-teman yang belum mengetahui cara kerja dari event onkeyup tersebut akan saya jelaskan. onkeyup adalah event yang biasanya di pasang di dalam komponen input textbox. Cara kerja dari event tersebut adalah melakukan proses dari event tersebut dimana ketika teman-teman mengetikan suatu kata atau kalimat baik 1 maupun beberapa huruf di dalam komponen tersebut maka akan langsung dijalankan atau di proses untuk berlanjut ke proses selanjutnya. Cara kerjanya hampir sama dengan event-event yang lainnya, hanya saja dari masing-masing event tersebut berbeda waktu dalam menjalankan prosesnya. Atau seperti pada contoh umumnya yang mungkin sudah teman-teman tahu seperti event click dari komponen button, dimana event tersebut akan berjalan apabila teman-teman menekan tombol button tersebut. Jadi event onkeyup sama seperti event-event pada umunya, hanya saja untuk event onkeyup akan melakukan menjalankan proses ketika teman-teman mengetikan suatu huruf, kata atau kalimat di dalam komponen tersebut.

Berikut Tahapannya

Teman-teman buat terlebih dahulu satu buah file dengan nama index.php
Jika sudah ketikan kode seperti berikut

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Cara Membuat Pencarian Data Table Dengan JavaScript</title>

</head>

<body>

<input type='text' id='input' onkeyup='searchTable()'>

<table id='table'>

<?php

   echo "<thead>

   <tr>

      <th>Nama</th>

      <th>Jenis Kelamin</th>

   </tr>

   </thead>

   <tbody>

   <tr>

      <td>Rindi</td>

      <td>Wanita</td>

   </tr>

   <tr>

      <td>Gofur</td>

      <td>Pria</td>

   </tr>

   <tr>

      <td>Faiqunnuha</td>

      <td>Pria</td>

   </tr>

   </tbody>";

?>

</table>

</body>

<script>

function searchTable() {

    var input;

    var saring;

    var status; 

    var tbody; 

    var tr; 

    var td;

    var i; 

    var j;

    input = document.getElementById("input");

    saring = input.value.toUpperCase();

    tbody = document.getElementsByTagName("tbody")[0];;

    tr = tbody.getElementsByTagName("tr");

    for (i = 0; i < tr.length; i++) {

        td = tr[i].getElementsByTagName("td");

        for (j = 0; j < td.length; j++) {

            if (td[j].innerHTML.toUpperCase().indexOf(saring) > -1) {

                status = true;

            }

        }

        if (status) {

            tr[i].style.display = "";

            status = false;

        } else {

            tr[i].style.display = "none";

        }

    }

}

</script>

</html>

Jika sudah save file tersebut dan lihat hasilnya di browser

Sampai disini penjelasan JavaScript, semoga bermanfaat

NgiG BloZezt

MENU

Membuat Pencarian Data Table Dengan JavaScript

Berikut Tahapannya

Tidak ada komentar:

Posting Komentar

Download Everyting

motogp

Label

NgiG BloZezt