Layui+angular 分页插件封装

页面效果：

插件源代码：

/**
 * @description CHPager 基于angular v1.5.0+ 版本 layui 分页插件的封装
 * @author chenpeng
 * @version v1.0
 */

; (function (undefined) {
    "use strict"
    var _global;

    function extend(o, n, override) {
        for (var key in n) {
            if (n.hasOwnProperty(key) && (!o.hasOwnProperty(key) || override)) {
                o[key] = n[key];
            }
        }
        return o;
    };

    function CHPager(opt) {
        this._initial(opt);
    };

    CHPager.prototype = {
        constructor: this,
        _initial: function (opt) {
            var def = {
                elementId: '', // 待渲染元素的ID
                url: '', // 向后台请求的地址
                pageno: 0, // 页号
                pagesize: 10, // 每页数据量
                total: 0, // 总的数据量
                groups: 4, // 默认显示数据的最大数量
                subdataobj: {}, // 向后台提交的数据
                resultList: [], // 后台请求返回的数据
                $http: null, // angular的$http对象  
                _clientHandler: null, // 开放给客户端的接口
                _changePageNum: null, // 开发给客户端修改页面号的接口
            };
            this.def = extend(def, opt, true); // 配置参数
        },
        // 渲染分页组件
        renderPager: function () {
            var _that = this;
            layui.use('laypage', function () {
                var laypage = layui.laypage;
                laypage.render({
                    elem: _that.def.elementId,
                    count: _that.def.total,
                    limit: _that.def.pagesize,
                    groups: _that.def.groups,
                    jump: function (obj, first) {
                        if (!first) {
                            _that.def.pageno = obj.curr
                            _that.doFetchData();
                        }
                    }
                });
            });
        },
        // 初始化查询pager
        initPagerQuery :function () {
            if (this.checkNotNull(this.def.$http)) {
                var _that = this;
                this.def.$http.post(this.def.url, this.def.subdataobj).then(
                    function (resp) {
                        if (resp.status && resp.status === 200) {
                            var pageredData = resp.data;
                            _that.def.total = pageredData.total;
                            _that.def.resultList = pageredData.data
                            _that.renderPager(); // 渲染layui分页组件
                            if (_that.checkFunction(_that.def._clientHandler)) {
                                _that.def._clientHandler(_that.def.resultList, _that.def.total);
                            }
                        } else {
                            layer.msg("对不起查询失败，请稍后重试");
                        }
                    },
                    function (resp) {
                        layer.msg("对不起查询失败,请稍后重试");
                    }
                );
            } else {
                console.error("请检查是否引用了angular $http模块");
            }

        },
        // 查询数据
        doFetchData : function () {
            // 修改页号码
            if (this.checkFunction(this.def._changePageNum)) {
                this.def._changePageNum(this.def.subdataobj, String(this.def.pageno), this.def.total);
            } else {
                console.error("客户端缺少changePagenum方法")
            }
            if (this.checkNotNull(this.def.$http)) {
                var _that = this;
                this.def.$http.post(this.def.url, this.def.subdataobj).then(
                    function (resp) {
                        if (resp.status && resp.status === 200) {
                            var pageredData = resp.data;
                            var resultList = pageredData.data;
                            _that.def.total = pageredData.total;
                            if (_that.checkFunction(_that.def._clientHandler)) {
                                _that.def._clientHandler(resultList, _that.def.total);
                            }
                        } else {
                            layer.msg("对不起查询失败，请稍后重试");
                        }
                    },
                    function (err) {
                        layer.msg("对不起查询失败,请稍后重试");
                    }
                );
            } else {
                console.error("缺少angular$http模块");
            }
        },
        // 校验参数是否为function
        checkFunction : function (funcname) {
            return funcname && funcname instanceof Function
        },
        // 校验参数为非空
        checkNotNull : function (param) {
            return !(param == null || param == '' || param == undefined)
        },  
        // 条件修改后重新加载数据
        doRefreshQuery: function() {
            this.def.pageno = "0"; // 前端页面号码置0
            this.def._changePageNum(this.def.subdataobj, "0"); // 查询条件pageNo置0
            this.initPagerQuery(); // 重新初始化查询
        }

    } 
    
    _global = (function () { return this || (0, eval)('this'); }());
    if (typeof module !== "undefined" && module.exports) {
        module.exports = CHPager;
    } else if (typeof define === "function" && define.amd) {
        define(function () { return CHPager; });
    } else {
        !('CHPager' in _global) && (_global.CHPager = CHPager);
    }
}());

 使用方法：

   $scope.myfilter = {
        orderBy: '', // 排序字段
        order: '', // 排序方式:asc , desc
        page: '1', 
        pageSize: '5',
        conditions: {
             ... 你的模糊查询的条件
        }
    }
 

    // 添加分页插件
    var chpager = new CHPager({
        elementId: 'myapp', // 指定要渲染分页的区域
        url: "",  // 后台查询数据的url
        pagesize: $scope.myfilter.pageSize, // 每页的数据量大小
        subdataobj: $scope.myfilter, // 待提交的数据
        $http: $http, // angular自带的http
        _clientHandler: function (datalist) { // 交给页面如何渲染数据
            $scope.applist = datalist; 
        _changePageNum: function (subdata, curr) { // 改变页号后回调函数，设置页号
            subdata.page = curr
        }
    });


    // 初始化查询
    chpager.initPagerQuery();


    // 条件改变后手动刷新页面
    chpager.doRefreshQuery();