Resetting width of DataTab;le in tabs

KMiller68

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.

kthorngren

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

rf1234

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.

contractLogTable
    .on( 'init', function () {
        //"api: true" - means it is a data table
        $.fn.dataTable
            .tables( { visible: true, api: true } )
            .columns.adjust();
    } )

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:

ctrCategoryTable 
    .on ('init', function () {     
        setTimeout(function(){
            ctrCategoryTable
                .columns.adjust()
                .responsive.recalc();
        }, 300)
    } );

KMiller68

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

    const url = `/Home/GetObjectListingDetail?srvid=${srvid}&dbid=${databaseid}&schemaid=${schemaid}&objectname=${objectname}&captureid=${captureid}`

    //alert('URL is :' + url
    //);
console.log($('#tblObjectDetails'))
datatable = $('#tblObjectDetails')
    .DataTable({
        "ajax": { url, dataSrc: "" },
        columnDefs: [

        ],
        "serverSide": false,
        "processing": true,
        "searchable": true,
        "select": true,
        "single": true,
        "destroy": true,
        "paging": true,
        "ordering": true,

'''

KMiller68

My JS skills are coming along, but I'm not sure just how to implement this.

kthorngren

I am also using BootStrap tabs,

Use the Bootstrap shown.bs.tab event as shown in the example I linked to.

Kevin

KMiller68

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:

$('.nav-tabs a').on('show.bs.tab', function () {
    alert('New tab will be visible now!');
    DataTable.tables({ visible: true, api: true }).columns.adjust();
});

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.

rf1234

Looks like a typo:
'show.bs.tab'
should be
'shown.bs.tab'

"show" is too early, I guess. It must have been completed.

KMiller68

I altered it, but I see no change in the datatable's formatting.

KMiller68

Am I somehow referencing the datatable incorrectly?

<table id="tblObjectDetails" class="table dataTable table-striped table-hover" style="width:100%; background-color: rgba(255, 255, 255, .5);">
                                                <thead class="thead-dark">
                                                    <tr>
                                                        <th>Column Name</th>
                                                        <th>Data Type</th>
                                                        <th>Column Default</th>
                                                        <th>Max Length</th>
                                                        <th>Allow Nulls</th>
                  
                                                        </tr>
                                                </thead>

$('.nav-tabs a').on('shown.bs.tab', function () {
    alert('New tab will be visible now!');
    DataTable.tables({ visible: true, api: true }).columns.adjust();
});

kthorngren

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

kthorngren

Does the formatting become fixed if you perform a search, sort or paging operation?

Kevin

KMiller68

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:

KMiller68

My CSS imports:

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    
    
    <link rel="stylesheet" href="~/css/TabsOne.css" asp-append-version="true" /> 
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/css/StyleSheet.css" asp-append-version="true" />

    <link rel="stylesheet" href="~/css/dataTables.bootstrap5.css">


    
    <link href="Buttons-2.4.2/css/buttons.bootstrap5.css" rel="stylesheet">
    <link href="Select-1.7.0/css/select.bootstrap5.css" rel="stylesheet">

KMiller68

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?

kthorngren

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