Skip to content

Commit 763b390

Browse files
author
skozlov
committed
Init commit
1 parent dbb495e commit 763b390

File tree

4 files changed

+128
-2
lines changed

4 files changed

+128
-2
lines changed

‎demo/bootstrap/js/serverPaginationApp.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
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.getUsersData,
17+
sort: {
18+
predicate: 'name',
19+
direction: 'asc'
20+
}
21+
};
22+
$scope.gridActions = {};
23+
24+
}
25+
26+
function MyAppFactory($http) {
27+
var herokuDomain = 'https://server-pagination.herokuapp.com';
28+
return {
29+
getUsersData: getUsersData
30+
};
31+
32+
function getUsersData(params, callback) {
33+
$http.get(herokuDomain + '/users' + params).success(function (response) {
34+
callback(response.users, response.usersCount);
35+
});
36+
}
37+
}
38+
})();

‎demo/bootstrap/server-pagination.html‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
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="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"><!-- load bootstrap -->
23+
</head>
24+
<body ng-controller="myAppController">
25+
<div class="container">
26+
<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">
36+
</div>
37+
</div>
38+
</div>
39+
<div grid-data grid-options="gridOptions" grid-actions="gridActions" server-pagination="true">
40+
<table class="table table-bordered">
41+
<thead>
42+
<tr>
43+
<th sortable="name" class="sortable">Name</th>
44+
<th sortable="surname" class="sortable">Surname</th>
45+
</tr>
46+
</thead>
47+
<tbody>
48+
<tr grid-item>
49+
<td>{{item.name}}</td>
50+
<td>{{item.surname}}</td>
51+
</tr>
52+
</tbody>
53+
</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>
61+
<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>
72+
</div>
73+
</div>
74+
</div>
75+
</div>
76+
</body>
77+
78+
<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>
81+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
82+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
83+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
84+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
85+
<script src="../../dist/pagination.js"></script>
86+
<script src="../../dist/dataGrid.js"></script>
87+
<script src="js/serverPaginationApp.js"></script>
88+
</html>

‎dist/dataGrid.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -329,7 +329,7 @@
329329
element.attr('ng-change', 'filter()');
330330
//$compile(element)($scope);
331331
}
332-
332+
$compile(element)($scope);
333333
filters.push({
334334
model: urlName,
335335
isInScope: isInScope,

‎src/js/dataGrid.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -329,7 +329,7 @@
329329
element.attr('ng-change', 'filter()');
330330
//$compile(element)($scope);
331331
}
332-
332+
$compile(element)($scope);
333333
filters.push({
334334
model: urlName,
335335
isInScope: isInScope,

0 commit comments

Comments
 (0)