how to link Search plug-in with data table object?
how to link Search plug-in with data table object?
soosaijebasteen
Posts: 4Questions: 1Answers: 0
I have two data tables in a page.Both tables are nearly identical. But one is for dev and another one for release info.
I added search plugin in javascript.
$.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
var min = $('#pmin').datepicker("getDate");
var max = $('#pmax').datepicker("getDate");
var startDate = new Date(data[dateColNo]);
if (min == null && max == null) { return true; }
if (min == null && startDate <= max) { return true; }
if (max == null && startDate >= min) { return true; }
if (startDate <= max && startDate >= min) { return true; }
return false;
});
$.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
var min = $('#dmin').datepicker("getDate");
var max = $('#dmax').datepicker("getDate");
var startDate = new Date(data[dateColNo]);
if (min == null && max == null) { return true; }
if (min == null && startDate <= max) { return true; }
if (max == null && startDate >= min) { return true; }
if (startDate <= max && startDate >= min) { return true; }
return false;
});
This is not working correctly because these search plugins are no way connected to correct data table.
How to link first search for one table and second for another table??
This question has an accepted answers - jump to answer
Answers
See if this thread helps.
https://datatables.net/forums/discussion/comment/152832/#Comment_152832
Kevin
@kthorngren,
Thanks for your reply.
Now I did like this.
function addFilter() {
$.fn.dataTable.ext.search = [];
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
if (settings.nTable.id === "pTable") {
var min = $('#pmin').datepicker("getDate");
var max = $('#pmax').datepicker("getDate");
var startDate = new Date(data[dateColNo]);
if (min == null && max == null) { return true; }
if (min == null && startDate <= max) { return true; }
if (max == null && startDate >= min) { return true; }
if (startDate <= max && startDate >= min) { return true; }
return false;
} else if (settings.nTable.id === "dTable") {
var min = $('#dmin').datepicker("getDate");
var max = $('#dmax').datepicker("getDate");
var startDate = new Date(data[dateColNo]);
if (min == null && max == null) { return true; }
if (min == null && startDate <= max) { return true; }
if (max == null && startDate >= min) { return true; }
if (startDate <= max && startDate >= min) { return true; }
return false;
}
return false;
}
);
}
I'm calling this add filter before I call table.draw for both pTable or dTable.
$("#pmin").keyup(function () {
addFilter(); pTable.draw();
});
$("#dmin").keyup(function () {
addFilter(); dTable.draw();
});
like this.
Now I don't encounter that issue. But still is this the proper way to do it.
Or if any improvements to the code can be done, kindly let me know.
I passed tableElement which is pTableElement = $("#pTable"); and pTableElement .DataTable() object.
if (settings.nTable.id == tableElement.nativeElement.id) {}
I received error: unkown property id.
That is why used if (settings.nTable.id === "dTable") {} straighaway.