分页JQuery插件

来源：互联网发布：云计算对个人的影响编辑：程序博客网时间：2024/05/22 05:26

自定义分页插件

这里写图片描述

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>

0 0