Membuat Filter Pada Table Dengan Bootstrap dan Jquery - Hallo sahabat Dev-Create, Pada Artikel yang anda baca kali ini dengan judul Membuat Filter Pada Table Dengan Bootstrap dan Jquery, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel bootstrap, Artikel css, Artikel Javascript Dan JQuery, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Membuat Filter Pada Table Dengan Bootstrap dan Jquery
link : Membuat Filter Pada Table Dengan Bootstrap dan Jquery

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...

Demikianlah Artikel Membuat Filter Pada Table Dengan Bootstrap dan Jquery

Sekianlah artikel Membuat Filter Pada Table Dengan Bootstrap dan Jquery kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Membuat Filter Pada Table Dengan Bootstrap dan Jquery dengan alamat link https://dev-create.blogspot.com/2017/01/membuat-filter-pada-table-dengan.html