tabletools not reinitiliazed after ajax reload
tabletools not reinitiliazed after ajax reload
bvnbhati
Posts: 5Questions: 1Answers: 0
I am using datatables in a jquery UI dialog. Below is the function I am calling to draw the table whenever the dialog is opened.
[code] function listPtCharges(filter){
var chgTable;
chgTable =
$('#chargeTable').dataTable({
"bJQueryUI": true,
"bDestroy": true,
"sDom": 'tT',
"bSort": false,
"bAutoWidth": false,
"sAjaxSource": "/ajax/ptchglist.php",
"fnServerData": function ( sSource, aoData, fnCallback ) {
aoData.push( { "name": "filter", "value": filter } );
$.ajax( {
"dataType" : 'json',
"type" : "POST",
"url" : sSource,
"data" : aoData,
"success" : fnCallback
} );
} ,
"aoColumns":
[
{"bVisible":false},
{"sWidth": 55},
{"sWidth": 30}
],
"oTableTools": {
"sRowSelect": chgSelctionTyp,
"sSwfPath": "/swf/copy_csv_xls_pdf.swf",
"aButtons": []
}
});
} [/code]
Within the dialog I have another button, which calls the same function, with new filter. And I do get the new data set on table.
Problem is- new data set is not clickable at bottom rows. I tried to debug and got an error at following function in TableTools.js because TableTools still has old data set in variable "this.s.dt.aoData".
[code] "fnIsSelected": function ( n )
{
var pos = this.s.dt.oInstance.fnGetPosition( n );
return (this.s.dt.aoData[pos]._DTTT_selected===true) ? true : false;
}, [/code]
Please help me know how will TableTools be reinitialized whenever new data set is brought in the datatable.
[code] function listPtCharges(filter){
var chgTable;
chgTable =
$('#chargeTable').dataTable({
"bJQueryUI": true,
"bDestroy": true,
"sDom": 'tT',
"bSort": false,
"bAutoWidth": false,
"sAjaxSource": "/ajax/ptchglist.php",
"fnServerData": function ( sSource, aoData, fnCallback ) {
aoData.push( { "name": "filter", "value": filter } );
$.ajax( {
"dataType" : 'json',
"type" : "POST",
"url" : sSource,
"data" : aoData,
"success" : fnCallback
} );
} ,
"aoColumns":
[
{"bVisible":false},
{"sWidth": 55},
{"sWidth": 30}
],
"oTableTools": {
"sRowSelect": chgSelctionTyp,
"sSwfPath": "/swf/copy_csv_xls_pdf.swf",
"aButtons": []
}
});
} [/code]
Within the dialog I have another button, which calls the same function, with new filter. And I do get the new data set on table.
Problem is- new data set is not clickable at bottom rows. I tried to debug and got an error at following function in TableTools.js because TableTools still has old data set in variable "this.s.dt.aoData".
[code] "fnIsSelected": function ( n )
{
var pos = this.s.dt.oInstance.fnGetPosition( n );
return (this.s.dt.aoData[pos]._DTTT_selected===true) ? true : false;
}, [/code]
Please help me know how will TableTools be reinitialized whenever new data set is brought in the datatable.
This discussion has been closed.
Replies
To clear the table object completely I did this:
if (oTable) {
//need to destroy the table else the TableTools data from previous searches are retained!
oTable.fnDestroy(true);
oTable = null;//probably not needed
}
Then I copy over the table structure from a hidden div containing my table template to place where I want the table to appear:
//copy over the report's structure from the template everytime so we don't have old data in the table,
//especially the TableTools stuff is not cleared without whole new table.
$("#reportTableTd").html($("#reportTableHolder").html());
$("#reportTableTd table").attr("id", "reportTable");
now do you DataTable init
oTable = ......