angulatJs 前端数据分页展示——例

Posted 2020-11-28 林景之

注：css用的是amazeui

 

html:

···
<div style="height:500px;overflow: auto;">
    <table class="am-table" style="width:100%;padding: 10px 30px ">
        <tr>
            <td>序号</td>
            <td>姓名</td>
            <td>电话</td>
            <td>年龄</td>
        </tr>
        <tr ng-repeat="items in list" class="gradeX">
            <td>{{$index+1}}</td>
            <td>{{items.name}}</td>
            <td>{{items.tel}}</td>
            <td>{{items.age}}</td>
        </tr>
    </table>
</div>
<ul class="am-pagination am-pagination-right">
    <li ng-class="{true:‘am-disabled‘}[ 1 == currentPage]"><a href ng-click="firstPage()">首页</a></li>
    <li ng-class="{true:‘am-disabled‘}[ 1 == currentPage]"><a href ng-click="prevPage()">上一页</a></li>
    <li ng-class="pageTool_fun({{n}},‘1‘)" ng-repeat="n in pageToolCursor"><a id="{{n}}" href ng-click="gotoXpage(n)">{{n}}</a></li>
    <li><a>共{{itemsPerPage}}页 ({{totalRow}}条数据)</a></li>
    <li ng-class="{true:‘am-disabled‘}[ (currentPage) == itemsPerPage]"><a href ng-click="nextPage()">后一页</a></li>
    <li ng-class="{true:‘am-disabled‘}[ (currentPage) == itemsPerPage]"><a href ng-click="lastPage()">尾页</a></li>
</ul>
···

 

js:

···
var reqUrl = ‘***‘;
var dataObj = {  //针对个人后台的请求数据，根据情况修改
    ‘pageNumber‘: 1,
    ‘pageSize‘: 10,
    ‘id‘: ‘‘
}

$scope.list = [];
$scope.currentPage = 1; //当前页
$scope.totalRow = 0; //总条数
$scope.itemsPerPage = 0; //总页数
$scope.pageToolCursor = []; //截取的页码

//首页
$scope.firstPage = function() {
    dataObj.pageNumber = 1;
    $http({
            method: ‘get‘,
            params: {
                param: $.toJSON(dataObj) //针对个人用params传参
            },
            data: {},
            url: reqUrl
        })
        .success(function(response, status, headers, config) {
            var rstate = response.result;
            if (rstate == ‘0‘) {
                var _data = response.message;
                $scope.list = _data.list;
                $scope.currentPage = _data.pageNumber;
                $scope.totalRow = _data.totalRow;
                $scope.itemsPerPage = _data.itemsPerPage;
                //初始化页码下标，最多只取前9页
                var itemsNum = 9;
                if ($scope.itemsPerPage < 9) {
                    itemsNum = $scope.itemsPerPage;
                }
                for (i = 1; i <= itemsNum; i++) {
                    $scope.pageToolCursor.push(i);
                }
            } else {
                alert(‘获取数据失败！‘);
            }
        })
        .error(function(response, status, headers, config) {
            alert(‘获取数据失败..‘);
        });
}

//上一页
$scope.prevPage = function() {
    if (!($scope.currentPage == 1)) {
        var reqpages = $scope.currentPage - 1;
        dataObj.pageNumber = reqpages;
        $http({
                method: ‘get‘,
                params: {
                    param: $.toJSON(dataObj)
                },
                data: {},
                url: reqUrl
            })
            .success(function(response, status, headers, config) {
                var rstate = response.result;
                if (rstate == "0") {
                    var _data = response.message;
                    $scope.list = _data.list;
                    $scope.currentPage = _data.pageNumber;
                    $scope.totalRow = _data.totalRow;
                    $scope.itemsPerPage = _data.itemsPerPage;

                    var pageToolCursor = $scope.pageToolCursor;
                    if ($scope.currentPage <= pageToolCursor[0]) {
                        if (pageToolCursor[0] == 1) {return;
                        }
                        var arrayObj = new Array();
                        if ($scope.currentPage < 9) {
                            $scope.pageToolCursor = [‘1‘, ‘2‘, ‘3‘, ‘4‘, ‘5‘, ‘6‘, ‘7‘, ‘8‘, ‘9‘];

                        } else {
                            for (i = $scope.currentPage; i > $scope.currentPage - 9; i--) {
                                arrayObj.unshift(i);
                            }
                            $scope.pageToolCursor = arrayObj;
                        }
                    }
                } else {
                    alert("获取数据失败 !");
                }
            }).error(function(response, status, headers, config) {
                alert(‘获取数据失败..‘);
            });
    }
};

//下一页
$scope.nextPage = function() {
    if (!($scope.currentPage == $scope.itemsPerPage)) {
        var reqpages = $scope.currentPage + 1;
        dataObj.pageNumber = reqpages;
        $http({
                method: ‘get‘,
                params: {
                    param: $.toJSON(dataObj)
                },
                data: {},
                url: reqUrl
            })
            .success(function(response, status, headers, config) {
                var rstate = response.result;
                if (rstate == "0") {
                    var _data = response.message;
                    $scope.list = _data.list;
                    $scope.currentPage = _data.pageNumber;
                    $scope.totalRow = _data.totalRow;
                    $scope.itemsPerPage = _data.itemsPerPage;

                    var pageToolCursor = $scope.pageToolCursor;if ($scope.currentPage >= pageToolCursor[pageToolCursor.length - 1]) {
                        if (pageToolCursor[pageToolCursor.length - 1] == $scope.itemsPerPage) {
                            return;
                        }
                        var arrayObj = new Array();
                        var enditems = 0;
                        var compareNUm = $scope.itemsPerPage - pageToolCursor[pageToolCursor.length - 1];
                        if (compareNUm < 9 && compareNUm > 0) {
                            enditems = $scope.itemsPerPage - pageToolCursor[pageToolCursor.length - 1];
                            for (i = $scope.currentPage + enditems; i > $scope.currentPage + enditems - 9; i--) {
                                arrayObj.unshift(i);
                            }
                        } else {
                            enditems = 9;
                            for (i = $scope.currentPage; i < $scope.currentPage + enditems; i++) {
                                arrayObj.push(i);
                            }
                        }
                        $scope.pageToolCursor = arrayObj;
                    }
                } else {
                    alert("获取数据失败!");
                }
            })
            .error(function(response, status, headers, config) {
                alert(‘获取数据失败..‘);
            });
    }

};


//尾页
$scope.lastPage = function() {
    if ($scope.currentPage == $scope.itemsPerPage) {
        return;
    }
    var reqpages = $scope.itemsPerPage;
    dataObj.pageNumber = reqpages;
    $http({
            method: ‘get‘,
            params: {
                param: $.toJSON(dataObj)
            },
            data: {},
            url: reqUrl
        })
        .success(function(response, status, headers, config) {
            var rstate = response.result;
            if (rstate == "0") {
                var _data = response.message;
                $scope.list = _data.list;
                $scope.currentPage = _data.pageNumber;
                $scope.totalRow = _data.totalRow;
                $scope.itemsPerPage = _data.itemsPerPage;
                var arrayObj = new Array();
                if ($scope.itemsPerPage > 9) {
                    for (i = $scope.itemsPerPage; i > $scope.itemsPerPage - 9; i--) {
                        arrayObj.unshift(i);
                    }
                    $scope.pageToolCursor = arrayObj;
                }
            } else {
                alert("获取数据失败!");
            }
        })
        .error(function(response, status, headers, config) {
            alert(‘获取数据失败..‘);
        });
};

//按页面 进入对应页
$scope.gotoXpage = function(x) {
    if (x > $scope.itemsPerPage) {
        return;
    }
    var reqpages = x;
    dataObj.pageNumber = reqpages;
    $http({
            method: ‘get‘,
            params: {
                param: $.toJSON(dataObj)
            },
            data: {},
            url: reqUrl
        })
        .success(function(response, status, headers, config) {
            var rstate = response.result;
            if (rstate == "0") {
                var _data = response.message;
                $scope.list = _data.list;
                $scope.currentPage = _data.pageNumber;
                $scope.totalRow = _data.totalRow;
                $scope.itemsPerPage = _data.itemsPerPage;
            } else {
                alert("获取数据失败!");
            }
        })
        .error(function(response, status, headers, config) {
            alert(‘获取数据失败..‘);
        });

};
//设置页码 - 当前页    高亮显示  
$scope.pageTool = function(n) {
    var currentPage = $scope.currentPage;
    var returStr = "";
    if (n == currentPage) {
        returStr = "am-active";
    }
    if (n > $scope.itemsPerPage) {
        returStr = "am-disabled";
    }
    return returStr;
};
···