расширение bootstrap-table-filter-control не работает в bootstrap-table

Я использую bootstrap-table и хотел бы использовать table-filter-control. В этом примере вы можете увидеть, как использовать это расширение. Когда я хочу использовать это расширение для большего количества столбцов, оно не работает. В моем примере фильтр работает только для одного столбца.

jsfiddle

html

<table ref="mainTable" class="table table-striped table-bordered table-hover" 
       cellSpacing="0" id="mainTable" data-show-toggle="true" 
       data-show-columns="true" data-search="true" data-pagination="true" data-filter-control="true">
    <thead>
        <tr>
            <th data-field="state" data-checkbox="true"></th>
            <th data-field="Customer Name" data-sortable="true" data-filter-control="select">Customer Name</th>
            <th data-field="Location Type" data-sortable="true">Location Type</th>
            <th data-field="Location" data-sortable="true" data-filter-control="select">Location</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td>Cap Corp</td>
            <td>Main</td>
            <td>Norwalk CT 06851</td>
        </tr>
        <tr>
            <td></td>
            <td>Cap Corp</td>
            <td>Other</td>
            <td>Norwalk CT 06851</td>
        </tr>
        <tr>
            <td></td>
            <td>Tel</td>
            <td>Main</td>
            <td>Slough SL1 4DX</td>
        </tr>
        <tr>
            <td></td>
            <td>Tel</td>
            <td>Other</td>
            <td>London W1B 5HQ</td>
        </tr>
    </tbody>
</table>

person Matt    schedule 10.09.2015    source источник


Ответы (2)


в файле данных не должно быть пробелов, попробуйте изменить

data-field="Customer Name"

to

data-field="CustomerName"

Я обновил ваш jsfiddle и фильтр-контроль.

http://jsfiddle.net/5h595r6g/9/

Однако было бы здорово реализовать обновление параметров фильтра до доступных значений, как я описал в этом посте:

управление фильтром таблицы начальной загрузки - как удалить ненужные значения из параметров выбора

person aattd    schedule 14.10.2015

На самом деле я поместил поля select2 в заголовки, а затем использовал функцию params для передачи кода на сервер. Я сделал гораздо более приятное решение. Моего кода нет со мной, но если он вам интересен, я могу передать образец в понедельник.

Отредактировано для добавления примера.

Базовая таблица

        <table id='90day'  class='table table-striped' data-filter-control='true'>
            <thead>
                <tr>
                    <th></th>
                    <th><select id='findfield' class='form-control gosearch'><option></option></select></th>
                    <th><select id='findwellname' class='form-control gosearch'><option></option></select></th>
                </tr>
            </thead>
        </table>        

Инициализировать select2

        $('#90day').on('post-header.bs.table', function () {
            $('#findfield').select2({
                width: '100%',
                placeholder: 'Field',
                allowClear: true,
                SingleSelection: true,
                ajax: {
                    url: 'selectfield90day.php?active=y',
                    dataType: 'json',
                    //delay: 250,
                    data: function (params) {
                        $('#findfield').empty();
                        var d = new Date();
                        var n = d.getTime();
                        return {
                            q: params.term,
                            n: n
                        };
                    },
                    processResults: function (data) {
                        return { results: data };
                    }
                }
            }); 
            $('#findwellname').select2({
                width: '100%',
                placeholder: 'Name',
                allowClear: true,
                ajax: {
                    url: 'selectwellname90day.php?active=y',
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        $('#findwellname').empty();
                        var d = new Date();
                        var n = d.getTime();
                        return {
                            q: params.term,
                            field: $('#findfield').text(),
                            pad: $('#findpad').text(),
                            n: n
                        };
                    },
                    processResults: function (data) {
                        return {
                            results: data
                        };
                    }
                }
            });

            //refresh on any select2 change
            $('.gosearch').on('select2:close', function(){
                $('#90day').bootstrapTable('refresh');
            }); 
        });

Наконец инициализация таблицы

$('#90day').bootstrapTable({
    url: ...,
    columns:[
        ...
    ],
    queryParams: function(params){
        params['field']=$('#findfield').text();
        params['well_name']=$('#findwellname').text();      
        return params;
    }
});
person Jeff Bluemel    schedule 11.09.2015
comment
Спасибо, если вы можете передать мне образец, было бы здорово :) - person Matt; 11.09.2015
comment
отредактирован исходный комментарий с добавленным примером кода. p.s. в моем примере элементы управления формой в стиле начальной загрузки добавлены с помощью class='form-control'. Фото конечного результата можно увидеть здесь. (очевидно, в пример кода добавлено только 2 поля select2). s24.photobucket.com/user/solowookie1791/media/ - person Jeff Bluemel; 14.09.2015
comment
Спасибо за ваш фрагмент. Очень полезно. Я держу эту ветку открытой на всякий случай, если кто-то появится с другим решением. - person Matt; 15.09.2015
comment
Пожалуйста. Мне потребовалось немного времени, чтобы все это проработать, но с точки зрения удобства использования это работает очень хорошо. Конечным пользователям это нравится. - person Jeff Bluemel; 15.09.2015