AngularJs中分页插件

其他 2019-07-04 16:58:16 阅读次数: 0

在angular中面对一些比较复杂的项目我们需要让自己的代码具有复用性。
所以封装一些自己的额插件必不可少。
而分页插件则是比较常用的一类插件。
话不多说直接上代码：
HTML：

<ul class="pagination" ng-show="totalPage>0" data-currPage="{{currentPage}}" data-getBatchData="refreshAssets();">
    <li ng-class="{true:'disabled'}[currentPage<=1]" ng-show="showFirstAndLast" dir-pagination-first>
        <a class="prev pointer" aria-label="Previous" uib-tooltip="{{'page.first' | translate}}">
            <i class="fa fa-angle-double-left"></i>
        </a>
    </li>
    <li ng-class="{true:'disabled'}[currentPage<=1]" dir-pagination-prev>
        <a class="prev pointer" aria-label="Previous" uib-tooltip="{{'page.prev' | translate}}">
            <i class="fa fa-angle-left"></i>
        </a>
    </li>
    <li ng-repeat="page in pages track by $index" ng-class="{true:'disabled'}[currentPage == page || page =='...']"
        data-setPage="{{page}}" dir-load-pagination>
        <a class="pointer" ng-class="{true:'ellipse'}[page =='...']">{{page}}</a>
    </li>
    <li ng-class="{true:'disabled'}[currentPage>=totalPage]" dir-pagination-next>
        <a class="next pointer" aria-label="Next" uib-tooltip="{{'page.next' | translate}}">
            <i class="fa fa-angle-right"></i>
        </a>
    </li>
    <li ng-class="{true:'disabled'}[currentPage>=totalPage]" ng-show="showFirstAndLast" dir-pagination-last>
        <a class="next pointer" aria-label="Next" uib-tooltip="{{'page.end' | translate}}">
            <i class="fa fa-angle-double-right"></i>
        </a>
    </li>
    <li class="pagination-extra-info" ng-show="showPageRule">每页 {{pageSize}} 条，共 {{totalPage}} 页<em class="goPage"
                                                                                                    ng-show="showGoPage">，到第
        <input class="form-control" type="number" ng-model="goPage" min="1" max="{{totalPage}}"/> 页
        <button dir-pagination-go class="btn btn-default" role="button">确定</button>
    </em></li>
</ul>

css

.pagination > li:nth-last-child(2) > a,
.pagination > li:nth-last-child(2) > span {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.pagination-extra-info {
    margin-left: 14px;
    line-height: 36px;
    font-size: 1.375rem;
    color: #666;
}

.pagination-extra-info .form-control {
    display: inline-block;
    width: 65px;
    height: 28px;
    padding: 3px;
    margin-left: 10px;
}

.pagination-extra-info .btn {
    padding: 3px 8px;
    margin-left: 10px;
}

.pagination-extra-info .goPage {
    font-style: normal;
}

.pagination > li > a,
.pagination > li > span {
    color: #4FBDA0;
}

.pagination > li > a > .fa {
    font-size: 16px;
    padding:0 2px;
}

.pagination a.pointer {
    cursor: pointer;
}

.pagination > .disabled > a,
.pagination > .disabled > a:hover {
    background-color: #68b92e;
    color: #fff;
    border-top-color: #68b92e;
    border-bottom-color: #68b92e;
    border-radius: 6px;
}

.pagination > .disabled.pagination-first a,
.pagination > .disabled.pagination-prev a,
.pagination > .disabled.pagination-next a,
.pagination > .disabled.pagination-last a,
.pagination > .disabled > a.ellipse,
.pagination > .disabled > a.prev,
.pagination > .disabled > a.next {
    background-color: #fff;
    color: #777;
    border-color: #ddd;
}

/*sunhuiying*/
.pagination > li > a, .pagination > li > span {
    padding: 2px 7px 2px 7px;
    border: 0;
    margin-top: 8px;
    margin-right:2px;
}

.pagination > li > a, .pagination > li > span {
    color: rgba(0, 0, 0, 0.48);
    font-size: 12px;
}

.col-md-10 > .text-center {
    margin-top: -27px
}

js

/**
 * Created by wangdongqiang on 2015/7/30.
 */
/*分页组件*/
require('./pagination.css');
angular.module('soc.pagination', [])
    .factory('paginationArgs', function () {
        return {
            templateUrl: '/soc/components/pagination/pagination.html', //不可被复写
            currPage: 1,            // 当前页码
            pageSize: 20,           // 每页显示条数，默认20条
            totalPage: 1,           // 总页数
            goPage: 1,
            serverPage: 1,          // 后端当前页码
            serverTotalPage: 1,     // 后端总页码
            serverSize: 0,          // 后端每页数据条数
            serverTotalSize: 0,     // 后端数据总条数
            noPolarPagination: "", /*获取后端分页数据的回调方法，
             * 如果跨controller，建议使用$rootScope传方法
             * 回调方法被调用的时候会传入两个参数：currPage和serverPage，
             * 所以回调方法必需支持 传参 和 对象合并
             */
            showFirstAndLast: true, // 是否显示跳转至第一页或者最后一页
            showPageRule: true,     // 是否显示分页规则，默认显示，如果设为false，则showGoPage自动隐藏 */
            showGoPage: true,       // 是否显示去第几页，默认显示
            resultData: ''          // 返回的数据，放在$rootScope中
        };
    })
    .service('serPagination', ['$rootScope', 'paginationArgs', '$timeout', function ($rootScope, paginationArgs, $timeout) {
        var _dataList = [];
        var _this = this;

        /*dataList: array 分页数据*/
        this.setPagination = function (currentPage, dataList, datas, _paginationArgs) {
            var _pages = [];
            paginationArgs.currPage = currentPage || paginationArgs.currPage;
            _dataList = dataList || _dataList;

            paginationArgs.resultData = datas || paginationArgs.resultData;
            paginationArgs = angular.extend(paginationArgs, _paginationArgs);
            /*处理没有后端分页的情况*/
            paginationArgs.serverTotalSize = paginationArgs.serverTotalSize || _dataList.length;
            paginationArgs.serverSize = paginationArgs.serverSize || _dataList.length;
            //获取总页数
            paginationArgs.totalPage = Math.ceil(paginationArgs.serverTotalSize / paginationArgs.pageSize);
            /*在每批数据中按前端分页取出要显示的数据*/
            var localCurrPage = 1;
            if (paginationArgs.serverSize == paginationArgs.serverTotalSize) {    //无后端分页
                localCurrPage = paginationArgs.currPage;
            } else {  //有后端分页；当前页码和每批数据分页数量相等时，localCurrPage 等于当前前端分页最后一页
                localCurrPage = paginationArgs.currPage % Math.ceil((paginationArgs.serverSize / paginationArgs.pageSize)) || Math.ceil((paginationArgs.serverSize / paginationArgs.pageSize));
            }
            $rootScope[paginationArgs.resultData] = _dataList.slice((localCurrPage - 1) * paginationArgs.pageSize, localCurrPage * paginationArgs.pageSize);
            //生成数字链接
            if (paginationArgs.currPage == paginationArgs.totalPage && paginationArgs.totalPage == 1) {
                _pages = [
                    paginationArgs.currPage
                ];
            } else if (paginationArgs.currPage <= paginationArgs.totalPage && paginationArgs.totalPage <= 5) {
                for (var p = 1; p <= paginationArgs.totalPage; p++) {
                    _pages.push(p);
                }
            } else if (paginationArgs.currPage > 1 && paginationArgs.totalPage > 5 && paginationArgs.totalPage - paginationArgs.currPage <= 3) {
                _pages = [
                    '...',
                    paginationArgs.totalPage - 3,
                    paginationArgs.totalPage - 2,
                    paginationArgs.totalPage - 1,
                    paginationArgs.totalPage
                ];
            } else if (paginationArgs.currPage >= 1 && paginationArgs.totalPage > 5 && paginationArgs.currPage + 1 < paginationArgs.totalPage) {
                _pages = [
                    paginationArgs.currPage,
                    paginationArgs.currPage + 1,
                    paginationArgs.currPage + 2,
                    paginationArgs.currPage + 3,
                    '...'
                ];
            }

            paginationArgs.goPage = paginationArgs.currPage + 1 <= paginationArgs.totalPage ? paginationArgs.currPage + 1 : paginationArgs.currPage;

            $timeout(function () {
                $rootScope.currentPage = paginationArgs.currPage;
                $rootScope.pageSize = paginationArgs.pageSize;
                $rootScope.totalPage = paginationArgs.totalPage;
                $rootScope.pages = _pages;
                $rootScope.goPage = paginationArgs.goPage;
                $rootScope.showPageRule = paginationArgs.showPageRule;
                $rootScope.showGoPage = paginationArgs.showGoPage;
            });
        };

        //删除数据，分页重新渲染，跳转至当前操作页面
        $rootScope.$on('pagination-item-del', function (event, delData) {
            if (typeof paginationArgs.noPolarPagination == 'function') {//数据后端分页处理
                var currPage = $rootScope[paginationArgs.resultData].length == 1 ? $rootScope.currentPage - 1 : $rootScope.currentPage;
                var serverPage = $rootScope.currentPage > Math.ceil((paginationArgs.serverTotalSize - 1) / paginationArgs.pageSize) ? (paginationArgs.serverPage - 1) : paginationArgs.serverPage;
                var data = {
                    currPage: currPage,
                    page: serverPage
                };
                paginationArgs.noPolarPagination(data);
            } else {//前端分页处理
                _.remove(_dataList, function (item) {
                    return item[delData.filterKey] == delData.filterVal;
                });

                var currPage = paginationArgs.currPage > Math.ceil(_dataList.length / paginationArgs.pageSize) ? paginationArgs.currPage -1 : paginationArgs.currPage;

                paginationArgs.serverTotalSize = _dataList.length;
                paginationArgs.serverSize = _dataList.length;
                paginationArgs.currPage = currPage;

                _this.setPagination(currPage, _dataList,  paginationArgs.resultData, paginationArgs);
            }
        });
    }])
    .directive('dirPagination', ['paginationArgs', function (paginationArgs) {
        return {
            restrict: 'AE',
            templateUrl: paginationArgs.templateUrl,
            replace: true,
            transclude: true
        }
    }])
    .directive('dirLoadPagination', ['serPagination', 'paginationArgs', function (serPagination, paginationArgs) {
        return {
            restrict: 'AE',
            link: function (scope, element) {
                element.bind('click', function () {
                    //disabled状态不处理
                    if (element.get(0).className.indexOf('disabled') >= 0) {
                        return;
                    }
                    var _goPage = parseInt(element.text()),
                        _goServerPage = 0;
                    if (_goPage < paginationArgs.currPage) {  //_goPage递减
                        if (_goPage * paginationArgs.pageSize < paginationArgs.serverSize * paginationArgs.serverPage && paginationArgs.serverPage > 1) {
                            var decreasePage = Math.floor((paginationArgs.serverSize * paginationArgs.serverPage - _goPage * paginationArgs.pageSize) / paginationArgs.serverSize);
                            //_goServerPage = paginationArgs.serverPage - 1;
                            _goServerPage = paginationArgs.serverPage - decreasePage;
                        } else {
                            _goServerPage = paginationArgs.serverPage;
                        }
                    } else if (_goPage > paginationArgs.currPage) {    //_goPage递增
                        if (_goPage * paginationArgs.pageSize > paginationArgs.serverSize * paginationArgs.serverPage && paginationArgs.serverPage < paginationArgs.serverTotalPage) {
                            var increasePage = Math.ceil((_goPage * paginationArgs.pageSize - paginationArgs.serverPage * paginationArgs.serverSize) / paginationArgs.serverSize);
                            //_goServerPage = paginationArgs.serverPage + 1;
                            _goServerPage = paginationArgs.serverPage + increasePage;
                        } else {
                            _goServerPage = paginationArgs.serverPage;
                        }
                    }

                    if (_goServerPage == paginationArgs.serverPage) {
                        serPagination.setPagination(_goPage);
                    } else if (_goServerPage > 0 && _goServerPage <= paginationArgs.totalPage) {
                        paginationArgs.currPage = _goPage;
                        paginationArgs.serverPage = _goServerPage;
                        var data = {
                            "currPage": paginationArgs.currPage,
                            "page": _goServerPage
                        };
                        typeof paginationArgs.noPolarPagination == "function" ? paginationArgs.noPolarPagination(data) : "";
                    }
                })
            }
        }
    }])
    .directive('dirPaginationFirst', ['serPagination', 'paginationArgs', function (serPagination, paginationArgs) {
        return {
            restrict: 'AE',
            link: function (scope, element) {
                element.bind('click', function () {
                    //disabled状态不处理
                    if (element.get(0).className.indexOf('disabled') >= 0) {
                        return;
                    }
                    //前一页为0，不可以继续翻页
                    if (paginationArgs.serverPage < 1 || paginationArgs.currPage <= 1) {
                        return;
                    }
                    if (paginationArgs.serverPage == 1) {
                        //服务器页码为第一页，前端直接跳转至第一页
                        paginationArgs.currPage = 1;
                        serPagination.setPagination(paginationArgs.currPage);
                    } else {
                        //服务器页码大于1，服务器端请求第一页数据，前端指向第一页
                        paginationArgs.currPage = 1;
                        paginationArgs.serverPage = 1;
                        var data = {
                            "currPage": paginationArgs.currPage,
                            "page": paginationArgs.serverPage
                        };
                        typeof paginationArgs.noPolarPagination == "function" ? paginationArgs.noPolarPagination(data) : "";
                    }
                });
            }
        }
    }])
    .directive('dirPaginationPrev', ['serPagination', 'paginationArgs', function (serPagination, paginationArgs) {
        return {
            restrict: 'AE',
            link: function (scope, element) {
                element.bind('click', function () {
                    //disabled状态不处理
                    if (element.get(0).className.indexOf('disabled') >= 0) {
                        return;
                    }
                    //前一页为0，不可以继续翻页
                    if (paginationArgs.serverPage < 1 || paginationArgs.currPage <= 1) {
                        return;
                    }
                    var currLocalPosition = (paginationArgs.currPage - 1) * paginationArgs.pageSize;
                    //请求前一页数据，继续翻页
                    //判断临界点
                    if (currLocalPosition % paginationArgs.serverSize === 0) {
                        paginationArgs.currPage--;
                        paginationArgs.serverPage--;
                        //获取前一页数据
                        var data = {
                            "currPage": paginationArgs.currPage,
                            "page": paginationArgs.serverPage
                        };
                        typeof paginationArgs.noPolarPagination == "function" ? paginationArgs.noPolarPagination(data) : "";
                    }
                    //在当前批数据中向前翻页
                    else {
                        paginationArgs.currPage--;
                        serPagination.setPagination(paginationArgs.currPage);
                    }
                });
            }
        }
    }])
    .directive('dirPaginationNext', ['serPagination', 'paginationArgs', function (serPagination, paginationArgs) {
        return {
            restrict: 'AE',
            link: function (scope, element, attrs) {
                element.bind('click', function () {
                    //disabled状态不处理
                    if (element.get(0).className.indexOf('disabled') >= 0) {
                        return;
                    }
                    //已经翻到最后一页，不可以继续翻页
                    if (paginationArgs.currPage >= paginationArgs.totalPage) {
                        return;
                    }
                    var currLocalPosition = paginationArgs.currPage * paginationArgs.pageSize;
                    var currServerPosition = paginationArgs.serverPage * paginationArgs.serverSize;

                    //在当前批数据中向后翻页
                    if (currLocalPosition < currServerPosition) {
                        paginationArgs.currPage++;
                        serPagination.setPagination(paginationArgs.currPage);
                    }
                    //请求后一页数据，继续翻页
                    else if (currLocalPosition == currServerPosition) {
                        paginationArgs.currPage++;
                        paginationArgs.serverPage++;
                        //获取后一页数据
                        var data = {
                            "currPage": paginationArgs.currPage,
                            "page": paginationArgs.serverPage
                        };
                        typeof paginationArgs.noPolarPagination == "function" ? paginationArgs.noPolarPagination(data) : "";
                    }
                });
            }
        }
    }])
    .directive('dirPaginationLast', ['serPagination', 'paginationArgs', function (serPagination, paginationArgs) {
        return {
            restrict: 'AE',
            link: function (scope, element, attrs) {
                element.bind('click', function () {
                    //disabled状态不处理
                    if (element.get(0).className.indexOf('disabled') >= 0) {
                        return;
                    }
                    //已经翻到最后一页，不可以继续翻页
                    if (paginationArgs.currPage >= paginationArgs.totalPage) {
                        return;
                    }

                    if (paginationArgs.serverPage == paginationArgs.serverTotalPage) {
                        //服务器端页码为最后一页
                        paginationArgs.currPage = paginationArgs.totalPage;
                        serPagination.setPagination(paginationArgs.currPage);
                    } else {
                        //服务器页码非最后一页
                        paginationArgs.currPage = paginationArgs.totalPage;
                        paginationArgs.serverPage = paginationArgs.serverTotalPage;
                        var data = {
                            "currPage": paginationArgs.currPage,
                            "page": paginationArgs.serverPage
                        };
                        typeof paginationArgs.noPolarPagination == "function" ? paginationArgs.noPolarPagination(data) : "";
                    }
                });
            }
        }
    }])
    .directive('dirPaginationGo', ['serPagination', 'paginationArgs', function (serPagination, paginationArgs) {
        return {
            restrict: 'AE',
            link: function (scope, element) {
                element.bind('click', function () {
                    var _goPage = parseInt(element.siblings("input").val()),
                        _goServerPage = 0;
                    if (_goPage !== paginationArgs.currPage && _goPage > 0 && _goPage <= paginationArgs.totalPage) {
                        _goServerPage = Math.ceil(_goPage * paginationArgs.pageSize / paginationArgs.serverSize);
                        _goServerPage = _goServerPage > paginationArgs.serverTotalPage ? paginationArgs.serverTotalPage : _goServerPage;
                    } else {
                        return false;
                    }
                    if (_goServerPage == paginationArgs.serverPage) {   //在当前后端分页范围内
                        serPagination.setPagination(_goPage);
                    } else {
                        paginationArgs.currPage = _goPage;
                        paginationArgs.serverPage = _goServerPage;
                        var data = {
                            "currPage": paginationArgs.currPage,
                            "page": _goServerPage
                        };
                        typeof paginationArgs.noPolarPagination == "function" ? paginationArgs.noPolarPagination(data) : "";
                    }
                })
            }
        }
    }]);

module.exports = angular.module('soc.pagination');

因为是在项目中使用，直接复制粘贴是使用不了的。需要结合自己的项目需求来进行引入使用。

猜你喜欢

转载自www.cnblogs.com/Alone-Michael/p/11133326.html
今日推荐
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
“百模大战”必有一战 | 2024中国“百模大战”竞争格局分析
最强开源大模型 Llama 3 上架 Gitee AI
虽然老乡鸡开源的不是代码，但背后的原因却让人很暖心
周排行
决策树的部分理解
STM32软件IIC的实现
RocketMQ原理解析-HA
vue-动态路由（路由的传参和接参）
利用python对Excel中的特定数据提取并写入新表
【Ubuntu】 Ubuntu16.04搭建NFS服务
Elasticsearch基础操作与对应的curl命令行，python对接实现
JVM数据存储结构 & Java的值传递和址传递
yum命令使用指南
java基础（一）：java语法基础
每日归档
更多
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(5)
2024-04-16(70)
2024-04-15(42)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022