pagination for dynamic table in angularjs html

2019-07-27 22:08发布

问题:

I am new to angularjs. I want to add pagination to dynamically creating rows of table. after 3 rows added display pagination. when you click buy, it adds row but not paginating after 3 rows. I mentioned limit as 3 in controller ( script.js) please check plunker demo here http://plnkr.co/edit/aViHHoqLBSSiIVMh2KkH?p=preview

`<tr ng-repeat="sum in priceSumRow | filter : paginate">`
buySellApp.controller('buySellCtrl', ['$scope', function($scope) {
 $scope.totalItems = $scope.priceSumRow.length;
 $scope.currentPage = 1;
  $scope.numPerPage = 5;

  $scope.paginate = function(value) {
  var begin, end, index;
   begin = ($scope.currentPage - 1) * $scope.numPerPage;
     end = begin + $scope.numPerPage;
    index = $scope.priceSumRow.indexOf(value);
   return (begin <= index && index < end);
 };
 }]);

回答1:

There are couple of things you need to correct in your code.

  • You are defining the same controller buySellCtrl twice. once in your script.js and once in html itself, which is totally unnecessary.instead you can ,move the paginate code inside the script.js.
  • total-items for pagination should the length of the array priceSumRow like <pagination total-items="priceSumRow.length" ... instead of <pagination total-items="totalItems.length" ... which prevents a extra scope variable from the controller.
  • max-size="3" for pagination defines the max limit for the records to be displayed in a current page & items-per-page="numPerPage" defines definite number for records in a page but in your case you had defined numPerPage as 5

Note:I would suggest you to work in a strict mode use strict;, strict mode is a way to opt in to a restricted variant of JavaScript.

MDN : Strict mode makes several changes to normal JavaScript semantics. First, strict mode eliminates some JavaScript silent errors by changing them to throw errors. Second, strict mode fixes mistakes that make it difficult for JavaScript engines to perform optimizations: strict mode code can sometimes be made to run faster than identical code that's not strict mode. Third, strict mode prohibits some syntax likely to be defined in future versions of ECMAScript.

Working Demo @ Plunker