表过滤器未在bootstrap-table中初始化

Question

我使用bootstrap 3和bootstrap-table.我想使用表过滤器扩展,但过滤器未初始化.

的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

您忘记使用 JavaScript 函数初始化过滤器。

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