Skip to content

Commit 4301e9f

Browse files
AlexanderZhukCoherentAlexanderZhukCoherent
authored
Merge pull request #13 from angular-data-grid/server-pagination
Server pagination
2 parents dbb495e + 7f07d07 commit 4301e9f

File tree

7 files changed

+329
-42
lines changed

7 files changed

+329
-42
lines changed

‎README.md‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,10 @@ Direct download: get ZIP archive [from here](https://github.com/angular-data-gri
2626
Then use files from *dist* folder (see below).
2727

2828
### Setup
29-
1. Include scripts in you application: `dataGrid.min.js` and `pagination.min.js` (include the second one only if you need pagination).
29+
1. Include scripts in you application: `angular.min.js`, `dataGrid.min.js` and `pagination.min.js` (include the second one only if you need pagination).
3030

3131
```javascript
32+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
3233
<script src="bower_components/angular-data-grid/dist/pagination.min.js"></script>
3334
<script src="bower_components/angular-data-grid/dist/dataGrid.min.js"></script>
3435
```
@@ -105,7 +106,10 @@ Use this object for calling methods of directive: `sort()`, `filter()`, `refresh
105106
};
106107
```
107108

108-
- For server side pagination/filtering to fetch data by page: assign ```getData``` method to some function with URL params as 1st parameter and data itself as 2d parameter:
109+
- For server side pagination/filtering to fetch data by page:
110+
1. add attribute 'server-pagination'=true on element on which you applied directive 'grid-data'
111+
2. assign ```getData``` method to some function with URL params as 1st parameter and data itself as 2d parameter:
112+
109113

110114
```javascript
111115
$scope.gridOptions = {
@@ -145,7 +149,7 @@ $scope.gridOptions = {
145149
146150
### Pagination
147151
148-
You can optionally use `pagination` directive to display paging with previous/next and first/last controls.
152+
You can optionally use `grid-pagination` directive to display paging with previous/next and first/last controls.
149153
Directive is built on a base of excellent [Angular UI](https://angular-ui.github.io/bootstrap/) component and shares extensive API:
150154
151155
```HTML

‎demo/bootstrap/index.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,9 @@ <h4>Additional Demos</h4>
4242
<li>
4343
<a href="multiple.html" target="_blank">Multiple grids on page</a>
4444
</li>
45+
<li>
46+
<a href="server-pagination.html" target="_blank">Server pagination</a>
47+
</li>
4548
</ul>
4649
<hr>
4750
<div class="row">

‎demo/bootstrap/js/serverPaginationApp.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
(function () {
2+
'use strict';
3+
4+
angular
5+
.module('myApp', ['ui.bootstrap', 'dataGrid', 'pagination'])
6+
.controller('myAppController', MyAppController)
7+
.factory('myAppFactory', MyAppFactory);
8+
9+
MyAppController.$inject = ['$scope', 'myAppFactory'];
10+
MyAppFactory.$inject = ['$http'];
11+
12+
function MyAppController($scope, myAppFactory) {
13+
14+
$scope.gridOptions = {
15+
data: [],
16+
getData: myAppFactory.getOrdersData,
17+
sort: {
18+
predicate: 'orderNo',
19+
direction: 'asc'
20+
}
21+
};
22+
$scope.UI = {};
23+
$scope.gridActions = {};
24+
myAppFactory.getStatuses().success(function (resp) {
25+
$scope.UI.statusOptions = resp;
26+
});
27+
}
28+
29+
function MyAppFactory($http) {
30+
var herokuDomain = 'https://server-pagination.herokuapp.com';
31+
return {
32+
getOrdersData: getOrdersData,
33+
getStatuses: getStatuses
34+
};
35+
36+
function getOrdersData(params, callback) {
37+
$http.get(herokuDomain + '/orders' + params).success(function (response) {
38+
callback(response.orders, response.ordersCount);
39+
});
40+
}
41+
42+
function getStatuses() {
43+
return $http.get(herokuDomain + '/orders/statuses');
44+
}
45+
}
46+
})();

‎demo/bootstrap/server-pagination.html‎

Lines changed: 222 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,222 @@
1+
<!-- index.html -->
2+
<!doctype html>
3+
4+
<html ng-app="myApp">
5+
<head>
6+
<style>
7+
.sortable:after {
8+
font: 14px/1 FontAwesome;
9+
content: "\f0dc";
10+
}
11+
12+
.sortable.sort-ascent:after {
13+
content: '\f0de';
14+
vertical-align: bottom;
15+
}
16+
17+
.sortable.sort-descent:after {
18+
content: "\f0dd";
19+
vertical-align: top;
20+
}
21+
</style>
22+
<link rel="icon" href="https://angularjs.org/favicon.ico" type="image/x-icon">
23+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
24+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
25+
<link rel="stylesheet" href="css/angular-data-grid.bootstrap.css">
26+
</head>
27+
<body ng-controller="myAppController">
28+
<nav class="navbar navbar-inverse">
29+
<div class="container">
30+
<a href="#" class="navbar-brand">Angular Data Grid - Server Pagination</a>
31+
<ul class="nav navbar-nav navbar-right">
32+
<li><a href="index.html">Back to main demo</a></li>
33+
</ul>
34+
</div>
35+
</nav>
36+
<div class="container">
37+
<div class="margin-bottom-basic">
38+
<h3>Angular Data Grid Server Pagination</h3>
39+
Features enabled: sorting, filtering (using both in-grid and external controls), pagination and items-per-page functionality.
40+
Angular UI Datepicker used for date controls, although you can use any other framework, plugin or styling.
41+
<a href="https://github.com/angular-data-grid/angular-data-grid.github.io" target="_blank">Project GitHub</a>
42+
</div>
43+
<hr>
44+
<div class="row">
45+
<div>
46+
<div class="col-md-4">
47+
<div class="form-group">
48+
<label for="orderIdFilter">Search by Order #</label>
49+
<input id="orderIdFilter" type="text" class="form-control order-search-box"
50+
placeholder="Enter Order #"
51+
ng-change="gridActions.filter()"
52+
ng-model="orderNo"
53+
filter-by="orderNo"
54+
filter-type="text">
55+
</div>
56+
</div>
57+
<div class="col-md-4">
58+
<div class="form-group">
59+
<label for="dateFromFilter">Date From</label>
60+
61+
<div class="input-group">
62+
<input type="text"
63+
id="dateFromFilter"
64+
class="form-control"
65+
uib-datepicker-popup="dd/MM/yyyy"
66+
placeholder="DD/MM/YYYY"
67+
max-date="dateTo"
68+
close-text="Close"
69+
ng-model="dateFrom"
70+
show-weeks="true"
71+
is-open="dateFromOpened"
72+
ng-click="dateFromOpened = true"
73+
filter-by="placed"
74+
filter-type="dateFrom"
75+
ng-blur="gridActions.filter()"
76+
ng-focus="gridActions.filter()"
77+
show-weeks="false"
78+
close-text="Close"/>
79+
<span class="input-group-btn">
80+
<label for="dateFromFilter" class="btn btn-default">
81+
<i class="fa fa-calendar"></i></label>
82+
</span>
83+
</div>
84+
</div>
85+
</div>
86+
<div class="col-md-4">
87+
<div class="form-group">
88+
<label for="dateToInput">Date To</label>
89+
90+
<div class="input-group">
91+
<input type="text"
92+
id="dateToInput"
93+
class="form-control"
94+
uib-datepicker-popup="dd/MM/yyyy"
95+
placeholder="DD/MM/YYYY"
96+
min-date="dateFrom"
97+
close-text="Close"
98+
ng-model="dateTo"
99+
show-weeks="true"
100+
is-open="dateToOpened"
101+
ng-click="dateToOpened = true"
102+
filter-by="placed"
103+
filter-type="dateTo"
104+
ng-blur="gridActions.filter()"
105+
ng-focus="gridActions.filter()"
106+
show-weeks="false"
107+
close-text="Close">
108+
<span class="input-group-btn">
109+
<label for="dateToInput" class="btn btn-default">
110+
<i class="fa fa-calendar"></i></label>
111+
</span>
112+
</div>
113+
</div>
114+
<div ng-show="dateTo || dateFrom" class="buttons-right">
115+
<a href="" ng-click="dateTo = ''; dateFrom = ''; gridActions.refresh();">Clear Dates</a>
116+
</div>
117+
</div>
118+
</div>
119+
</div>
120+
121+
122+
<div grid-data grid-options="gridOptions" grid-actions="gridActions" server-pagination="true">
123+
<div class="row">
124+
<div class="col-md-3"><span class="items">{{paginationOptions.totalItems}} items total</span></div>
125+
<div class="col-md-9 text-right">
126+
<form class="form-inline margin-bottom-basic">
127+
<div class="form-group">
128+
<div grid-pagination boundary-links="true"
129+
ng-if="paginationOptions.totalItems > paginationOptions.itemsPerPage"
130+
total-items="paginationOptions.totalItems"
131+
ng-model="paginationOptions.currentPage"
132+
ng-change="reloadGrid()"
133+
class="pagination-sm"
134+
items-per-page="paginationOptions.itemsPerPage">
135+
</div>
136+
</div>
137+
<div class="form-group items-per-page">
138+
<label for="itemsOnPageSelect1">Items per page:</label>
139+
<select id="itemsOnPageSelect1" class="form-control input-sm" ng-init="paginationOptions.itemsPerPage = '10'" ng-model="paginationOptions.itemsPerPage"
140+
ng-change="reloadGrid()">
141+
<option>5</option>
142+
<option>10</option>
143+
<option>50</option>
144+
<option>75</option>
145+
</select>
146+
</div>
147+
</form>
148+
</div>
149+
</div>
150+
151+
<table class="table table-bordered">
152+
<thead>
153+
<tr>
154+
<th width="30%" sortable="orderNo" class="sortable">Order #</th>
155+
<th width="30%" sortable="datePlaced" class="sortable">Date Placed</th>
156+
<th class="st-sort-disable th-dropdown">
157+
<select class="form-control width-15"
158+
filter-by="status"
159+
filter-type="select"
160+
ng-model="status"
161+
ng-change="filter()">
162+
<option value="">All Statuses</option>
163+
<option ng-repeat="option in UI.statusOptions track by option.value"
164+
value="{{option.value}}">{{option.text}}
165+
</option>
166+
</select>
167+
</th>
168+
<th sortable="total" class="sortable">Total</th>
169+
</tr>
170+
</thead>
171+
<tbody>
172+
<tr grid-item>
173+
<td>{{item.orderNo}}</td>
174+
<td>{{item.datePlaced | date:'MM/dd/yyyy'}}</td>
175+
<td>{{item.status}}</td>
176+
<td>{{item.total}}</td>
177+
</tr>
178+
</tbody>
179+
</table>
180+
<div class="row">
181+
<div class="col-md-3"><span class="items">{{paginationOptions.totalItems}} items total</span></div>
182+
<div class="col-md-9 text-right">
183+
<form class="form-inline margin-bottom-basic">
184+
<div class="form-group">
185+
<div grid-pagination boundary-links="true"
186+
ng-if="paginationOptions.totalItems > paginationOptions.itemsPerPage"
187+
total-items="paginationOptions.totalItems"
188+
ng-model="paginationOptions.currentPage"
189+
ng-change="reloadGrid()"
190+
class="pagination-sm"
191+
items-per-page="paginationOptions.itemsPerPage">
192+
</div>
193+
</div>
194+
<div class="form-group items-per-page">
195+
<label for="itemsOnPageSelect">Items per page:</label>
196+
<select id="itemsOnPageSelect" class="form-control input-sm" ng-init="paginationOptions.itemsPerPage = '10'" ng-model="paginationOptions.itemsPerPage"
197+
ng-change="reloadGrid()">
198+
<option>5</option>
199+
<option>10</option>
200+
<option>50</option>
201+
<option>75</option>
202+
</select>
203+
</div>
204+
</form>
205+
</div>
206+
</div>
207+
</div>
208+
</div>
209+
210+
</body>
211+
212+
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><!-- load jquery -->
213+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
214+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
215+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
216+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
217+
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
218+
219+
<script src="../../dist/pagination.min.js"></script>
220+
<script src="../../dist/dataGrid.min.js"></script>
221+
<script src="js/serverPaginationApp.js"></script>
222+
</html>

0 commit comments

Comments
 (0)