The following approach builds a select list (a drop-down) from the contents of the first column.
For each cell in that column, it splits the comma-separated items into separate pieces of text, and then creates a sorted, unique list for the drop-down.
When you search by selecting an item from the drop-down, it checks if the selected item is contained anywhere in the text of each cell in that column. It uses a custom DataTables filter for this.
In my case, I placed the drop-down in the footer of the table - you can change that.
The table looks like this:
And here is the drop-down:
When an item is selected from the drop-down, you can see the filtering in effect:
The code for this solution is as follows - I have split it up into separate sections/functions to try to make the structure and approach clearer:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
</head>
<body>
<div style="margin: 20px;">
<table id="example" class="display dataTable cell-border" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger , John, Nixon , </td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>John, Garrett , Winters , </td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton, Winters , Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric , Kelly , Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
</div>
<script type="text/javascript">
$(document).ready(function() {
// the DataTable object:
var table = $('#example').DataTable( {
select: false // or, whatever you need in here.
} );
// Setup - add a select list to first footer cell:
$('#example tfoot th').slice(0, 1).each( function () {
var dropdown = buildDropdown();
$(this).html( dropdown );
} );
// add a change event to the select list:
$('#mySelect').change(function() {
table.draw();
});
// create a custom search function for the select list,
// which finds if the selected item is contained in the cell:
$.fn.dataTable.ext.search.push(
function( settings, data, dataIndex ) {
var selectedValue = $('#mySelect').val();
console.log(selectedValue);
if (data[0].includes(selectedValue)) {
return true;
} else {
return false;
}
}
);
function buildDropdown() {
var selectHtml;
// this will hold array of distinct values:
var items = [];
table.columns([0]).data().each(function (data, index) {
data.forEach(function (newItems, index) {
newItems.split(',').forEach(function (newItem, index) {
if ( newItem.trim() !== '' && items.indexOf(newItem) === -1) {
items.push(newItem.trim());
}
});
});
});
// sort and remove duplicates:
var uniqueSortedItems = [...new Set(items)].sort();
selectHtml = '<select id="mySelect"><option value=""></option>';
uniqueSortedItems.forEach(function(item) {
selectHtml = selectHtml + '<option value="' + item + '">' + item + '</option>';
});
selectHtml = selectHtml + '</select>';
return selectHtml;
}
} );
</script>
</body>
</html>
I think this is what you are trying to achieve - but you will need to integrate this into your specific solution, of course.
You will also need to decide what you want to do about the global search function (if you are using it), because it may interfere with the custom search used for the first column.
