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

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

MzzntnMzzntn Posts: 5Questions: 1Answers: 0

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!

Answers

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

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

    Kevin

  • MzzntnMzzntn Posts: 5Questions: 1Answers: 0

    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.

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    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

  • MzzntnMzzntn Posts: 5Questions: 1Answers: 0

    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>
    
  • MzzntnMzzntn Posts: 5Questions: 1Answers: 0

    Can anyone help me? :(

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • MzzntnMzzntn Posts: 5Questions: 1Answers: 0

    Good morning @colin and thank you for your reply.

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

    Regards!

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
    edited September 2019

    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

This discussion has been closed.