When I use responsive collapse, ajax and specify ORDER it breaks

tvirelli

I have a table with the responsive collapse/expand button that loads it's data with ajax. It works fine. However, when I define "ORDER", it no longer collapses the tables. I think this is because the first column, which holds long strings, shows short strings on page 1, but as I paginate through, once I get to longer strings, it doesn't collapse, it just grows the table.

$.extend($.fn.dataTable.defaults, {
    "lengthMenu": [ [10, 25, 50, 100, -1], [10, 25, 50, 100, "All"] ]
});
$('#sitemap-pages-datatable').DataTable({
    "ajax": "/tabledata-site-urls.php?data=<?php echo $row_RecordsetSite['uuid']; ?>",
    "responsive": true,
    "language": {
        "lengthMenu": "Display _MENU_ URLs per page",
        "loadingRecords": '<div class="row d-block mx-auto"><h6><strong>LOADING URLS</strong> <img src="/assets/images/sp-loading.gif"></h6></div>',
        "info": "Showing _START_ to _END_ of _TOTAL_ URLs",
        "infoEmpty": "",
        "emptyTable": '<div class="text-center">Currently there are no URLs</div>',
        "infoFiltered": "(filtered from _MAX_ total URLs)"
    },
    "order": [[ 2, 'desc' ]]
});

colin

Hi @tvirelli ,

Yep, it doesn't recalculate on each page draw by default. What you can do though, as shown in this example, is to recalculate the responsive columns using responsive.recalc() in the page handler.

Cheers,

Colin