Question

我需要基于单个列搜索（选择输入）的过滤器

我在这个主题上提到了official tutorial

以下代码不会生成单个列过滤器下拉列表

此外，请注意，此示例演示了initComplete的用法，<!DOCTYPE html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script> <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script> <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/fixedheader/3.1.5/js/dataTables.fixedHeader.min.js"></script> <script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script> <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script> <script src="https://cdn.datatables.net/select/1.3.0/js/dataTables.select.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css"> </head> <body> <script> var dataSet = [ [ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ], [ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" ], [ "Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000" ], [ "Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060" ], [ "Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700" ], [ "Brielle Williamson", "Integration Specialist", "New York", "4804", "2012/12/02", "$372,000" ], [ "Herrod Chandler", "Sales Assistant", "San Francisco", "9608", "2012/08/06", "$137,500" ], [ "Rhona Davidson", "Integration Specialist", "Tokyo", "6200", "2010/10/14", "$327,900" ], [ "Colleen Hurst", "Javascript Developer", "San Francisco", "2360", "2009/09/15", "$205,500" ], ]; $(document).ready(function () { $('#example').DataTable({ data: dataSet, columns: [{ title: "Name" }, { title: "Position" }, { title: "Office" }, { title: "Extn." }, { title: "Start date" }, { title: "Salary" } ], "initComplete": function () { this.api().columns().every(function () { var column = this; var select = $('<select><option value=""></option></select>') .appendTo($(column.footer()).empty()) .on('change', function () { var val = $.fn.dataTable.util.escapeRegex( $(this).val()); column .search(val ? '^' + val + '$' : '', true, false) .draw(); }); column.data().unique().sort().each(function (d, j) { //console.log(d) select.append('<option value="' + d + '">' + d + '</option>') }); }); }, }); }); </script> <table id="example" class="display" width="100%"></table> </body> </html>是在表已完全加载时触发的回调函数。在此示例中，不需要使用此回调，因为加载时表中的数据可用。

{{1}}

Answer 1

我会坚持使用initComplete选项，因为一旦DataTable完全初始化并且可以安全地调用API方法，就会触发该选项。

尽管如此，我将以略微冗长的方式对该功能进行编码：

const dataSet = [
  ["Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800"],
  ["Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750"],
  ["Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000"],
  ["Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060"],
  ["Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700"],
  ["Brielle Williamson", "Integration Specialist", "New York", "4804", "2012/12/02", "$372,000"],
  ["Herrod Chandler", "Sales Assistant", "San Francisco", "9608", "2012/08/06", "$137,500"],
  ["Rhona Davidson", "Integration Specialist", "Tokyo", "6200", "2010/10/14", "$327,900"],
  ["Colleen Hurst", "Javascript Developer", "San Francisco", "2360", "2009/09/15", "$205,500"],
];

const dataTable = $('#example').DataTable({
    data: dataSet,
    dom: 't',
    columns: ['Name', 'Job Title', 'Location', 'Id', 'Hire Date', 'Salary'].map(header => ({
        title: header
      })),
    initComplete: function () {
      //purge existing <tfoot> if exists
      $('#example tfoot').remove();
      //append new footer to the table
      $('#example').append('<tfoot><tr></tr></tfoot>');
      //iterate through table columns
      this.api().columns().every(function () {
        //append <select> node to each column footer inserting 
        //current column().index() as a "colindex" attribute
        $('#example tfoot tr').append(`<th><select colindex="${this.index()}"></select></th>`);
        //grab unique sorted column entries and translate those into <option> nodes
        const options = this.data().unique().sort().toArray().reduce((options, item) => options += `<option value="${item}">${item}</option>`, '<option value=""></option>');
        //append options to corresponding <select>
        $(`#example tfoot th:eq(${this.index()}) select`).append(options);
      });
    }
  });

$('#example').on('change', 'tfoot select', function (event) {
  //use "colindex" attribute value to search corresponding column for selected option value
  dataTable.column($(event.target).attr('colindex')).search($(event.target).val()).draw();
})

<!doctype html>
<html>
<head>
  <script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
  <table id="example"></table>
</body>
</html>

使用DataTable.js的js数据的单个列搜索过滤器

1 个答案: