загрузочный стол-фильтр-контроль расширение не работает в Bootstrap-таблица
Я использую bootstrap-table и хотел бы использовать расширение table-filter-control. Вэтом примере вы можете увидеть, как использовать это расширение. Когда я хочу использовать это расширение для большего количества столбцов, оно не работает. В моем примере фильтр работает только для одного столбца.
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>
2 ответа:
Данные-файл должен иметь не пробелы, попробуйте изменить
data-field="Customer Name"
К
data-field="CustomerName"
Я обновил свой jsfiddle и фильтр-контрольные работы.
Http://jsfiddle.net/5h595r6g/9/
Однако было бы здорово реализовать обновление параметров фильтра до доступных значений, как я описал в этом посте:
Bootstrap table filter-control - как удалить ненужные значения из select options
Я фактически поместил поля 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; } });