Блог

Мы хотим, чтобы выпадающий список 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',
});