Scroller: Showing NaN #394
Description
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="jquery@2.1.1" 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="angular.js@1.3.15" 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!