Multiple Datatables won't load on page.
Multiple Datatables won't load on page.
lennyhadley
Posts: 30Questions: 8Answers: 0
The below code runs on HTML / PHP defined tables that then render as Datatables. The first Quarterback table on the page loads just fine, but then all other tables, including other instances of the Quarterbakcs table don't load via datatables at all. Its like something is breaking after the first instance of the run.
what's odd is that I do this on several pages, but it's very sporadic that it doesn't load.
$('table.QuarterBack').DataTable({
"columnDefs": [
{
"targets": [ 0,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,
31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66 ],
"visible": false
}
],
"order": [[ 0,'asc' ],[5,'desc'],[8,'desc']],
"paging": false,
"searching": false,
"info": false,
"sorting":false,
"scrollX": true,
"scrollCollapse": true,
"fixedColumns": {
leftColumns: 2
},
dom: 'Bfrtip',
buttons: [
{
extend: 'colvisGroup',
text: 'Basic',
show: [1,2,3,4,5,6,7],
hide: [8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,
31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66]
},
{
extend: 'colvisGroup',
text: 'Season',
show: [8,9,10,11,12,13,14,15,16],
hide: [2,3,4,5,6,7,17,18,19,20,21,22,23,24,25,26,27,28,29,30,
31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66]
},
{
extend: 'colvisGroup',
text: 'Per Game',
show: [17,18,19,20,21,22,23,24],
hide: [2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,25,26,27,28,29,30,
31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66]
},
{
extend: 'colvisGroup',
text: 'Red Zone',
show: [25,26,27,28,29,30],
hide: [2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,
31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66]
},
{
extend: 'collection',
text: 'Pick Pass Location',
autoClose: true,
buttons: [
{
extend: 'colvisGroup',
text: 'Short Left (0-15)',
show: [ 1,2,31,32,33,34,35,36 ],
hide: [3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,
37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66]
},
{
extend: 'colvisGroup',
text: 'Short Middle (0-15)',
show: [ 1,2,37,38,39,40,41,42 ],
hide: [3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,
31,32,33,34,35,36,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66]
},
{
extend: 'colvisGroup',
text: 'Short Right (0-15)',
show: [ 1,2,43,44,45,46,47,48 ],
hide: [3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,
31,32,33,34,35,36,37,38,39,40,41,42,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66]
},
{
extend: 'colvisGroup',
text: 'Deep Left (15+)',
show: [ 1,2,49,50,51,52,53,54 ],
hide: [3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,
31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,55,56,57,58,59,60,61,62,63,64,65,66]
},
{
extend: 'colvisGroup',
text: 'Deep Middle (15+)',
show: [ 1,2,55,56,57,58,59,60 ],
hide: [3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,
31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,61,62,63,64,65,66]
},
{
extend: 'colvisGroup',
text: 'Deep Right (15+)',
show: [ 1,2,61,62,63,64,65,66 ],
hide: [3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,
31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60]
}
]
}
]
});
$('table.RunningBack').DataTable({
"columnDefs": [
{
"targets": [ 0,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32 ],
"visible": false
}
],
paging: false,
"order": [[ 0,'asc' ],[8,'desc'],[5,'desc']],
searching: false,
"info": false,
sorting:false,
scrollX: true,
scrollCollapse: true,
"fixedColumns": {
leftColumns: 2
},
dom: 'Bfrtip',
buttons: [
{
extend: 'colvisGroup',
text: 'Basic',
show: [1,2,3,4,5,6,7],
hide: [8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32]
},
{
extend: 'colvisGroup',
text: 'Season',
show: [8,9,10,11,12,13,14,15,16],
hide: [2,3,4,5,6,7,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32]
},
{
extend: 'colvisGroup',
text: 'Per Game',
show: [17,18,19,20,21,22,23,24,25],
hide: [2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,26,27,28,29,30,31,32]
},
{
extend: 'colvisGroup',
text: 'Red Zone',
show: [26,27,28,29,30,31,32],
hide: [2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25]
}
]
});
$('table.WRTE').DataTable({
"columnDefs": [
{
"targets": [ 0,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24 ],
"visible": false
}
],
paging: false,
"order": [[ 0,'asc' ],[5,'desc'],[7,'desc']],
searching: false,
"info": false,
sorting:false,
scrollX: true,
scrollCollapse: true,
"fixedColumns": {
leftColumns: 2
},
dom: 'Bfrtip',
buttons: [
{
extend: 'colvisGroup',
text: 'Basic',
show: [1,2,3,4,5,6,7],
hide: [8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]
},
{
extend: 'colvisGroup',
text: 'Season',
show: [8,9,10,11,12,13],
hide: [2,3,4,5,6,7,14,15,16,17,18,19,20,21,22,23,24]
},
{
extend: 'colvisGroup',
text: 'Per Game',
show: [14,15,16,17,18,19],
hide: [2,3,4,5,6,7,8,9,10,11,12,13,20,21,22,23,24]
},
{
extend: 'colvisGroup',
text: 'Red Zone',
show: [20,21,22,23,24],
hide: [2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19]
}
]
});
$('table.GameListing').DataTable({
paging: false,
searching: false,
"info": false,
scrollX: true,
scrollCollapse: true
});
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
Hi @lennyhadley ,
There's no reason why that shouldn't work. We're happy to take a look if you could link to your page or create a test case. 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
Probably will need to see the problem in action. When the page doesn't load properly do you get any alert messages or errors in the browser's console?
Looks like you are using DOM sourced data in the tables. Do those load properly without Datatables?
The above Datatables code is pretty basic so without out being able to see the problem it will be hard to troubleshoot.
Kevin
@colin thanks for the quick reply.
The page this code is running on is http://www.topflightfantasysports.com/nfl-test/
I have paywalls on my website but i'm pretty sure
if that doesn't work for you I can work on setting up a test case. Thanks!
Yes, all the data loads properly on the tables, if you click the link you'll see...its ugly lol. I'm sure its something simple, but I'm just lost.
I do see a couple console errors you might need to fix:
Not sure about this one but it doesn't seem Datatables related.
This one usually indicates a difference between the number columns in the table and what Datatables is configured for. I would recommend making sure all the tables are proper and that Datables is configured for the correct number of columns and that the config options referencing columns aren't outside the number of actual columns.
Kevin
Kevin,
thank you, knew it was something stupid, I was missing a column. Ugh. Sorry to waste you guys time. appreciate the help!
Lenny