分页插件（二）

有些效果的分页插件

    效果图：

    代码：

        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);
        }
     });
}