Show/hide hidden columns that are hidden at DataTables initialization

fdubrez

HI,

I would like to use the fnShowHide function provided by the API to show hide/columns and be able to use colReorder too.

I don't know how to retrieve the good index. The code after show what I want to do, the method toggleColumnVisibility is call when clicking on a checkbox.
- When clicking on a hidden column checkbox, the good one is displayed but another is replaced by a hidden one...
- When clicking on a visible column checkbox, a null pointer exception occurs.
Can you help me to fix this?

HTML:
[code]

[/code]

Datatable initialization:
[code]
$.getJSON("/url", data, function (json) {
// Fill datatable with data
$("#myDataTable").dataTable( {
"sDom": 'Rlfrtip',
"bPaginate": true,
"bAutoWitdh": true,
"sPaginationType": "full_numbers",
"aaData": json.aaData,
"aoColumns": json.aoColumns // Some columns are hidden using "bVisible": false
});
[/code]

JS
[code]
function fnShowHide( iCol ) {
var oTable = $('#myDataTable').dataTable();
var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;
oTable.fnSetColumnVis( iCol, bVis ? false : true );
}
function getColumnIndexByName(name) {
return $("#myDataTableZone thead th:contains('"+name+"')").index();
}
function toggleColumnVisibility(name) {
var index = getColumnIndexByName(name);
if (getColumnIndexByName(name) == -1) {
console.log("Column is not visible in DataTable");
var oTable = $("#myDataTable").dataTable();

$.each(oTable.fnSettings().aoColumns, function (key, value) {
if (value.sTitle == name) {
var index = value._ColReorder_iOrigCol;
fnShowHide(index);
return false; // quit loop
}
});
} else {
fnShowHide(getColumnIndexByName(name));
}
}
[/code]

fdubrez

The problem occurs when I set the bVisible flag in aoColumns. It works fine when i don't set bVisible et let DataTables use the default behavior.

How can I fix this? What have I done wrong with aoColumns??

My json looks like this:

[code]
[
{sTitle:column_name},
{sTitle:column_name2},
{sTitle:column_name3, bVisible: false}
]
[/code]

DataTable initialisation:
[code]
$.getJSON("/url", data, function (json) {
$("#myDataTable").dataTable( {
"sDom": 'Rlfrtip',
"bPaginate": true,
"bAutoWitdh": true,
"sPaginationType": "full_numbers",
"aaData": json.aaData,
"aoColumns": json.aoColumns
});
});
[/code]

My fnShowHide function:

[code]
function fnShowHide( iCol ) {
var oTable = $('#myDataTable').dataTable();
var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;
oTable.fnSetColumnVis( iCol, bVis ? false : true );
}
[/code]

I am using DataTables 1.9.4 from webjars.org and jquery 1-10.1

fdubrez

Problem solved. aoColumns was modified in controller, sorry for this post.