Resetting width of DataTab;le in tabs

Resetting width of DataTab;le in tabs

KMiller68KMiller68 Posts: 19Questions: 2Answers: 0

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

  • kthorngrenkthorngren Posts: 21,330Questions: 26Answers: 4,951

    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

  • rf1234rf1234 Posts: 2,990Questions: 87Answers: 421
    edited 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)
        } );
    
  • KMiller68KMiller68 Posts: 19Questions: 2Answers: 0
    edited 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,
    

    '''

  • KMiller68KMiller68 Posts: 19Questions: 2Answers: 0

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

  • kthorngrenkthorngren Posts: 21,330Questions: 26Answers: 4,951

    I am also using BootStrap tabs,

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

    Kevin

  • KMiller68KMiller68 Posts: 19Questions: 2Answers: 0

    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.

  • rf1234rf1234 Posts: 2,990Questions: 87Answers: 421
    edited 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.

  • KMiller68KMiller68 Posts: 19Questions: 2Answers: 0

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

  • KMiller68KMiller68 Posts: 19Questions: 2Answers: 0

    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();
    });
    
  • kthorngrenkthorngren Posts: 21,330Questions: 26Answers: 4,951
    edited 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

  • kthorngrenkthorngren Posts: 21,330Questions: 26Answers: 4,951

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

    Kevin

  • KMiller68KMiller68 Posts: 19Questions: 2Answers: 0

    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:

  • KMiller68KMiller68 Posts: 19Questions: 2Answers: 0

    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">
    
  • KMiller68KMiller68 Posts: 19Questions: 2Answers: 0

    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?

  • kthorngrenkthorngren Posts: 21,330Questions: 26Answers: 4,951

    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

Sign In or Register to comment.