How to display Datatables in a tab without using Ajax

bilguun8322

Hi guys,
I'm new to Datatables and found it very nice.
Currently I'm developing project using Laravel. I have big table and I want split tables into smaller ones. Using tabs.
Example case is:
Tab1= ALL data. Tab2=Data of year 2022, Tab3 = Data of year 2021 so on
I can display table1(Datatable) in tab1 by for looping in a html. (view blade)
Now question is
How do I display tab2's table2 by filtering tab1's tabl1

Below example looks good. But my data isn't ajax. It is collection.
https://datatables.net/examples/api/tabs_and_scrolling.html

bilguun8322

Current HTML looks like
<table1>
for loop displaying all data
</table>
<table2>
for loop displaying all data
</table>
<table3>
for loop displaying all data
</table>
so on
and Javascript looks like

$('#Table2').DataTable().column(2).search('2022').draw();
$('#Table2').DataTable().column(2).search('2021').draw();

allan

It doesn't matter what the data source for the tables inside the tabs are, the approach is the same. Here is basically the same example as the one you linked to, but with DOM sourced data: https://jsfiddle.net/1b3046ks/ (and Bootstrap 5 rather than 3).

The key is to put your <table> elements into tabs, which, from the above, it doesn't look like they are.

Allan

bilguun8322

Thank you very much for you kind help