#twitter-bootstrap #datatables #bootstrap-multiselect
#twitter-bootstrap #таблицы данных #bootstrap-multiselect
Вопрос:
Мы хотим, чтобы выпадающий список bootstrap multiselect был реализован в заголовке datatable для фильтрации записей в этом datatable. Но почему-то выпадающий список multiselect не отображается из-за overflow:hidden
свойства dataTables_scrollHeadInner
<div>
datatable .
Но мы не можем удалить overflow:hidden
свойство, поскольку заголовки смещаются при удалении этого свойства. Есть решение?
Код:
oTable = this.dataTable();
$headerTable = $('div.dataTables_scrollHeadInner table[data-table-name="' $(oTable[0]).attr('data-table-name') '"]');
$tHead = $headerTable.children('thead');
$headerRow = $tHead.children('tr');
$filterRow = $tHead.children('tr.filter-row');
$filterRow.empty();
if ($filterRow.length === 0) {
$tHead.append('<tr class="filter-row"></tr>');
}
$filterRow = $tHead.children('tr.filter-row');
$headerRow.find('th').each(function () {
if($(this).hasClass('no-show')) {
$filterRow.append('<td class="no-show"></td>');
} else {
$filterRow.append('<td ></td>');
}
});
$filterCell.append('<select type="search" multiple="multiple">');
var $Select = $filterCell.find('select');
var selectBoxValues=[];
var oSettings = oTable.fnSettings();
var emptyValue = null;
for(i=0;i<oSettings.fnRecordsDisplay();i ) {
var cellValue = $(oTable.fnGetNodes(i)).find('td').eq(columnIdx).text()
if($.inArray(cellValue,selectBoxValues)===-1 amp;amp; cellValue!= '') {
selectBoxValues.push(cellValue);
}
if(cellValue.trim()== '') {
emptyValue = cellValue;
}
}
if(emptyValue!=null) {
$Select.append('<option value="$">Blank Values</option>');
$Select.append('<option value=".*\S.*">Non-Blank Values</option>');
$Select.append('<optgroup label="------------------------------"></optgroup>');
}
$Select.append('<option value=".*">Select All</option>');
$Select.populate(selectBoxValues);
$Select.multiselect({
enableCaseInsensitiveFiltering: true,
buttonWidth:'136px',
});
Комментарии:
1. Можете ли вы поделиться своим кодом?
2. @jrbedard: выше приведен код для создания выпадающего фильтра с несколькими вариантами выбора в datatable