Skip to content

Commit f1789d3

Browse files
Zhuk, AlexanderZhuk, Alexander
authored andcommitted
switching to local version of pagination
1 parent c64e7d3 commit f1789d3

File tree

8 files changed

+259
-33
lines changed

8 files changed

+259
-33
lines changed

demo/app.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
angular.module('myApp', ['dataGrid'])
1+
angular.module('myApp', ['dataGrid', 'ui.bootstrap.pagination'])
22
.controller('myAppController', ['$scope', 'myAppFactory', function ($scope, myAppFactory) {
33

44
$scope.getData = function () {

index.html

Lines changed: 6 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ <h1>Angular Data Grid</h1>
3333
class="form-control"
3434
is-open="dateFromOpened"
3535
ng-click="dateFromOpened = true"
36-
datepicker-popup="shortDate"
36+
uib-datepicker-popup="shortDate"
3737
filter-by="placed"
3838
filter-type="dateFrom"
3939
ng-model="dateFrom"
@@ -59,7 +59,7 @@ <h1>Angular Data Grid</h1>
5959
is-open="dateToOpened"
6060
ng-click="dateToOpened = true"
6161
min-date="dateFrom"
62-
datepicker-popup="shortDate"
62+
uib-datepicker-popup="shortDate"
6363
filter-by="placed"
6464
filter-type="dateTo"
6565
ng-model="dateTo"
@@ -86,7 +86,7 @@ <h1>Angular Data Grid</h1>
8686
</strong>
8787

8888
</div>
89-
<!--<div grid-pagination max-size="5" boundary-links="true" class="pagination-sm"></div>-->
89+
<div grid-pagination max-size="5" boundary-links="true" class="pagination-sm"></div>
9090
<table class="table table-hover table-leo table-condensed table-bordered table-striped">
9191
<thead>
9292
<tr>
@@ -145,30 +145,14 @@ <h1>Angular Data Grid</h1>
145145
</div>
146146
</div>
147147
</div>
148-
149-
<h1>Flat JSON format for data tables</h1>
150-
151-
<div class="row">
152-
<table class="table table-hover">
153-
<th>
154-
First Name
155-
</th>
156-
<th>
157-
Second Name
158-
</th>
159-
<tr ng-repeat="item in items">
160-
<td>{{item.id}}</td>
161-
<td>{{item.title}}</td>
162-
</tr>
163-
</table>
164-
</div>
165-
166148
</div>
167149
</body>
168150

169151
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
170152
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
171-
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap.min.js"></script>
153+
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js"></script>-->
154+
<script src="src/js/paging.js"></script>
155+
<script src="src/js/pagination.js"></script>
172156
<script src="src/js/dataGrid.js"></script>
173157
<script src="demo/app.js"></script>
174158

src/html/gridPaginator.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div pagination ng-if="paginationOptions.totalItems > paginationOptions.itemsPerPage"
1+
<div uib-pagination pagination ng-if="paginationOptions.totalItems > paginationOptions.itemsPerPage"
22
total-items="paginationOptions.totalItems"
33
ng-model="paginationOptions.currentPage"
44
ng-change="reloadGrid()"

src/js/dataGrid.js

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -322,13 +322,13 @@ angular.module('dataGrid', [])
322322
}
323323
}
324324
}])
325-
//.directive('gridPagination', function () {
326-
// return {
327-
// replace: true,
328-
// scope: true,
329-
// templateUrl: 'src/html/gridPaginator.html'
330-
// };
331-
//})
325+
.directive('gridPagination', function () {
326+
return {
327+
replace: true,
328+
scope: true,
329+
templateUrl: 'src/html/gridPaginator.html'
330+
};
331+
})
332332
.directive('gridItemPerPage', ['$compile', function ($compile) {
333333
return {
334334
replace: true,
@@ -430,7 +430,7 @@ angular.module('dataGrid').run(['$templateCache', function ($templateCache) {
430430
'use strict';
431431

432432
$templateCache.put('src/js/directives/modules/dataGrid/gridPaginator.html',
433-
"<div pagination ng-if=\"paginationOptions.totalItems > paginationOptions.itemsPerPage\" total-items=\"paginationOptions.totalItems\" ng-model=\"paginationOptions.currentPage\" ng-change=\"reloadGrid()\" items-per-page=\"paginationOptions.itemsPerPage\"></div>"
433+
"<div uib-pagination ng-if=\"paginationOptions.totalItems > paginationOptions.itemsPerPage\" total-items=\"paginationOptions.totalItems\" ng-model=\"paginationOptions.currentPage\" ng-change=\"reloadGrid()\" items-per-page=\"paginationOptions.itemsPerPage\"></div>"
434434
);
435435

436436
}]);

src/js/gridPaginator.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div pagination ng-if="paginationOptions.totalItems > paginationOptions.itemsPerPage"
1+
<div uib-pagination ng-if="paginationOptions.totalItems > paginationOptions.itemsPerPage"
22
total-items="paginationOptions.totalItems"
33
ng-model="paginationOptions.currentPage"
44
ng-change="reloadGrid()"

src/js/pagination.js

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
angular.module('ui.bootstrap.pagination', ['ui.bootstrap.paging'])
2+
.controller('UibPaginationController', ['$scope', '$attrs', '$parse', 'uibPaging', 'uibPaginationConfig', function($scope, $attrs, $parse, uibPaging, uibPaginationConfig) {
3+
var ctrl = this;
4+
// Setup configuration parameters
5+
var maxSize = angular.isDefined($attrs.maxSize) ? $scope.$parent.$eval($attrs.maxSize) : uibPaginationConfig.maxSize,
6+
rotate = angular.isDefined($attrs.rotate) ? $scope.$parent.$eval($attrs.rotate) : uibPaginationConfig.rotate,
7+
forceEllipses = angular.isDefined($attrs.forceEllipses) ? $scope.$parent.$eval($attrs.forceEllipses) : uibPaginationConfig.forceEllipses,
8+
boundaryLinkNumbers = angular.isDefined($attrs.boundaryLinkNumbers) ? $scope.$parent.$eval($attrs.boundaryLinkNumbers) : uibPaginationConfig.boundaryLinkNumbers;
9+
$scope.boundaryLinks = angular.isDefined($attrs.boundaryLinks) ? $scope.$parent.$eval($attrs.boundaryLinks) : uibPaginationConfig.boundaryLinks;
10+
$scope.directionLinks = angular.isDefined($attrs.directionLinks) ? $scope.$parent.$eval($attrs.directionLinks) : uibPaginationConfig.directionLinks;
11+
12+
uibPaging.create(this, $scope, $attrs);
13+
14+
if ($attrs.maxSize) {
15+
$scope.$parent.$watch($parse($attrs.maxSize), function(value) {
16+
maxSize = parseInt(value, 10);
17+
ctrl.render();
18+
});
19+
}
20+
21+
// Create page object used in template
22+
function makePage(number, text, isActive) {
23+
return {
24+
number: number,
25+
text: text,
26+
active: isActive
27+
};
28+
}
29+
30+
function getPages(currentPage, totalPages) {
31+
var pages = [];
32+
33+
// Default page limits
34+
var startPage = 1, endPage = totalPages;
35+
var isMaxSized = angular.isDefined(maxSize) && maxSize < totalPages;
36+
37+
// recompute if maxSize
38+
if (isMaxSized) {
39+
if (rotate) {
40+
// Current page is displayed in the middle of the visible ones
41+
startPage = Math.max(currentPage - Math.floor(maxSize / 2), 1);
42+
endPage = startPage + maxSize - 1;
43+
44+
// Adjust if limit is exceeded
45+
if (endPage > totalPages) {
46+
endPage = totalPages;
47+
startPage = endPage - maxSize + 1;
48+
}
49+
} else {
50+
// Visible pages are paginated with maxSize
51+
startPage = (Math.ceil(currentPage / maxSize) - 1) * maxSize + 1;
52+
53+
// Adjust last page if limit is exceeded
54+
endPage = Math.min(startPage + maxSize - 1, totalPages);
55+
}
56+
}
57+
58+
// Add page number links
59+
for (var number = startPage; number <= endPage; number++) {
60+
var page = makePage(number, number, number === currentPage);
61+
pages.push(page);
62+
}
63+
64+
// Add links to move between page sets
65+
if (isMaxSized && maxSize > 0 && (!rotate || forceEllipses || boundaryLinkNumbers)) {
66+
if (startPage > 1) {
67+
if (!boundaryLinkNumbers || startPage > 3) { //need ellipsis for all options unless range is too close to beginning
68+
var previousPageSet = makePage(startPage - 1, '...', false);
69+
pages.unshift(previousPageSet);
70+
}
71+
if (boundaryLinkNumbers) {
72+
if (startPage === 3) { //need to replace ellipsis when the buttons would be sequential
73+
var secondPageLink = makePage(2, '2', false);
74+
pages.unshift(secondPageLink);
75+
}
76+
//add the first page
77+
var firstPageLink = makePage(1, '1', false);
78+
pages.unshift(firstPageLink);
79+
}
80+
}
81+
82+
if (endPage < totalPages) {
83+
if (!boundaryLinkNumbers || endPage < totalPages - 2) { //need ellipsis for all options unless range is too close to end
84+
var nextPageSet = makePage(endPage + 1, '...', false);
85+
pages.push(nextPageSet);
86+
}
87+
if (boundaryLinkNumbers) {
88+
if (endPage === totalPages - 2) { //need to replace ellipsis when the buttons would be sequential
89+
var secondToLastPageLink = makePage(totalPages - 1, totalPages - 1, false);
90+
pages.push(secondToLastPageLink);
91+
}
92+
//add the last page
93+
var lastPageLink = makePage(totalPages, totalPages, false);
94+
pages.push(lastPageLink);
95+
}
96+
}
97+
}
98+
return pages;
99+
}
100+
101+
var originalRender = this.render;
102+
this.render = function() {
103+
originalRender();
104+
if ($scope.page > 0 && $scope.page <= $scope.totalPages) {
105+
$scope.pages = getPages($scope.page, $scope.totalPages);
106+
}
107+
};
108+
}])
109+
110+
.constant('uibPaginationConfig', {
111+
itemsPerPage: 10,
112+
boundaryLinks: false,
113+
boundaryLinkNumbers: false,
114+
directionLinks: true,
115+
firstText: 'First',
116+
previousText: 'Previous',
117+
nextText: 'Next',
118+
lastText: 'Last',
119+
rotate: true,
120+
forceEllipses: false
121+
})
122+
123+
.directive('uibPagination', ['$parse', 'uibPaginationConfig', function($parse, uibPaginationConfig) {
124+
return {
125+
scope: {
126+
totalItems: '=',
127+
firstText: '@',
128+
previousText: '@',
129+
nextText: '@',
130+
lastText: '@',
131+
ngDisabled:'='
132+
},
133+
require: ['uibPagination', '?ngModel'],
134+
controller: 'UibPaginationController',
135+
controllerAs: 'pagination',
136+
templateUrl: function(element, attrs) {
137+
return attrs.templateUrl || 'src/template/pagination/pagination.html';
138+
},
139+
replace: true,
140+
link: function(scope, element, attrs, ctrls) {
141+
var paginationCtrl = ctrls[0], ngModelCtrl = ctrls[1];
142+
143+
if (!ngModelCtrl) {
144+
return; // do nothing if no ng-model
145+
}
146+
147+
paginationCtrl.init(ngModelCtrl, uibPaginationConfig);
148+
}
149+
};
150+
}]);

src/js/paging.js

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
angular.module('ui.bootstrap.paging', [])
2+
/**
3+
* Helper internal service for generating common controller code between the
4+
* pager and pagination components
5+
*/
6+
.factory('uibPaging', ['$parse', function($parse) {
7+
return {
8+
create: function(ctrl, $scope, $attrs) {
9+
ctrl.setNumPages = $attrs.numPages ? $parse($attrs.numPages).assign : angular.noop;
10+
ctrl.ngModelCtrl = { $setViewValue: angular.noop }; // nullModelCtrl
11+
12+
ctrl.init = function(ngModelCtrl, config) {
13+
ctrl.ngModelCtrl = ngModelCtrl;
14+
ctrl.config = config;
15+
16+
ngModelCtrl.$render = function() {
17+
ctrl.render();
18+
};
19+
20+
if ($attrs.itemsPerPage) {
21+
$scope.$parent.$watch($parse($attrs.itemsPerPage), function(value) {
22+
ctrl.itemsPerPage = parseInt(value, 10);
23+
$scope.totalPages = ctrl.calculateTotalPages();
24+
ctrl.updatePage();
25+
});
26+
} else {
27+
ctrl.itemsPerPage = config.itemsPerPage;
28+
}
29+
30+
$scope.$watch('totalItems', function(newTotal, oldTotal) {
31+
if (angular.isDefined(newTotal) || newTotal !== oldTotal) {
32+
$scope.totalPages = ctrl.calculateTotalPages();
33+
ctrl.updatePage();
34+
}
35+
});
36+
};
37+
38+
ctrl.calculateTotalPages = function() {
39+
var totalPages = ctrl.itemsPerPage < 1 ? 1 : Math.ceil($scope.totalItems / ctrl.itemsPerPage);
40+
return Math.max(totalPages || 0, 1);
41+
};
42+
43+
ctrl.render = function() {
44+
$scope.page = parseInt(ctrl.ngModelCtrl.$viewValue, 10) || 1;
45+
};
46+
47+
$scope.selectPage = function(page, evt) {
48+
if (evt) {
49+
evt.preventDefault();
50+
}
51+
52+
var clickAllowed = !$scope.ngDisabled || !evt;
53+
if (clickAllowed && $scope.page !== page && page > 0 && page <= $scope.totalPages) {
54+
if (evt && evt.target) {
55+
evt.target.blur();
56+
}
57+
ctrl.ngModelCtrl.$setViewValue(page);
58+
ctrl.ngModelCtrl.$render();
59+
}
60+
};
61+
62+
$scope.getText = function(key) {
63+
return $scope[key + 'Text'] || ctrl.config[key + 'Text'];
64+
};
65+
66+
$scope.noPrevious = function() {
67+
return $scope.page === 1;
68+
};
69+
70+
$scope.noNext = function() {
71+
return $scope.page === $scope.totalPages;
72+
};
73+
74+
ctrl.updatePage = function() {
75+
ctrl.setNumPages($scope.$parent, $scope.totalPages); // Readonly variable
76+
77+
if ($scope.page > $scope.totalPages) {
78+
$scope.selectPage($scope.totalPages);
79+
} else {
80+
ctrl.ngModelCtrl.$render();
81+
}
82+
};
83+
}
84+
};
85+
}]);
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<ul class="pagination">
2+
<li ng-if="::boundaryLinks" ng-class="{disabled: noPrevious()||ngDisabled}" class="pagination-first"><a href ng-click="selectPage(1, $event)">{{::getText('first')}}</a></li>
3+
<li ng-if="::directionLinks" ng-class="{disabled: noPrevious()||ngDisabled}" class="pagination-prev"><a href ng-click="selectPage(page - 1, $event)">{{::getText('previous')}}</a></li>
4+
<li ng-repeat="page in pages track by $index" ng-class="{active: page.active,disabled: ngDisabled&&!page.active}" class="pagination-page"><a href ng-click="selectPage(page.number, $event)">{{page.text}}</a></li>
5+
<li ng-if="::directionLinks" ng-class="{disabled: noNext()||ngDisabled}" class="pagination-next"><a href ng-click="selectPage(page + 1, $event)">{{::getText('next')}}</a></li>
6+
<li ng-if="::boundaryLinks" ng-class="{disabled: noNext()||ngDisabled}" class="pagination-last"><a href ng-click="selectPage(totalPages, $event)">{{::getText('last')}}</a></li>
7+
</ul>

0 commit comments

Comments
 (0)