PHP Tips and Tricks : Using AngularJS & bootstrap UI: generating table with search, pagination filters through json data

Here is the web site that helps me to solve this issue :

http://stackoverflow.com/questions/28172165/angular-js-working-with-json-data
http://stackoverflow.com/questions/19409492/how-to-achieve-pagination-table-layout-with-angular-js

For the test data, I use a Json file that can be reached at : https://api.github.com/repos/angular-ui/bootstrap/issues

The script is limited to the one below..

Here is the HTML file :

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="http://code.angularjs.org/1.2.16/angular.js"></script>
<script src="http://code.angularjs.org/1.2.16/angular-resource.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="row">
<div class="col-lg-6">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-table fa-fw"></i> Issues list</h3>
<div class="pull-right">Search: <input ng-model="query">
</div>
<div class="panel-body">
<table class="table table-striped table-hover table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Title</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="obj in issues | filter : paginate | filter : query">
<td>{{obj.id}}</td>
<td>{{obj.title}}</td>
</tr>
</tbody>
</table>
<pagination total-items="totalItems" ng-model="currentPage"
max-size="5" boundary-links="true"
items-per-page="numPerPage" class="pagination-sm">
</pagination>
</div> 
</div> 
</div> 
</div> 
</div>
</div>
<script>
var app = angular.module("myApp", ['ui.bootstrap', 'ngResource']);
app.controller("myCtrl", function($scope,$http) {
$http.get("https://api.github.com/repos/angular-ui/bootstrap/issues")
.success(function(response) {
$scope.issues = response;
$scope.totalItems =response .length;
$scope.currentPage = 1;
$scope.numPerPage = 5;

$scope.paginate = function(value) {
var begin, end, index;
begin = ($scope.currentPage - 1) * $scope.numPerPage;
end = begin + $scope.numPerPage;
index = response .indexOf(value);
return (begin <= index && index < end);
};

})
});
</script>
</body>
</html>

A screen shot of the result is shown here :

Wednesday, 25 February 2015

Using AngularJS & bootstrap UI: generating table with search, pagination filters through json data