Columns resizing on filter, sort, update

Columns resizing on filter, sort, update

artformartform Posts: 4Questions: 0Answers: 0
edited May 2012 in DataTables 1.9
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]

Replies

  • allanallan Posts: 61,775Questions: 1Answers: 10,112 Site admin
    Can you link us to a test page showing the problem please? When scrolling is enabled DataTables does make some assumptions about the table width relative to the parent, but it should be capable of coping with this. My fall back suggestion would be to have a wrapper DIV which is the size you want and set the table to 100% (bit rubbish I know, but I'd need an example to offer any other ideas).

    Allan
  • artformartform Posts: 4Questions: 0Answers: 0
    Hi 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!
  • artformartform Posts: 4Questions: 0Answers: 0
    Thanks again Allan,

    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.
This discussion has been closed.