DataTables + Scoller - Render Issues on Chrome/Webkit Browsers

Frisch

I use DataTables w/Scroller extensively. I've hit an odd issue I can't seem to work around.

On some of my tables, specifically in webkit browsers (I see this issue on Chrome and Safari on a Mac), the top X rows (usually 20-30) will render, then I see the diagonal stripes, then the bottom rows render. I can see this on a table with 200 items, and also a table with 10,000 items. But I have other tables with 5000 and 20,000 items where this doesn't happen.

I think it's related to the number of columns I format. The only way I can eliminate the problem is if I delete everything in columnDef and leave it blank. Then, the table renders, albeit ugly.

The only potential correlation I can find is columns... the 10,000 item one has 45 columns (I use most data in a show/hide on the row) and the 173 has 28 columns (same drill). In both, eliminating any column formatting (mostly visible:false, but some formatting via render) makes it show. My tables that work have 12-15 columns.

On the 173 row table, if I scroll repeatedly up and down, it all renders in after about a minute. On the 10,000 one, it takes forever.

In terms of troubleshooting, I went through columnDef line by line to try to see if it was a particular function, but it seems to be quantity. The options i use in columnDef are: visible: false, render (to image format items), and one if/then statement in the render.

In Firefox/IE, tables render fine w/data.

Has anyone hit this and, if so, have a workaround that preserves infinite scroll and columnDefs?

Snippet of the ColumnDef format below:

"columnDefs": [
{  "targets": [ 5 ], "visible": false },
{  "targets": [ 6 ], "visible": false },
{  "targets": [ 7 ], "visible": false },
{  "targets": [ 10], "visible": false },
{  "targets": [ 11 ], "visible": false },
{  "targets": [ 12 ], "visible": false },
{  "targets": [ 13 ], "visible": false },
{  "targets": [ 14 ], "visible": false },
{  "targets": [ 15 ], "visible": false },
{  "targets": [ 16 ], "visible": false },
{  "targets": [ 17 ], "visible": false },
{  "targets": [ 19 ], "visible": false },
{  "targets": [ 20 ], "visible": false },
{  "targets": [ 21 ], "visible": false },
{  "targets": [ 22 ], "visible": false },
{  "targets": [ 23 ], "visible": false },
{  "targets": [ 24 ], "visible": false },
{  "targets": [ 25 ], "visible": false },
{  "targets": [ 26 ], "visible": false },
{  "targets": [ 28 ], "visible": false },
{  "targets": [ 29 ], "visible": false },
{  "targets": [ 30 ], "visible": false },
{  "targets": [ 31 ], "visible": false },
{  "targets": [ 32 ], "visible": false },
{  "targets": [ 34 ], "visible": false },
{  "targets": [ 35 ], "visible": false },
{  "targets": [ 36 ], "visible": false },
{  "targets": [ 37 ], "visible": false },
{  "targets": [ 38 ], "visible": false },
{  "targets": [ 39 ], "visible": false },
{  "targets": [ 40 ], "visible": false },
{  "targets": [ 41 ], "visible": false },
{  "targets": [ 46 ], "visible": false },
{ "render": function ( data, type, row ) { return '<div style="display:none;">' + data + '</div><img src="/img/stars/star'+ data +'.png" width=76 height=16>'; }, "targets": [10, 11, 20, 29] },
{ "render": function ( data, type, row ) { return '<img src="/img/stars/star'+row['overall_rating']+'.png" height=16>'; }, "targets": 8 },
{ "render": function ( data, type, row ) { return '<img src="/img/stars/star'+row['overall_fc_rating']+'.png" height=16>'; }, "targets": 9 },
{ "render": function ( data, type, row ) { return '<img src="/img/stars/star'+row['sc_overall_rating']+'.png" height=16>'; }, "targets": 18 },
{ "render": function ( data, type, row ) { return '<img src="/img/stars/star'+row['rollover_rating']+'.png" height=16>'; }, "targets": 27 },
{ "render": function ( data, type, row ) { return '<img src="/img/stars/star'+row['sp_crash_rating']+'.png" height=16>'; }, "targets": 33 }, 
{ "render": function ( data, type, row ) { 
if (row['recalls_in_db']) {  return '<a href="/recall.php?v='+row['id']+'" target="recalls">'+row['recalls_in_db']+'</a>';  } else {  return ''; }
],      

glenderson

Which version of dataTables are you currently using? I had a similar issue where if I included certain plugins, they would adversely affect performance because they were .css based for selections and Allan did fix that and put it out an update. The performance issue, however, was on IE, and not FireFox / Chrome.

Do you limit the number of rows being displayed? I would set length to no more than 100.

While "render" is a nice feature, it takes time. I would put the image right into the data array, straight HTML, just escape any quotes to free up javascript. You would do that in your ajax module.

You also have tons of hidden columns, are they actually used? Drop them if they are always hidden.

Frisch

Hi @glenderson... thanks for replying. What I'm using is as follows:

/1.11.1/jquery.min.js
bootstrap.min.js
bootstrap.tooltip.js-
/1.10.10/js/jquery.dataTables.min.js
jquery.cookie.js
js/dataTables.tableTools.js
bootstrap-switch.min.js
/1.4.0/js/dataTables.scroller.min.js
/1.4.5/numeral.min.js

Understood on the columns. I actually feed that data into a child row for each. I actually tried feeding the images directly... no luck unfortunately.

I can understand if this was payload size, but that's what's throwing me. The above example is 9,135 rows. But this also occurs on 173 rows. But another table with 23,000 rows renders fine and can keep up with scrolling. The 9,135 one above stalls... it never finishes loading. Removed the graphics as well as part of the tests, no luck.

It's in a 500 pixel deep window... no more than 20 rows displays at once

I've tried removing the child rows as well, no luck there.

Apologies, but more than happy to feed any info about the situation

Frisch

@glenderson... thank you. You pointed me in the right direction on this one.

The solve: set the row height. The computation of the number of rows to display must have been throwing it (the combination of the # of columns? Unknown).

Second I wired it to rowHeight: 35, works like a charm.

Thank you!