NgRepeat How to limit the maximum visible buttons per pagination
How do I make the pagination limit, for example, the maximum pagination should be 5 even if the elements are larger than that.
var app = angular.module('App', []);
app.controller('Controller', function($scope) {
$scope.editmode = false;
// limit page items
$scope.currentpage = 0;
$scope.pageSize = 5;
$scope.pagelist = function(start, end) {
var ret = [];
start = $scope.totalpages();
if (!end) {
end = start;
start = 0;
}
for (var i = start; i < end; i++) {
ret.push(i);
}
return ret;
};
$scope.prevlist = function() {
if ($scope.currentpage > 0) {
$scope.currentpage--;
}
};
$scope.nextlist = function() {
if ($scope.currentpage <= ($scope.items.length / $scope.pageSize - 1)) {
$scope.currentpage++;
}
};
$scope.showlist = function(argument) {
$scope.currentpage = argument;
};
$scope.totalpages = function(argument) {
return Math.ceil($scope.items.length / $scope.pageSize);
};
$scope.items = [{
product: '1 Lorem ipsum',
date: '12-March-2013',
rate: 12.35,
member: 1,
status: 'approved'
}, {
product: '2 dolor sit',
date: '1-January-2011',
rate: 60.54,
member: 3,
status: 'pending'
}, {
product: '3 consectetur',
date: '12-December-2014',
rate: 12.56,
member: 1,
status: 'pending'
}, {
product: '4 adipisicing',
date: '14-November-2014',
rate: 0.99,
member: 1,
status: 'pending'
}, {
product: '5 do eiusmod',
date: '2-November-2014',
rate: 4.00,
member: 2,
status: 'approved'
}, {
product: '6 magna aliqua',
date: '16-February-2014',
rate: 6.54,
member: 2,
status: 'approved'
}, {
product: '7 exercitation',
date: '30-November-2014',
rate: 60.32,
member: 2,
status: 'pending'
}, {
product: '8 consequat',
date: '5-May-2014',
rate: 5.12,
member: 1,
status: 'denied'
}, {
product: '9 reprehenderit',
date: '12-April-2014',
rate: 8.99,
member: 5,
status: 'approved'
}, {
product: '10 voluptate',
date: '18-November-2014',
rate: 34.54,
member: 4,
status: 'approved'
}, {
product: '10 ugiat nulla',
date: '28-June-2014',
rate: 55.12,
member: 1,
status: 'pending'
}, {
product: '11 occaecat cupidatat',
date: '21-June-2014',
rate: 99.54,
member: 3,
status: 'pending'
}, {
product: '12 proident',
date: '31-December-2014',
rate: 15.50,
member: 2,
status: 'denied'
}, {
product: '13 culpa qui',
date: '1-November-2014',
rate: 34.05,
member: 1,
status: 'pending'
}, {
product: '14 Lorem ipsum',
date: '12-March-2013',
rate: 12.35,
member: 1,
status: 'approved'
}, {
product: '15 dolor sit',
date: '1-January-2011',
rate: 60.54,
member: 3,
status: 'pending'
}, {
product: '16 consectetur',
date: '12-December-2014',
rate: 12.56,
member: 1,
status: 'pending'
}, {
product: '17 adipisicing',
date: '14-November-2014',
rate: 0.99,
member: 1,
status: 'denied'
}, {
product: '18 do eiusmod',
date: '2-November-2014',
rate: 4.00,
member: 2,
status: 'approved'
}, {
product: '19 magna aliqua',
date: '16-February-2014',
rate: 6.54,
member: 2,
status: 'approved'
}, {
product: '20 exercitation',
date: '30-November-2014',
rate: 60.32,
member: 2,
status: 'pending'
}, {
product: '21 consequat',
date: '5-May-2014',
rate: 5.12,
member: 1,
status: 'denied'
}, {
product: '22 reprehenderit',
date: '12-April-2014',
rate: 8.99,
member: 5,
status: 'approved'
}, {
product: '23 voluptate',
date: '18-November-2014',
rate: 34.54,
member: 4,
status: 'approved'
}, {
product: '24 ugiat nulla',
date: '28-June-2014',
rate: 55.12,
member: 1,
status: 'pending'
}, {
product: '25 occaecat cupidatat',
date: '21-June-2014',
rate: 99.54,
member: 3,
status: 'pending'
}, {
product: '26 proident',
date: '31-December-2014',
rate: 15.50,
member: 2,
status: 'denied'
}, {
product: '27 culpa qui',
date: '1-November-2014',
rate: 34.05,
member: 1,
status: 'pending'
}, {
product: '28 Lorem ipsum',
date: '12-March-2013',
rate: 12.35,
member: 1,
status: 'approved'
}, {
product: '29 dolor sit',
date: '1-January-2011',
rate: 60.54,
member: 3,
status: 'pending'
}, {
product: '30 consectetur',
date: '12-December-2014',
rate: 12.56,
member: 1,
status: 'pending'
}, {
product: '31 adipisicing',
date: '14-November-2014',
rate: 0.99,
member: 1,
status: 'approved'
}, {
product: '32 do eiusmod',
date: '2-November-2014',
rate: 4.00,
member: 2,
status: 'approved'
}, {
product: '33 magna aliqua',
date: '16-February-2014',
rate: 6.54,
member: 2,
status: 'denied'
}, {
product: '34 exercitation',
date: '30-November-2014',
rate: 60.32,
member: 2,
status: 'pending'
}, {
product: '35 consequat',
date: '5-May-2014',
rate: 5.12,
member: 1,
status: 'denied'
}, {
product: '36 reprehenderit',
date: '12-April-2014',
rate: 8.99,
member: 5,
status: 'approved'
}, {
product: '37 voluptate',
date: '18-November-2014',
rate: 34.54,
member: 4,
status: 'approved'
}, {
product: '38 ugiat nulla',
date: '28-June-2014',
rate: 55.12,
member: 1,
status: 'pending'
}, {
product: '39 occaecat cupidatat',
date: '21-June-2014',
rate: 99.54,
member: 3,
status: 'pending'
}, {
product: '40 proident',
date: '31-December-2014',
rate: 15.50,
member: 2,
status: 'denied'
}, {
product: '42 culpa qui',
date: '1-November-2014',
rate: 34.05,
member: 1,
status: 'pending'
}, {
product: '43 culpa qui',
date: '1-November-2014',
rate: 34.05,
member: 1,
status: 'denied'
}, {
product: '44 mollit anim',
date: '3-November-2014',
rate: 45.00,
member: 4,
status: 'approved'
}];
});
app.filter('startFrom', function() {
return function(input, start) {
return input.slice(start);
};
});
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container-fluid" ng-app="App">
<div class="row" ng-controller="Controller">
<div class="col-md-12">
<div class="box">
<div class="row">
<div class="col-md-6">
Records per page
<select class="selectpicker" ng-model="pageSize">
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
Search
<input type="search" class="form-control input-sm" placeholder="Search item" ng-model="searchitem" style="display: inline-block; width: 145px;">
</div>
</div>
<div class="table-responsive">
<table class="table table-striped table-hover checkbox-list" style="margin-top:10px;">
<thead>
<tr>
<th><i class="fa fa-square-o fa-lg"></i>
</th>
<th>Product</th>
<th>Date</th>
<th>Amount</th>
<th>Member</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tfoot>
<td colspan="7">
<div class="row">
<div class="col-md-4 text-left">
Page <kbd>{{currentpage+1}}/{{totalpages()}}</kbd> Showing <kbd>{{(currentpage*pageSize)+1}}</kbd> to <kbd>{{(currentpage+1)*pageSize}}</kbd> of <kbd>{{items.length}}</kbd> items
</div>
<div class="col-md-8 text-right">
<nav>
<ul id="mess-pagination" class="pagination pagination-sm">
<li ng-class="{disabled : currentpage == 0}">
<a ng-click="prevlist(currentpage);">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li ng-repeat="displaypage in pagelist()" ng-class="{active: displaypage == currentpage}">
<a ng-click="showlist(displaypage)">{{displaypage+1}}</a>
</li>
<li ng-class="{'disabled' : currentpage >= items.length/pageSize - 1}">
<a ng-click="nextlist()">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</td>
</tfoot>
<tbody>
<tr ng-repeat="item in items | startFrom:currentpage*pageSize | limitTo:pageSize | filter:searchitem">
<td>
<label class="check-lab">
<input type="checkbox">
<span class="fa fa-lg"></span>
</label>
</td>
<td>
<span ng-show="editmode == false">{{item.product}}</span>
<input type="text" ng-model="item.product" ng-show="editmode">
</td>
<td>
<span ng-show="editmode == false">{{item.date}}</span>
<input type="date" ng-model="item.date" ng-show="editmode">
</td>
<td>
<span ng-show="editmode == false">{{item.rate | currency:"£"}}</span>
<input type="number" ng-model="item.rate" ng-show="editmode">
</td>
<td>
<span ng-repeat="user in users" ng-if="user.id === item.member" ng-show="editmode == false">{{user.firstname}} {{user.lastname}}</span>
<select ng-show="editmode" ng-model="users[item.member-1].id" ng-options="user.id as user.lastname for user in users"></select>
</td>
<td><span class="label" ng-class="{'approved':'label-success', 'pending':'label-default', 'denied':'label-danger'}[item.status]">{{item.status}}</span>
</td>
<td>
<div class="btn-group btn-group-xs" role="group">
<button type="button" class="btn btn-default" ng-hide="editmode" ng-click="editmode = !editmode">
<i class="fa fa-pencil"></i>
</button>
<button type="button" class="btn btn-default" ng-hide="editmode" ng-click="deleteitem($index)">
<i class="fa fa-trash-o"></i>
</button>
<button type="button" class="btn btn-default" ng-show="editmode" ng-click="editmode = !editmode">
<i class="fa fa-save"></i>
</button>
<button type="button" class="btn btn-default" ng-show="editmode" ng-click="editmode = !editmode">
<i class="fa fa-times"></i>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
+3
source to share
No one has answered this question yet
Check out similar questions: