-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtableDemo.html
83 lines (80 loc) · 4.47 KB
/
tableDemo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Angular JS Table</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js"></script>
</head>
<body ng-app="myApp" ng-controller="detailsCtrl as det" ng-init="currentPage=1">
<div class="container">
<div class="row">
<div class="panel panel-primary">
<div class="panel-heading">AnularJS-Bootstap Table
</div>
<span><em>Show</em></span>
<span class="btn-group">
<button class="btn btn-primary" ng-click="pageSize=5;">5</button>
<button class="btn btn-primary" ng-click="pageSize=10;">10</button>
<button class="btn btn-primary" ng-click="pageSize=20;">20</button>
</span>
<span class="input-group">
<input type="text" class="form-control" placeholder="Search" ng-model="searchText">
<span class="input-group-addon"><i class="fa fa-search pull-right"></i></span>
</span>
<div class="table-responsive">
<table id="detailsTable" class="table table-striped table-hover">
<thead>
<tr>
<th><a ng-click="sortType='id'; sortReverse=!sortReverse">Id <i class="fa fa-sort"></i></a></th>
<th><a ng-click="sortType='first_name'; sortReverse=!sortReverse">First Name <i class="fa fa-sort"></i></a></th>
<th><a ng-click="sortType='last_name'; sortReverse=!sortReverse">Last Name <i class="fa fa-sort"></i></a></th>
<th><a ng-click="sortType='email'; sortReverse=!sortReverse">Email <i class="fa fa-sort"></i></a></th>
<th><a ng-click="sortType='gender'; sortReverse=!sortReverse">Gender <i class="fa fa-sort"></i></a></th>
<th><a ng-click="sortType='ip_address'; sortReverse=!sortReverse">IP Address <i class="fa fa-sort"></i></a></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in details | filter:searchText | orderBy:sortType:sortReverse | startFrom: (currentPage-1)*pageSize | limitTo : pageSize">
<th>{{row.id}}</th>
<td>{{row.first_name}}</td>
<td>{{row.last_name}}</td>
<td>{{row.email}}</td>
<td>{{row.gender}}</td>
<td>{{row.ip_address}}</td>
</tr>
</tbody>
</table>
<ul uib-pagination total-items="details.length" ng-model="currentPage" items-per-page="pageSize" style="align:centre;"></ul>
</div>
</div>
</div>
</div>
<script>
var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('detailsCtrl', function($scope, $http) {
$scope.pageSize = 10;
$scope.sortType = 'id';
$scope.sortReverse = false;
$scope.searchQuery = '';
$scope.sortBy = function(newSortType) {
if ($scope.sortType == newSortType)
$scope.sortReverse = !$scope.sortReverse;
$scope.sortType = newSortType;
}
$http.get("sample.json").then(function(response) {
$scope.details = response.data;
// console.log(response.data);
});
});
app.filter('startFrom', function() {
return function(data, start) {
start = 0 + start;
return data.slice(start);
}
});
</script>
</body>
</html>