Resetting width of DataTab;le in tabs
Resetting width of DataTab;le in tabs
I have two working datatables within tabs. Table 1 is on the second of three tabs, and it always appears full width, columns correctly aligned, etc. The second table is on the third tab, which has another set of tabs nested within it. This second datatable never appears correctly; it's always a fraction of the proper width with columns compressed. I've read numerous posts, some of them older, indicating that having them within tabs causes issues with being unable to automatically recalculate sizing. I've tested that, and this second datatable, outside of any tabs, does show up correctly.
I found this reference:
$('#tblObjectDetails').DataTable()
.columns.adjust()
.responsive.recalc();
and while this might be the answer, I'm unclear as to where in my JS code I should be calling this. Any guidance would be greatly appreciated.
Thanks,
Ken.
Replies
This example shows using
columns.adjust()
in a Bootstrap event that fires when the tab is shown. You will need to use a similar event for the tab solution you are using.Kevin
It depends ... In some cases it makes sense to use the "init" event. It might also be required after an "ajax.reload" or a "draw".
Here is an example with the "init" event. In this case I am doing a "columns.adjust" for all data tables on the web page, not just for the one triggering the event.
You only need "responsive.recalc" if your table is really responsive, i.e. responsive extension is set to true
In this example I also needed to use a timeout to get things fixed:
I am also using BootStrap tabs, and the datatable is being populated with the code shown below. I noted an alternate event handler for dynamically created Alax tables as a comment on the example; would that be the appropriate form here?
'''
function bindDataTableDetails(srvid, databaseid, schemaid, objectname, captureid) {
'''
My JS skills are coming along, but I'm not sure just how to implement this.
Use the Bootstrap
shown.bs.tab
event as shown in the example I linked to.Kevin
Please bear with me as I try to get a handle on this subject.
I added this to test that I can see the tab click event:
I can see the event firing as I click manually through tabs or as the application is switching between them, but I assume I'm still referencing the table name incorrectly, or some other such error, as nothing changes in the table formatting.
Looks like a typo:
'show.bs.tab'
should be
'shown.bs.tab'
"show" is too early, I guess. It must have been completed.
I altered it, but I see no change in the datatable's formatting.
Am I somehow referencing the datatable incorrectly?
The
DataTable.tables()
API is used to generically get all the tables on the page. It is further filtered with the{ visible: true, api: true }
so it only retrieves the table on the page. See the docs for details.Can you provide a link to your page or test case showing the issue?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Without seeing the issue its hard for us to help with suggestions. When you say not formatted correctly what exactly is wrong, maybe post a screenshot.
Make sure you are using all the correct Bootstrap style integration files for the BS version you are using. Use the Download Builder for this.
Kevin
Does the formatting become fixed if you perform a search, sort or paging operation?
Kevin
The Search/Sort/Paging options don't cause any formatting changes.
I can't provide a test case due to data source and security issues, but here's a screen cap of what I'm getting right now. I need the grid to fill this space appropriately:
My CSS imports:
I've also just noticed that the alert on the tab change event is showing up BEFORE the new tab is displayed, despite the event having been changed to "shown". Is that significant?
The search input, by default, is aligned to the right side of the container, independent of the column widths. In the screenshot the last column is aligned with the search input. Same with the paging elements. This suggests the table is inside a container that is not expanding the full width of the page. You can use the browser's inspect tool to verify if this is the case.
Kevin