Scroller: Showing NaN #394

balazsbonis · 2015-08-04T16:27:18Z

Hi,
I have a solution that uses angular (1.3), jquery, and datatables (1.10). If I just want to show the table itself with normal pagination, it works like a marvel, I can sort, filter and do anything I want to.

However I wanted to introduce this infinity-scrolling plugin you have and that breaks the whole display. I even tried to use the exact same data json file, html, and js you had on your website as a sample, and it breaks on my machine, with the following symptoms:

When I load the page, the table columns are in place, but no data is shown, so the table itself seems to be empty
On the bottom of the page it shows "Showing NaN to 300 of 300 entries". I tried to use different json arrays, and the number changes accordingly
If I change the value in the dropdown list on top (that says x records per page), the table fills up, data shows. However as soon as I click on the scrollbar, or try to drag the table, it disappears again, and changing the dropdown value a second time after this will not make it re-appear.

Because of the last one, I guess that the data is getting loaded properly, just not showing. My code is a little bit different than yours, can you help me pinpoint what am I doing wrong, or is there a bug within the plugin concerning this?

Code:
HTML

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="jquery.dataTables.css" />
    <link rel="stylesheet" href="dataTables.scroller.css" />
    <script data-require="[email protected]" data-semver="2.1.1" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="jquery.dataTables.js"></script>
    <script type="text/javascript" data-require="[email protected]" data-semver="1.3.15" src="http://code.angularjs.org/1.3.15/angular.js"></script>
    <script type="text/javascript" src="https://rawgithub.com/l-lin/angular-datatables/dev/dist/angular-datatables.min.js"></script>
    <script src="angular-datatables.min.js"></script>
    <script src="dataTables.scroller.js"></script>
    <script src="angular-datatables.scroller.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-app="datatablesSampleApp">
    <div ng-controller="sampleCtrl">
      <table datatable="" dt-options="dtOptions" dt-columns="dtColumns"></table>
    </div>
  </body>

</html>

Controller:

(function() {
  'use strict';

  var app = angular.module('datatablesSampleApp', ['datatables', 'datatables.scroller']);

  app.factory('Device', function($q) {
    return {
      get: function() {
        var defer = $q.defer();
        defer.resolve([{
          DateOfReport: '2013-01-01',
          Entrances: 500
        }, {
          DateOfReport: '2014-01-01',
          Entrances: 400
        }, {
          DateOfReport: '2015-01-01',
          Entrances: 600
        }]);
        return defer.promise;
      }
    };
  }).controller('sampleCtrl', function($scope, DTOptionsBuilder, DTColumnBuilder, Device) {
    $scope.dtOptions = DTOptionsBuilder.fromFnPromise(function() {
      return Device.get();
    })
        .withDOM('lfrti')
        .withScroller()
        .withOption('deferRender', true)
        .withOption('scrollY', 200);

    $scope.dtColumns = [
      DTColumnBuilder.newColumn('DateOfReport').withTitle('Date Of Report'),
      DTColumnBuilder.newColumn('Entrances').withTitle('Entrances')
    ];
  }
);
})();

Thank you for your help!

l-lin · 2015-08-05T07:30:01Z

If I change the value in the dropdown list on top (that says x records per page), the table fills up, data shows. However as soon as I click on the scrollbar, or try to drag the table, it disappears again, and changing the dropdown value a second time after this will not make it re-appear.

I also reproduce this issue. However, since it's the scroller plugin, you do not need to display the length changing input control. I'll change the documentation accordingly.

As for the issue about data not showing and showing NaN at the bottom, I don't really know. You code seems to be correct 😟
Can you try to reproduce on a plnkr or something alike?

balazsbonis · 2015-08-05T08:58:38Z

So, I tried to reproduce the issue in plnkr, and ended up fixing it as well at the same time. The problem was actually a bit annoying: by mistake I have imported the 1.10.0-dev version of the jquery.datatables script. Changed that to a proper 1.10.7 (the recent one), and everything works like a charm. At least we all know this now ... 😄

l-lin added a commit that referenced this issue Aug 5, 2015

Remove the length input control from example #394

01547be

l-lin added the documentation label Oct 3, 2015

l-lin closed this as completed Oct 3, 2015

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Scroller: Showing NaN #394

Scroller: Showing NaN #394

balazsbonis commented Aug 4, 2015

l-lin commented Aug 5, 2015

Uh oh!

balazsbonis commented Aug 5, 2015

Uh oh!

Scroller: Showing NaN #394

Scroller: Showing NaN #394

Comments

balazsbonis commented Aug 4, 2015

l-lin commented Aug 5, 2015

Uh oh!

balazsbonis commented Aug 5, 2015

Uh oh!