分页插件（二）

来源：互联网发布：win8如何更改网络类型编辑：程序博客网时间：2024/06/06 07:00

摘自：http://www.zhaochao.top/iBlog/article.html?id=70

有些效果的分页插件

效果图：

代码：

pageTools.css

/*分页显示*/.pageBox{   float:right;   margin:18px 0;}.pageMenu{   display: inline-block;   width:100%;}.pageMenu li{   float:left;   color:#333;   font-size:16px;   text-align: center;}.pageMenu .middPage{   margin-right:20px;}.pageMenu .topPage{   display: inline-block;   border: 1px solid #eee;    margin: 0 10px;    background: #fff;    padding: 0px 5px;    text-align: center;    line-height: 25px;    border-radius: 3px;   -webkit-border-radius: 3px;   -moz-border-radius: 3px;   color: #333;}.pageMenu .prevPage{   margin-top:2px;}.pageMenu .nextPage .numPage{   display: inline-block;   width:28px;   height:26px;   text-align: center;   line-height: 26px;   color:#333;   font-size:16px;   background:#eee;   border-radius: 3px;   -webkit-border-radius: 3px;   -moz-border-radius: 3px;   padding: 0px 5px;}.pageMenu .nextPage .nujm{   width:30px;}.pageMenu .jumpPage .shuruNum{   width:40px;   height:18px;   margin-left:2px;   line-height: 18px;   border-radius: 3px;   -webkit-border-radius: 3px;   -moz-border-radius: 3px;   border:none;   border:1px solid #eee;}.pageMenu  .jumpPage{   margin:2px 10px 0 0;   color:#333;   font-size:16px;}/*鼠标点击分页页码样式*/.pageMenu .nextPage .pageActi{   color:#fff;   background:#62C2FE;   border-radius: 3px;   -webkit-border-radius: 3px;   -moz-border-radius: 3px;}

pageTools.js:

/** * 分页工具类 * @author zhaochao * @param pageId      分页div的id * @param currentPage  当前页 * @param sumPage     总页数 * @param sumCount    总数据条数 * @param fn         点击分页时要执行的方法，方法的第一个参数要是page * @description       使用时候需要结合pageTools.css文件 */function pageTool(pageId, currentPage, sumPage, sumCount, fn) {   var con =        '<div class="pageBox">' +         '    <ul class="pageMenu">' +        '       <li><a href="javascript:;" ' +        ' id="page_' + (currentPage > 1 ? parseInt(currentPage) - 1 : 1) + '" ' +        'class="topPage">上一页</a></li>' +        '       <li class="nextPage">';   if (sumPage <= 5) {      for (var i = 1; i <= sumPage; i++) {         con += '      <a href="javascript:;" id="page_' + i + '" class="numPage">' + i + '</a>';      }   } else {      if (currentPage <= 3) {         con +=             '        <a href="javascript:;" id="page_1" class="numPage pageActi">1</a>' +            '        <a href="javascript:;" id="page_2" class="numPage">2</a>' +            '        <a href="javascript:;" id="page_3" class="numPage">3</a>';         if (currentPage == 3) {            con +=                '        <a href="javascript:;" id="page_4" class="numPage">4</a>';         }         con +=            '        ...' +            '       <a href="javascript:;" id="page_' + sumPage + '" class="numPage">' + sumPage + '</a>';      }      if (currentPage > 3) {         con +=             '        <a href="javascript:;" id="page_1" class="numPage pageActi">1</a>' +            '        ...';         if (currentPage <= parseInt(sumPage) - 1) {            con +=                '        <a href="javascript:;" id="page_' + (parseInt(currentPage) - 1) + '" ' +                'class="numPage">' + (parseInt(currentPage) - 1) + '</a>' +               '        <a href="javascript:;" id="page_' + currentPage + '" ' +               'class="numPage">' + currentPage + '</a>' +               '        <a href="javascript:;" id="page_' + (parseInt(currentPage) + 1) + '" ' +               'class="numPage">' + (parseInt(currentPage) + 1) + '</a>';            if (currentPage != parseInt(sumPage) - 1) {               if (currentPage == parseInt(sumPage) - 2) {                  con +=                      '        <a href="javascript:;" id="page_' + sumPage + '" ' +                     'class="numPage">' + sumPage + '</a>';               } else {                  con +=                      '        ...' +                     '        <a href="javascript:;" id="page_' + sumPage + '" ' +                     'class="numPage">' + sumPage + '</a>';               }            }         }          if (currentPage == sumPage) {            con +=                '        <a href="javascript:;" id="page_' + (parseInt(currentPage) - 2) + '" ' +               'class="numPage">' + (parseInt(currentPage) - 2) + '</a>' +               '        <a href="javascript:;" id="page_' + (parseInt(currentPage) - 1) + '" ' +               'class="numPage">' + (parseInt(currentPage) - 1) + '</a>' +               '        <a href="javascript:;" id="page_' + currentPage + '" ' +               'class="numPage">' + currentPage + '</a>';         }      }   }      con +=         '       </li>' +        '       <li><a href="javascript:;" ' +        'id="page_' + (currentPage < sumPage ? parseInt(currentPage) + 1 : sumPage) + '" ' +        'class="topPage">下一页</a></li>' +        '       <li class="jumpPage"><input type="number" class="shuruNum"  min="1" ' +        'max="' + (sumPage > 0 ? sumPage : 1) + '" value="' + currentPage + '"/>页 ' +        '<span style="cursor: pointer;color: #ff6710;" id="jumpPage">跳转<span></li>' +        '       <li class="prevPage">' +        '          共<span class="totalData">' + sumCount + '</span>条记录' +        '       </li>' +        '    </ul>' +        '</div>';     $('#' + pageId).html(con);     $.each($('#' + pageId + ' .nextPage a'), function (i, e) {        if ($(e).text() == currentPage) {           $(e).addClass('pageActi').siblings().removeClass('pageActi');        }     });     $('#' + pageId + ' .pageMenu a').click(function () {        var pageNum = $(this).attr('id').split('_')[1];        pageNum = pageNum > sumPage && sumPage > 0 ? sumPage : pageNum <= 1 ? 1 : pageNum;        if (pageNum != currentPage) {            fn(pageNum);         }     });     $('#' + pageId + ' #jumpPage').click(function () {        var pageNum = $(this).prev().val().trim();        pageNum = pageNum > sumPage && sumPage > 0 ? sumPage : pageNum <= 1 ? 1 : pageNum;        if (pageNum != currentPage) {           fn(pageNum);        }     });}

更多技术资源请访问 http://www.zhaochao.top

阅读全文

0 0