Search across multiple tables with separate sources

dweeden

Hello, this other post with static content got me almost where I wanted but my initialization code threw up error dialogs about reinitalizing not being allowed since I was already initializing with an ajax param and then trying to get a reference to a collection as shown by this example

https://datatables.net/forums/discussion/48286/one-search-bar-for-multiple-tables

I got things working (ugly as per below) but am curious if there's a way to get a reference to all of a page's data tables in an API collection without attempting a reinit?

$(document).ready(function ()
{
    var t1 = $('#grid1').DataTable({
        "ajax": "api/Grid/1"
    });

    var t2 = $('#grid2').DataTable({
        "ajax": "api/Grid/2"
    });

    var t3 = $('#grid3').DataTable({
        "ajax": "api/Grid/3"
    });

    $('#tableSearch').on('keyup click', function () {
        t1.search($(this).val()).draw();
        t2.search($(this).val()).draw();
        t3.search($(this).val()).draw();
    });
});

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

You can use tables() to perform operations on multiple tables - see here. Keep your initialisation the same, as the Ajax paths are different, then use the code below the line,

Colin

dweeden

Awesome, that should work well. On a similar note, is there a way to override certain properties without running into the reinit warning errors I saw? All but the ajax source below are common so I'm hopeful there's a way to update the data source (or the other remaining properties) after the fact

            var t1 = $('#grid1').DataTable({
                "ajax": "api/Grid/1",
                "dom": '<"top"i>rt',
                "scrollY": "500px",
                "scrollCollapse": true,
                "paging": false
            });

            var t2 = $('#grid2').DataTable({
                "ajax": "api/Grid/2",
                "dom": '<"top"i>rt',
                "scrollY": "500px",
                "scrollCollapse": true,
                "paging": false
            });

            var t3 = $('#grid3').DataTable({
                "ajax": "api/Grid/3",
                "dom": '<"top"i>rt',
                "scrollY": "500px",
                "scrollCollapse": true,
                "paging": false
            });

dweeden

So this is my latest work around which works in case it turns out the values that can be provided at initialisation are unchangeable after that point.

$(document).ready(function () {

            var options = {
                "dom": '<"top"i>rt',
                "scrollY": "500px",
                "scrollCollapse": true,
                "paging": false
            };

            ["1", "2"].forEach(function(i) {
                options["ajax"] = "api/Grid/" + i;
                $('#grid' + i).DataTable(options);
            });

            $('#tableSearch').on('keyup click', function () {
                $('.grid').DataTable().tables().search($(this).val()).draw();
            });
        });

colin

Some values can be changed post initialisation, some can't, so it really depends on what you're trying to do. The Ajax URL can be changed with ajax.url() if that's the one you're interested in,

Colin