datatables + ColReorder + bStateSave does not work well

lars16ande

I downloaded the latest DataTables distribution a few days ago and copied it to my VPS server. I want to use datatables in combination with ColReorder and bStateSave so the reordered columns will be stored. The example on the datatables.net website works well (https://datatables.net/release-datatables/extras/ColReorder/state_save.html). The example that came with the distribution that I uploaded to my server does not. It does store the number of rows that are shown as well as the filtering (via the search field) but the column order just jumps back to it's original state after reloading the page (F5). I did not change anything in the code. I'm just looking at the state_save.html example page in the Extras/ColReorder folder. The page is here: http://showu.nl/dt/datatables/extras/ColReorder/state_save.html

Does anyone have any clue why this doesn't work on my server??

allan

Can you update your ColReorder to the latest release (1.0.8) please.

Thanks,
Allan

lars16ande

Thanks a lot that did the trick. Apparently v1.0.8 is not yet distributed with the main package yet.
Next question now however is, how can I implement the column resizing, because this script is also based on v1.0.7. Is there perhaps a quick fix available?

lars16ande

Ok, I already read in some other posts that there is not a fix for this yet. So I tried to solve it. I did not succeed to be able to save the column width. The problem of the state saving of the column order seems to be:
[code]
////////////
//Martin Marchetta: Re-initialize so as to register the new column order
//(otherwise the events remain bound to the original column indices)
this._fnConstruct();
///////////
[/code]

I did manage to let the column resizing work as well as the state save of the column order (v1.0.8).
I commented out the above mentioned part othe column resizer script as well as the part below. Because this causes the state save script to malfunction for both resizing and column order.

[code]
///////////////////////////////////////////////////////
//Martin Marchetta
else if(this.dom.resize !== null) {
var i;
var j;
var currentColumn;
var nextVisibleColumnIndex;
var previousVisibleColumnIndex;
var scrollXEnabled;

//Re-enable column sorting
this.s.dt.aoColumns[colResized].bSortable = true;

//Save the new resized column's width
this.s.dt.aoColumns[colResized].sWidth = $(this.s.mouse.resizeElem).innerWidth() + "px";

//If other columns might have changed their size, save their size too
scrollXEnabled = this.s.dt.oInit.sScrollX === "" ? false:true;
if(!scrollXEnabled){
//The colResized index (internal model) here might not match the visible index since some columns might have been hidden
for(nextVisibleColumnIndex=colResized+1; nextVisibleColumnIndex < this.s.dt.aoColumns.length; nextVisibleColumnIndex++){
if(this.s.dt.aoColumns[nextVisibleColumnIndex].bVisible)
break;
}

for(previousVisibleColumnIndex=colResized-1; previousVisibleColumnIndex >= 0; previousVisibleColumnIndex--){
if(this.s.dt.aoColumns[previousVisibleColumnIndex].bVisible)
break;
}

if(this.s.dt.aoColumns.length > nextVisibleColumnIndex)
this.s.dt.aoColumns[nextVisibleColumnIndex].sWidth = $(this.s.mouse.resizeElem).next().innerWidth() + "px";
else{ //The column resized is the right-most, so save the sizes of all the columns at the left
currentColumn = this.s.mouse.resizeElem;
for(i = previousVisibleColumnIndex; i > 0; i--){
if(this.s.dt.aoColumns[i].bVisible){
currentColumn = $(currentColumn).prev();
this.s.dt.aoColumns[i].sWidth = $(currentColumn).innerWidth() + "px";
}
}
}
}

//Update the internal storage of the table's width (in case we changed it because the user resized some column and scrollX was enabled
if(scrollXEnabled && $('div.dataTables_scrollHead', this.s.dt.nTableWrapper) != undefined){
if($('div.dataTables_scrollHead', this.s.dt.nTableWrapper).length > 0)
this.table_size = $($('div.dataTables_scrollHead', this.s.dt.nTableWrapper)[0].childNodes[0].childNodes[0]).width();
}

//Save the state
this.s.dt.oInstance.oApi._fnSaveState( this.s.dt );
}
///////////////////////////////////////////////////////
[/code]