angular-data-table icon indicating copy to clipboard operation
angular-data-table copied to clipboard

pagination doesn't work without scrollbar.

Open shreeram opened this issue 10 years ago • 9 comments

Hi,

table not loading when scrollbarV option set to false.

image

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) }); }; });

  });

shreeram avatar Jun 25 '15 09:06 shreeram

Can you format your code please.

amcdnl avatar Jul 13 '15 14:07 amcdnl

I have just added one line of code in paging.html. insert the below snippet into paging.html line no 69. scrollbarV: false,

shreeram avatar Jul 13 '15 15:07 shreeram

are you using virtual dom for this table ?

shreeram avatar Jul 24 '15 16:07 shreeram

yes, but not for scrollbarV false

amcdnl avatar Jul 24 '15 16:07 amcdnl

Is this still a problem? can you make a demo?

amcdnl avatar Sep 15 '15 16:09 amcdnl

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).

treyhoover avatar Sep 28 '15 19:09 treyhoover

Interesting. Can one of you make a demo so I can see?

amcdnl avatar Sep 28 '15 19:09 amcdnl

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?

mheppner avatar Jun 29 '16 00:06 mheppner

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; }

Gjoot avatar Jun 15 '17 12:06 Gjoot