Question

我第一次使用datatables插件（v1.9.4）。我正在关注此示例（Individual Column Filtering），但我希望过滤器下拉列表显示在“搜索所有列”下。

enter image description here

我该怎么做？

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

我知道这是一个老帖子，但我最近遇到了同样的问题，并没有找到我需要的东西，并希望它对其他人有用。以下是我如何解决它：

在<thead>元素中，创建2个<tr>元素，每个元素都包含相应的<th>列＃。将列标题名称添加到第二个<tr>元素。将标准class='select-filter'属性（在第二个<tr>中）应用于需要选择列表的标头。按以下格式添加id属性：*headerValue*-select-filter（其中 headerValue =标题的名称，必须完全匹配）无论您要放置选择列表的位置（可能在不同的栏目等）。 appendTo函数将获取标题名称并创建要附加的ID。

标题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>

脚本部分将使用select-filter属性从th（s）获取<th>的值（在上面的示例中=＆＃34; Column4＆＃34;），然后它将生成以下内容标记#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
});

Answer 3

要防止列过滤器无意中触发列排序（当用户选择列过滤器时），只需在event.stopPropagation();

之后添加：oTable.fnFilter();

将列过滤器移动到表的顶部

3 个答案: