Table filter is not initialized in the initial table

Question

I am using bootstrap 3 and bootstrap-table . I would like to use the table filter extension , but the filter is not initialized.

jsfiddle

HTML

<div id="filter-bar"> </div>

<table class="table table-striped table-bordered table-hover"  cellspacing="0" data-toggle="table" id="mainTable" data-click-to-select="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-pagination="true" data-toolbar="#filter-bar" data-show-filter="true">
    <thead>
    <tr>
        <th data-field="name" data-editable="true">Name</th>
        <th data-field="stargazers_count" data-editable="true">Stars</th>
        <th data-field="forks_count" data-editable="true">Forks</th>
        <th data-field="description" data-editable="true">Description</th>
    </tr>
    </thead>
    <tbody>
        <tr><td>ala</td><td>ele</td><td>na</td><td>asd</td></tr>
        <tr><td>ala</td><td>ele</td><td>na</td><td>asd</td></tr>
        <tr><td>ala</td><td>ele</td><td>na</td><td>asd</td></tr>
    </tbody>
</table>

Javascript

$.fn.editable.defaults.mode = 'inline';

$('table').bootstrapTable({
    editable: true
});

Answer 1

You forgot to initialize the filter using the javascript function.

$(function() {
        $('#filter-bar').bootstrapTableFilter({
            filters:[
                {
                    field: 'name',    // field identifier
                    label: 'Name',    // filter label
                    type: 'range'   // filter type
                },
                {
                    field: 'label',
                    label: 'Label',
                    type: 'search',
                    enabled: true   // filter is visible by default
                },
                {
                    field: 'role',
                    label: 'Role',
                    type: 'select',
                    values: [
                        {id: 'ROLE_ANONYMOUS', label: 'Anonymous'},
                        {id: 'ROLE_USER', label: 'User'},
                        {id: 'ROLE_ADMIN', label: 'Admin'}
                    ],
                }
            ],
            onSubmit: function() {
                var data = $('#filter-bar').bootstrapTableFilter('getData');
                console.log(data);
            }
        });
    });

Answer 2

You can use this example, only bootstrap and jQuery ...

$(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));

});

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.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>Code</th>
            <th>Name</th>
            <th>Default</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody class="searchable">
        <tr>
            <td>EUR</td>
            <td>EURO</td>
            <td></td>
            <td>Active</td>
        </tr>
        <tr>
            <td>GBP</td>
            <td>Pound</td>
            <td></td>
            <td>Active</td>
        </tr>
        <tr>
            <td>GEL</td>
            <td>Georgian Lari</td>
            <td><span class="glyphicon glyphicon-ok"></span>
            </td>
            <td>Active</td>
        </tr>
        <tr>
            <td>USD</td>
            <td>US Dollar</td>
            <td></td>
            <td>Active</td>
        </tr>
    </tbody>
</table>

Run codeHide result

Example here