oLoadedState getting null
oLoadedState getting null
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....
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....
This discussion has been closed.
Replies
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();
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
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
but my reordered column list have to assign on oTable or not...?
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
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...
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
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.
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);
//}
}
}
Allan