angular-data-table
angular-data-table copied to clipboard
pagination doesn't work without scrollbar.
Hi,
table not loading when scrollbarV option set to false.

System.import('data-table').then(function(dt){ var module = angular.module('app', [ dt.default.name ]); module.controller('HomeController', function($scope, $http){ var data; $scope.options = { rowHeight: 50, headerHeight: 50, footerHeight: 50, columns: [ { name: "Name", prop: "name" }, { name: "Gender", prop: "gender" }, { name: "Company", prop: "company" } ], columnMode: 'force', scrollbarV: false, paging: { externalPaging: true } }; $scope.paging = function(offset, size){ $http.get('/demos/data/100.json').success(function(d) { $scope.options.paging.count = d.length; var set = d.splice(offset, size); if(!$scope.data){ $scope.data = set; } else { // only insert items i don't already have set.forEach(function(r, i){ var idx = i + (offset * size); $scope.data[idx] = r; }); } console.log('paging!', offset, size) }); }; });
});
Can you format your code please.
I have just added one line of code in paging.html. insert the below snippet into paging.html line no 69. scrollbarV: false,
are you using virtual dom for this table ?
yes, but not for scrollbarV false
Is this still a problem? can you make a demo?
I wanted to add to this because I think it's related. I have my report nested in a child state, which works fine if I set scrollbarV: false, but causes issues if I set it to true.
If I access the child state initially or refresh the page, it's fine, but if I access the child state from the parent, only the first row is populated. The rest of the grid is blank (though I can see all the data is loaded properly).
Interesting. Can one of you make a demo so I can see?
I'm still getting this bug. Codepen, forked from the repo's demo, upgraded to 0.5.2 and Angular 1.5.
By setting scrollbarV to false, the first page isn't loaded. In the pen, if you uncomment the line towards the bottom, you can manually load the first page. However, when you do that, then the rows are empty and the footer isn't displayed. Go ahead and also try commenting out scrollbarV and then the virtual paging works fine.
Is there another demo that uses non-virtual pagination?
Apparently you have to set the size of paging and remove the height of dt in the css, then it works
//options paging: { externalPaging: true, size: 5 }, scrollbarV: false
//css .dt { width: 75%; margin: 50px auto; }