在DataTables中过滤行

Question

在DataTables中过滤行

3

我目前已经成功使用JQuery插件DataTables，并在页面顶部插入了一个按钮来进一步过滤列表。(我还使用了DataTables内置的搜索栏)。我希望这个按钮可以过滤表格并仅显示包含特定值的行。以下是我一直在做的事情，但似乎没有任何作用。在下面的示例中，我试图将列表过滤到所有包含'Animal'列中元素'Dog'的行。有人知道如何解决吗？

谢谢

$("#NewButton").click(function() {  
     $.fn.dataTable.ext.search.pop();
      table.draw();
    $.fn.dataTable.ext.search.push(
      function(settings, data, dataIndex) {
          return $(table.row(dataIndex).node()).attr(Animal) == "Dog";
        }
    );  
    table.draw();
    });

    $("#Default").click(function() {
    $.fn.dataTable.ext.search.pop();
    table.draw();
    });

- user2964762

看这个 - 这是我做的方式：https://datatables.net/examples/api/multi_filter.html - mhodges

看看我的解决方案是否符合你的要求 - 如果有任何问题，请让我知道！ - mhodges

谢谢您的回复，我非常感激！我更希望在代码中进行预过滤，这样当按下按钮时，表格会自动进行过滤，而无需在搜索框中输入。 - user2964762

是的，我给你举了一个它如何工作的例子 - 适应它应该相当简单。您只需像下面我的函数中所做的那样精确地利用column().search() API即可。然后，将我的更改/输入处理程序改为按钮点击处理程序或以任何您喜欢的方式进行调整。 - mhodges

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mhodges · Accepted Answer

这是我的代码示例 -- 它使用了<input>和<select>，但如果您想要做些不同的事情，您应该可以很容易地适应它。在datatables.net提供的示例中，他们在页脚中使用搜索字段（我个人不喜欢），所以我的示例是在页眉中使用它们。首先，在您的<thead>中需要两行-- 确保您的过滤器行是第一行，而您的实际标题是第二行。 演示DEMO

<table class="table">
  <thead>
    <tr class="filter-row">
      <th class="actions">
      </th>
      <th class="searchable datatables-dropdown">
        <select name="FormName">
          <option>Form1</option>
          <option>Form2</option>
        </select>
      </th>
      <th class="display-order">
      </th>
      <th class="searchable">
        Label Text
      </th>
      <th class="searchable">
        View Roles
      </th>
      <th class="searchable">
        Edit Roles
      </th>
      <th class="searchable">
        Delete Roles
      </th>
      <th class="searchable">
        Add Roles
      </th>
      <th class="searchable">
        Field Type
      </th>
      <th class="searchable">
        Note Field
      </th>
      <th class="searchable">
        Note Required
      </th>
      <th class="searchable">
        Default
      </th>
      <th class="searchable">
        Reason List Group
      </th>
      <th class="searchable">
        Reason Required
      </th>
    </tr>
    <tr>
      <th class="actions">
        Actions
      </th>
      <th>
        Form Name
      </th>
      <th>
        Display Order
      </th>
      <th>
        Label Text
      </th>
      <th>
        View Roles
      </th>
      <th>
        Edit Roles
      </th>
      <th>
        Delete Roles
      </th>
      <th>
        Add Roles
      </th>
      <th>
        Field Type
      </th>
      <th>
        Note Field
      </th>
      <th>
        Note Required
      </th>
      <th>
        Note Default
      </th>
      <th>
        Reason List Group
      </th>
      <th>
        Reason Required
      </th>
    </tr>
  </thead>
  <tfoot>

  </tfoot>
  <tbody>

  </tbody>
</table>

然后，在你的JavaScript中，你可以将筛选行从普通文本转换为像这样的<input>元素：

$(function () {
    // First -- Convert plain text to search field inputs
    $('.table thead tr:first th.searchable:not(.datatables-dropdown)').each(function () {
        var title = $(this).text().trim();
        $(this).css({ "padding": "5px" });
        $(this).html('<input type="text" placeholder="Search ' + title + '" style="width: 115px;" />');
    });

    // Then -- initialize DataTable
    var table = $(".table").DataTable({
        // ... Initialization options
    });

    // Lastly -- call function for wiring up the search fields to the table passed in
    ApplySearchFieldsToDatatable(table);
});

function ApplySearchFieldsToDatatable (table) {
    // https://datatables.net/examples/api/multi_filter.html
    table.columns().every(function () {
        var column = this,
        header = $(column.header()), // returns LAST <tr> in <thead>

        // we need to also grab the first <tr> in <thead> because that is where the search boxes are
        searchHeader = header.parent().prev(),

        // Get the corrisponding <th> in the first <tr> (the filter row) 
        currentColumn = searchHeader.children(":eq(" + header.index() + ")");

        // Unbind existing event listeners on old column position
        $('select', currentColumn).off("change");
        $('input', currentColumn).off("input").off("propertychange");

        // Add new event listeners for new column position
        $('select', currentColumn).on('change', function () {
            if (column.search() !== this.value) {
                column.search(this.value).draw();
            }
        });
        $('input', currentColumn).on('input propertychange', function () {
            if (column.search() !== this.value) {
                column.search(this.value).draw();
            }
        });

        // Need to set the value of the inputs/selects to the search value saved by "stateSave: true"
        // This is needed on page reload when the search state gets saved, but the inputs get redrawn 
        // from scratch. They do not inherently retain their value, so the data in the table does not
        // match the values in the search fields.
        if (column.search().length) {
            currentColumn.find('input').val(column.search());
            currentColumn.find('select').val(column.search());
        }
    });
}