Cannot reuse table after hiding column?
Cannot reuse table after hiding column?
I have a table with 5 columns where I want to hide the date/time col and add a click event to the first column to show the time/date below (which works, mostly). Using 1.7.6.
The table:
[code]
CommentCategoryDateTimeRep
[/code]
And the init for the table (asp.net method returning json data)
[code]
dtData = [];
$.each(result, function () { dtData.push([this.com, this.cat, this.cdate, this.ctime, this.rep]); });
admin_otable = $('#admin_notestable').dataTable({
"aaData": dtData, "bPaginate": false, "bSort": false, "sScrollY": "250px", "sDom": 'rt',
"aoColumnDefs": [{ "bVisible": false, "aTargets": [2, 3]}], "bDestroy": true });
[/code]
The problem is when we include "aoColumnDefs": [{ "bVisible": false, "aTargets": [2, 3]}]
On pageload - the table populates and I attach a click event handler 1st column with a call to fnGetData to read the 2 hidden columns and show the time/date in their fields. However, when the user changes the filter (say, changes the date), I can watch the ajax call, see the server return the data, but the table never updates. If I *remove the hidden column feature*, the table will reload-refresh as many times as the user wants.
I also use aoColumnDefs to set the class of the first column to attach the click handler to (which works just fine) and unbind the click handler before reloading the table. All of that works. Only hiding the two columns causes the table to not update. Strangely, after updating the table "date" and "time" reappear but using console.log tracing, i never get the trace after the dataTable() call.
How can I re-use the table, pushing in date/time fields after marking them as not-visible?
The table:
[code]
CommentCategoryDateTimeRep
[/code]
And the init for the table (asp.net method returning json data)
[code]
dtData = [];
$.each(result, function () { dtData.push([this.com, this.cat, this.cdate, this.ctime, this.rep]); });
admin_otable = $('#admin_notestable').dataTable({
"aaData": dtData, "bPaginate": false, "bSort": false, "sScrollY": "250px", "sDom": 'rt',
"aoColumnDefs": [{ "bVisible": false, "aTargets": [2, 3]}], "bDestroy": true });
[/code]
The problem is when we include "aoColumnDefs": [{ "bVisible": false, "aTargets": [2, 3]}]
On pageload - the table populates and I attach a click event handler 1st column with a call to fnGetData to read the 2 hidden columns and show the time/date in their fields. However, when the user changes the filter (say, changes the date), I can watch the ajax call, see the server return the data, but the table never updates. If I *remove the hidden column feature*, the table will reload-refresh as many times as the user wants.
I also use aoColumnDefs to set the class of the first column to attach the click handler to (which works just fine) and unbind the click handler before reloading the table. All of that works. Only hiding the two columns causes the table to not update. Strangely, after updating the table "date" and "time" reappear but using console.log tracing, i never get the trace after the dataTable() call.
How can I re-use the table, pushing in date/time fields after marking them as not-visible?
This discussion has been closed.
Replies
The console error that is thrown is: nThs[i - iCorrector] is undefined (Line 3531 jquery.dataTables.js)
For some reason after fnDestroy and reinitialising the table with bDestroy set to true the columns originally hidden in the first initialisation are returning oColumn.bVisible as true. If I reinitialise the table by the count of hidden columns, then the table displays correctly. If I comment out the hidden columns in the aoColumnDefs then the table initialises fine every time. It seems like fnDestroy is not clearing the column definitions.
Ref:
http://datatables.net/forums/discussion/8185/help-with-obscure-error/p1
http://datatables.net/forums/discussion/7056/nthsi-icorrector-is-undefined/p1