Search across multiple tables with separate sources

Search across multiple tables with separate sources

dweedendweeden Posts: 5Questions: 2Answers: 0
edited June 2021 in DataTables

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.

This question has accepted answers - jump to:

Answers

  • colincolin Posts: 15,118Questions: 1Answers: 2,583
    Answer ✓

    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

  • dweedendweeden Posts: 5Questions: 2Answers: 0

    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
                });
    
  • dweedendweeden Posts: 5Questions: 2Answers: 0

    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();
                });
            });
    
  • colincolin Posts: 15,118Questions: 1Answers: 2,583
    Answer ✓

    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

Sign In or Register to comment.