Resetting width of DataTab;le in tabs

KMiller68 · January 11

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 · January 11

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 · January 11

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 · January 11

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 · January 11

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

kthorngren · January 11

I am also using BootStrap tabs,

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

Kevin

KMiller68 · January 11

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 · January 11

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

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

KMiller68 · January 11

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

KMiller68 · January 11

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 · January 11

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 · January 11

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

Kevin

KMiller68 · January 11

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 · January 11

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 · January 11

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 · January 11

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

Resetting width of DataTab;le in tabs

Resetting width of DataTab;le in tabs

Replies

Howdy, Stranger!

Categories

DataTables

Resetting width of DataTab;le in tabs

Resetting width of DataTab;le in tabs

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables