Redraw table is appending data

newbie

Hello

I have a server side proccessed datatable and I just want to reload the data keeping the pagination and sort options. So I've read I have to use fnDraw function.

I've tried to do
[code]
$table.fnDraw(true);
[/code]

but with this I'm receiving the new data from the server and it's being appended to the last row of the table. I mean the old data hasn't been cleared.

I've tried to delete the old data with fnClearTable but with no succeed.
[code]
$table.fnClearTable();
$table.fnDraw(true);
[/code]

Can anyone tell me the way to do this?

Thanks.

newbie

The problem is that I am not able to delete the rows either. If I call fnClearTable() the table is not losing its rows. I've tried fnDeleteRow(0) and the datatable is increasing because it keeps the old data adding the new one (and my json response only has one row). How can I remove the previous rows?
Thanks.

GregP

I don't think fnDraw expects "true" as an argument. Here's the statement I use to redraw a table from scratch:

$("#example").dataTable().fnDraw();

Assuming your $table object is a valid object (the same target as the initialization), it will work the same:

$table.dataTable().fnDraw();

If Allan or anyone else knows a better way, I'm all ears, too. No real performance issues with the way I'm currently doing it, but I'm always happy to make it even better. ;-)

allan

Yup fnDraw() like that should be all that is needed to do a refresh of the data and nuke anything that is currently there with server-side processing. If that isn't doing it - can you post your initialisation and calling code please?

Allan

newbie

It's weird, I've tried what you've said and is still happenning the same
I provide you with the code I'm using:

[code]



<%-- id --%>
Field1
Field2
Field3
Field4
Field5
Field6
<%-- hidden status --%>
<%-- place for button --%>






[/code]

and for the initialization of the table:

[code]
var $table = $("#mytable").dataTable({
"oLanguage": {
"sUrl": "/resources/js/datatables_lang/${pageContext.response.locale}.txt"
},
"bServerSide": true,
"sAjaxSource": "",
"bFilter": false,
"bSort": false,
"iDisplayLength": 100,
"iScrollLoadGap": 100,
"bScrollInfinite": true,
"sScrollY": ($(window).height() - 50) + "px", <%-- use with bScrollInfinite = true --%>
"aoColumnDefs": [
{"aTargets": [0], "sName": "id", "bVisible": false},
{"aTargets": [1], "sName": "field1"},
{"aTargets": [2], "sName": "field2"},
{"aTargets": [3], "sName": "field3"},
{"aTargets": [4], "sName": "field4"},
{"aTargets": [5], "sName": "field5"},
{"aTargets": [6], "sName": "field6"},
{"aTargets": [7], "sName": "status", "bVisible": false},
{"aTargets": [8], "sName": "id", "fnRender": linksRenderer, "bUseRendered": false, "sClass": "nowrap"}<%--this renderer just returns some links depending on the id value --%>

],
"fnServerData": function ( sSource, aoData, fnCallback ) {
$.getJSON( sSource, aoData, function (json) {
<%-- Do whatever additional processing you want on the callback, then tell DataTables --%>
fnCallback(json)
} );
}
});

[/code]

And I've checked the json with Firebug and I'm seeeing that the number of the returned items as their data is OK. The problem is that the old data is not removed from the datatable.

GregP

I'm a bit out of my depth, but you're definitely doing something differently than me. The way I do it, $table wouldn't be the entire initialization, it would just be the jQuery selector for the table that needs to be updated.

In the document ready function, something like:

var $table = $('#example');
$table.dataTable( { my initialization } );

Then each time I want to update it, I simply call $table.dataTable().fnDraw();

In my case, I do it with a brute-force butt-simple Interval for polling:

var pollingInterval = setInterval('$table.dataTable().fnDraw()',2000);

You don't want to re-initialize the whole table. You just want to redraw it. I couldn't intelligently say why your method is breaking, all I can do is share my working example in the hopes that it helps. ;-)

newbie

I'm not reinitiating the datatable. I'm doing in the way you said:
[code]
$("#mytable").dataTable().fnDraw();
[/code]

May there be any problems because I have hidden columns?

newbie

I don't know exactly what I've changed but now it's working with the same call. I think I must be having a javascript in another place and firebug wasn't saying anything. Thanks to everyone.

GregP

Glad it's working now! Just for efficiency's sake, though, it's worth mentioning that your $table object contains the full initialization, which is what I meant. Looking at your code:

var $table = $("#mytable").dataTable({ your full initialization });

is different than

var $table = $("#mytable");
$table.dataTable({ your full initialization });

During the initializing phase, the number of calculations is virtually identical. It's when you redraw that I'm not sure about, because the way you're doing it, you are calling fnDraw() on a full initialization object (your $table is an initialization). Which in turn may end up with the same results, mind you, though I suspect that it's computationally more expensive. Haven't tried it!

Greg