基于angularjs的分页实现

基于angularjs的分页实现

抱着学习angularjs的想法，写了一个简单的分页指令，重在用angularjs实现分页的各种功能，没有太关注样式，所以说东西确实太丑。

分页.jpg

主要功能：

1、显示总页数
2、每页显示数量
3、首页/尾页
4、上一页/下一页
5、可切换页数，根据选择变化
6、跳转指定页数

原则：

指令负责dom变化渲染
控制器负责数据变化

由于操作行为都发生在指令上，控制器数据的变化需要根据指令的状态决定，所以它们之间就需要同步几个状态：

pageRange       可切换页数的最大范围
itemTotal       数据数组的总长度

pageActive      当前激活的页数
divLength       每页显示数量

除了第一个pageRange和itemTotal从控制器传入就不会发生改变，其他两个会根据指令操作改变状态，并且同步回控制器。

在index.html以属性的方式调用指令，传入参数：

<div pagination page-range="pageRange" item-total="itemTotal" page-active="pageActive" div-length="divLength"></div>

在index.js注册控制器和指令：

(function () {
    angular
        .module("app", [])
        .controller("ctrl", ["$scope", function ($scope) {...}])
        .directive("pagination", function () {...})
})();

控制器内部定义：

.controller("ctrl", ["$scope", function ($scope) {
    // 测试数据
    $scope.items = [];
    for(let i=0; i<200; i++){
        $scope.items.push({
            id:i,
            name: "haha"+i
        })
    }

    //----------------------------------------分页设置-------------------------------------------------------
    // 全局配置
    let pageConf = {
        // 显示页数的最大范围 [3-9]
        pageRange: 1,
        // 初始选中的页数
        initSelect: 1,
        // 每页显示的数量
        divLength: 10,
    };
    // 始终不改变的变量
    $scope.pageRange= pageConf.pageRange;
    // 指令<==>控制器 的变量
    $scope.pageActive= pageConf.initSelect;
    $scope.divLength= pageConf.divLength.toString();
    // 根据测试数据改变
    $scope.itemTotal = $scope.items.length;

    $scope.$watchGroup(["pageActive", "divLength"], function () {
        $scope.pageItems = $scope.items.slice(
            ($scope.pageActive-1)*parseInt($scope.divLength), $scope.pageActive*parseInt($scope.divLength)
        );
    });
    //----------------------------------------分页设置-------------------------------------------------------
}])

其中最重要的就是，根据指令同步回来的pageActive和divLength重新切分数据：

$scope.$watchGroup(["pageActive", "divLength"], function () {
    $scope.pageItems = $scope.items.slice(
        ($scope.pageActive-1)*parseInt($scope.divLength), $scope.pageActive*parseInt($scope.divLength)
    );
});

这要数据切分和dom变化通过两个状态同步，两部分代码逻辑成功解耦在不同模块。

负责dom操作的指令功能：

1、渲染分页组件

.directive("pagination", function () {
    return {
        restrict: "AE",
        replace: true,
        templateUrl: "./pagination.html",
        scope: {
            pageRange: "=pageRange",
            itemTotal: "=itemTotal",
            pageActive: "=pageActive",
            divLength: "=divLength",
        },
        link: function (scope, element, attributes, controller) {...}
    }
})

pagination.html

<div class="pagination">
    <div>
        <span>共 {{pageLength}} 页</span>
        每页
        <select ng-model="divLength" ng-change="recompute()">
            <option value="{{item}}" ng-repeat="item in items">{{item}}</option>
        </select>
        条
    </div>
    <div>
        <ul>
            <li><a href="javascript:" ng-click="start()" ng-class="{'cantClick': pageActive===1||itemTotal===0}">首页</a></li>
            <li><a href="javascript:" ng-click="pre()" ng-class="{'cantClick': pageActive===1||itemTotal===0}">上一页</a></li>
            <li ng-repeat="pl in pList"><a href="javascript:" ng-click="render(pl)" ng-class="{'curActive': pageActive===pl}">{{pl}}</a></li>
            <li><a href="javascript:" ng-click="next()" ng-class="{'cantClick': pageActive===pageLength||itemTotal===0}">下一页</a></li>
            <li><a href="javascript:" ng-click="end()" ng-class="{'cantClick': pageActive===pageLength||itemTotal===0}">尾页</a></li>
        </ul>
    </div>
    <div>
        <input type="number" style="width: 60px;" ng-model="pageIndex"/>
        <button ng-click="jump(pageIndex)">跳转</button>
    </div>
</div>

2、渲染 可切换页数

// 最下层都不做合法性的检验，上层确保输入数据的正确性。
scope.render = function (pageActive) {
    // 先清空，再渲染
    scope.pList = [];
    let range = scope.pageRange>scope.pageLength?scope.pageLength:scope.pageRange;
    let offset = Math.floor(scope.pageRange / 2);
    if (pageActive - offset <= 1) {
        for (let i = 1; i < range + 1; i++) {
            scope.pList.push(i);
        }
    }
    else if (pageActive + offset >= scope.pageLength) {
        for (let i = scope.pageLength; i > scope.pageLength - range; i--) {
            scope.pList.unshift(i);
        }
    } else {
        for (let i = pageActive - offset; i <= pageActive + offset; i++) {
            scope.pList.push(i);
        }
    }
    scope.pageActive = pageActive;
    scope.pageIndex = pageActive;
};

3、上一页/下一页

scope.pre = function () {
    if(scope.pageActive>1){
        scope.render(scope.pageActive - 1);
    }
};
scope.next = function () {
    if(scope.pageActive<scope.pageLength){
        scope.render(scope.pageActive + 1);
    }
};

4、首页/尾页

scope.start = function () {
    if(!(scope.pageActive===1)){
        scope.render(1);
    }
};
scope.end = function () {
    if(!(scope.pageActive===scope.pageLength)){
        scope.render(scope.pageLength);
    }
};

5、跳转

scope.jump = function(pageActive){
    if((typeof scope.pageLength!=="number")||pageActive<1||pageActive>scope.pageLength){
        alert(`Please enter a valid page number! range from 1 to ${scope.pageLength}.`);
        scope.pageIndex = scope.pageActive;
    } else {
        scope.render(pageActive);
        element.find("button").attr("disabled", "disabled");
    }
};
scope.$watch("pageIndex", function (newVal) {
    if((typeof newVal!=="number")||newVal === scope.pageActive){
        element.find("button").attr("disabled", "disabled");
    } else {
        element.find("button").removeAttr("disabled");
    }
});

6、改变每页显示数量

scope.recompute = function() {
    // 重新计算总共多少页
    scope.pageLength = Math.ceil(scope.itemTotal / scope.divLength);
    // 重置跳转到第一页
    scope.render(1);
};

7、初始化

scope.render(scope.pageActive);

完整index.js代码

(function () {
    angular
        .module("app", [])
        .controller("ctrl", ["$scope", function ($scope) {
            // 测试数据
            $scope.items = [];
            for(let i=0; i<200; i++){
                $scope.items.push({
                    id:i,
                    name: "haha"+i
                })
            }

            //----------------------------------------分页设置-------------------------------------------------------
            // 全局配置
            let pageConf = {
                // 显示页数的最大范围 [3-9]
                pageRange: 1,
                // 初始选中的页数
                initSelect: 1,
                // 每页显示的数量
                divLength: 10,
            };
            // 始终不改变的变量
            $scope.pageRange= pageConf.pageRange;
            // 指令<==>控制器 的变量
            $scope.pageActive= pageConf.initSelect;
            $scope.divLength= pageConf.divLength.toString();
            // 根据测试数据改变
            $scope.itemTotal = $scope.items.length;

            $scope.$watchGroup(["pageActive", "divLength"], function () {
                $scope.pageItems = $scope.items.slice(
                    ($scope.pageActive-1)*parseInt($scope.divLength), $scope.pageActive*parseInt($scope.divLength)
                );
            });
            //----------------------------------------分页设置-------------------------------------------------------
        }])
        .directive("pagination", function () {
            return {
                restrict: "AE",
                replace: true,
                templateUrl: "./pagination.html",
                scope: {
                    pageRange: "=pageRange",
                    itemTotal: "=itemTotal",
                    pageActive: "=pageActive",
                    divLength: "=divLength",
                },
                link: function (scope, element, attributes, controller) {
                    // 没有数据
                    if((typeof scope.itemTotal!=="number")||scope.itemTotal<1){
                        scope.itemTotal = 0;
                        element.find("input").attr("disabled", "disabled");
                        element.find("select").attr("disabled", "disabled");
                        element.find("button").attr("disabled", "disabled");
                        return;
                    }
                    // 每页显示数量
                    scope.items = [10, 30, 50];
                    // 分页列表
                    scope.pList = [];
                    // 计算总共多少页
                    scope.pageLength = Math.ceil(scope.itemTotal / scope.divLength);

                    // 校验初始scope.pageActive是否合法，不合法重置为1
                    if((typeof scope.pageActive!=="number")||scope.pageActive<1||scope.pageActive>scope.pageLength){
                        scope.pageActive = 1;
                        console.log('Reset pageActive = 1');
                    }
                    // 校验初始scope.pageRange是否合法，不合法重置为9
                    if((typeof scope.pageRange!=="number")||scope.pageRange<2||scope.pageRange>9){
                        scope.pageRange = 9;
                        console.log('Reset pageRange = 9');
                    }

                    // 最下层都不做合法性的检验，上层确保输入数据的正确性。
                    scope.render = function (pageActive) {
                        // 先清空，再渲染
                        scope.pList = [];
                        let range = scope.pageRange>scope.pageLength?scope.pageLength:scope.pageRange;
                        let offset = Math.floor(scope.pageRange / 2);
                        if (pageActive - offset <= 1) {
                            for (let i = 1; i < range + 1; i++) {
                                scope.pList.push(i);
                            }
                        }
                        else if (pageActive + offset >= scope.pageLength) {
                            for (let i = scope.pageLength; i > scope.pageLength - range; i--) {
                                scope.pList.unshift(i);
                            }
                        } else {
                            for (let i = pageActive - offset; i <= pageActive + offset; i++) {
                                scope.pList.push(i);
                            }
                        }
                        scope.pageActive = pageActive;
                        scope.pageIndex = pageActive;
                    };
                    scope.pre = function () {
                        if(scope.pageActive>1){
                            scope.render(scope.pageActive - 1);
                        }
                    };
                    scope.next = function () {
                        if(scope.pageActive<scope.pageLength){
                            scope.render(scope.pageActive + 1);
                        }
                    };
                    scope.start = function () {
                        if(!(scope.pageActive===1)){
                            scope.render(1);
                        }
                    };
                    scope.end = function () {
                        if(!(scope.pageActive===scope.pageLength)){
                            scope.render(scope.pageLength);
                        }
                    };
                    scope.jump = function(pageActive){
                        if((typeof scope.pageLength!=="number")||pageActive<1||pageActive>scope.pageLength){
                            alert(`Please enter a valid page number! range from 1 to ${scope.pageLength}.`);
                            scope.pageIndex = scope.pageActive;
                        } else {
                            scope.render(pageActive);
                            element.find("button").attr("disabled", "disabled");
                        }
                    };
                    scope.$watch("pageIndex", function (newVal) {
                        if((typeof newVal!=="number")||newVal === scope.pageActive){
                            element.find("button").attr("disabled", "disabled");
                        } else {
                            element.find("button").removeAttr("disabled");
                        }
                    });
                    scope.recompute = function() {
                        // 重新计算总共多少页
                        scope.pageLength = Math.ceil(scope.itemTotal / scope.divLength);
                        // 重置跳转到第一页
                        scope.render(1);
                    };
                    // 初始化
                    scope.render(scope.pageActive);
                }
            }
        })
})();
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容