I still can't figure this out. I do have my th elements defined in my empty table, could that be why the state is not saving hidden columns? I tried calling fnUpdate but that didn't seem to work either.
I can't link to an example, but I can show the code. Once I generate the table I have a 'Settings' link that the user will click that will allow them to show/hide the columns they want.
Item Type
Name
Task
Status
Waiting On
Owner
Sponsor Requested?
Created By
When Created
When Started
When Ended
Next Due Date
Instructions
Task ID
Group Name
Status ID
Progress Status ID
Allow Structurally Complete?
Validation Task?
[/code]]
The code that displays the Settings dialog:
[code]
$('#tasksDatatableSettings').click(function(event) {
var oTable = $('#tasksTable').dataTable();
var displayColumns = "";
var table = "Show/Hide Columns";
for (var i = 0; i < oTable.fnSettings().aoColumns.length-6; i++) {
var thTitle = oTable.fnSettings().aoColumns[i].sTitle;
var bVis = oTable.fnSettings().aoColumns[i].bVisible;
if (bVis) {
bVis = "checked =\"checked\"";
} else {
bVis = "";
}
displayColumns += "" + thTitle + " ";
}
table = table + displayColumns + "";
var $taskSettingsDialog = $('')
.html(table).dialog({
modal: true,
zIndex: 1001,
autoOpen: false,
title: "Tasks Settings",
width: 450
}).dialog("open");
return false;
});
[/code]
And finally, the fnShowHide function (taken from your Toggle Columns example):
[code]
function fnShowHide( iCol )
{
/* Get the DataTables object again - this is not a recreation, just a get of the object */
var oTable = $('#tasksTable').dataTable();
Everything works as expected so far. The right info comes up in the Settings window, and I can click to hide columns, then click the Settings again, the hidden columns are unchecked and I can check them to redisplay the columns. The only thing is that it's not saving. If I leave the page and come back, it's back to default (except for paging/filtering, which is saved)
Yup, I'm sorry to say you've discovered a bug in DataTables... Two actually :-(. The first is easy, fnSetColumnVis doesn't call the state save function - which is should.
The second is not so easy. The information about the column which is stored isn't actually put back in place correctly under certain circumstances - such as what you've got above. One way around it is to define aoColumns and give each column an empty object - but that's a rubbish solution... I'll have a fix for it in DataTables 1.7.2 - once I figure out a good fix!
Replies
Allan
Here's the DataTables code:
[code]
$('#tasksTable').dataTable({
"iDisplayLength": 25,
"aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]],
"bStateSave": true,
"bProcessing": true,
"bServerSide": true,
"bJQueryUI": true,
"sAjaxSource": "blank.jsp?_response=true&_action=filterTasks",
"sPaginationType": "full_numbers",
"oLanguage": {
"sProcessing": "Retrieving Tasks..."
},
"sDom": '<"top"ip<"datatableToolbar">l><"clear">t<"bottom"ipl><"clear">',
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
nRow.setAttribute("id", aData[13]);
nRow.setAttribute("group", aData[14]);
nRow.setAttribute("status", aData[15]);
nRow.setAttribute("owner", aData[5]);
nRow.setAttribute("progressStatus", aData[16]);
nRow.setAttribute("allowsc", aData[17]);
nRow.setAttribute("validation", aData[18]);
nRow.setAttribute("onMouseDown", "selector_onMouseDown(event);");
nRow.setAttribute("onContextMenu", "selector_onContextMenu(event); return false;");
nRow.setAttribute("onMouseUp", "selector_onMouseUp(event);");
nRow.setAttribute("onMouseOver", "selector_onMouseOver(event);");
return nRow;
},
"aoColumnDefs": [
{ "bVisible": false, "aTargets": [ -1, -2, -3, -4, -5, -6 ] }
]
});
[/code]
My HTML table:
[code]
Item Type
Name
Task
Status
Waiting On
Owner
Sponsor Requested?
Created By
When Created
When Started
When Ended
Next Due Date
Instructions
Task ID
Group Name
Status ID
Progress Status ID
Allow Structurally Complete?
Validation Task?
[/code]]
The code that displays the Settings dialog:
[code]
$('#tasksDatatableSettings').click(function(event) {
var oTable = $('#tasksTable').dataTable();
var displayColumns = "";
var table = "Show/Hide Columns";
for (var i = 0; i < oTable.fnSettings().aoColumns.length-6; i++) {
var thTitle = oTable.fnSettings().aoColumns[i].sTitle;
var bVis = oTable.fnSettings().aoColumns[i].bVisible;
if (bVis) {
bVis = "checked =\"checked\"";
} else {
bVis = "";
}
displayColumns += "" + thTitle + " ";
}
table = table + displayColumns + "";
var $taskSettingsDialog = $('')
.html(table).dialog({
modal: true,
zIndex: 1001,
autoOpen: false,
title: "Tasks Settings",
width: 450
}).dialog("open");
return false;
});
[/code]
And finally, the fnShowHide function (taken from your Toggle Columns example):
[code]
function fnShowHide( iCol )
{
/* Get the DataTables object again - this is not a recreation, just a get of the object */
var oTable = $('#tasksTable').dataTable();
var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;
oTable.fnSetColumnVis( iCol, bVis ? false : true );
}
[/code]
Everything works as expected so far. The right info comes up in the Settings window, and I can click to hide columns, then click the Settings again, the hidden columns are unchecked and I can check them to redisplay the columns. The only thing is that it's not saving. If I leave the page and come back, it's back to default (except for paging/filtering, which is saved)
Yup, I'm sorry to say you've discovered a bug in DataTables... Two actually :-(. The first is easy, fnSetColumnVis doesn't call the state save function - which is should.
The second is not so easy. The information about the column which is stored isn't actually put back in place correctly under certain circumstances - such as what you've got above. One way around it is to define aoColumns and give each column an empty object - but that's a rubbish solution... I'll have a fix for it in DataTables 1.7.2 - once I figure out a good fix!
Regards,
Allan
Thanks,
Allan