Rendering a huge table

rashthedude

Hi there,

I'm loading active records from a rails app and generating a humongous table which is being rendered in under 4 minutes which is far from what I'm trying to do here. Any suggestions or change of strategies, partial loading, would Ajax make it faster, server side rendering?

Thanks,
Rashid

allan

The speed FAQ is relevant. Beyond that we would need a link to the page to understand what exactly is happening and be able to profile it.

Allan

rashthedude

Hi Allan,

Thanks for the reply. It's an internal tool that I can't currently link to and haven't set up anything that would also resemble it externally. Server side processing is not set up, so that's happening on the client side. 'pagingType' is set to 'full_numbers', 'deferRender' is true and 'orderClasses' is false. On my sandbox local copy of the side, 1866(which is approx. 1% of our production env) object keys are fully rendered in 4 seconds, which doesn't sound too good.

allan

1866 rows take 4 seconds!? Are you doing some DOM manipulation in a callback? Its really hard to say what's taking the time without being able to see it I'm afraid.

Allan

rashthedude

Hi Allan, I've turned to server side processing and here are my settings/markup but nothing is being displayed on the site apart from "Processing", could you give me a heads up maybe?

$(document).ready () ->
$('#table_id').DataTable({
'paging': false
'processing': true
'serverSide': true
'ajax': {
'url' : "/rediskeys/json_stuff"
# dataSrc: 'data'
'success': (data) ->
if data == null
data = [{'name': "rashid", "age": "33"}]
console.log(data)
else
console.log("here is the data " + data[0].data.name)
}
columns: [
{"data": "data.name"}, // tried both data.name
{data: "age"} // and just age
]
});

json looks like this: {"data" : {"name: "rashid", "age": "33"}}

html(haml):
%table{:id => "table_id", :class => "display"}
%thead
%tr
%th Name
%th Age

rashthedude

Even setting 'processing' to false just removes the message but nothing augmented to the table.

rashthedude

I have removed the 'success' method that was being invoked from within the ajax function and now this is being displayed on the page "No matching records found"

rashthedude

Worked at last!!!!!

allan

Thanks for the updates, good to hear. Any performance improvement?

Allan

rashthedude

Hi Allan,

It's has reduced the loading time to 70% less, which is fantastic news. But now I have a few issues like the search feature no longer working and "Showing 0 to 0 of 0 entries " showing on the bottom of the page. Any pointers?

rashthedude

And also, how do I make the returned rows clickable?

rashthedude

Managed to solve the 'showing 0 of 0', all I had to do is pass the recordsFiltered param.

allan

the search feature no longer working

Have you implemented search in the search side script?

And also, how do I make the returned rows clickable?

Use a jQuery click event handler. Example.

Allan

rashthedude

Hi Allan, thanks for the quick reply. I will look into the link you have sent me. And as for implementing search on the server side, how do I go about doing so?

rashthedude

Update: Managed to make the rows linkable, worked like a charm. Search feature inability is the last thing stopping me from releasing it.

rashthedude

So I'm now trying to add the scroller extension, enabled it and the error I'm getting is "Cannot read property 'appendChild' of undefined". Any clues?

rashthedude

Hey, managed to fix that also. Seems a lot smoother and faster overall

rashthedude

Scroller is not working as expected I believe. Isn't the idea for scroller to render a specific amount of rows and once the user starts scrolling down to render more and more? At the moment it just shows the loading indicator screen and the table becomes visible when all rows have been returned. What am I doing wrong?

rashthedude

Here's the config file:

$(document).ready () ->
$('#table_id').DataTable({
paging: true
searching: false
ordering: false
deferRender: true
lengthChange: false
processing: true
scroller:
{
displayBuffer: 9
loadingIndicator: true
}
scrollY: 550
serverSide: true
ajax: {
url: "/rediskeys/index"
dataSrc: 'data'
}
columns: columnsDef
});

columnsDef = [
{
"render": (data, type, row, meta) ->
return '<a href="rediskeys/' + data + '">' + data + '</a>'
}
]

allan

We'd need a link to a test case showing the issue to understand why it isn't working.

Allan