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

【问题标题】：Individual column searching filter for js sourced data using DataTable.js使用 DataTable.js 对 js 源数据的单个列搜索过滤器
【发布时间】：2019-05-29 06:14:11
【问题描述】：

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

我在那个话题上提到了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>

【问题讨论】：

标签： javascript jquery html datatables

【解决方案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>

【讨论】：

我在打印时遇到问题，请您帮帮我stackoverflow.com/questions/56776387/…
主要原因，是因为，Headers 必须在下拉选择上方。