Skip to content

Commit 419d955

Browse files
author
skozlov
committed
UI Router plus server pagination - fixed #20 
1 parent 64c877a commit 419d955

File tree

7 files changed

+352
-47
lines changed

7 files changed

+352
-47
lines changed

‎demo/bootstrap/index.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,9 @@ <h4>Additional Demos</h4>
4545
<li>
4646
<a href="server-pagination.html" target="_blank">Server pagination</a>
4747
</li>
48+
<li>
49+
<a href="ui-router.html" target="_blank">UI Router plus server pagination</a>
50+
</li>
4851
</ul>
4952
<hr>
5053
<div class="row">

‎demo/bootstrap/js/routerServerPaginationApp.js‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
(function () {
2+
'use strict';
3+
4+
angular
5+
.module('myApp', ['ui.bootstrap', 'dataGrid', 'pagination', 'ui.router', 'angular-loading-bar'])
6+
.config(config)
7+
.factory('myAppFactory', MyAppFactory);
8+
9+
config.$inject = ['$stateProvider', '$urlRouterProvider', '$locationProvider'];
10+
MyAppController.$inject = ['$scope', 'myAppFactory', '$state'];
11+
MyAppFactory.$inject = ['$http'];
12+
13+
14+
function config($stateProvider, $urlRouterProvider, $locationProvider) {
15+
//$locationProvider.html5Mode(true);
16+
17+
$urlRouterProvider.otherwise('/orders');
18+
19+
$stateProvider
20+
.state('orders', {
21+
url: '/orders',
22+
templateUrl: 'views/router-server-pagination.html',
23+
controller: MyAppController
24+
})
25+
}
26+
27+
function MyAppController($scope, myAppFactory, $state) {
28+
29+
$scope.gridOptions = {
30+
data: [],
31+
getData: myAppFactory.getOrdersData,
32+
sort: {
33+
predicate: 'orderNo',
34+
direction: 'asc'
35+
}
36+
};
37+
$scope.gridActions = {};
38+
myAppFactory.getStatuses().then(function (resp) {
39+
$scope.UI.statusOptions = resp.data;
40+
})
41+
}
42+
43+
function MyAppFactory($http) {
44+
var herokuDomain = 'https://server-pagination.herokuapp.com';
45+
return {
46+
getOrdersData: getOrdersData,
47+
getStatuses: getStatuses
48+
};
49+
50+
function getOrdersData(params, callback) {
51+
$http.get(herokuDomain + '/orders' + params).then(function (response) {
52+
callback(response.data.orders, response.data.ordersCount);
53+
});
54+
}
55+
56+
function getStatuses() {
57+
return $http.get(herokuDomain + '/orders/statuses');
58+
}
59+
}
60+
})();

‎demo/bootstrap/ui-router.html‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
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+
<!--<base href="/angular-data-grid/demo/bootstrap/"/>-->
23+
<link rel="icon" href="https://angularjs.org/favicon.ico" type="image/x-icon">
24+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
25+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
26+
<link rel="stylesheet" href="css/angular-data-grid.bootstrap.css">
27+
<link rel="stylesheet" href="css/loading-bar.min.css">
28+
</head>
29+
30+
<body>
31+
<nav class="navbar navbar-inverse">
32+
<div class="container">
33+
<a href="#" class="navbar-brand">Angular Data Grid - UI Router Server Pagination Example</a>
34+
<ul class="nav navbar-nav navbar-right">
35+
<li><a href="../bootstrap/">Back to main demo</a></li>
36+
</ul>
37+
</div>
38+
</nav>
39+
<div ui-view></div>
40+
</body>
41+
42+
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><!-- load jquery -->
43+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
44+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.min.js"></script>
45+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-aria.min.js"></script>
46+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-messages.min.js"></script>
47+
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
48+
<script src="//unpkg.com/angular-ui-router/release/angular-ui-router.min.js"></script>
49+
50+
<script src="../../dist/pagination.min.js"></script>
51+
<script src="../../dist/dataGrid.min.js"></script>
52+
<script src="../../dist/loading-bar.min.js"></script>
53+
<script src="js/routerServerPaginationApp.js"></script>
54+
</html>

‎demo/bootstrap/views/router-server-pagination.html‎

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
<div class="container">
2+
<div class="margin-bottom-basic">
3+
<h3>Angular Data Grid - UI Router Server Pagination.</h3>
4+
UI Router plus all features for server pagination<br/>
5+
Features enabled: sorting, filtering (using both in-grid and external controls), pagination and items-per-page functionality.
6+
Angular UI Datepicker used for date controls, although you can use any other framework, plugin or styling.
7+
<a href="https://github.com/angular-data-grid/angular-data-grid.github.io" target="_blank">Project GitHub</a>
8+
</div>
9+
<hr>
10+
<div class="row">
11+
<div>
12+
<div class="col-md-4">
13+
<div class="form-group">
14+
<label for="orderIdFilter">Search by Order #</label>
15+
<input id="orderIdFilter" type="text" class="form-control order-search-box"
16+
placeholder="Enter Order #"
17+
ng-change="gridActions.filter()"
18+
ng-model="orderNo"
19+
filter-by="orderNo"
20+
filter-type="text">
21+
</div>
22+
</div>
23+
<div class="col-md-4">
24+
<div class="form-group">
25+
<label for="dateFromFilter">Date From</label>
26+
27+
<div class="input-group">
28+
<input type="text"
29+
id="dateFromFilter"
30+
class="form-control"
31+
uib-datepicker-popup="dd/MM/yyyy"
32+
placeholder="DD/MM/YYYY"
33+
max-date="dateTo"
34+
close-text="Close"
35+
ng-model="dateFrom"
36+
show-weeks="true"
37+
is-open="dateFromOpened"
38+
ng-click="dateFromOpened = true"
39+
filter-by="placed"
40+
filter-type="dateFrom"
41+
ng-blur="gridActions.filter()"
42+
ng-focus="gridActions.filter()"
43+
show-weeks="false"
44+
close-text="Close"/>
45+
<span class="input-group-btn">
46+
<label for="dateFromFilter" class="btn btn-default">
47+
<i class="fa fa-calendar"></i></label>
48+
</span>
49+
</div>
50+
</div>
51+
</div>
52+
<div class="col-md-4">
53+
<div class="form-group">
54+
<label for="dateToInput">Date To</label>
55+
56+
<div class="input-group">
57+
<input type="text"
58+
id="dateToInput"
59+
class="form-control"
60+
uib-datepicker-popup="dd/MM/yyyy"
61+
placeholder="DD/MM/YYYY"
62+
min-date="dateFrom"
63+
close-text="Close"
64+
ng-model="dateTo"
65+
show-weeks="true"
66+
is-open="dateToOpened"
67+
ng-click="dateToOpened = true"
68+
filter-by="placed"
69+
filter-type="dateTo"
70+
ng-blur="gridActions.filter()"
71+
ng-focus="gridActions.filter()"
72+
show-weeks="false"
73+
close-text="Close">
74+
<span class="input-group-btn">
75+
<label for="dateToInput" class="btn btn-default">
76+
<i class="fa fa-calendar"></i></label>
77+
</span>
78+
</div>
79+
</div>
80+
<div ng-show="dateTo || dateFrom" class="buttons-right">
81+
<a href="" ng-click="dateTo = ''; dateFrom = ''; gridActions.refresh();">Clear Dates</a>
82+
</div>
83+
</div>
84+
</div>
85+
</div>
86+
87+
88+
<div grid-data grid-options="gridOptions" grid-actions="gridActions" server-pagination="true">
89+
<div class="row">
90+
<div class="col-md-3"><span class="items">{{paginationOptions.totalItems}} items total</span></div>
91+
<div class="col-md-9 text-right">
92+
<form class="form-inline margin-bottom-basic">
93+
<div class="form-group">
94+
<div grid-pagination boundary-links="true"
95+
ng-if="paginationOptions.totalItems > paginationOptions.itemsPerPage"
96+
total-items="paginationOptions.totalItems"
97+
ng-model="paginationOptions.currentPage"
98+
ng-change="reloadGrid()"
99+
class="pagination-sm"
100+
items-per-page="paginationOptions.itemsPerPage">
101+
</div>
102+
</div>
103+
<div class="form-group items-per-page">
104+
<label for="itemsOnPageSelect1">Items per page:</label>
105+
<select id="itemsOnPageSelect1" class="form-control input-sm" ng-init="paginationOptions.itemsPerPage = '10'" ng-model="paginationOptions.itemsPerPage"
106+
ng-change="reloadGrid()">
107+
<option>5</option>
108+
<option>10</option>
109+
<option>50</option>
110+
<option>75</option>
111+
</select>
112+
</div>
113+
</form>
114+
</div>
115+
</div>
116+
117+
<table class="table table-bordered">
118+
<thead>
119+
<tr>
120+
<th width="30%" sortable="orderNo" class="sortable">Order #</th>
121+
<th width="30%" sortable="datePlaced" class="sortable">Date Placed</th>
122+
<th class="st-sort-disable th-dropdown">
123+
<select class="form-control width-15"
124+
filter-by="status"
125+
filter-type="select"
126+
ng-model="status"
127+
ng-change="filter()">
128+
<option value="">All Statuses</option>
129+
<option ng-repeat="option in UI.statusOptions track by option.value"
130+
value="{{option.value}}">{{option.text}}
131+
</option>
132+
</select>
133+
</th>
134+
<th sortable="total" class="sortable">Total</th>
135+
</tr>
136+
</thead>
137+
<tbody>
138+
<tr grid-item>
139+
<td>{{item.orderNo}}</td>
140+
<td>{{item.datePlaced | date:'MM/dd/yyyy'}}</td>
141+
<td>{{item.status}}</td>
142+
<td>{{item.total}}</td>
143+
</tr>
144+
</tbody>
145+
</table>
146+
<div class="row">
147+
<div class="col-md-3"><span class="items">{{paginationOptions.totalItems}} items total</span></div>
148+
<div class="col-md-9 text-right">
149+
<form class="form-inline margin-bottom-basic">
150+
<div class="form-group">
151+
<div grid-pagination boundary-links="true"
152+
ng-if="paginationOptions.totalItems > paginationOptions.itemsPerPage"
153+
total-items="paginationOptions.totalItems"
154+
ng-model="paginationOptions.currentPage"
155+
ng-change="reloadGrid()"
156+
class="pagination-sm"
157+
items-per-page="paginationOptions.itemsPerPage">
158+
</div>
159+
</div>
160+
<div class="form-group items-per-page">
161+
<label for="itemsOnPageSelect">Items per page:</label>
162+
<select id="itemsOnPageSelect" class="form-control input-sm" ng-init="paginationOptions.itemsPerPage = '10'" ng-model="paginationOptions.itemsPerPage"
163+
ng-change="reloadGrid()">
164+
<option>5</option>
165+
<option>10</option>
166+
<option>50</option>
167+
<option>75</option>
168+
</select>
169+
</div>
170+
</form>
171+
</div>
172+
</div>
173+
</div>
174+
</div>

‎dist/dataGrid.js‎

Lines changed: 30 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@
4848
});
4949

5050
if ($scope.urlSync) {
51-
parseUrl($location.path());
51+
parseUrl();
5252
} else {
5353
applyFilters();
5454
}
@@ -71,15 +71,11 @@
7171
};
7272

7373
$scope.$on('$locationChangeSuccess', function () {
74-
if ($scope.urlSync || $scope.serverPagination) {
75-
if ($scope.serverPagination) {
76-
clearTimeout($scope.getDataTimeout);
77-
$scope.getDataTimeout = setTimeout(getData, $scope.getDataDelay);
78-
}
79-
if ($scope.filtered) {
80-
parseUrl($location.path());
81-
}
82-
}
74+
onChangeStateOrLocation()
75+
});
76+
77+
$scope.$on("$stateChangeSuccess", function (event, toState) {
78+
onChangeStateOrLocation()
8379
});
8480

8581
$scope.reloadGrid = function (isDefaultSort) {
@@ -94,6 +90,18 @@
9490
$scope._gridActions.filter = $scope.filter;
9591
$scope._gridActions.sort = $scope.sort;
9692

93+
function onChangeStateOrLocation(){
94+
if ($scope.urlSync || $scope.serverPagination) {
95+
if ($scope.serverPagination) {
96+
clearTimeout($scope.getDataTimeout);
97+
$scope.getDataTimeout = setTimeout(getData, $scope.getDataDelay);
98+
}
99+
if ($scope.filtered) {
100+
parseUrl();
101+
}
102+
}
103+
}
104+
97105
function changePath(isDefaultSort) {
98106
var path, needApplyFilters = false;
99107

@@ -134,27 +142,21 @@
134142
if (needApplyFilters) {
135143
applyFilters();
136144
}
137-
$location.path(path);
145+
$location.search(path);
138146
if (isDefaultSort) {
139147
$scope.$apply();
140148
}
141149
}
142150

143151
function parseUrl() {
144-
var url = $location.path().slice(1),
145-
params = {},
152+
var params = $location.search(),
146153
customParams = {};
147154

148-
$scope.params = params;
149-
150-
url.split('&').forEach(function (urlParam) {
151-
var param = urlParam.split('=');
152-
params[param[0]] = param[1];
153-
if (param[0] !== 'page' && param[0] !== 'sort' && param[0] !== 'itemsPerPage') {
154-
customParams[decodeURIComponent(param[0])] = decodeURIComponent(param[1]);
155-
}
155+
Object.keys(params).forEach(function(key) {
156+
if (key !== 'page' && key !== 'sort' && key !== 'itemsPerPage') {
157+
customParams[key] = params[key];
156158
}
157-
);
159+
});
158160

159161
//custom filters
160162
$scope.filters.forEach(function (filter) {
@@ -216,7 +218,12 @@
216218
}
217219

218220
function getData() {
219-
var url = $location.path().slice(1);
221+
var url = '';
222+
var params = $location.search();
223+
Object.keys(params).forEach(function(key) {
224+
url += key + '=' + params[key] + '&';
225+
});
226+
url = url.slice(0, -1);
220227
if (!url && $scope.sortOptions.predicate) {
221228
$scope.sort($scope.sortOptions.predicate, true);
222229
} else {

0 commit comments

Comments
 (0)