Individual Column Searching & Server-Side Processing

DSalso

Is there a datatables JS Bin example that uses individual column searching with text boxes in the footer (like this: https://datatables.net/examples/api/multi_filter.html) but for server-side processing? I'm having trouble groking how to grab the text inputs and get them into the ajax request to send to the backend to do the querying.

DSalso

referenced example (but not server-side): https://datatables.net/examples/api/multi_filter.html

DSalso

Also thinking of adding a button that submits the search terms (so the user can enter more than one search term before the searching begins... also seems more intuitive than hitting enter in this case) and possibly a clear button to clear the text boxes. There may be multiple pages of search results returned so need to be able to navigate page by page (like Datatables typically does w/ server-side processing via the press of the page buttons or next or previous to communicate to the backend)

kthorngren

The column().search() API used in the example will work with server side processing. The server side ajax request will provide the parameters described here. Your server script will need to use those parameters to setup your database query.

Basically the client side Javascript code will be the same for client side processing or server side processing.

Kevin

DSalso

Thanks, @kthorngren ! So I think you're saying that using column.search() will automatically set the "columns[i][search][value]" in the ajax request.

So the event that triggers the column.search() and the event that triggers the draw() to actually show the results could be different, right?

DSalso

so what would you recommend... having a function that pulls the text values and uses column().search before each draw of the table? And then triggering the draw upon some event like pressing enter or a button? I ask because the user needs to be able to navigate to page 3 or page 4 of the results... so figured datatables would need to check these inputs each time it drawed

tangerine

Kevin is correct.

The column().search() API used in the example will work with server side processing. The server side ajax request will provide the parameters described here. Your server script will need to use those parameters to setup your database query.

The referenced example works for me using server-side.

DSalso

Thanks, @tangerine !

hapi

Hi, I am using this approach for my server side processing as well. But I want to invoke the search only when the user presses ENTER, as I have some long running queries.

if (that.search() !== this.value && e.keyCode == 13))

This basically works, but the user needs to press enter on each column to take effect. What do I need to do, in order to update all column.search() once the user hits enter in one specific column? Many thanks in advance.

kthorngren

Loop through all the column search inputs. If the input value is different, ie that.search() !== this.value, then use column().search() for that column to set the search term. After the loop use draw() to execute the search via ajax request to the server.

Kevin

hapi

Thanks, but I am still no clear what to do. Very sorry. Best thing would be, once the user hits ENTER to search for all search values.

Search in multiple columns and in the general search field, but only once.

If I am not wrong datatable.search('xxx') invokes immediately a search and the same if I do api.column().search('yyy'). If I loop through it, it will send several search requests to the server. I have long running queries, I would like that the user inputs for example a date in clumn1, a transation type in column2 and a general search text in general search field and then press ENTER and send this whole combination of search fields to the server once.

kthorngren

Like I said the draw() api will send the request to the server. I built a simple example to demonstrate:
http://live.datatables.net/foponoqa/1/edit

It sets up two column searches using column().search(). The searches aren't sent to the server until the Execute Search button is clicked which the event just uses draw().

Kevin

DSalso

@kthorngren - thanks for the example... it allowed me to play around and see some of the specific behavior. i.e. it looks like you only have to call column.search() once and the search parameters are set (allowing the user to navigate different pages of the search results without having to recall column.search([same_search_term])). But if the entire page is refreshed then the search parameters are cleared. Very helpful.

hapi

Many thanks, I was thinking way to complicated. Works now. Maybe helpful for others like me:

The columns I bind like this:

api.columns().every(function() {
    var that = this;
    $('input', this.footer()).on('keyup change', function(e) {
        if (that.search() !== this.value) that.search(this.value);
        // if serverside draw() only on enter 
        if (e.keyCode == 13 ) that.draw();
    });
});

And the standard search filed:

// Disable search on key up and implement enter
$('#dataTable_filter input').unbind();
$('#dataTable_filter input').bind('keyup', function(e) {
    var that = $('#dataTable').DataTable();
    if (that.search() !== this.value) that.search(this.value);
    // if serverside draw() only on enter
    if (e.keyCode == 13 ) that.draw();
});

So in conclusion, on each keyup update the search() and draw only if enter was pressed. Thanks!!