Paging issue
Paging issue
gauthee
Posts: 2Questions: 0Answers: 0
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
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
This discussion has been closed.
Replies
Allan
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