Pagination in angular js
I am getting data from database via http post call and table rendering. Well, the implementation code looks fine, but pagination doesn't work.
I implemented it as per my requirement and I get a response that I can see in the Chrome console. What could be wrong with pagination as I cannot see the pagination buttons.
Here's the code:
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<base href="/">
<title>The Single Page Blogger</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular-resource.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script data-require="ui-bootstrap@*" data-semver="0.12.1" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script>
<script src="<%=request.getContextPath()%>/js/module.js"></script>
<link rel="stylesheet" href="<%=request.getContextPath()%>/style2.css" />
<script>
//Get table from Server and do pagination
app.controller("tableController", function ($scope, $http) {
$scope.filteredTodos = []
, $scope.currentPage = 1
, $scope.numPerPage = 10
, $scope.maxSize = 5;
$scope.getTable = function () {
$scope.customerTable = [];
$http.get('<%=request.getContextPath()%>/GetTable.do').success(function (data)
{
$scope.customerTable = data;
});
};
$scope.getTable();
$scope.$watch("currentPage + numPerPage", function () {
var begin = (($scope.currentPage - 1) * $scope.numPerPage)
, end = begin + $scope.numPerPage;
$scope.filteredTodos = $scope.customerTable.slice(begin, end);
});
});
</script>
</head>
<body>
<div class="container" id="main"><br/><br/>
Search: <input type="text" ng-model="search" placeholder="Search">
<div ng-controller="tableController">
<table class="table table-striped table-hover table-bordered">
<tr>
<th style="font-size: 13.3px">Card number</th>
<th style="font-size: 13.3px">First name</th>
<th style="font-size: 13.3px">Opening balance</th>
<th style="font-size: 13.3px">Withdrawal</th>
<th style="font-size: 13.3px">Deposit</th>
<th style="font-size: 13.3px">Closing balance</th>
<th style="font-size: 13.3px">Tx date</th>
<th style="font-size: 13.3px">Usage type</th>
</tr>
<tr ng-repeat="data in customerTable| filter: search">
<td>{{data.CARD_NUMBER}}</td>
<td>{{data.FIRST_NAME}}</td>
<td>{{data.OPENING_BALANCE}}</td>
<td>{{data.WITHDRAWAL}}</td>
<td>{{data.DEPOSIT}}</td>
<td>{{data.CLOSING_BAL}}</td>
<td>{{data.TXDATE}}</td>
<td>{{data.USAGE_TYPE}}</td>
</tr>
</table>
<pagination
ng-model="currentPage"
total-items="customerTable.length"
max-size="maxSize"
boundary-links="true">
</pagination>
<br/><br/><br>
</form>
</div>
</div>
</body>
</html>
Here's the plunker: http://plnkr.co/edit/eNgT4bVroGIla4EOdkNZ?p=preview
Module:
var app = angular.module('myApp', ['ui.bootstrap']);
+3
source to share
1 answer
Try it,
<tr ng-repeat="data in filteredTodos| filter: search">
<td>{{data.CARD_NUMBER}}</td>
<td>{{data.FIRST_NAME}}</td>
<td>{{data.OPENING_BALANCE}}</td>
<td>{{data.WITHDRAWAL}}</td>
<td>{{data.DEPOSIT}}</td>
<td>{{data.CLOSING_BAL}}</td>
<td>{{data.TXDATE}}</td>
<td>{{data.USAGE_TYPE}}</td>
</tr>
You must repeat filteredTodos
insteadcustomerTable
+1
source to share