Horizontal scrolling with column filtering
Horizontal scrolling with column filtering
I have a horizontal scroll which works perfectly fine. My table has roughly 20 columns, first 4 of which are fixed. The problem is when I filter out my columns(filter affects the not-fixedcolumns) to only 3 columns the column widths become ridiculously wide so as to maintain width of the table. Any suggestions?
[code]
$(document).ready(function() {
var tablewidth = pageWidth();
console.log("pageWidth in document ready - "+tablewidth);
var dataTable = $('#documentsList').dataTable({
"iDisplayLength":25,
"aLengthMenu": [25, 50, 100],
"sDom": 'T<"clear">Rlrtip',
"oTableTools": {
"aButtons": [
"copy",
"print",
{
"sExtends": "collection",
"sButtonText": "Save",
"aButtons": [
{
"sExtends": "csv",
"sButtonText": "Save to CSV"
},
{
"sExtends": "xls",
"sButtonText": "Save to Excel"
}
]
}
]
},
"bLengthChange":true,
"bProcessing": true,
"bDestroy":true,
"bServerSide": true,
"bStateSave": true,
"sScrollY": "600px",
"sScrollX": tablewidth,
"sScrollXInner": tablewidth,
"bScrollCollapse": true,
"sPaginationType": "full_numbers",
"sAjaxSource": 'restList',
//"sDom":'<"H"lrp>t<"F"i>',
"aaSorting": [[ 3, "asc" ]],
"bAutoWidth": false,
"aoColumns": [
{ "mData" : "checkBox", "sWidth":"2em", "bSortable" : false},
{ "mData" : "actions","sWidth":"4em", "bSortable" : false},
{ "mData" : "status", "sWidth":"12em", "bSortable":false},
{ "mData" : "filename","sWidth":"8em", "bSortable":true},
{ "mData" : "practice"},
{ "mData" : "juris"},
{ "mData" : "county" },
{ "mData" : "type" },
{ "mData" : "number" },
{ "mData" : "title" },
{ "mData" : "importDate"},
{ "mData" : "checkinDate"},
{ "mData" : "publishDate"},
{ "mData" : "author" },
{ "mData" : "citation" },
{ "mData" : "comments" },
{ "mData" : "tags" },
{ "mData" : "importedBy"},
{ "mData" : "uuid" },
{ "mData" : "convertRequestId"},
{ "mData" : "documentumId"},
{ "mData" : "convertStatus"},
{ "mData" : "publishStatus"},
{ "mData" : "onNovus"}
],
"fnDrawCallback":function () {
// disable column resizing then re-enable it
// this is needed incase a column is hidden/shown
// we need to destroy/throw away the old setup and re-create the column resizing
setupColumnResizing(true);
setupColumnResizing(false);
tablewidth = pageWidth();
var oSettings = dataTable.fnSettings();
console.log("fnDrawCallback - "+tablewidth)
oSettings.oScroll.sXInner = tablewidth;
}
});
[/code]
[code]
$(document).ready(function() {
var tablewidth = pageWidth();
console.log("pageWidth in document ready - "+tablewidth);
var dataTable = $('#documentsList').dataTable({
"iDisplayLength":25,
"aLengthMenu": [25, 50, 100],
"sDom": 'T<"clear">Rlrtip',
"oTableTools": {
"aButtons": [
"copy",
"print",
{
"sExtends": "collection",
"sButtonText": "Save",
"aButtons": [
{
"sExtends": "csv",
"sButtonText": "Save to CSV"
},
{
"sExtends": "xls",
"sButtonText": "Save to Excel"
}
]
}
]
},
"bLengthChange":true,
"bProcessing": true,
"bDestroy":true,
"bServerSide": true,
"bStateSave": true,
"sScrollY": "600px",
"sScrollX": tablewidth,
"sScrollXInner": tablewidth,
"bScrollCollapse": true,
"sPaginationType": "full_numbers",
"sAjaxSource": 'restList',
//"sDom":'<"H"lrp>t<"F"i>',
"aaSorting": [[ 3, "asc" ]],
"bAutoWidth": false,
"aoColumns": [
{ "mData" : "checkBox", "sWidth":"2em", "bSortable" : false},
{ "mData" : "actions","sWidth":"4em", "bSortable" : false},
{ "mData" : "status", "sWidth":"12em", "bSortable":false},
{ "mData" : "filename","sWidth":"8em", "bSortable":true},
{ "mData" : "practice"},
{ "mData" : "juris"},
{ "mData" : "county" },
{ "mData" : "type" },
{ "mData" : "number" },
{ "mData" : "title" },
{ "mData" : "importDate"},
{ "mData" : "checkinDate"},
{ "mData" : "publishDate"},
{ "mData" : "author" },
{ "mData" : "citation" },
{ "mData" : "comments" },
{ "mData" : "tags" },
{ "mData" : "importedBy"},
{ "mData" : "uuid" },
{ "mData" : "convertRequestId"},
{ "mData" : "documentumId"},
{ "mData" : "convertStatus"},
{ "mData" : "publishStatus"},
{ "mData" : "onNovus"}
],
"fnDrawCallback":function () {
// disable column resizing then re-enable it
// this is needed incase a column is hidden/shown
// we need to destroy/throw away the old setup and re-create the column resizing
setupColumnResizing(true);
setupColumnResizing(false);
tablewidth = pageWidth();
var oSettings = dataTable.fnSettings();
console.log("fnDrawCallback - "+tablewidth)
oSettings.oScroll.sXInner = tablewidth;
}
});
[/code]
This discussion has been closed.