Responsive apply to two tables in one page

Responsive apply to two tables in one page

jas_josejas_jose Posts: 10Questions: 4Answers: 0
edited April 2022 in DataTables

I'm having a issue with the resposive DataTable plugin...

The thing is, i have Two tables inside my page, when the first is showing, the second is hide and vice-verse...This function is toggle by a onclick() button, so, when I click in the first button, he show the first table and hide the second one. The big problem is when i click to show the second table, she appeer, but don't came with the reponsive layout and that 'break' her width and goes out of the mobile page....

anyone knows how to fix this issue? perhaps may be a simple thing to do, but I don't know what is it....

using this version of responsive DataTable https://datatables.net/extensions/rowreorder/examples/initialisation/responsive.html

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    When the hidden table becomes visible you need to use responsive.recalc() along with columns.adjust(). See the example in the responsive.recalc() docs.

    Kevin

  • jas_josejas_jose Posts: 10Questions: 4Answers: 0
    edited April 2022

    i've done like this and still not working

    $('#second-table').DataTable({
                "aaSorting": [],
                "order": [[0, 'desc']],
                "columnDefs": [
                    {
                        "searchable": false,
                        "orderable": false,
                        "targets": [0],
                        "visible": false,
                        "sScrollY": "200px",
                        "bPaginate": false
                    }
                ],
                "rowReorder": {
                    selector: 'td:nth-child(2)'
                },
                "responsive": true,
                "language": {
                    "searchPlaceholder": "Search datas"
                }
            }).columns.adjust().responsive.recalc();
    

    Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

  • jas_josejas_jose Posts: 10Questions: 4Answers: 0

    i alredy implement the changer button... see something that can be cousing this trouble?

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    Answer ✓

    That is not the place to use these API's. This example uses them when the Bootstrap modal event is opened. Its not clear form above exactly how you are doing this but you need to use these API's when the table is made visible. In your click event or an event that fires when the modal, tab or whatever is displayed.

    Kevin

Sign In or Register to comment.