AngularJs中分頁插件

時間 2019-12-01

原文原文鏈接

在angular中面對一些比較複雜的項目咱們須要讓本身的代碼具備複用性。
因此封裝一些本身的額插件必不可少。
而分頁插件則是比較經常使用的一類插件。
話很少說直接上代碼：
HTML：css

<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>

csshtml

.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');

由於是在項目中使用，直接複製粘貼是使用不了的。須要結合本身的項目需求來進行引入使用。後端

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。