简单记录一下，后台用PageHelper做好分页
image.png
前端的引用
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="//cdn.bootcss.com/bootstrap-select/1.12.2/css/bootstrap-select.min.css" rel="stylesheet">
<link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="//cdn.bootcss.com/select2/4.0.3/css/select2.min.css" rel="stylesheet">
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/angular.min.js"></script>
<script src="//cdn.bootcss.com/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<script src="/js/ngClipboard.js"></script>
<script src="/js/angular-popups.js"></script>
<script src="/js/ui-bootstrap-tpls.js"></script>
<script src="/js/angular-locale_zh.js"></script>
页面
<body ng-app="goods" ng-controller="goodsCtrl">
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="home">
<table id="homeExcel" class="table table-bordered">
<thead>
<tr>
<th>用戶ID</th>
<th>金額</th>
<th>币种</th>
<th>审核状态</th>
<th>审核人</th>
<th>创建时间</th>
<th>修改时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in list">
<td>{{x.userId}}</td>
<td>{{x.amount}}</td>
<td ng-init="money=['','人民币','美元']">{{money[x.countryId]}}</td>
<td>{{x.remark}}</td>
<td ng-init="type=['管理员','充值人员','主管','财务']">{{type[x.operator]}}</td>
<td>{{x.createTime}}</td>
<td>{{x.modifyTime}}</td>
<td>
<button ng-click="doIt(x.id,x.userId,x.countryId,x.amount)">操作</button>
</td>
</tr>
</tbody>
</table>
<!-- 这里引用插件的分页-->
<nav style="text-align: center">
<ul uib-pagination items-per-page="page.pageSize" total-items="page.totalItems" ng-model="page.currentPage"
max-size="page.maxSize" class="pagination" boundary-links="true" force-ellipses="true"
ng-show="display" ng-change="pageChanged()" previous-text="‹" next-text="›"
first-text="«" last-text="»"></ul>
</nav>
</div>
</div>
<script>
angular.module('goods', ['ui.bootstrap']).controller('goodsCtrl', function ($scope, $http) {
$scope.stateTime = "";//起始时间
$scope.endTime = "";//结束时间
//分页组件
$scope.page = {};
$scope.page.totalItems = "";
$scope.page.currentPage = 1;//当前页码
$scope.page.pageSize = 3;
$scope.page.maxSize = 5;
$scope.setPage = function (pageNo) {
$scope.page.currentPage = pageNo;
};
$scope.pageChanged = function () {
$scope.selectByKwyword();
};
$scope.selectByKwyword = function () {
var URL = '/withdraw/search?pageNum=' + $scope.page.currentPage + '&size=' + $scope.page.pageSize;
$http.get(URL).then(function (response) {
$scope.list = response.data.data.list;
$scope.page.totalItems = response.data.data.total;
console.log(response.data.data);
if ($scope.list == null || $scope.list.length == 0) {
$scope.display = false;
} else {
$scope.display = true;
}
});
};
$scope.selectByKwyword();
//提现
$scope.doIt = function (id, userId, countryId, amount) {
if (confirm("审核是否通过")) {
$http.get("/withdraw/doIt?id=" + id + "&userId=" + userId + "&countryId=" + countryId + "&amount=" + amount).then(function (response) {
// if (response.data.errno == 1){
alert(response.data.txt);
// }
$scope.refresh();
});
} else {
alert("审核不通过");
}
};
//刷新页面
$scope.refresh = function () {
location.reload();
}
//清空条件按钮点击事件
$("#btn_clean_search").on("click", function () {
$('#startDate').val("");
$('#endDate').val("");
refresh();
});
});
</script>
</body>
