Rendering the table is too much performace heavy - using scroller
Rendering the table is too much performace heavy - using scroller
Hello,
I'm using the scroller extension, and the table is rendering really poorly. Every scroll (even when there should be only 1 more row to be rendered) the render takes over an 1s. Once the render took about over 200s.
There is 750 records in total.
.DataTable({
fixedHeader: true,
processing: true,
serverSide: true,
serverWait: 500,
ajax: this._internals.url,
scroller: true,
deferRender: true,
scrollY: "100vh",
displayBuffer: 3,
columnDefs: this._temporary.columns
})
Data source:
draw: "1",
recordsTotal: 750,
recordsFiltered: 750,
data: [
{
0: "Column 1",
1: "Column 2",
2: "Column 3"
},
...
]
There is not much columns requested/displayed (< 15).
In the columnDefs is te problem I believe.
Each column has a render
property, which is causing this issue.
Render method that causes the issue:
render: function(data, type, row) {
return row[0] // Case #1
return "Test" // Case #2
}
The row parameter is of course the data itself of the row. So: ["Column 1", "Column 2", "Column 3", ...]
.
If I keep the return row[x]
, the rendering takes ages.
If I remove the return row[x]
and instead add return "Test"
the rendering is almost instant, so the problem is laying somewhere for returning the value in an array.
Do you use a different methods for rendering?
The method is there for future possible extra formating of the wanted columns. If I remove the method, it still takes the same amount of time.
Thank you
Answers
A few observations:
serverSide
- that's for when there are over 50-100k records.scroller.serverWait
but that would delay the request.If that doesn't help, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin