Multiple tables with same parameters but difference JSON in the same web page

Mzzntn

I want to initialize two tables with the same parameters but with two different jsons. The tables must also be loaded on the same page.
How can I do? Thank you very much for helping!

kthorngren

Here is an example that might get you started:
https://datatables.net/examples/basic_init/multiple_tables.html

Kevin

Mzzntn

Thanks for the reply.
I have already seen that page and partially solved my question. However, I can't load two databases because I don't know how to declare the instances.

kthorngren

One option might be to use HTML5 Attributes to set the ajax option.

Another option would be to use a variable that contains the Datatables configuration object. Individually init Datatables with the variable. But before initializing set the ajax option.

Or you could possibly use the ajax.url() API to change the URL of each table.

There are probably other ways to do this.

Kevin

Mzzntn

Hi kthorngren.

Here my two script. How can I put them together?
Thanks again!

<script type="text/javascript" class="init">

$(document).ready(function() {
    
    //var first-tab = ('#tab1').DataTable( { 
    $('#tab1').DataTable( { 

        "ajax": {
            "url": "http://mysite.com/data/tab1.txt",
            "dataSrc": "FirstGroup"
        },
        deferRender: true,
        //"pageLength": 15,
        "columns": [
            { "data": "Lastname" },
            { "data": "Name" },
            { "data": "City" },
            { "data": "Address" },
            { "data": "Role" }
        ],
        "columnDefs": [
            { "width": "40%", "targets": 5 }
        ],
        "language": { "url": "//cdn.datatables.net/plug-ins/1.10.19/i18n/Italian.json" },
        responsive: true,
        dom: 'Blfrtip',
        "buttons": [
            {
                extend: 'pdf',
                text: 'Save PDF'
            }
        ]

    } ); // End first table creation 

/* ============ */

    //var second-tab = ('#tab2').DataTable( { 
    $('#tab2').DataTable( { 

        "ajax": {
            "url": "http://mysite.com/data/tab2.txt",
            "dataSrc": "SecondGroup"
        },
        deferRender: true,
        //"pageLength": 15,
        "columns": [
            { "data": "Lastname" },
            { "data": "Name" },
            { "data": "City" },
            { "data": "Address" },
            { "data": "Role" }
        ],
        "columnDefs": [
            { "width": "40%", "targets": 5 }
        ],
        "language": { "url": "//cdn.datatables.net/plug-ins/1.10.19/i18n/Italian.json" },
        responsive: true,
        dom: 'Blfrtip',
        "buttons": [
            {
                extend: 'pdf',
                text: 'Save PDF'
            }
        ]

    } ); // End second table creation 


} ); // End script

</script>

Mzzntn

Can anyone help me?

colin

Hi @Mzzntn ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

Mzzntn

Good morning @colin and thank you for your reply.

Thanks for the info. I will provide a test case as soon as possible.

Regards!

kthorngren

See if this thread helps. Allan's first answer gives the structure of using configuration objects with html5 data attributes. If this doesn't help then as Colin mention provide a test case with what you have tried.

Kevin