Implement filters on server-side table

arnorbld

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

kthorngren

You may want to remove keyup from the event handler so the search is executed only on change or clear. Or do something like the technique in this SO thread.

Kevin

arnorbld

Hi Kevin,

Will try that, but the problem is the multiple times the loading is called, which takes forever to execute.

allan

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

arnorbld

Hi Alan,

Sorry for the late reply - had to divert into other things.

You are correct! If I add:

console.log('this.footer: ' + this.footer());

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,

arnorbld

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):

<table id="task-and-po-table">
    <thead>
    <tr role="row">
        <th>Job</th>
        <th>Seq</th>
    </tr>
    </thead>
    <thead id="taskPOTableFilterHeader">
    <tr id="taskPoListFilters">
        <th><input type="text" placeholder="Job"></th>
        <th><input type="text"></th>
    </tr>
    </thead>
    <tbody>
    </tbody>
</table>

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,

allan

Possibly the easiest option is to keep it in the footer, but use a little CSS trick to make the footer a header!

    tfoot {
        display: table-header-group;
    }

Allan

arnorbld

Hi Alan,

Thank you so much, that worked perfectly!

Best regards,