Implement filters on server-side table
Implement filters on server-side table
arnorbld
Posts: 110Questions: 20Answers: 1
Hi guys,
I have a Data Table loaded server side and I'm trying to implement filters on it. I have filters on other tables but none of them are loaded server-side. The problem is in handling the filters so they are sent to the server. I've got it to work, somewhat, but it is very slow and it seems that it reloads the list many times. I was trying with the code here: https://datatables.net/examples/api/multi_filter.html. This is what I have right now:
initComplete: function() {
this.api()
.columns()
.every(function () {
var that = this;
$('input', this.footer()).on('keyup change clear', function () {
if (that.search() !== this.value) {
that.search(this.value).draw();
}
});
});
}
With this code, if I click in a filter input and type one character, the AJAX script for the DT loading is called once for each column and passes the new column filter to all the other columns as well to the server. This obviously takes a lot of time.
So, I'm obviously missing something in how to handle the filter input events to ensure that it executes the filter just once and passes all the filter input data back to the AJAX script.
Any ideas would be most appreciated 
Best regards,
Arnor
This question has an accepted answers - jump to answer
Answers
You may want to remove
keyupfrom the event handler so the search is executed only onchangeorclear. Or do something like the technique in this SO thread.Kevin
Hi Kevin,
Will try that, but the problem is the multiple times the loading is called, which takes forever to execute.
What you are saying suggests to me that
this.footer()is actually resolving to undefined! So$('input', this.footer()).on...would become$('input').on..., thus the multiple calls to the server.However, I might be totally off base there.
We'd need a link to a page showing the issue to know for sure.
Allan
Hi Alan,
Sorry for the late reply - had to divert into other things.
You are correct! If I add:
into the .every() loop it comes back as null, but not undefined, but yes, there is absolutely some disconnect there.
Not sure what's missing, but I have filters working in other tables, so will check what the difference is!
Best regards,
Hi Alan,
I got this to work in the footer of the table. But what do I need to do to put this at the top? In other lists I've added a <thead> row and that has worked fine. But I'm just not finding the right combination of code to make it work. Essentially what I have done elsewhere is (simplified and without any tbody data):
Like I said, this has worked elsewhere, but there I'm only dealing with filtering on the data already in the HTML table, not server side loaded. Hope this makes sense.
Any ideas on moving this filter row to the top?
Best regards,
Possibly the easiest option is to keep it in the footer, but use a little CSS trick to make the footer a header!
Allan
Hi Alan,
Thank you so much, that worked perfectly!
Best regards,