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