Datatables Multi Select Column filter

Question

I want to Select multiple items in a column filter. The following example allows you to filter on columns using dropdowns:

http://datatables.net/release-datatables/examples/api/multi_filter_select.html

However, I would like to be able to select multiple items in the column filter, possibly with a checkbox beside each item in the dropdown. e.g. in the example, I would Tick 'A' and 'C' for 'CSS grade' so that only these grades are displayed in the table.

How can I get multi select column filters either using the DataTables plugin or otherwise?

Tomi Lammi · Accepted Answer · 2012-11-27 10:44:58Z

1

You could build your own filter div with selectlists,checkboxes and whatever and use fnFilter to request filtered data from the server. For example:

$("#mycheckbox").click(function () {
     var dt = $('#mytable').dataTable({ "bRetrieve": true });
     dt.fnFilter($("#mycheckbox").is(':checked'), 1);
});

Posts:

sSearch_1 : true/false

answered Nov 27, 2012 at 10:44

Tomi Lammi

2,1261 gold badge18 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JaskeyLam Over a year ago

Hi, could I have a quick fiddle for this?

Nagama Inamdar · Accepted Answer · 2018-09-26 14:33:11Z

It is really easy, asked in various ways multiple times - but surprisingly I could not find an exact match. If you have a that corresponds to your columns :

<select class="form-control" id="ddlSearch">
    <option value="0">Name</option>
    <option value="1">Position</option>
    <option value="2">Office</option>
    <option value="3">Age</option>
    <option value="4">Start date</option>
    <option value="5">Salary</option>
</select>

then implement this javascript to get seacrh in seperate columns

var table;
$(document).ready(function() {
    table = $('#example').DataTable({
        pageLength: 100,
        dom: 'lrtip',
    });
    var column_no = 0;
    $('#ddlSearch').on('change',function(){
        column_no = Number($(this).val());
    });

    $( '#txtSearch' ).on( 'input', function () {
        if ( table.columns([column_no]).search() !== $( '#txtSearch' ).val() ) {
            table.columns([column_no]).search( $( '#txtSearch' ).val() ).draw();
        }
    } );
});

for example try this https://jsfiddle.net/07rnpgs1/

All the best

score 0 · Accepted Answer · 2019-03-12 08:32:45Z

0

You may check out this DataTables plug-in. It provides multiple criteria selection per column, as well as union selection across several columns.

Here is the short working DEMO:

$(document).ready(function () {
	//Source data definition	
	var tableData = [{
			name: 'Clark Kent',
			city: 'Metropolis',
			race: 'cryptonian'
		}, {
			name: 'Bruce Wayne',
			city: 'Gotham',
			race: 'human'
		}, {
			name: 'Steve Rogers',
			city: 'New York',
			race: 'superhuman'
		}, {
			name: 'Peter Parker',
			city: 'New York',
			race: 'superhuman'
		}, {
			name: 'Thor Odinson',
			city: 'Asgard',
			race: 'god'
		}, {
			name: 'Jonathan Osterman',
			city: 'New York',
			race: 'superhuman'
		}, {
			name: 'Walter Kovacs',
			city: 'New Jersey',
			race: 'human'
		}, {
			name: 'Arthur Curry',
			city: 'Atlantis',
			race: 'superhuman'
		}, {
			name: 'Tony Stark',
			city: 'New York',
			race: 'human'
		}, {
			name: 'Scott Lang',
			city: 'Coral Gables',
			race: 'human'
		}, {
			name: 'Bruce Banner',
			city: 'New York',
			race: 'superhuman'
		}
	];
	//DataTable definition	
	window.dataTable = $('#mytable').DataTable({
			sDom: 'tF',
			data: tableData,
			columns: [{
					data: 'name',
					title: 'Name'
				}, {
					data: 'city',
					title: 'City'
				}, {
					data: 'race',
					title: 'Race'
		
			}]
	});

});

<!doctype html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.mfilter.tk/js/mfilter.min.js"></script>
  <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.mfilter.tk/css/mfilter.min.css">
</head>
<body>
  <table id="mytable"></table>
</body>
</html>

edited Mar 12, 2019 at 8:32

answered Feb 8, 2019 at 14:26

user3307073

3 Comments

Gyrocode.com Over a year ago

Thanks for posting but your example probably doesn't work properly, there are no column filtering elements.

user3307073 Over a year ago

Click filter icon

Gyrocode.com Over a year ago

There is no filter icon, see this screenshot.

Collectives™ on Stack Overflow

Datatables Multi Select Column filter

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related