簡(jiǎn)單記錄一下，后臺(tái)用PageHelper做好分頁
image.png
前端的引用
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet">
<link rel="stylesheet">
<link rel="stylesheet">
<link 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="http://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>審核狀態(tài)</th>
<th>審核人</th>
<th>創(chuàng)建時(shí)間</th>
<th>修改時(shí)間</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=['管理員','充值人員','主管','財(cái)務(wù)']">{{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 = "";//起始時(shí)間
$scope.endTime = "";//結(jié)束時(shí)間
//分頁組件
$scope.page = {};
$scope.page.totalItems = "";
$scope.page.currentPage = 1;//當(dāng)前頁碼
$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();
//提現(xiàn)
$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();
}
//清空條件按鈕點(diǎn)擊事件
$("#btn_clean_search").on("click", function () {
$('#startDate').val("");
$('#endDate').val("");
refresh();
});
});
</script>
</body>
