Angularjs实现分页和分页算法

最新推荐文章于 2018-12-21 16:13:39 发布

weixin_40308690

最新推荐文章于 2018-12-21 16:13:39 发布

阅读量342

点赞数 1

分类专栏：学习笔记篇文章标签： angularjs 分页算法

学习笔记篇专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个使用AngularJS实现分页功能的实例，包括页面导航元素的构建、控制器中的分页逻辑以及一个自定义的分页算法。该算法能够根据当前页数动态调整显示的页码范围。

Angularjs实现分页和分页算法

尊重原创：http://blog.youkuaiyun.com/qilin001cs： >>> 添加了上一页和下一页的功能

这里写图片描述

    <div class="box-footer clearfix">
        <ul class="pagination">
            <li class="fa" ng-class="{true:'disabled'}[p_current==1]" ng-click="p_index()">首页</li>
            <li class="fa fa-angle-left" ng-click="pre_index()" ng-if="p_current >= 2"></li>
            <li class="fa"  ng-class="{true:'active'}[p_current==page]"  ng-repeat="page in pages" ng-click="load_page(page)">{{ page }}</li>
            <li class="fa fa-angle-right" ng-click="next_last()"  ng-if="p_current &lt; p_all_page"></li>
            <li class="fa" ng-class="{true:'disabled'}[p_current==p_all_page]" ng-click="p_last()" style="border-right: 0;">尾页</li>
        </ul>
    </div>

控制器

app.controller('pesticideList',function($scope,$http) {
//配置
$scope.count = 0;
$scope.p_pernum = 10;
//变量
$scope.p_current = 1;
$scope.p_all_page =0;
$scope.pages = [];
//
// 查询分页的函数
$scope.getOnePage = function (page,size,callback) {
    $http({
        method:'post',
        url:'/goods/list',
        data:{userId:205,size:size,status:1,current:page},
        headers:{'Content-Type': 'application/x-www-form-urlencoded'},
        transformRequest: function(obj) {
            var str = [];
            for(var p in obj){
                str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
            }
            return str.join("&");
        }
    })
        .then(
            function successCallback(response) {
                console.log(response)
                if(response.data.err_code == 0){
                    $scope.pesticideList = response.data.data.goods;

                    $scope.count=response.data.data.page.total;
                    $scope.p_current = response.data.data.page.current;
                    $scope.p_all_page =Math.ceil($scope.count/$scope.p_pernum);
                    reloadPno();
                    callback();
                }else {
                    console.log(response.data.err_msg);
                }
            },
            function errorCallback(response) {
                console.log(response)
            }
        )

// 第一次初始化
$scope.getOnePage($scope.p_current,$scope.p_pernum,function(){})

//单选按钮选中
$scope.select= function(id){
    alert(id);
}
//首页
$scope.p_index = function(){
    $scope.load_page(1);
}
//上一页
$scope.pre_index = function(){
    console.log($scope.p_current - 1)
    $scope.load_page($scope.p_current - 1,$scope.p_pernum,function(){});
}
//尾页
$scope.p_last = function(){
    $scope.load_page($scope.p_all_page);
}
//下一页
$scope.next_last = function(){
    $scope.load_page($scope.p_current + 1,$scope.p_pernum,function(){});
}
//加载某一页
$scope.load_page = function(page){
    $scope.getOnePage(page,$scope.p_pernum,function(){});
};
//初始化页码
var reloadPno = function(){
    $scope.pages=calculateIndexes($scope.p_current,$scope.p_all_page,8);
};

分页算法* 算法是重点

var calculateIndexes = function (current, length, displayLength) {
    var indexes = [];
    var start = Math.round(current - displayLength / 2);
    var end = Math.round(current + displayLength / 2);
    if (start <= 1) {
        start = 1;
        end = start + displayLength - 1;
        if (end >= length - 1) {
            end = length - 1;
        }
    }
    if (end >= length - 1) {
        end = length;
        start = end - displayLength + 1;
        if (start <= 1) {
            start = 1;
        }
    }
    for (var i = start; i <= end; i++) {
        indexes.push(i);
    }
    return indexes;
};

});