2 tables on same page

CurtisK

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);
      }

    });

rf1234

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

CurtisK

@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)

rf1234

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

allan

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

CurtisK

@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 ( { [ ____] } );

allan

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

Allan