Membuat Filter Pada Table Dengan Bootstrap dan Jquery

Ketika kita membuat suatu aplikasi baik itu desktop maupun web diperlukan sebuah fasilitas untuk melakukan filtering atau searcing pada sebuah tabel, untuk itu pada kesempatan kali ini kita akan membuat sebuah filter yang melakukan proses filternya untuk keseluruhan kolom yang ada di dalam suatu tabel. Contohnya seperti gambar berikut,

Untuk membuat filter / pencarian seperti gambar diatas, ikuti langkah berikut :

1. Buatlah sintak / kode HTML seperti berikut,

<div class="container">
    <div class="row">
        <div class="col-md-3">
            <form action="#" method="get">
                <div class="input-group">
                    <input class="form-control" id="system-search" name="q" placeholder="Search for" required>
                    <span class="input-group-btn">
                        <button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"></i></button>
                    </span>
                </div>
            </form>
        </div>
        <div class="col-md-9">
         <table class="table table-list-search">
                    <thead>
                        <tr>
                            <th>Nama</th>
                            <th>Panggilan</th>
                            <th>Tanggal Lahir</th>
                            <th>Jenis Kelamin</th>
                            <th>Status</th>
                            <th>Keterangan</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Jaka Tarub</td>
                            <td>Jaka</td>
                            <td>12-11-1990</td>
                            <td>Laki-laki</td>
                            <td>Belum Menikah</td>
                            <td>Anak pertama dari 3 bersaudara</td>
                        </tr>
                        <tr>
                            <td>Wiro Sableng</td>
                            <td>Wiro</td>
                            <td>11-20-1982</td>
                            <td>Laki-laki</td>
                            <td>Menikah</td>
                            <td>Murid dari sinto gendeng</td>
                        </tr>
                        <tr>
                            <td>Sinto Gendeng</td>
                            <td>Sindeng</td>
                            <td>09-08-1980</td>
                            <td>Perempuan</td>
                            <td>Menikah</td>
                            <td>Guru dari wiro sableng</td>
                        </tr>
                    </tbody>
                </table>  
        </div>
    </div>
</div>

2. Buatlah kode jQuery-nya

    var activeSystemClass = $('.list-group-item.active');
    $('#system-search').keyup( function() {
       var that = this;
        var tableBody = $('.table-list-search tbody');
        var tableRowsClass = $('.table-list-search tbody tr');
        $('.search-sf').remove();
        tableRowsClass.each( function(i, val) {
       
            //membuat teks menjadi lower case
            var rowText = $(val).text().toLowerCase();
            var inputText = $(that).val().toLowerCase();
            if(inputText != '')
            {
                $('.search-query-sf').remove();
                tableBody.prepend('<tr class="search-query-sf"><td colspan="6"><strong>Searching for: "'
                    + $(that).val()
                    + '"</strong></td></tr>');
            }
            else
            {
                $('.search-query-sf').remove();
            }

            if( rowText.indexOf( inputText ) == -1 )
            {
                //menyembunyikan baris
                tableRowsClass.eq(i).hide();
               
            }
            else
            {
                $('.search-sf').remove();
                tableRowsClass.eq(i).show();
            }
        });
        //apabila tidak ada data yang ke filter
        if(tableRowsClass.children(':visible').length == 0)
        {
            tableBody.append('<tr class="search-sf"><td class="text-muted" colspan="6">No entries found.</td></tr>');
        }
    });

3. Jangan lupa sertakan script jquery.js, bootstrap.js dan bootstrap.css,

//Style bootstrap
https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css

//Script bootstrap
https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js

//Script jQuery
https://code.jquery.com/jquery-1.10.2.min.js

Selanjutnya jalankan script tersebut, dan untuk lebih jelasnya bisa lihat contoh pada link Berikut

 Semoga bermanfaat...