How to display Datatables in a tab without using Ajax
How to display Datatables in a tab without using Ajax
bilguun8322
Posts: 3Questions: 1Answers: 0
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
This question has an accepted answers - jump to answer
Answers
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();
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
Thank you very much for you kind help