Issue replacing table data when scrollY enabled

andrew_k

I am using DataTables 1.10.9 with Bootstrap 3 in an AngularJS SPA. On a page on my site I initialise a table as follows:

 var tableConfig = {
      'data': null,
      'destroy': true,
      'scrollY': 600,
      'scrollCollapse': true,
      'columns': [ ....columns ...],
      'order': 'order': [0, 'desc'],
      'columnDefs': [
            {
                'render': function (itemData, type, row) {
                    return type === 'display' ? row.time : itemData;
                }, 'targets': 0
            }
        ]
 };

The time property simply returns the numeric value for a Javascript date. The rows are sorted by date, hence the addition of the render column definition. The table is initially empty. There is no paging, the table scrolls vertically through the data. The user can select options which will then populate the table with data via a call to clear() then rows.add(). However if a reasonable number of rows are added, say 150 or more, when you scroll the table large areas with diagonal blue and white stripes appear, and no data. I've spent an age changing parameters trying to find the source of this but to no avail. I have even tried recreating the table but the result is the same. Note that if a large amount of data is added when the page initially loads this doesn't occur. As well, if I set 'paging' to false this fixes the problem. However data tables pops up with a Javascript alert saying 'Pagination must be enabled for scroller'.

Any help or advice hugely appreciated,

andrew_k

Okay, I found the solution to this. I had downloaded DataTables using the excellent download builder. I added the Scroller extension to my download, assuming it was required for scrolling. Turns out it isn't. I think this is only required if you need to delay rendering with large data sets. Anyway, removing this extension fixed the problem. I have also left paging set to false.