简单记录一下，后台用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>