记录使用angular实现分页效果

最新推荐文章于 2024-04-21 12:05:35 发布

yjwu5353

最新推荐文章于 2024-04-21 12:05:35 发布

阅读量818

点赞数

文章标签： javascript angularJs 分页

本文链接：https://blog.csdn.net/yjwu5353/article/details/77678531

版权

<ul class="payment_conditions_paging">
    <li ng-click="previous_page()" ng-show="previousPage">
        <img src="static/img/previous_page@2x.png" alt="">
    </li>
    <li ng-repeat="page in pageList"  ng-class="{paging_active: isActivePage(page)}" ng-click="selectPage(page)">{{page}} </li>
    <li class="p_last" ng-show="nextPage">
        <img ng-click="p_last()" src="static/img/next_page@2x.png" alt="">
    </li>
</ul>

/**
 * post请求
 * @param pagination  页数
 * @param url    url
 * @param callBack   回调函数
 * @private
 */
function _get(pagination,url,callBack) {
    $http({
        method: 'post',
        url: url,
        data: {
            "params":{
                'pagination': pagination
            }
        }
    }).then(function successCallback(response) {
        if(response.data.result_code == 0){
            callBack(response);
        }else {
            alert(response.data.result_msg);
        }

    }, function errorCallback(response) {
        // 请求失败执行代码

    });
}

$scope.membershipAccounts = function (){
    $scope.pagination = 0;
    $scope.selPage = 1;
    $scope.pageList = [];

    // 第一页
    _get(0,'dues/transactions',function (response) {
        $scope.accounts = response.data;
        $scope.accountData = response.data.paged_data;
        $scope.total_page = response.data.total_page;
        $scope.pageSize = 3;
        $scope.pages = Math.ceil($scope.accounts.total_data_count / $scope.pageSize);
        //分页数
        $scope.newPages = $scope.pages > 3 ? 3 : $scope.pages;
        for (var i = 0; i < $scope.newPages; i++) {
            $scope.pageList.push(i + 1);
        }
        //当总页数超过分页数，右翻页显示
        if($scope.accounts.total_page >  $scope.pageSize){
            $scope.nextPage = true;
        }else {
            $scope.nextPage = false;
        }

    });

    // 选中某一页
    $scope.selectPage = function (page) {
        // console.log(page);
        $scope.selPage = page;
        $scope.isActivePage(page);
        _get(page-1,'dues/transactions',function (response) {
            // console.log(response);
            $scope.accounts = response.data;
            $scope.accountData = response.data.paged_data;
            $scope.total_page = response.data.total_page;
            $scope.pageSize = 3;
            $scope.pages = Math.ceil($scope.accounts.total_data_count / $scope.pageSize);
            //分页数
            $scope.newPages = $scope.pages > 3 ? 3 : $scope.pages;
        });
        // 当前页数大于等于2时，左翻页显示
        if(page >= 2){
            $scope.previousPage = true;
        }else {
            $scope.previousPage = false;
        }
        //当总页数超过分页数，右翻页显示
        if($scope.accounts.total_page > $scope.pageSize){
            $scope.nextPage = true;
        }else {
            $scope.nextPage = false;
        }
        //当前页数大于等于总页数，右翻页隐藏
        if(page >= $scope.accounts.total_page){
            $scope.nextPage = false;
        }
    };
    // 左翻页
    $scope.previous_page = function () {
        $scope.selectPage($scope.selPage - 1);
        // console.log($scope.selPage);
        var newArr = [];
        angular.forEach($scope.pageList,function (val) {
            this.push(val - 1);
            if(val < 1){
                $scope.previousPage = false;
            }

        },newArr);
        $scope.pageList = newArr;
        console.log(newArr);
        angular.forEach(newArr,function (val) {
            // console.log(val);
            if(newArr.length == 3 && val == 0){
                newArr.splice(0,1);
                newArr.push(val+3);
            }
        });
    };

    // 右翻页效果
    $scope.p_last = function () {
        $scope.selectPage($scope.selPage + 1);
            var newArr = [];
            angular.forEach($scope.pageList,function (val) {
                this.push(val + 1);
                if(val > $scope.accounts.total_page){
                    $scope.nextPage = false;
                }
                $scope.pageList = newArr;
            },newArr);
            // console.log(newArr);
            angular.forEach(newArr,function (val) {
                // console.log(val);
                if(newArr.length == 3 && val > $scope.accounts.total_page){
                    newArr.splice(2,1);
                    newArr.unshift(val-3);

                }
            });
    };
    //设置当前选中页样式
    $scope.isActivePage = function (page) {
        return $scope.selPage == page;
    };

};