Skip to content

Commit d7c3bf8

Browse files
author
skozlov
committed
Order server pagination
1 parent 763b390 commit d7c3bf8

File tree

2 files changed

+147
-39
lines changed

2 files changed

+147
-39
lines changed

‎demo/bootstrap/js/serverPaginationApp.js‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,25 +13,24 @@
1313

1414
$scope.gridOptions = {
1515
data: [],
16-
getData: myAppFactory.getUsersData,
16+
getData: myAppFactory.getOrdersData,
1717
sort: {
1818
predicate: 'name',
1919
direction: 'asc'
2020
}
2121
};
2222
$scope.gridActions = {};
23-
2423
}
2524

2625
function MyAppFactory($http) {
2726
var herokuDomain = 'https://server-pagination.herokuapp.com';
2827
return {
29-
getUsersData: getUsersData
28+
getOrdersData: getOrdersData
3029
};
3130

32-
function getUsersData(params, callback) {
33-
$http.get(herokuDomain + '/users' + params).success(function (response) {
34-
callback(response.users, response.usersCount);
31+
function getOrdersData(params, callback) {
32+
$http.get(herokuDomain + '/orders' + params).success(function (response) {
33+
callback(response.orders, response.ordersCount);
3534
});
3635
}
3736
}

‎demo/bootstrap/server-pagination.html‎

Lines changed: 142 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -19,69 +19,178 @@
1919
vertical-align: top;
2020
}
2121
</style>
22-
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"><!-- load bootstrap -->
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">
2326
</head>
2427
<body ng-controller="myAppController">
2528
<div class="container">
29+
<hr>
2630
<div class="row">
27-
<div class="col-md-6">
28-
<div class="form-group">
29-
<label class="control-label">Filter by Name</label>
30-
<input type="text" class="form-control order-search-box"
31-
placeholder="Search By name"
32-
ng-change="gridActions.filter()"
33-
ng-model="name"
34-
filter-by="name"
35-
filter-type="text">
31+
<div>
32+
<div class="col-md-4">
33+
<div class="form-group">
34+
<label for="orderIdFilter">Search by Order #</label>
35+
<input id="orderIdFilter" type="text" class="form-control order-search-box"
36+
placeholder="Enter Order #"
37+
ng-change="gridActions.filter()"
38+
ng-model="orderNo"
39+
filter-by="orderNo"
40+
filter-type="text">
41+
</div>
42+
</div>
43+
<div class="col-md-4">
44+
<div class="form-group">
45+
<label for="dateFromFilter">Date From</label>
46+
47+
<div class="input-group">
48+
<input type="text"
49+
id="dateFromFilter"
50+
class="form-control"
51+
uib-datepicker-popup="dd/MM/yyyy"
52+
placeholder="DD/MM/YYYY"
53+
max-date="dateTo"
54+
close-text="Close"
55+
ng-model="dateFrom"
56+
show-weeks="true"
57+
is-open="dateFromOpened"
58+
ng-click="dateFromOpened = true"
59+
filter-by="placed"
60+
filter-type="dateFrom"
61+
ng-blur="gridActions.filter()"
62+
ng-focus="gridActions.filter()"
63+
show-weeks="false"
64+
close-text="Close"/>
65+
<span class="input-group-btn">
66+
<label for="dateFromFilter" class="btn btn-default">
67+
<i class="fa fa-calendar"></i></label>
68+
</span>
69+
</div>
70+
</div>
71+
</div>
72+
<div class="col-md-4">
73+
<div class="form-group">
74+
<label for="dateToInput">Date To</label>
75+
76+
<div class="input-group">
77+
<input type="text"
78+
id="dateToInput"
79+
class="form-control"
80+
uib-datepicker-popup="dd/MM/yyyy"
81+
placeholder="DD/MM/YYYY"
82+
min-date="dateFrom"
83+
close-text="Close"
84+
ng-model="dateTo"
85+
show-weeks="true"
86+
is-open="dateToOpened"
87+
ng-click="dateToOpened = true"
88+
filter-by="placed"
89+
filter-type="dateTo"
90+
ng-blur="gridActions.filter()"
91+
ng-focus="gridActions.filter()"
92+
show-weeks="false"
93+
close-text="Close">
94+
<span class="input-group-btn">
95+
<label for="dateToInput" class="btn btn-default">
96+
<i class="fa fa-calendar"></i></label>
97+
</span>
98+
</div>
99+
</div>
100+
<div ng-show="dateTo || dateFrom" class="buttons-right">
101+
<a href="" ng-click="dateTo = ''; dateFrom = ''; gridActions.refresh();">Clear Dates</a>
102+
</div>
36103
</div>
37104
</div>
38105
</div>
106+
107+
39108
<div grid-data grid-options="gridOptions" grid-actions="gridActions" server-pagination="true">
109+
<div class="row">
110+
<div class="col-md-3"><span class="items">{{paginationOptions.totalItems}} items total</span></div>
111+
<div class="col-md-9 text-right">
112+
<form class="form-inline margin-bottom-basic">
113+
<div class="form-group">
114+
<div grid-pagination boundary-links="true"
115+
ng-if="paginationOptions.totalItems > paginationOptions.itemsPerPage"
116+
total-items="paginationOptions.totalItems"
117+
ng-model="paginationOptions.currentPage"
118+
ng-change="reloadGrid()"
119+
class="pagination-sm"
120+
items-per-page="paginationOptions.itemsPerPage">
121+
</div>
122+
</div>
123+
<div class="form-group items-per-page">
124+
<label for="itemsOnPageSelect1">Items per page:</label>
125+
<select id="itemsOnPageSelect1" class="form-control input-sm" ng-init="paginationOptions.itemsPerPage = '10'" ng-model="paginationOptions.itemsPerPage"
126+
ng-change="reloadGrid()">
127+
<option>5</option>
128+
<option>10</option>
129+
<option>50</option>
130+
<option>75</option>
131+
</select>
132+
</div>
133+
</form>
134+
</div>
135+
</div>
136+
40137
<table class="table table-bordered">
41138
<thead>
42139
<tr>
43-
<th sortable="name" class="sortable">Name</th>
44-
<th sortable="surname" class="sortable">Surname</th>
140+
<th sortable="orderNo" class="sortable">Order #</th>
141+
<th sortable="datePlaced" class="sortable">Date Placed</th>
142+
<th sortable="status" class="sortable">Statuses</th>
143+
<th sortable="amount" class="sortable">Total</th>
45144
</tr>
46145
</thead>
47146
<tbody>
48147
<tr grid-item>
49-
<td>{{item.name}}</td>
50-
<td>{{item.surname}}</td>
148+
<td>{{item.orderNo}}</td>
149+
<td>{{item.datePlaced | date:'MM/dd/yyyy'}}</td>
150+
<td>{{item.status}}</td>
151+
<td>{{item.total}}</td>
51152
</tr>
52153
</tbody>
53154
</table>
54-
<div grid-pagination max-size="5" boundary-links="true"
55-
ng-if="paginationOptions.totalItems > paginationOptions.itemsPerPage"
56-
total-items="paginationOptions.totalItems"
57-
ng-model="paginationOptions.currentPage"
58-
ng-change="reloadGrid()"
59-
items-per-page="paginationOptions.itemsPerPage">
60-
</div>
61155
<div class="row">
62-
<div class="col-md-6">
63-
<div class="form-group items-per-page">
64-
<label for="itemsOnPageSelect1">Items per page:</label>
65-
<select id="itemsOnPageSelect1" class="form-control input-sm" ng-init="paginationOptions.itemsPerPage = '10'" ng-model="paginationOptions.itemsPerPage" ng-change="reloadGrid()">
66-
<option>5</option>
67-
<option>10</option>
68-
<option>50</option>
69-
<option>75</option>
70-
</select>
71-
</div>
156+
<div class="col-md-3"><span class="items">{{paginationOptions.totalItems}} items total</span></div>
157+
<div class="col-md-9 text-right">
158+
<form class="form-inline margin-bottom-basic">
159+
<div class="form-group">
160+
<div grid-pagination boundary-links="true"
161+
ng-if="paginationOptions.totalItems > paginationOptions.itemsPerPage"
162+
total-items="paginationOptions.totalItems"
163+
ng-model="paginationOptions.currentPage"
164+
ng-change="reloadGrid()"
165+
class="pagination-sm"
166+
items-per-page="paginationOptions.itemsPerPage">
167+
</div>
168+
</div>
169+
<div class="form-group items-per-page">
170+
<label for="itemsOnPageSelect">Items per page:</label>
171+
<select id="itemsOnPageSelect" class="form-control input-sm" ng-init="paginationOptions.itemsPerPage = '10'" ng-model="paginationOptions.itemsPerPage"
172+
ng-change="reloadGrid()">
173+
<option>5</option>
174+
<option>10</option>
175+
<option>50</option>
176+
<option>75</option>
177+
</select>
178+
</div>
179+
</form>
72180
</div>
73181
</div>
74182
</div>
75183
</div>
184+
76185
</body>
77186

78187
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><!-- load jquery -->
79-
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script><!-- load angular -->
80-
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
81188
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
82189
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
83190
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
84191
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
192+
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
193+
85194
<script src="../../dist/pagination.js"></script>
86195
<script src="../../dist/dataGrid.js"></script>
87196
<script src="js/serverPaginationApp.js"></script>

0 commit comments

Comments
 (0)