Table overflows container on ajax.reload()

Table overflows container on ajax.reload()

VoytekVoytek Posts: 1Questions: 1Answers: 0

I'm using DataTables + Responsive plugin, and all works well except when I use ajax.reload() to load different data into the table.

Since the data is different, so are the column widths. However responsive plugin doesn't accommodate this, causing a table to overflow the container.

On top of it the behavior somewhat inconsistent:

Administration -> Faculty: overflow.
Faculty -> All: OK.
All -> Faculty: OK.
Faculty -> Administration: OK.
Administration -> All: overflow.

Live Sample

DataTables Debug

jQuery(document).ready(function ($) {
    var $searchCatSlug = "administration";
    var slsTbl = $("#slsTbl_ltr").DataTable({
        paging: false,
        searching: true,
        language: {
            processing: "<img src=\"ajaxload_hb.gif\">",
            search: "Search:",
            paginate: {
                previous: "Previous",
                next: "Next"},
            loadingRecords: "Loading...",
            zeroRecords: "No matching records found."},
        lengthChange: false,
        responsive: {details: {
                type: "column"}},
        order: [1, "asc"],
        info: false,
        processing: true,
        serverSide: false,
        columns: [
            {data: null, defaultContent: "", className: "control", orderable: false, targets: 0},
            {data: "F1"},
            {data: "F2"},
            {data: "F3"},
            {data: "F5"},
            {data: {display: "F4.display", sort: "F4.sort", filter: "F4.filter"}},
            {data: {display: "F7.display", sort: "F7.sort", filter: "F7.filter"}},
            {data: {display: "F6.display", sort: "F6.sort", filter: "F6.filter"}},
            {data: {display: "F8.display", sort: "F8.sort", filter: "F8.filter"}}
        ],
        ajax: {
            url: "http://domain.com/wpdomaincom/wp-admin/admin-ajax.php",
            type: "post",
            data: function (d) {
                d.action = "sls_body_tbl_c";
                d.searchCatSlug = $searchCatSlug;
            }
        }
    });
    $(slsTbl.table().container()).addClass("slsTblWrap");
    $("#slsUlCats a").click(function (e) {
        e.preventDefault();
        $("#slsUlCats a").removeClass(" abcfslFActive1");
        $(this).addClass(" abcfslFActive1");
        $searchCatSlug = $(this).attr("data-slug");
        slsTbl.ajax.reload().responsive.rebuild().responsive.recalc().columns.adjust().draw();
    });
});
This discussion has been closed.