2 tables on same page
2 tables on same page
CurtisK
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
$(document).ready ... only applies to the first table not to the second. That might be the problem. Please make a test case. Thanks.
@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)
This is from Kevin's example:
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
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
@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 ( { [ ____] } );
It was opened as a discussion rather than a question. I've moved it now and marked rf1234's answers as correct.
Allan