Jquery Data table is slow

swethag

I am using data table withe client side pagination. I have 1500 records, and also some images. My problem is its very slow. What should i do to increase the speed.

allan

See: http://datatables.net/faqs#speed

Allan

swethag

i am using datatable 1.7.2.
this is what i am calling onload of document
$(document).ready(function() {
$("#patientStoryLst").dataTable({
"sPaginationType" : "full_numbers",
"iDisplayLength " : 5,
"bJQueryUI" : true,
"sDom" : '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>'

});

});

swethag

Thanks Allan for the reply. If i add "bSortClasses": false sorting on column will not work rite? I want the sorting on my column.
I have only one column in my datatable.

swethag

I found out why it is slow. i have 1500 images , becuase i am doing clientside pagination its getting all the images initially. Is there a way get only the images which i am showing in the page in clientside pagination

swethag

i am doing client side pagination. I have 1500 rows to display, i am displaying 10 per page. each row has a image to display. Right now its getting all the rows along with images onload of the page and then displaying the pagination. I have performance problem due to large number of images. so i want to set the img src dynamically to those 10 rows which i am displaying in the first page and when we click on next button i want to set the img src again for the next 10 records. I know how to set the img src dynamically in the jquery. But the problem is how to get those 10 rows which i am displaying in the current page. Allan can you please help me in finding out?

koosvdkolk

I suggest you use fnRowCallback, which will give you iDisplayIndexFull: http://live.datatables.net/ewewix/edit#javascript,html,live

swethag

I have gone thru the documentation, i think fnRowCallBack function should work for me. Will this function applies to only those rows displayed currently ,not to all the rows?

As i told previously i have only one column, in that column i have 4 divs. 3 divs show the data and the 4th div is to display the img(different img for each row, some rows may not have img). My question is how to access the div of img in fnrowcallback and assign the src value to it.

swethag

Thanks koosvdkolk for the reply... Can you please read my prev comment . Any kind of help is appriciated..

allan

> I have gone thru the documentation, i think fnRowCallBack function should work for me. Will this function applies to only those rows displayed currently ,not to all the rows?

That is correct yes. fnRowCallback is used when a row is actually displayed.

The other option is to use fnDrawCallback which you would be able to use to modify the rows and get the images.

Finally, I would perhaps suggest you look at using Ajax sourced data with deferred loading (you will need to update your DataTables library) since this lazy loading of images will then automatically be done for you.

Allan

swethag

Thanks Allan for the reply. Client side pagination is my manager decision, so i can not change it to server side. I know if it is server side then performance problem wont be there.

Let me work on fnRowCallBack to set the image. I will update you. Once again Thanks

swethag

Allan i am storing the src value for each row image in the second column. and assigning thru fnrowcallback , and making it invisble. But src value is "aData[1]", its not getting the actual value stored in the second column, please let me know where i am doing....
$(document).ready(function() {
$("#patientStoryLst").dataTable({
"sPaginationType" : "full_numbers",
"iDisplayLength " : 5,
"bJQueryUI" : true,
"sDom" : '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>',
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {


$('td img',nRow).attr("src",'aData[1]');

},
"aoColumnDefs": [{ "bVisible": false, "aTargets": [ 1 ]}]

});


});

koosvdkolk

Maybe remove quotes from 'aData[1]'?

[code]
$('td img',nRow).attr("src",'aData[1]');
[/code]

swethag

Hi i got it worked now. I changed 'aData[1]' to aData[1], then its setting the src value. Thank you Allan for the Gr8 Data Table.

swethag

Thanks koosvdkolk .... yes you are correct i shd remove the quotes.