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

IjesunIjesun 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

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794

    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

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    Do you mean something like this?

    Allan

  • IjesunIjesun Posts: 18Questions: 2Answers: 0

    Yes something like that but I dont know where to add that code

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    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

  • IjesunIjesun Posts: 18Questions: 2Answers: 0

    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

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    Happy to look at a test case and offer some help.

    Allan

  • IjesunIjesun Posts: 18Questions: 2Answers: 0

    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.

  • IjesunIjesun Posts: 18Questions: 2Answers: 0

    The width of the second table is also just fine but the first table seems like to occupy the display space even when inactive

  • IjesunIjesun Posts: 18Questions: 2Answers: 0

    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')

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794

    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

  • IjesunIjesun Posts: 18Questions: 2Answers: 0

    I am bringing a test-case in a minute

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    I don't see where you are initialising DataTables there? Also the tables are empty - is that intentional?

    Allan

  • IjesunIjesun Posts: 18Questions: 2Answers: 0

    Let me add the datatsbles init. The tables are empty intentionally

  • IjesunIjesun Posts: 18Questions: 2Answers: 0

    check out

  • IjesunIjesun Posts: 18Questions: 2Answers: 0

    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.

  • IjesunIjesun Posts: 18Questions: 2Answers: 0

    Nobody can help again

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    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

  • IjesunIjesun Posts: 18Questions: 2Answers: 0

    Have you checked how the tables are also displaying? Can you just provide some assistance on how those tables are displaying?

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin
    Answer ✓

    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

  • IjesunIjesun Posts: 18Questions: 2Answers: 0

    Is it a datatable issue or my CSS issue?

  • IjesunIjesun Posts: 18Questions: 2Answers: 0

    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

Sign In or Register to comment.