Js分页插件，支持页面跳转

这里先给出API:

你只需要提供一个对象涉及以下几项属性，你来设置属性值，通过jq对象链式调用page()以参数形式来加载这个对象，按照参数要求会自动生成分页功能，

参数中pageEvent是可以让你自定义每个按钮按下时触发的事件，实际运用中你可以在事件中用ajax请求来实现分页，具体例子可以参照page.html文件.
建议使用1.8及1.8以前版本的jquery库，因为live()函数可能不支持.引用格式如下:

 var o1={
            prePage:"上一页",
            nextPage:"下一页",
            totalItems:100,
            pageItems:5,
            maxPages:8,
            pageEvent:exampleFunc,  //当前选取的jquery对象为参数 

        }; 

         function exampleFunc(jq){
          alert(jq.html());
          return jq;
        }

        $(".a1").page(o1);

　　具体代码如下:

;(function($,window,document,undefined){
     var defaults={

        prePage:"上一页",
        nextPage:"下一页",
        totalItems:1,
        pageItems:5,
        maxPages:8,
        pageEvent:exampleFunc,  //当前选取的jquery对象为参数
     };

     function exampleFunc(jq){
        alert(jq.html());
        return jq;
     }

     function Paper($elm,options){

          this.$elm=$elm;
          this.options=options;
          this.init();

     };

     var temp=[]; //存储html字符串的数组
     var items=[]; //存取页数的数组
     var a=0;
     var teams=0;
     var totalPages;  //总页数
     var prePage;
     var nextPage;

     var $elm; //选取的当前dom对象的jquery对象
     var endTeam;
     var maxPages;
     var dispatcher="跳转到";
     var endWord="页";
     Paper.prototype={
           init:function(){
              this.renderHtml();
              this.bindEvent();

           },
           renderHtml:function(){
             if(this.options.totalItems==0){alert('无内容!');}   

            var divStr;

               if(this.options.totalItems%this.options.pageItems<this.options.pageItems && this.options.totalItems%this.options.pageItems!=0){totalPages=parseInt(this.options.totalItems/this.options.pageItems)+1;}else{totalPages=parseInt(this.options.totalItems/this.options.pageItems);}

            teams=parseInt(totalPages/this.options.maxPages); //组数
            endTeam=totalPages%this.options.maxPages; //这个是最后一组的个数

            var that=this.options.maxPages;
            //将所有页组数存进二维数组中
            (function(){

                    for(var i=0;i<teams;i++){
                        items[i]=[];
                        for(var j=0;j<that;j++){

                          items[i][j]=j;
                        }
                    }

                    if(endTeam!=0){

                        items[teams]=[];
                        for(var c=0;c<endTeam;c++){

                            items[teams][c]=c;
                        }
                    }

                })();

               for(var i=0;i<items[0].length;++i){
               divStr="<div class='bg'><a href='#'>"+(a*this.options.maxPages+i+1)+"</a></div>";
                    temp.push(divStr);
                }
               temp.unshift("<div class='start'>"+this.options.prePage+"</div>");
               temp.unshift("<div class='total'>共有"+totalPages+"页</div>");
               temp.push("<div class='end'>"+this.options.nextPage+"</div>");
               temp.push("<div class='bg2'>"+dispatcher+"</div>");
               temp.push("<input class='input' placeholder='1'>");
               temp.push("<div class='bg3'>"+endWord+"</div>");

               this.$elm.html(temp.join(""));

           },
           bindEvent:function(){
              var Pages=this.options.totalItems/this.options.pageItems; //总页数
              var prePage=this.options.prePage;
              var nextPage=this.options.nextPage;
              var $elm=this.$elm;
              var that= this.options;
              maxPages=this.options.maxPages;

             //点击相应某页
            $(".bg").live("click",function(){
                that.pageEvent($(this).children("a"));
                $(this).children("a").css("color","red");
                $(this).siblings().children("a").css("color","#fff");

            });

               //点击上一页
            $(".start").live("click",function(){
                if(a>0)a=a-1;
                else return;
                temp=[];
                for(var i=0;i<items[a].length;++i){

                    divStr="<div class='bg'><a href='#'>"+(a*maxPages+1+i)+"</a></div>";
                    temp.push(divStr);
                }

               temp.unshift("<div class='start'>"+prePage+"</div>");
               temp.unshift("<div class='total'>共有"+totalPages+"页</div>");
               temp.push("<div class='end'>"+nextPage+"</div>");
               temp.push("<div class='bg2'>"+dispatcher+"</div>");
               temp.push("<input class='input' placeholder='1'>");
               temp.push("<div class='bg3'>"+endWord+"</div>");
               $elm.html(temp.join(""));
            });

                 //点击下一页
            $(".end").live("click",function(){
                temp=[]; //temp初始为空数组

                if(items[teams]===undefined){  //最后剩余的一组不存在
                      if(a<teams-1)a=a+1;
                      else return;
                for(var i=0;i<items[a].length;++i){

                    divStr="<div class='bg'><a href='#'>"+(a*maxPages+1+i)+"</a></div>";
                    temp.push(divStr);
                }}else{
                      if(a<teams)a=a+1;
                      else return;
                    for(var i=0;i<items[a].length;++i){

                    divStr="<div class='bg'><a href='#'>"+(a*maxPages+1+i)+"</a></div>";
                    temp.push(divStr);
                }};
               temp.unshift("<div class='start'>"+prePage+"</div>");
               temp.unshift("<div class='total'>共有"+totalPages+"页</div>");
               temp.push("<div class='end'>"+nextPage+"</div>");
               temp.push("<div class='bg2'>"+dispatcher+"</div>");
               temp.push("<input class='input' placeholder='1'>");
               temp.push("<div class='bg3'>"+endWord+"</div>");
               $elm.html(temp.join(""));
            });
                      //点击跳转
               $(".bg2").live("click",function(){

                     temp=[];
                    var input=$(".input").val();

                    if(isNaN(parseInt(input))==true)  a=1;  //字符类型字符串，包括空字符
                    else{

                        if(input%maxPages===0)  a=parseInt(input/maxPages);
                          else{
                             a=parseInt(input/maxPages)+1;
                             var c=input%maxPages;
                          }
                    }
                    a=a-1;
                    for(var i=0;i<items[a].length;++i){

                    divStr="<div class='bg'><a href='#'>"+((a)*maxPages+1+i)+"</a></div>";
                    temp.push(divStr);
                }

                   temp.unshift("<div class='start'>"+prePage+"</div>");
                   temp.unshift("<div class='total'>共有"+totalPages+"页</div>");
                   temp.push("<div class='end'>"+nextPage+"</div>");
                   temp.push("<div class='bg2'>"+dispatcher+"</div>");
                   temp.push("<input class='input' placeholder='1'>");
                   temp.push("<div class='bg3'>"+endWord+"</div>");
                   $elm.html(temp.join(""));
                });
           }
           };

     $.fn.page=function(options){
         var options=$.extend(defaults,options||{});
         return new Paper($(this),options);
     }

  })($,window,document);

　　

这里个给出一个引用例子：

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page</title>
    <script src="../jquery/jquery.js"></script>
    <script src="page.js"></script>
    <style>
       #cont{position: relative;top:10px;left:50px;}
       #a1{position:relative;top:20px;left:10px;}
       .bg{width:30px;height:30px;margin-left:10px;background: #456;float:left;margin-top:10px;text-align: center;line-height: 30px;border-radius:5px;}
       a{text-decoration: none;color:#fff;}
       .start{width:100px;height:30px;float:left;margin-top: 10px;text-align: center;line-height: 30px;color:#fff;background: #456;cursor:pointer;margin-left: 10px;border-radius:5px;}
       .end{width:100px;height:30px;float:left;margin-top: 10px;text-align: center;line-height: 30px;color:#fff;background: #456;margin-left:10px;cursor:pointer;border-radius:5px;}
       .total{width:120px;height:30px;float:left;margin-top:10px;text-align:center;line-height:30px;background: #456;color: #fff;border-radius:5px;}

       .bg2{width:100px;height:30px;margin-left:10px;background: #456;float:left;margin-top:10px;text-align: center;line-height: 30px;border-radius:5px;color: #fff;}
       .bg3{width:30px;height:30px;margin-left:10px;background: #456;float:left;margin-top:10px;text-align: center;line-height: 30px;border-radius:5px;color: #fff;}
       .input{width:50px;height:25px;margin-left:10px;float:left;margin-top:10px;text-align: center;line-height: 30px;border-radius:10px;}

    </style>
</head>
<body>
    <div id="cont">
        <ul>
         <li></li>
         <li></li>
         <li></li>
         <li></li>
         <li></li>

       </ul>
    </div>
    <div id="a1"></div>
   <!--  <div class=""><span class="bg2">跳转到</span><input class="input" type="text"><span class="bg3">页</span> --><!-- </div> -->
    <script>
        var o1={
            prePage:"上一页",
            nextPage:"下一页",
            totalItems:100,
            pageItems:5,
            maxPages:8,
            pageEvent:exampleFunc,  //当前选取的jquery对象为参数 

        }; 

        //一个模拟的json数据对象,这里太长我就简单给出几页数据,建议你用一些框架的列表渲染模式来实现列表生成，这里我手写li是为了让不了解框架的同学也能看到效果。实际运用可以用ajax请求获取这个json对象

        var data={
           1:[1,2,3,4,5],
           2:[6,7,8,9,10],
           3:[11,12,13,14,15],
           4:[16,17,18,19,20],
           5:[21,22,23,24,25],
           6:[26,27,28,29,30],
           7:[31,32,33,34,35],
           8:[36,37,38,39,40]
        }

         function exampleFunc(jq){
          var index=jq.html();
          $("#cont ul li:first").html(data[index][0]);
          $("#cont ul li:first").next().html(data[index][1]);
          $("#cont ul li:first").next().next().html(data[index][2]);
          $("#cont ul li:first").next().next().next().html(data[index][3]);
          $("#cont ul li:first").next().next().next().next().html(data[index][4]);
        }

        //这句是关键句
        $("#a1").page(o1);
    </script>
</body>
</html>

　   模拟的json数据对象,这里太长我就简单给出几页数据,建议你用一些框架的列表渲染模式来实现列表生成，这里我手写li是为了让不了解框架的同学也能看到效果。实际运用可以用ajax请求获取这个json对象　

写下这个插件，花了一些时间，很大的原因是为了培养自己能够熟练造轮子的能力，同时也是锻炼自己Js代码的功力，不管你是为了直接使用，还是学习，都可以下载这个插件的源码，我把代码放到了github上，地址是:https://github.com/Johnharvy/Page-plug-in.我很喜欢Js,是一名入职不久的前端，喜欢钻研Js及前端技术，还有Js越来越多和成熟的运行环境，如果你也是如此，希望在这条路上交您这位朋友，互相学习。有意者可以加我扣扣1667582186(注明博客园)，真心交喜欢Js的朋友，和你一起走向大神之路。