分页JQuery插件

自定义分页插件

js:

(function(){
    var $options = null;
    var $containerObj = null;
    $.fn.customedPagination = function(options){
        $containerObj = $(this);
        var $defaults = {
            pageNum:1,//当前页索引
            pageSize:10,//页大小 每页显示条数
            displayNum:7,//可视区域内可选择的页数
            total:0,//总条目数
            onSelectPage:function(pageNum,pageSize){
                //alert("pageNum: " + pageNum + "; pageSize: " + pageSize);

            }
        };

        $options = $.extend($defaults,options);

        var htmlStr = getHtmlStr();
        $containerObj.html(htmlStr);
    };

    function getHtmlStr(){
        var $total = parseInt($options.total);
        var $pageSize = parseInt($options.pageSize);
        var $pageNum = parseInt($options.pageNum);
        var $displayNum = parseInt($options.displayNum);
        var $halfDisplayNum = parseInt($displayNum/2);

        var $totalPageNum = Math.ceil($total/($pageSize*1.0));
        var htmlStr = '<ul>';
        if($total == 0){
            htmlStr += '<li class="prevCls disabledCls"><a href="javascript:void(0);">&lt;&lt;</a></li>';
            htmlStr += '<li class="nextCls disabledCls"><a href="javascript:void(0);">&gt;&gt;</a></li>';
        }else{
            var startNum = $pageNum-$halfDisplayNum;
            if(startNum<1){
                startNum = 1;
            };
            var endNum = $pageNum + $halfDisplayNum;
            //alert("endNum: " + endNum + "; $totalPageNum: " + $totalPageNum);
            if(endNum > $totalPageNum){
                endNum = $totalPageNum;
                if($totalPageNum >= $displayNum){//尽可能显示多的页数
                    startNum = $totalPageNum - $displayNum + 1;
                }
            }
            //alert("startNum: " + startNum + "; endNum: " + endNum);
            if(startNum == 1){
                htmlStr += '<li class="prevCls disabledCls"><a href="javascript:void(0);">&lt;&lt;</a></li>';
            }else{
                htmlStr += '<li class="prevCls"><a class="prevPageLinkCls" href="javascript:void(0);">&lt;&lt;</a></li>';
            }   

            for(var i=startNum; i<=endNum; i++){
                if(i == $pageNum){
                    htmlStr += '<li class="selectedPageCls"><a href="#">' + i + '</a></li>';
                }else{
                    htmlStr += '<li><a class="pageLinkCls" href="javascript:void(0);">' + i + '</a></li>';
                }
            }

            if(endNum == $totalPageNum){           
                htmlStr += '<li class="nextCls disabledCls"><a href="javascript:void(0);">&gt;&gt;</a></li>';
            }else{
                htmlStr += '<li class="nextCls"><a class="nextPageLinkCls" href="javascript:void(0);">&gt;&gt;</a></li>';
            }
        }
        htmlStr += '</ul>';

        return htmlStr;
    }

    //点击页码
    $(document).on('click','a.pageLinkCls',function(){
        var clickPageNumber = this.innerText;
        $options.pageNum = clickPageNumber;
        var htmlStr = getHtmlStr();
        $containerObj.html(htmlStr);
        $options.onSelectPage($options.pageNum,$options.pageSize);
    });

    //点击上一页
    $(document).on('click','a.prevPageLinkCls',function(){
        var tempPageNum = $options.pageNum;
        if(tempPageNum>1){
            $options.pageNum = tempPageNum - 1;
        }
        var htmlStr = getHtmlStr();
        $containerObj.html(htmlStr);
    });
    //点击下一页
    $(document).on('click','a.nextPageLinkCls',function(){
        var tempPageNum = $options.pageNum;
        var $total = parseInt($options.total);
        var $pageSize = parseInt($options.pageSize);
        var $totalPageNum = Math.ceil($total/($pageSize*1.0));
        if(tempPageNum<$totalPageNum){
            $options.pageNum = tempPageNum + 1;
        }
        var htmlStr = getHtmlStr();
        $containerObj.html(htmlStr);
    });
})();

css:

.customed-pagination-cls ul li{
    float:left;     /*列表横向显示*/
    list-style:none;
    width:35px;
    height:35px;
    border:1px solid #ddd;
    display: -webkit-flex; /* Safari */
    display: flex;/*弹性布局*/
    justify-content:center;
    align-items:Center;

}

.customed-pagination-cls ul li a{
    text-decoration:none;
    color:#337ab7;
}

.customed-pagination-cls ul li.prevCls, .customed-pagination-cls ul li.nextCls{
    font-size:10px;
}

.customed-pagination-cls ul li.disabledCls{
    background-color:#ccc;
}
.customed-pagination-cls ul li.disabledCls a{
    color:#fff;
}
/*选中的li*/
.customed-pagination-cls ul li.selectedPageCls{
    background-color:#286090;
    color:#fff;
}
.customed-pagination-cls ul li.selectedPageCls a{
    color:#fff;
}

测试页面html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>分页组件测试</title>
        <!-- customedPagination.css -->
        <link rel="stylesheet" th:href="@{/css/customedPlugins/customedPagination.css}" />
        <style type="text/css">     
        </style>
    </head> 
    <body>

        <!-- class="datetimeInputCls" --> 
        <div id="testPaginationDIV" style="float:right;" class="customed-pagination-cls">
        </div> 
        <!--[if !IE]><!-->
        <script th:src="@{/jquery/2.1.4/jquery-2.1.4.min.js}"></script>
        <!--<![endif]--> 

        <!--[if IE]><!-->
        <script th:src="@{/jquery/1.11.0/jquery-1.11.0.min.js}"></script>
        <!--<![endif]-->

        <script th:src="@{/js/customedPlugins/customedPagination.js}"></script>

        <script th:inline="javascript">
         /*<![CDATA[*/           

             $("#testPaginationDIV").customedPagination({ 
             total:100,
             <!-- 根据选中页号和页面大小编写页号点击事件 -->
             onSelectPage:function(pageNum,pageSize){
                    alert("pageNum: " + pageNum + "; pageSize: " + pageSize);

                }
         });

        /*]]>*/
        </script>       
    </body>
</html>