Please how can I show more than one datatable on one page using tabs
Please how can I show more than one datatable on one page using tabs
Ijesun
Posts: 18Questions: 2Answers: 0
I am new to datatables and i have just tried it in my development environment. I am using vertical tabs to show different tables on tabs click. All this has been wporking fine but when I include datatables, only the default open datatable loads finwe while others when clicked will display beloww the the vertical tabs pane,, even below the footer of the page. Please I have tried to look at several discussions here but nothing seems to work..Pagination,search and sorting is just working fine on all. Another problem is I have buttons for CRUD operation on each table but when I clivk on them they dont respond any more yet they were working when I had only one datatable on that page. Please anyone with an explanation on what I should do?
This question has an accepted answers - jump to answer
Answers
This example shows one way using Bootstrap. Will this work for you its hard to say without seeing what you are doing. If you still need help then please post a link to your page or a test case showing your solution so we can offer more specific suggestions.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin
Do you mean something like this?
Allan
Yes something like that but I dont know where to add that code
I'd suggest starting out by just creating some tabs with whatever library you are using for the tabs. If Bootstrap, see their documentation here.
Then you can insert the table HTML into the tabs.
Allan
I have the tabs working out fine and I have initialised their 'active' states with Javascript and everything is fine but datatables are creating a menace
Happy to look at a test case and offer some help.
Allan
The problem is display. I have eveen run the datatables debugger in my dev environment and it says there are no errors with configuration of the tables. But only the first table gets displayed at the right plae while the other table gets displayed at the footer. It behaves as if the first table is still active in the display place even after I have activated another tab.
The width of the second table is also just fine but the first table seems like to occupy the display space even when inactive
Iam now seeing the issue here. When the page gets opened or reloads, both tables display. Is it because of the use of $(document).ready()on both of them. Should I initialise the first table with $(document).ready() and the second with .on('click')
Its hard to say without seeing what you are doing. Please provide a test case replicating the issues so we can take a look.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin
I am bringing a test-case in a minute
https://jsbin.com/xihadeqoka/edit?html,css,js,console,output
I don't see where you are initialising DataTables there? Also the tables are empty - is that intentional?
Allan
Let me add the datatsbles init. The tables are empty intentionally
https://jsbin.com/xihadeqoka/edit?html,js,output
check out
Data gets to the tables without any problem and the columns and rows display is also fine but the tables are not displaying at the right place. And also the buttons that I added to the tables for CRUD operations are not working except the DELETE button.
Nobody can help again
You didn't even wait 5 hours before posting your last message there. If this is urgent, then we offer paid priority support, although I don't think this issue is specific to DataTables.
There is still no data in the tables:
The add button isn't DataTables related since it should trigger a Bootstrap modal. If you are having problems with Bootstrap modals, you should ask on Stackoverflow or a Bootstrap specific support channel. We don't provide support for Bootstrap issues that aren't related to DataTables.
Indeed, if I delete the DataTables code, the Add button still doesn't show the Bootstrap modal. Why? I'm honestly not sure. That is one for the Bootstrap folks.
Allan
Have you checked how the tables are also displaying? Can you just provide some assistance on how those tables are displaying?
The categories and FAQ tables? They are both displaying and are both DataTables. The alignment for the FAQ table's container is off - you need to scroll down the page when you click FAQs to be able to see it:
Allan
Is it a datatable issue or my CSS issue?
Allan..am sorry for disturbing you for nothing man. I hae figured out the problem. I had one extra div after categories table and it closed out all the other tables from displaying in the required pane. Everything is fine now. Sorry for disturbing you but thanks for opening my eyes