Table Filter Bootstrap + Jquery

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<div class="input-group"> <span class="input-group-addon">Filter</span>

    <input id="filter" type="text" class="form-control" placeholder="Type here...">
</div>
<table class="table table-striped">
    <thead>
        <tr>
            <th>No</th>
            <th>id_pembeli </th>
            <th>id_pelanggan</th>
            <th>tanggal_pembelian</th>
            <th>id_produk</th>
            <th>jumlah pembelian</th>
            <th>total</th>
        </tr>
    </thead>
    <tbody class="searchable">
        <tr>
            <td>1</td>
            <td>pb1</td>
            <td>pl1</td>
            <td>02/03/2018</td>
            <td>pr2</td>
            <td>3</td>
            <td>Rp 200.000</td>
        </tr>
        <tr>
           <td>2</td>
            <td>pb2</td>
            <td>pl1</td>
            <td>03/03/2018</td>
            <td>pr2</td>
            <td>3</td>
            <td>Rp 200.000</td>
        </tr>
        <tr>
           <td>3</td>
            <td>pb3</td>
            <td>pl2</td>
            <td>13/03/2018</td>
            <td>pr1</td>
            <td>4</td>
            <td>Rp 250.000</td>
        </tr>
        <tr>
            <td>4</td>
            <td>pb4</td>
            <td>pl3</td>
            <td>12/03/2018</td>
            <td>pr3</td>
            <td>1</td>
            <td>Rp 140.000</td>
        </tr>
    </tbody>
</table>

JavaScript

$(document).ready(function () {

    (function ($) {

        $('#filter').keyup(function () {

            var rex = new RegExp($(this).val(), 'i');
            $('.searchable tr').hide();
            $('.searchable tr').filter(function () {
                return rex.test($(this).text());
            }).show();

        })

    }(jQuery));

});