Individual column searching filter for js sourced data using DataTable.js

Question

I need to have Individual column searching (select inputs) based filter,

I referred official tutorial on that topic

The below code doesn't generate the individual column filter drop down

Also, note this example demonstrates the use of initComplete, a callback function triggered when the table has fully loaded. Use of this callback isn't required in this example since the data is available in the table on load.

<!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>

Yevhen Horbunkov · Accepted Answer · 2019-05-29 07:52:49Z

I would stick to initComplete option as it is triggered just once upon DataTable fully initialized and API methods can be called safely.

Though, I would code that feature in slightly less verbose manner:

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>

I am having issue while printing can you help me out please stackoverflow.com/questions/56776387/…
The main reason, is because, The Headers must be above the drop down select.

Collectives™ on Stack Overflow

Individual column searching filter for js sourced data using DataTable.js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related