Angularjs 角js中的分页
我通过http post调用从数据库获取数据并呈现表。实现代码看起来不错,但是分页似乎不起作用 我根据我的需求实现了它,并且得到了可以在chrome控制台中看到的响应。分页可能有什么问题,因为我看不到任何分页按钮 代码如下:Angularjs 角js中的分页,angularjs,Angularjs,我通过http post调用从数据库获取数据并呈现表。实现代码看起来不错,但是分页似乎不起作用 我根据我的需求实现了它,并且得到了可以在chrome控制台中看到的响应。分页可能有什么问题,因为我看不到任何分页按钮 代码如下: <!doctype html> <html lang="en" ng-app="myApp"> <head> <meta charset="utf-8">
<!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>
试试这个
<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>
{{data.CARD_NUMBER}
{{data.FIRST{u NAME}
{{data.OPENING{u BALANCE}}
{{data.drawing}
{{data.DEPOSIT}}
{{data.CLOSING{u BAL}}
{{data.TXDATE}
{{data.USAGE{u TYPE}
您应该迭代
filteredTodos
而不是customerTable
我可以看到分页,而且一切似乎都正常工作是的,它不适用于我的代码。plunker只是一个解调器,您将它定义为一个注入依赖项?就像在like中一样,var-app=angular.module('app',['ui.bootstrap'])代码>?我在代码中看不到ui-bootstrap-tpls-0.12.1.min.js
脚本,你检查过你有像plunker一样的东西吗?是的,刚才我添加了它,尝试过,但仍然没有工作。当我使用filteredTodos时,无法在视图上获取响应数据。我可以在chrome控制台中看到响应,但使用filteredTodos表是空的。情况并非总是这样,是的,但如果你让它成为空的话!例如,$http.get()
向服务器发送一个异步调用,当调用获取数据时,其余的代码将被编译,因此有时在加载页面时,您无法准备好数据。这是人们使用promises、$q s等的众多原因之一。在您的例子中,您需要进行大量动态编译,编译的不仅仅是AngularJS部分,还有,您在顶部导入的CSS和js似乎需要一些时间,因为提供的路径是使用
根据上下文编译的。我建议您使用相对路径加载这些内容。@kittu为您找到了一些东西:)
<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>