Table overflows container on ajax.reload()
Table overflows container on ajax.reload()
Voytek
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.
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.