Datatables plugin to search for header values - datatables

Question

I am using jquery's dataTables plugin. I am having skills value as header in my table. I want to serch for users with specific skills. For example as shown in figure i want to search for users who have skill php. Then i should get the name of John. For css i should get name of Mona. The snapshot is here:

Answer 1

You can do this by implementing a custom filter for the datatable, as described here.
Before filtering you have to find, the index of the column you want to filter and check afterwards the value in each row.
This could look somewhat like this:
<input type="text" id="skillFilter" />
<table id="example">
<thead>
<tr>
<th>Skills</th>
<th>PHP</th>
<th>CSS</th>
<th>HTML</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>1</td>
<td>0</td>
<td>1</td>
</tr>
<tr>
<td>Mona</td>
<td>0</td>
<td>1</td>
<td>0</td>
</tr>
</tbody>
</table>
script :
$.fn.dataTable.ext.search.push(
function(settings, data) {
if (skillFilterColumnIndex != undefined) {
//Get the data of each row
var data = data[skillFilterColumnIndex] || "";
return data > 0;
} else {
return 1;
}
});
$("#skillFilter").change(function() {
var skill = $("#skillFilter").val().toLowerCase();
//Find the column index with the skill to filter
$.each($("#example thead th"), function(index, element) {
if (index != 0 && element.innerHTML.toLowerCase() == skill) {
skillFilterColumnIndex = index;
}
});
table.fnDraw();
});