2 tables on same page

2 tables on same page

CurtisKCurtisK Posts: 7Questions: 2Answers: 0

Referencing this discussion https://datatables.net/forums/discussion/52857/multiple-datatables-in-one-page.
The individual from that discussion had the same problem, in which the first table worked but second did not.
My database tables (columns)
- movies (id, name, released, link, runtime, rating)
- shows (id, name, link, network, episodes, seasons, rating)

$(document).ready( function () {
   var table = $('#movies').DataTable({
       "order": [[2, 'desc']], // load page with column order
        "paging": true, // allow pagination
        "scrollCollapse": true, // scrollable with size
        "scrollY": '60vh',
        "lengthMenu": [ [ 100, 250, 500, 1000, -1], [ 100, 250, 500, 1000, "All"] ], //changes menu
        "columnDefs":
[
    { "visible": false, "targets": [0,5] }, // hide columns

]});    
    $('#movies').on( "click", "td", function (e) { // make entire row link

      var rowIdx = table.row( this ).index();
      var sData = table.cells({ row: rowIdx, column: 5 }).data()[0]; // column that includes link
      if (sData && sData.length) {
        window.open("" + sData);
      }

    });

  });

    var table2 = $('#shows').DataTable({
        "order": [[1, 'asc']], // load page with column order
        "paging": true, // pagination
        "scrollCollapse": true, // scrollable with size
        "scrollY": '60vh',
        "lengthMenu": [ [ 25, 75, 150, -1], [ 25, 75, 150, "All"] ], //change menu
        "columnDefs":
[
    {   "visible": false, "targets": [0,6] }, // hide columns
    {   "orderable": false, "targets": 4 } // unsortable column

]});    
    $('#shows').on( "click", "td", function (e) { //make entire row a link

      var rowIdx = table.row( this ).index();
      var sData = table.cells({ row: rowIdx, column: 6 }).data()[0]; //row link comes from
      if (sData && sData.length) {
        window.open("" + sData);
      }

    });

This question has accepted answers - jump to:

Answers

  • rf1234rf1234 Posts: 2,893Questions: 86Answers: 414
    Answer ✓

    $(document).ready ... only applies to the first table not to the second. That might be the problem. Please make a test case. Thanks.

  • CurtisKCurtisK Posts: 7Questions: 2Answers: 0

    @rf1234 - if you reference the other discussion I linked to https://datatables.net/forums/discussion/52857/multiple-datatables-in-one-page you will see the back and forth and then one flagged "answered" by kthorngren with a link to a working example with 1 $(document)

  • rf1234rf1234 Posts: 2,893Questions: 86Answers: 414
    Answer ✓

    This is from Kevin's example:

    $(document).ready( function () {
    var table = $('#table1').DataTable({
           paging: false,
            select: {
                style: 'single'
            },
            columnDefs: [
                {
                    targets:[0,1,2,3,4,5],
                    orderable: false,
                    searchable: false
                }
            ]
     
        });
     
        var table2 = $('#table2').DataTable({
            paging: false,
            select: {
                style: 'single'
            },
            columnDefs: [
                {
                    targets:[0,1,2,3],
                    orderable: false,
                    searchable: false
                }
            ]
     
        });} );
    

    This $(document) encompasses both data tables. Yours only encompasses the first data table. That is the difference, I guess. Counting brackets ... that's what counts :smile:

  • allanallan Posts: 62,803Questions: 1Answers: 10,332 Site admin

    Yup, DataTables world just fine with multiple tables on the page at a time, as shown in this example.

    If it isn't working for you, please link to a test case showing the issue so we can help to debug it.

    Allan

  • CurtisKCurtisK Posts: 7Questions: 2Answers: 0

    @rf1234 - You were correct - I had a } ) ; in the wrong place.

    Where is the "answered" button? Well if anyone is looking for an answer, double check open-close of ( { [ ____] } );

  • allanallan Posts: 62,803Questions: 1Answers: 10,332 Site admin

    It was opened as a discussion rather than a question. I've moved it now and marked rf1234's answers as correct.

    Allan

Sign In or Register to comment.