Paging issue

gauthee

Hi,

We have been using datatables throughout our newly developed app. Now, we have observed that when using live data the tables take more time than expected to render and sometimes even break (when greater than 500 records). Our implementation is as follows -
We just have table tag with an id
We have template (.htm) created using trinpath templates and bind the json data to this template.
The template is then added to the table tag.
Datatable is applied to the table.

Now as we observed issues can we make the rendering deferred or make the paging, sorting client specific?

var tm = new TemplateManager({
templateName: 'LabList',
templateUri: 'Path/LabListTemplate.htm',
parameters: [],
containerElement: "#tblLabList1",
eventHandlers: {
onRendered: function () {
$('#tblLabList1').dataTable({
"sPaginationType": "input",
"aaSorting": [[0, "asc"]],
"aoColumnDefs": [{ "bSortable": false, "aTargets": [5] }],
"bDestroy": true
});
}
});

Thanks,
Gautham

allan

Deferred rendering is only useful if you use Ajax loaded data or Javascript sourced data - it looks like you are using DOM sourced data (but without a test case I can't really say).

Allan

gauthee

Hi Alan,

Thanks for your reply. The full code is -

function LoadTemplate() {
AjaxGet(ServiceUrls.LabServiceLabList + currentUser, null, LabListSuccess, OnAjaxError);
}

function LabListSuccess(response) {
var tm = new TemplateManager({
templateName: 'LabList',
templateUri: 'Path/LabListTemplate.htm',
parameters: [],
containerElement: "#tblLabList1",
eventHandlers: {
onRendered: function () {
$('#tblLabList1').dataTable({
"sPaginationType": "input",
"aaSorting": [[0, "asc"]],
"aoColumnDefs": [{ "bSortable": false, "aTargets": [5] }],
"bDestroy": true
});
tm.Render(response, null, null);
}
});
}

So as you said, once i get the response i shall make my dom ready and this is appended to the table we have and later we apply datatable plugin to the same. As you see datatable would not be knowing about the ajax source at all. With this model what best can we do to have sorting, paging on demand?

Thanks,
Gautham

allan

This is basically the same as a DOM sourced table, since, as you say, DataTables knows nothing about the Ajax source. So there is no method to do append extra data, since presumably the data is already there? The closest you might get is to use fnAddData to add new data after the initialisation as completed, but you can add TR elements that way (in 1.9.4 - you will be able to in 1.10).

Allan