Jquery DataTables - column filtering with multiple elements in td
Question
Using jquery datatables I want to filter a column which can contain multiple values in a single td.
I followed the datables link
In below picture I want to filter the office column and as you can see one td contains strong text two values: " Edinburgh " and " New York ". Even though the names appear in the filter they don't return a value once selected. For the single elements it is working fine.
So in below example my expected result would be to filter for New York and have a single row returned (including the text of "Edinburgh").
I've created a sample fiddle
$(document).ready(function() {
$('#example').DataTable( {
initComplete: function () {
this.api().columns('.dt-filter').every(function () {
var column = this;
var select = $('<select class="form-control" tabindex="-1" aria-hidden="true" style="max-width:200px"><option></option></select>')
.appendTo($("#filters").find("th").eq(column.index()))
.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 ) {
if (d.indexOf("<p>") >= 0) {
var b = d;
$(b).each(function (index) {
var text = $(this).text();
select.append('<option value="' + text.trim() + '">' + text.trim() + '</option>')
});
}
.....
Is it possible to have multiple values in one column in order to filter by a value?
BTW I just use the p-Element for testing, I don't mind the "li" element or something else.
2 answers
solution1
3 ACCPTED 2016-07-12 09:00:38
Instead of column.search(val ? '^' + val + '$' : '', true, false).draw();}); , just use column.search(val).draw();});
Should search you table rows with multiple strings.
So the overall code becomes as follows:
$(document).ready(function() {
$('#example').DataTable({
initComplete: function() {
this.api().columns('.dt-filter').every(function() {
var column = this;
var select = $('<select class="form-control" tabindex="-1" aria-hidden="true" style="max-width:200px"><option></option></select>')
.appendTo($("#filters").find("th").eq(column.index()))
.on('change', function() {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val());
column.search(val).draw();
});
column.data().unique().sort().each(function(d, j) {
if (d.indexOf("<p>") >= 0) {
var b = d;
$(b).each(function(index) {
var text = $(this).text();
select.append('<option value="' + text.trim() + '">' + text.trim() + '</option>')
});
}
});
});
}
});
});
solution2
0 2019-02-13 08:27:13
To do exact match of one column against multiple criteria, I would recommend external search plugin $.fn.DataTable.ext.search .
That is array where you may push your custom function that iterates over table rows and should return true if the row is matching your criteria (supplied from external variable) and false otherwise.
In general this logic is implemented by this DataTable plug-in. It solves your exact problem, though data-specific processing of other datatypes (numbers, dates) is yet to come.
Your given example may look like:
var srcData = [ {name: 'Bruce Wayne', office: 'Gotham', position: 'CEO'}, {name: 'Clark Kent', office: 'Metropolis', position: 'Journalist'}, {name: 'Arthur Curry', office: 'Atlantis', position: 'Diver'}, {name: 'Barry Allen', office: 'Central City', position: 'Forensics expert'}, {name: 'Diana Prince', office: 'Themyscira', position: 'Art Consultant'} ]; $('#mytable').DataTable({ sDom: 'tF', data: srcData, columns: [ {title: 'Name', data: 'name'}, {title: 'Office', data: 'office'}, {title: 'Position', data: 'position'}, ] });
<!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> <script type="application/javascript" 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.