recalc error in tab, How can i fill the tab entirely???

arcanisgk

How can i fill the tab entirely???

At the moment i am working in tha same scenario:

Example 1 Not Work

function Handler_RefreshTableInTabs() {
    $(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function(event) {
        $($.fn.dataTable.tables(true)).DataTable().responsive.recalc();
        $($.fn.dataTable.tables(true)).css('width', '100%');
        $($.fn.dataTable.tables(true)).DataTable().columns.adjust().draw();
    });
}

Example 2 Not Work

function Handler_RefreshTableInTabs() {
    $(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function(event) {
        $($.fn.dataTable.tables(true)).DataTable() 
        .responsive.recalc() 
        .columns.adjust();
    });
}

Example 3 Not Work

function Handler_RefreshTableInTabs() {
    $(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function(event) {
        $($.fn.dataTable.tables({ visible: true, api: true })).DataTable() 
        .responsive.recalc() 
        .columns.adjust();
    });
}

LOG JS:

ajax.plug.js?20200413170242:806 Uncaught TypeError: Cannot read property 'recalc' of undefined
at HTMLAnchorElement.<anonymous> (ajax.plug.js?20200413170242:806)
at HTMLDocument.dispatch (jquery.min.js?20200413170242:2)
at HTMLDocument.v.handle (jquery.min.js?20200413170242:2)
at Object.trigger (jquery.min.js?20200413170242:2)
at HTMLAnchorElement.<anonymous> (jquery.min.js?20200413170242:2)
at Function.each (jquery.min.js?20200413170242:2)
at S.fn.init.each (jquery.min.js?20200413170242:2)
at S.fn.init.trigger (jquery.min.js?20200413170242:2)
at l (tab.js:126)
at i.t._transitionComplete (tab.js:209)
(anonymous) @ ajax.plug.js?20200413170242:806
dispatch @ jquery.min.js?20200413170242:2
v.handle @ jquery.min.js?20200413170242:2
trigger @ jquery.min.js?20200413170242:2
(anonymous) @ jquery.min.js?20200413170242:2
each @ jquery.min.js?20200413170242:2
each @ jquery.min.js?20200413170242:2
trigger @ jquery.min.js?20200413170242:2
l @ bootstrap.min.js?20200413170242:6
t._transitionComplete @ bootstrap.min.js?20200413170242:6
i @ bootstrap.min.js?20200413170242:6
t._activate @ bootstrap.min.js?20200413170242:6
t.show @ bootstrap.min.js?20200413170242:6
(anonymous) @ bootstrap.min.js?20200413170242:6
each @ jquery.min.js?20200413170242:2
each @ jquery.min.js?20200413170242:2
i._jQueryInterface @ bootstrap.min.js?20200413170242:6
(anonymous) @ bootstrap.min.js?20200413170242:6
dispatch @ jquery.min.js?20200413170242:2
v.handle @ jquery.min.js?20200413170242:2

Display

kthorngren

Doesn't look like you have the syntax right in the code snippets. See if this example helps:
https://datatables.net/examples/api/tabs_and_scrolling.html

Kevin

arcanisgk

working with:

$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
    $.fn.dataTable.tables({ visible: true, api: true }).columns.adjust();
});

Find this in comments of https://datatables.net/examples/api/tabs_and_scrolling.html

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin