Columns resizing on filter, sort, update
Columns resizing on filter, sort, update
artform
Posts: 4Questions: 0Answers: 0
I'm having a very odd issue with my setup. I've tried this with version 1.9.0 and 1.9.2 (nightly build).
When the table initially renders, everything appears as expected and all functionality is working for me (filter, sort, edit, update). The problem is, whenever one of these functions are completed, the table resizes to 100% width. If I run another task (such as filter), the table redraws and appears as expected.
Here's my code for the table:
[code] var oTable = $('#super table').dataTable({
"oLanguage": {"sSearch": "Filter table:"},
// Pre-search
"oSearch": {"sSearch": "<?=$p['s']?>"},
// DataTools INIT
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"sSwfPath": "swf/copy_cvs_xls_pdf.swf",
"aButtons": ["copy", "xls", "pdf",
{
"sExtends": "collection",
"sButtonText": "Save",
"aButtons": [ "csv", "xls", "pdf" ]
}]
},
// UX behaviour
//"sScrollX": "100%",
"sScrollX": "'" + $(document).width() + "px'",
"bJQueryUI": true,
"sPaginationType": "full_numbers",
// Server-side init
"bServerSide": true,
"sAjaxSource": "inc/basf.table.php?filter=<?=urlencode($custom_filter)?>&col=<?=$_GET['col']?>&val=<?=$_GET['val']?>",
//"sAjaxSource": "inc/basf.table.php",
"sServerMethod": "POST",
// Remember what the user last filtered
"bStateSave": true,
// Stop constant resizing
"bAutoWidth": true,
// Runs on startup
"fnInitComplete": function () {
// Column searching for individual cols
var oSettings = this.fnSettings();
for ( var i=0 ; i0){
$("tfoot input")[i].value = oSettings.aoPreSearchCols[i].sSearch;
$("tfoot input")[i].className = "";
}
}
}
});[/code]
When the table initially renders, everything appears as expected and all functionality is working for me (filter, sort, edit, update). The problem is, whenever one of these functions are completed, the table resizes to 100% width. If I run another task (such as filter), the table redraws and appears as expected.
Here's my code for the table:
[code] var oTable = $('#super table').dataTable({
"oLanguage": {"sSearch": "Filter table:"},
// Pre-search
"oSearch": {"sSearch": "<?=$p['s']?>"},
// DataTools INIT
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"sSwfPath": "swf/copy_cvs_xls_pdf.swf",
"aButtons": ["copy", "xls", "pdf",
{
"sExtends": "collection",
"sButtonText": "Save",
"aButtons": [ "csv", "xls", "pdf" ]
}]
},
// UX behaviour
//"sScrollX": "100%",
"sScrollX": "'" + $(document).width() + "px'",
"bJQueryUI": true,
"sPaginationType": "full_numbers",
// Server-side init
"bServerSide": true,
"sAjaxSource": "inc/basf.table.php?filter=<?=urlencode($custom_filter)?>&col=<?=$_GET['col']?>&val=<?=$_GET['val']?>",
//"sAjaxSource": "inc/basf.table.php",
"sServerMethod": "POST",
// Remember what the user last filtered
"bStateSave": true,
// Stop constant resizing
"bAutoWidth": true,
// Runs on startup
"fnInitComplete": function () {
// Column searching for individual cols
var oSettings = this.fnSettings();
for ( var i=0 ; i0){
$("tfoot input")[i].value = oSettings.aoPreSearchCols[i].sSearch;
$("tfoot input")[i].className = "";
}
}
}
});[/code]
This discussion has been closed.
Replies
Allan
Unfortunately, I can't share a link here because the data cannot be shared with the masses. I'll try to setup an example with mock data. In the meantime, I'll give your suggestion a shot.
If it doesn't work, I'll set you up a login and pay for an hour of support.
Thanks!
I can confirm that the suggestion does work without a hitch. I actually find the table refreshes much better with a fixed wrapper. By specifying the width of a wrapper and setting the table to 100%, the resizing column problem is resolved. I have to tweak my paginate CSS since my table is 6000px wide.
[code].dataTables_paginate, #basftable_paginate {
float:left !important;
position:fixed;
margin:10px;
right:0;
}[/code]
This helps keep the pagination options available to the viewer. Otherwise, it's way over to the right.