Перемещение фильтров столбцов в верхнюю часть таблицы

Question

Я использую плагин datatables в первый раз (v1.9.4). Я следовал этому примеру (Individual Column Filtering), но я хочу, чтобы выпадающие окна фильтра отображались в разделе «Искать все столбцы».

Как мне это сделать?

Answer 1

Это сохранит заголовки таблиц, а также переместит элементы <select> в начало. Единственное предостережение? Нажатие на них также сортирует их. Если вы можете жить с этим, однако, вы можете следить за given example, делая следующую модификацию в document.ready функции:

$(document).ready(function() { 
    /* Initialise the DataTable */ 
    var oTable = $('#example').dataTable({ 
     "oLanguage": { 
      "sSearch": "Search all columns:" 
     } 
    }); 

    /* Add a select menu for each TH element in the table header */ 
    $("thead th").each(function (i) { 
     this.innerHTML = fnCreateSelect(oTable.fnGetColumnData(i)) + this.innerHTML; 
     $('select', this).change(function() { 
      oTable.fnFilter($(this).val(), i); 
     }); 
    }); 
}); 

Answer 2

Чтобы предотвратить фильтр колонки от непреднамеренного обжига столбец сортировки (когда пользователь выбирает колонковый фильтр) просто добавьте: event.stopPropagation(); после oTable.fnFilter();

Answer 3

Я знаю, что это старый пост, но у меня недавно была такая же проблема, и я не нашел именно то, что мне было нужно, и надеюсь, что это полезно для других. Вот как я это разрешил:

В элементе <thead> создайте 2 <tr> элементов, каждый из которых содержит соответствующие столбцы <th>. Добавьте имена заголовков столбцов ко второму элементу <tr>. Примените стандартный атрибут class='select-filter' (во втором <tr>) к тем заголовкам, для которых потребуется список выбора. Добавьте атрибут id в следующем формате: *headerValue*-select-filter (где headerValue = имя заголовка, оно ДОЛЖНО соответствовать точно), где бы вы хотели разместить список выбора (может быть в разных столбцах и т. Д.). Функция appendTo примет имя заголовка и создаст идентификатор для присоединения.

заголовок HTML:

<table> 
.... 
<thead> 
    <tr> 
     <th><div id="Column4-select-filter"></div></th> 
     <th></th> 
     <th></th> 
     <th></th> 
    </tr> 
    <tr class="active"> 
     <th>Column1</th> 
     <th>Column2</th> 
     <th>Column3</th> 
     <th class="select-filter">Column4</th> 
    </tr> 
</thead> 
.... 
</table> 

Часть сценарий примет значение <th> из я (ы) с помощью атрибута выбора фильтра (В приведенном выше примере = «column4»), то он будет генерировать следующий тег #Column4-select-filter. Затем скрипт добавит завершенный список выбора в <div> с соответствующим id. В приведенном выше примере это будет первый столбец (вы можете поместить это в любой столбец). Вы также можете создать <div> в любом месте вашего макета, и это сработает.

JavaScript:

table.columns('.select-filter').every(function (index) { 
    var that = this; 

    // Get the header name for this column 
    var headerName = table.column(index).header().innerText; 
    // generate the id name for the element to append to. 
    var appendHere = '#' + headerName + '-select-filter'; 

    // Create the select list and search operation 
    var select = $('<select />') 
     .appendTo(
     $(appendHere) 
     ) 
     .on('change', function() { 
      // DO STUFF HERE 
     }); 

    // CAN HAVE OTHER TASKS HERE 
});