Reputation: 1981
I've seen examples of how to apply individual column searches for each column of a DataTable either using text box, or drop down menus containing the returned values per column. However, I've not yet come across any mechanism to only apply them to specific columns. For example, using the below would apply the search text box to all except coloumn zero:
$('#DataTable tfoot th:gt(0)').each(function () {
var title = $(this).text();
$(this).html('<input type="text"
style="width:120px;" placeholder="search ' + title + '" />');
});
But, how would I then also remove it from column 6 & 7 for example?
* UPDATE * This question relates to server side processing only. Should of stated that earlier.
Upvotes: 1
Views: 5585
Reputation: 165
you can use something like this (by title)
$('#DataTable tfoot th:gt(0)').each(function () {
var title = $(this).text();
if (title != "columns 6 title" && title != "columns 7 title")
{
$(this).html('<input type="text"
style = "width:120px;" placeholder = "search ' + title + '" /> ');
}
});
Upvotes: 0
Reputation: 722
I personnaly use column definition in combination with iniComplete callBack. In this example two types of search, you can add as many different searches (even no search)
$('#table').DataTable({
"ajax": {
"url": "/flux/ajax",
"dataSrc": "data",
"scrollX": true
},
"columns": [
{className: "select", "title": "Status", "data": "stat"}
{className: "text", "title": "Libellé", "data": "Lib"}}
],
initComplete: function () {
this.api().columns().every(function () {
var column = this;
if ($(column.header()).hasClass('select')) {
console.log(column);
var select = $('<select><option value="">' + $(column.header()).html() + '</option></select>')
.appendTo($(column.header()).empty())
.on('change', function (e) {
e.stopImmediatePropagation();
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search(val ? '^' + val + '$' : '', true, false)
.draw();
return false;
});
column.data().unique().sort().each(function (d, j) {
select.append('<option value="' + d + '">' + d + '</option>');
});
} else if ($(column.header()).hasClass('text')) {
var text = $('<input type="text" placeholder="' + $(column.header()).html() + '" />')
.appendTo($(column.header()).empty())
.on('keyup change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
if (column.search() !== this.value) {
column
.search(val)
.draw();
}
return false;
});
}
});
}
});
Upvotes: 3