oLoadedState getting null

hvm

Hi,
I want reorder column in my application for that i did custom coding, now once i got reorder column list and use like
oTable.fnSettings().oLoadedState.ColReorder = _reOrderlist; than statement aborted and i found the oLoadedState null so how to maintain state in this grid??

thanks in advance....

hvm

hi please see below code to change oTable settings, in that i changes ColReorder as per custom order, and also some column would be done visible/invisible after all i set oTable.fnSettings and than redraw table but current changes not apply in oTable.

var ar = $('#ColumnSortable').sortable("a");
var reorder = ar .toString().split(",");
for (var i = 0; i < reorder.length; i++) {
reorder[i] = parseInt(reorder[i], 10);
}
oTable.fnSettings().oLoadedState.ColReorder = reorder;


var VisCols = [];
for (i = 0, iLen = oTable.fnSettings().aoColumns.length; i < iLen; i++) {
var checked = $("#" + i + "_").is(":checked");
VisCols .push(checked);
}
oTable.fnSettings().oLoadedState.abVisCols = VisCols ;

oTable.fnDraw();

allan

> i set oTable.fnSettings

The settings object is considered to be private. It should never be written to and read from only if you know DataTables' internals _very_ well.

If you want to set the order of the columns, use the API method fnOrder: http://datatables.net/extras/colreorder/api

Or at initialisation time: http://datatables.net/extras/colreorder/options#aiOrder

Allan

hvm

Hi Allan,

but in my case i have one button and on click of button one popup would open in that list of columns user reorder that columns and than bind grid again as per give reorder of column, so i want custom reordering. That how to possible using Colreorder or aiorder?

allan

When the user has finished doing the reorder in the popup, you would call the fnOrder API method to reorder the columns as required.

Allan

hvm

sorry but not getting you how to use this function, actually i m little bit new in datatables.
but my reordered column list have to assign on oTable or not...?

hvm

suppose
var ar = $('#ColumnSortable').sortable("a");
var reorder = ar .toString().split(",");
for (var i = 0; i < reorder.length; i++) {
reorder[i] = parseInt(reorder[i], 10);
}
here reorder is my list after reorder column, than how to use fnorder?

allan

Assuming that it is an array of indexes, then you could simply do `colReorder.fnOrder( reorder )` . The docs have examples of using the API: http://datatables.net/extras/colreorder/api#fnOrder

Allan

hvm

hi allan,

i did but its not working.. in popup dialog i have one button and its click event call one function
function UpdateColumnOrder() {

debugger;
//update the order of columns
var _Order = $('#ColumnSortable').sortable("toArray");
var __Order = _Order.toString().split(",");
for (var i = 0; i < __Order.length; i++) {
__Order[i] = parseInt(__Order[i], 10);
}
oTable.fnSettings().oLoadedState.ColReorder = __Order;

//var colReorder = new $.fn.dataTable.ColReorder(oTable);
//colreorder.fnOrder(__Order);

//update the visibility of columns
var _abVisCols = [];
for (i = 0, iLen = oTable.fnSettings().aoColumns.length; i < iLen; i++) {
var checked = $("#" + i + "_").is(":checked");
_abVisCols.push(checked);
}
oTable.fnSettings().oLoadedState.abVisCols = _abVisCols;

oTable.fnDraw();
$("#divreorder").dialog('close');
}
which is set reorder column in datatables...in above code i used fnorder but its not working.
please suggest on this...

allan

Please link to a test case showing the issue. As far as I am aware there are no issues known with fnOrder at the moment.

Also, I'm not clear on why you are reading information from `oLoadedState` ? As I mentioned above, you should avoid reading anything from fnSettings if at all possible. In this case, when not just read the current order using fnOrder and then set it using fnOrder as a setter once the reorder is done?

Allan

hvm

hi Allan,
i removed oLoadedState related coding and using fnorder function. in that after close popup reorder list would be set in cookie and using like
var order;
order = readCookie("reorder");
if (order != null) {
if (order.length > 0) {
colReorder = new $.fn.dataTable.ColReorder(oTable);
colReorder.fnOrder(order);
}
}
i can get proper order but in grid that order not proper display. Means if order like [1,2,0,3,4,5]
but display like [1,0,2,3,5,4] means not proper display.

hvm

Hi Allan,

thanks for your help its working now....

One more question i did custom ordering in my application, so in that case ordering working proper, but i want first column freeze means it not reorder.

$(document).ready(function () {
var count = 0;
oTable = $('#myDataTable').dataTable
({
//"sDom": 'T<"clear">lfrtip',
//"sDom": 'C<"top"lp<"clear">>rt<"bottom"i<"clear">>T',
"sDom": 'CT<"clear">Rlfrtip',
"oTableTools": {
"sRowSelect": "multi",
"aButtons": ["select_all", "select_none"]
},
"oColVis":
{
"activate": "mouseover",
"buttonText": "Show/Hide columns",
"aiExclude": [0, 1]
},
"oColReorder": {
//"iFixedColumns": 1
},
"sScrollX": "100%",
"sScrollXInner": "150%",
"bScrollCollapse": true,
"bPaginate": true,
"bStateSave": false,
"sPaginationType": "full_numbers",
"bAutoWidth": true,
"bJQueryUI": false,
"bLengthChange": true,
"bServerSide": true,
"bCookieSet": false,
"sAjaxSource": "Default.aspx/binddata",
"fnServerData": function (sUrl, aoData, fnCallback, oSettings) {
var data1 = JSON.stringify(aoData);
$.ajax({
type: "POST",
url: sUrl,
contentType: 'application/json',
dataType: 'json',
data: "{'Collection': '" + data1 + "'}",
success: function (json) {
var s = $.parseJSON(json.d);
fnCallback(s);
},
error: function (xmlHttpRequest, textStatus, errorThrown) {
alert(xmlHttpRequest.responseText);
}
});
},
"fnInitComplete": function (oSettings, json) {

},
"fnStateLoad": function (oSettings) {
eraseCookie("reorder");

},
"aoColumnDefs": [
{

"fnRender": function (obj) {
var id = obj.aData.ID + "_" + count;
count = count + 1;
return '';

},
"aTargets": [0]
}
],
"aoColumns":
[
{ "sTitle": "ID", "mDataProp": null, "sWidth": "20px", "sDefaultContent": "", "bSortable": false },
// { "mDataProp": "ID"
// , "fnRender": function (obj, val) {
// return "" + obj.aData.ID + "";
// }
// },
{"mDataProp": "CompanyName"
, "fnRender": function (obj, val) {
return "";
}
},
{ "mDataProp": "Address" },
{ "mDataProp": "Town" },
{ "mDataProp": "Country" },
{ "mDataProp": "Email" },
{ "mDataProp": "Gender" },
{ "mDataProp": "Phone", "bVisible": true },
{ "mDataProp": "Date"
, "fnRender": function (obj, val) {
return "";
}
}
],
"fnDrawCallback": function () {
}
});

//var oFC = new FixedColumns(oTable, {
// "iLeftColumns": 1,
//});
//new FixedColumns(oTable);

var stuff = [];
var order = readCookie("reorder");
if (order != null) {
if (order.length > 0) {
var str = order.toString().split(",");
for (var i = 0; i < str.length; i++) {
stuff.push(str[i]);
}
var colReorder = new $.fn.dataTable.ColReorder(oTable);
colReorder.fnOrder(stuff);
}
}
});

var GetColumnIndex = function (columnName) {
return objColumns[columnName];
};

function UpdateColumnOrder() {

////update the order of columns
var order = $('#ColumnSortable').sortable("toArray");
var __Order = order.toString().split(",");
for (var i = 0; i < __Order.length; i++) {
__Order[i] = parseInt(__Order[i], 10);
}
// __Order.push(0);
// alert(__Order);
//alert(__Order);

// alert(JSON.stringify(__Order));
//oTable.fnSettings().oLoadedState.ColReorder = __Order;
//colReorder = new $.fn.dataTable.ColReorder(oTable);
//colReorder.fnOrder(__Order);
//document.cookie = __Order;
eraseCookie("reorder");
createCookie("reorder", __Order, 1);
window.location.reload();
////update the visibility of columns
// var _abVisCols = [];
// for (i = 0, iLen = oTable.fnSettings().aoColumns.length; i < iLen; i++) {
// var checked = $("#" + i + "_").is(":checked");
// _abVisCols.push(checked);
// }
// oTable.fnSettings().oLoadedState.abVisCols = _abVisCols;

//oTable.fnDraw();
$("#divreorder").dialog('close');
}
function GenerateColumnSortable() {
//clear the old elements
$('#ColumnSortable li').each(function (index) {
$(this).remove();
});
//get current columns order and generate li sortable accordingly
for (i = 0, iLen = oTable.fnSettings().aoColumns.length; i < iLen; i++) {
var oColumn = oTable.fnSettings().aoColumns[i];
//if (oColumn.mDataProp != null) {
var li = document.createElement('li');
li.id = GetColumnIndex(oColumn.sTitle.trim());
li.className = 'ui-state-default';
li.innerHTML = oColumn.sTitle.trim();
if (oColumn.bVisible)
li.innerHTML = '' + oColumn.sTitle.trim();
else
li.innerHTML = '' + oColumn.sTitle.trim();
$('#ColumnSortable').append(li);
//}
}
}

hvm

please see above code.... now how i want to freeze first column.

allan

Can you link to a test case showing the issue please? FixedColumns and ColReorder, at the latest versions, should both work together.

Allan