fnReloadAjax, fnClearTable, fnDraw add rows to bottom of table
fnReloadAjax, fnClearTable, fnDraw add rows to bottom of table
kbleeker
Posts: 2Questions: 0Answers: 0
I'm using a datatable with JSON encoded AJAX to send table contents. I want to reload the entire table from that AJAX source, which is what I understood fnReloadAjax would do, however any of the above-mentioned functions simply draw a new row into the table. fnDraw appends a copy of the table was when it was initialised, and fnReloadAjax and fnClearTable append rows saying "No data available in table", as does fnDestroy. I'm really confused by this, is there any way I can simply refresh the table contents from an AJAX source without reloading the page/putting it into an iframe?
Sadly since this is an intranet page, I can't expose it.
My table is initialised like this:
[code]
$(document).ready(function() {
$('.dataTableNoSearch').each(function(){
var oNSTable;
var giRedraw = false;
/* Add a click handler to the rows - this could be used as a callback */
$("#"+this.id+" tbody").click(function(event) {
$(oNSTable.fnSettings().aoData).each(function (){
$(this.nTr).removeClass('row_selected');
});
$(event.target.parentNode).addClass('row_selected');
});
/* Add a click handler for the delete row */
$('#deleteNS').click( function() {
var anNSSelected = fnGetSelected( oNSTable );
oNSTable.fnDeleteRow( anNSSelected[0] );
} );
/* Init the table */
oNSTable = $('#'+this.id).dataTable( {
"bLengthChange": true,
"bAutoWidth": false,
"bStateSave": true,
"bScrollInfinite": true,
//"bProcessing": true,
"bScrollCollapse": true,
"sScrollY": "200px",
"bFilter": false,
"bPaginate": false,
"bSort": false,
"sAjaxSource": '/main/ajaxNewSOTable'
}
);
} );
});
[/code]
Thanks!
Sadly since this is an intranet page, I can't expose it.
My table is initialised like this:
[code]
$(document).ready(function() {
$('.dataTableNoSearch').each(function(){
var oNSTable;
var giRedraw = false;
/* Add a click handler to the rows - this could be used as a callback */
$("#"+this.id+" tbody").click(function(event) {
$(oNSTable.fnSettings().aoData).each(function (){
$(this.nTr).removeClass('row_selected');
});
$(event.target.parentNode).addClass('row_selected');
});
/* Add a click handler for the delete row */
$('#deleteNS').click( function() {
var anNSSelected = fnGetSelected( oNSTable );
oNSTable.fnDeleteRow( anNSSelected[0] );
} );
/* Init the table */
oNSTable = $('#'+this.id).dataTable( {
"bLengthChange": true,
"bAutoWidth": false,
"bStateSave": true,
"bScrollInfinite": true,
//"bProcessing": true,
"bScrollCollapse": true,
"sScrollY": "200px",
"bFilter": false,
"bPaginate": false,
"bSort": false,
"sAjaxSource": '/main/ajaxNewSOTable'
}
);
} );
});
[/code]
Thanks!
This discussion has been closed.
Replies