Uncaught TypeError: Cannot read property 'recalc' of undefined

SalmanS

I am getting uncaught error
Though my tabs are working...

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

    });

here is the details error:

Uncaught TypeError: Cannot read property 'recalc' of undefined
at HTMLAnchorElement.<anonymous> ((index):178)
at HTMLAnchorElement.dispatch (jqueryv331.min.js:2)
at HTMLAnchorElement.y.handle (jqueryv331.min.js:2)
at Object.trigger (jqueryv331.min.js:2)
at HTMLAnchorElement.<anonymous> (jqueryv331.min.js:2)
at Function.each (jqueryv331.min.js:2)
at w.fn.init.each (jqueryv331.min.js:2)
at w.fn.init.trigger (jqueryv331.min.js:2)
at bootstrapv337.min.js:7
at HTMLDivElement.f (bootstrapv337.min.js:7)
(anonymous) @ (index):178
dispatch @ jqueryv331.min.js:2
y.handle @ jqueryv331.min.js:2
trigger @ jqueryv331.min.js:2
(anonymous) @ jqueryv331.min.js:2
each @ jqueryv331.min.js:2
each @ jqueryv331.min.js:2
trigger @ jqueryv331.min.js:2
(anonymous) @ bootstrapv337.min.js:7
f @ bootstrapv337.min.js:7
i @ jqueryv331.min.js:2
handle @ bootstrapv337.min.js:6
dispatch @ jqueryv331.min.js:2
y.handle @ jqueryv331.min.js:2
trigger @ jqueryv331.min.js:2
(anonymous) @ jqueryv331.min.js:2
each @ jqueryv331.min.js:2
each @ jqueryv331.min.js:2
trigger @ jqueryv331.min.js:2
e @ bootstrapv337.min.js:6
setTimeout (async)
a.fn.emulateTransitionEnd @ bootstrapv337.min.js:6
c.activate @ bootstrapv337.min.js:7
c.show @ bootstrapv337.min.js:7
(anonymous) @ bootstrapv337.min.js:7
each @ jqueryv331.min.js:2
each @ jqueryv331.min.js:2
b @ bootstrapv337.min.js:7
e @ bootstrapv337.min.js:7
dispatch @ jqueryv331.min.js:2
y.handle @ jqueryv331.min.js:2

SalmanS

if i add this two links the rror disappeared.

         <link href="https://datatables.net/download/build/dataTables.responsive.nightly.css" rel="stylesheet" type="text/css" />
        <script src="https://datatables.net/download/build/dataTables.responsive.nightly.js"></script>

kthorngren

You want to add the api parameter as shown in the $.fn.dataTable.tables() docs.

Kevin

SalmanS

Thanks Kevin, You mean

replace my code my code:

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

    });

with this one?

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

kthorngren

Like this:

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

Kevin