Question

我目前正在使用JQuery插件DataTables正常工作，我在页面顶部插入了一个按钮，以进一步过滤列表。（我还使用了DataTables内置的搜索栏）。我希望按钮过滤表格，只显示包含特定值的行。下面是我一直在做的，但似乎没有任何工作..在下面的示例中，我试图将列表过滤到包含所有行“动物”栏目中的“狗”元素任何人都知道如何解决这个问题？

由于

$("#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();
    });

Answer 1

以下是我的代码中的示例 - 使用<input>和<select>，但如果您尝试以不同的方式执行某些操作，则应该能够非常轻松地进行调整。

在datatables.net上提供的示例中，他们使用页脚中的搜索字段（我个人不喜欢）来执行此操作，因此我的示例是在标题中使用它们。对于初学者，您需要<thead>中的两个行 - 确保您的过滤行是第一行，而您的实际标题是第二行 < / p>

<强> Working 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());
        }
    });
}

过滤DataTables中的行

1 个答案: