Responsive apply to two tables in one page

jas_jose

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

kthorngren

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_jose

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_jose

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

kthorngren

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