Multiple tables with individual search inputs in serverSide mode using DataTables

Question

Application is using:

DataTables 1.10.18
jquery 3.2.1
PHP back-end
lodash 4.17.4

The application contains a web page which consists of multiple DataTables. Each of these uses serverSide: true (server-side mode) to obtain the data via an ajax endpoint which returns JSON data.

The tables are initialised as follows:

On page load several
's are rendered. I'm using a jquery .each() to initialise the DataTable for each one:
```
$.each($('table'), function () {

    $(this).DataTable({
        processing: true,
        serverSide: true,
        searching: false,
        ajax: {
            data: {
               table_id: $(this).attr('id') 
        },
        url: '/get-data.json', 
    },
    ...
});
```
Each

has an ID. This is passed via ajax in the data: attribute. The endpoint /get-data.json returns data based on the table ID. In other words it knows "which table" the data should be obtained for based on this ID.
I want to be able to do searching on tables, but it must be done server-side. For this reason my initialisation code in (1) sets searching: false because this effectively disables the client-side search facility that DataTables provides (which we can't use in this instance as searching must be done server-side).
The problem I'm facing is how to create search inputs for each table, make an ajax call and update the appropriate table. I want the search to work in realtime after >=3 characters have been entered. Critical to this question is that 1 search input is responsible for searching 1 DataTable - it's not a search feature where the input can update "any/every table on the page" which is a commonly described pattern in other questions. 1 input : searching 1 table in this case.
My plan has been as follows - each table referenced in point (2) has an ID. I need to create unique inputs. So if I have tables with ID's #table1, #table2, #table3 I can easily create:
```
 
 
 
```
I then detect if any changes have occurred on inputs:
```
$('input[type="text"]').bind("keyup change input",
        function (e) {
            // Ignore tab key for keyup event otherwise it'll fire an ajax request that does nothing useful.
            if (e.which !== 9) {
                processSearch.call(this);
            } else {
                e.preventDefault();
            }
        });

    var prev_value = {};
    function processSearch() {
        var obj = $(this),
                search_id = obj.attr('id'), // ID of input
                search_value = obj.val(); // Value of input

        // There's been no change to the field, ignore.
        if (prev_value[search_id] === search_value) {
            return;
        }

        prev_value[search_id] = search_value;

        /* Wait until at least 3 characters have been entered, or user has cleared the input */
        if (search_value.length >= 3 || (!search_value)) {
            debouncedDraw({search_id: search_id, search_value: search_value});
        }
    }
```
The above code does what I need in terms of waiting for >=3 characters to be entered. I'm then executing a function called debouncedDraw which passes an object containing search_id and search_value. These refer to the input ID and value respectively, e.g. if I type "foo" into #table1_search then the object is:
```
{search_id: 'table1_search', search_value: 'foo'}
```
The debouncedDraw function looks like this. This is using lodash to limit the rate at which the function can fire. The point here is to stop it making needless ajax requests based on a question I asked a few years ago here: DataTables - kill ajax requests when a new one has started:
```
var debouncedDraw = _.debounce(function (opts) {
    console.log(opts);
}, 500);
```
At the moment this will just console.log the object given above.
I'm unsure of the best way to proceed at this point. I need to re-run /get-data.json via ajax and then update the appropriate table.
I could access the request data and split the search_id based on the underscore to work out which table ID the data is for (e.g. table1_search targets #table1). I then need to write this data back to the appropriate table (#table1 in this case).
I can't help but think I'm going about this in a convoluted way and wondered if DataTables itself has any better ways of supporting this? It seems quite a basic requirement (multiple searchable tables in serverSide mode). But I can't find any posts which refer how to do this specifically.

Aaron · Accepted Answer

All the "gotchas" I've experienced over the years is encapsulated in the snippet below. This is the basic template I always use when creating a new datatable. You can create as many datatables on a page as you need using this pattern.

Personally I would use a different ajax url path/route for each table so that table logic is in separate files in the backend... but it is possible to have all the data logic in a single backend file. I modified my usual template to suit that.

With this pattern you can utilize the built-in search input that comes with datatables for your use case with server-side processing on all tables.

There's a method behind my madness which I tried to document in the script comments on each line. Let me know if you have a question on something. I'm thinking this is bounty worthy.

For reference, when developing a new app using datatables I basically live on this page https://datatables.net/reference/option/

Edit 1

Inside your existing debounced drawTable function you could do something like this:

function drawTable(id) {
    $('#'+id).DataTable().ajax.url( 'get-data.json?table_id='+id+'&foo=bar' ); //update ajax url of existing dt - if necessary
    $('#'+id).DataTable().search(search_input_val).draw(); // fire ajax request with value from your custom search input

}

I'm fairly certain you will need to set "searching" to true though for this method to work.

Edit 2

Another way I just thought of, without using dt search. Pass all your data through modified url and load/reload.

$('#'+id).DataTable().ajax.url( 'get-data.json?table_id='+id+'&search=foo' ).load();

You could then get rid of all the debounce stuff if you use a button click listener or an onblur listener on the input field and fire the same command above.

Have you seen this? https://datatables.net/reference/api/%24.fn.dataTable.util.throttle()

I've never used it before, but it looks like a debounce. The example on the page shows it being used for .search()

Multiple tables with individual search inputs in serverSide mode using DataTables

Answers (2)

Edit 1

Edit 2

Related Questions