jquery datatable not able to select rows after redraw

bvnbhati

I am using jquery datatable plugin to display a table in jquery UI dialog. Below is the function I am calling to draw the table.

function listPtCharges(filter){
var chgTable;
chgTable =
$('#chargeTable').dataTable({
"bJQueryUI": true,
"bDestroy": true,
"sDom": 'tT',
"bSort": false,
"bAutoWidth": false,
"sAjaxSource": "/ajax/ptchglist.php",
"sAjaxDataProp": "Records",
"fnServerData": function ( sSource, aoData, fnCallback ) {
aoData.push( { "name": "acctno", "value": $("#curAcctno").val() } );
aoData.push( { "name": "ins_id", "value": $("#ins_id").val() } );
aoData.push( { "name": "filter", "value": filter } );
$.ajax( {
"dataType" : 'json',
"type" : "POST",
"url" : sSource,
"data" : aoData,
"success" : fnCallback
} );
} ,
"aoColumns":
[
{"bVisible":false},
{"sWidth": 55},
{"sWidth": 30},
{"sWidth": 40},
{"sWidth": 125},
{"sWidth": 50},
{"sWidth": 50},
{"sWidth": 20},
{"bVisible":false} // allowed
],
"oTableTools": {
"sRowSelect": chgSelctionTyp,
"sSwfPath": "/swf/copy_csv_xls_pdf.swf",
"aButtons": []
}
});
}

This function is called just after the call to open dialog. Here are the lines of code that open the dialog and then load the table.

var oTT = TableTools.fnGetInstance( 'chargeTable' );
if(oTT)
oTT.fnSelectNone();
$( "#chargeList" ).dialog( "open" );
listPtCharges();

Within the dialog I have another button, with event handler to the value of filter and call the same function, with new filter. Newly loaded table always brings more number of rows from server.

Everything is fine except for a strange problem. Whenever a new table with more rows is drawn only the number of rows equal to previous table are selectable.

I mean suppose I loaded table with 5 rows, presssed button to bring new data set for table. Table got loaded with 8 rows. But now I will be able to select only top 5 rows. Rest all will result in error on firebug related to unidentified postion.

Any help in this regard is greatly appreciable.