Two DataTables with the exact same settings are displaying differently
Two DataTables with the exact same settings are displaying differently
theodikus
Posts: 25Questions: 10Answers: 0
I have the following two tables declared:
$('#hospital-table').DataTable({
"aoColumns" : [
{ sWidth: '10%' },
{ sWidth: '30%' },
{ sWidth: '25%' },
{ sWidth: '20%' },
{ sWidth: '10%' },
{ sWidth: '5%', sClass: "alignCenter" }
],
"columnDefs": [
{
targets: [0, 1, 2, 3, 4],
sortable: true
},
{
targets: [5],
sortable: false
}
],
"paginate": true,
"stateSave": true,
"pageLength": 10,
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"data": that.hospitals,
"oLanguage": {
"sSearch": "Search table for: ",
"sEmptyTable": "We coudn't find anything based on your search!"
},
"dom": '<"top"if><"bottom"rtlp>'
});
$('#practice-table').DataTable({
"aoColumns" : [
{ sWidth: '10%' },
{ sWidth: '30%' },
{ sWidth: '25%' },
{ sWidth: '20%' },
{ sWidth: '10%' },
{ sWidth: '5%', sClass: "alignCenter" }
],
"columnDefs": [
{
targets: [0, 1, 2, 3, 4],
sortable: true
},
{
targets: [5],
sortable: false
}
],
"paginate": true,
"stateSave": true,
"pageLength": 10,
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"data": that.practices,
"oLanguage": {
"sSearch": "Search table for: ",
"sEmptyTable": "We coudn't find anything based on your search!"
},
"dom": '<"top"if><"bottom"rtlp>'
});
The tables, despite the column width declarations being identical, are displaying differently. The data loaded into them do not contain any strings that are so large that they change the width. Any ideas as to why this might be happening? The HTML is also identical.
Answers
Found my own solution. Statesave : true is persisting the old layout.
Scratch that, it's still not working the way it's supposed to.
Can you please provide a working example of your code and data.
Also, try combining aoColumns and columnDefs into a single aoColumns/columnDefs. Duplicate configurations can cause issues and these two ultimately do the same functionality.
Thanks for responding. I just tried writing all of my declarations in columnDefs, and it didn't change anything.
Here is an example of the edited code, per your suggestion:
Here's what it was before:
We'd really need a link to a page showing the issue since there are a number of things on the page and in the CSS that could effect this. For example if the table is hidden when created.
Allan
I can't link it, because it's on a password secured server hosted by my company. It is indeed hidden though, it's inside a Bootstrap collapse panel.
I've done some experimenting, and it seems that when I start the page with the panels closed, the table width assignments are ignored, but if I open the panel then change the page size with the inspector, the column widths snap to what I have defined. I guess the column widths are having a difficult time because the width of the parent panel is hidden since the panel is closed. Is there a way to assign the width by measuring the parent panel header width, since that's always visible on the page?
This example shows how to adjust the column widths once a tab is made visible.
Allan
This doesn't seem to work for me. I switched the code to apply to a watch on show.bs.collapse, which is indeed getting triggered, but the tables are now acting more erratic and the discrepancies in the column widths are now more exaggerated. :/
If I open one panel, it looks way off from the assigned column widths. Then if I open the second one, the first one changes and looks correct, but the second one looks off. then if I close and reopen the second panel, then it snaps to its defined widths and looks fine.
I tried this first:
$('#collapse_9, #collapse_10, #collapse_0').on('show.bs.collapse', function (e) {
console.log('tab');
$.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
});
Then tried this:
$('#collapse_9').on('show.bs.collapse', function (e) {
console.log('hospital');
$("#hospital-table").DataTable().columns.adjust();
});
$('#collapse_10').on('show.bs.collapse', function (e) {
console.log('practice');
$("#practice-table").DataTable().columns.adjust();
});
Neither of these achieves the desired effect. For the record, I am running this within an Aurelia application.
I'm afraid I would need a link to the page or a test case of JSFiddle, CodePen, etc, to be able to debug and help resolve the issue.
Allan
Make sure the following styling isn't being overwritten
I solved it! I set autoWidth to false and they stopped acting up. Maybe when the table detects the state change of the panel opening, it was trying to resize the columns?
Actually, one of the issues with DataTables at the moment is that it doesn't know when the document changes around it. It shouldn't be doing anything about the panel opening since it doesn't know anything about your panel. The
columns.adjust()method can be called when the table is made visible to resize the table.Allan
The columns.adjust() didn't do anything to resize or even out the layout of any of my tables, I tried using it when the panels opened.
I'd need a link to the page showing the issue to be able to offer any help.
Allan