jQuery分页插件

所属分类:导航-分页

 14251  34  查看评论 (80)
jQuery分页插件 ie兼容8
var options={
"id":"page",//显示页码的元素
"data":datas,//需要显示的数据
    "maxshowpageitem":3,//最多显示的页码个数
    "pagelistcount":2,//每页显示数据个数
    "callBack":function(result){
         //将数据增加到页面中,这里设置数据显示样式
    }
};//只需设置options参数,即可使用插件
page.init(datas.length,1,options);//插件初始化

欢迎大家提出批评意见,谢谢!

相关插件-分页

简单的Vue分页插件pagination.js

分页插件,带省略的Vue分页插件
  分页
 7160  31

jQuery翻页插件simplePagination

jQuery翻页插件simplePagination
  分页
 23806  60

jQuery自渲染分页插件

公司要做一个分页的功能,然而在找的插件好多都有BUG,就自己写了一个。无需写任何样式,只需要给他个有宽度的盒子就行
  分页
 7769  20

jQuery分页插件

jQuery分页插件,自带回调页数,代码少有注释。
  分页
 12325  42

讨论这个项目(80)回答他人问题或分享插件使用方法奖励jQ币

    橙色天空 0
    2017/11/17 9:03:02

    楼主,分页可以加上首页和末页吗?

        橙色天空0
        2017/11/17 9:11:16

        不好意思哈,隔天就忘了。是有这个的。。。

    回复
    橙色天空 0
    2017/11/16 18:11:54

    楼主,麻烦问下,比如我定义最多显示页码为2,有时候可能不足一页,但是下面分页page,还是会出现 1 2?还有一个问题,就是,每条数据id为从1往后排,但是每页的数据前面的序号都是从1-10(每页显示10条数据),该怎么做呢?

        橙色天空0
        2017/11/16 18:23:12

        id/10 取余

    回复
    乖乖的猪猪 0
    2017/10/10 18:53:54

    还不错,谢谢分享,不过一些小bug要是能完善就更好了

    回复
    露侦探身边的核华生 0
    2017/9/25 10:24:08

    请问作者,这个分页插件在一个页面中怎么使用两次呀

        0
        2017/10/18 9:24:29

        可以使用两次以上吗,你试过吗,我刚好要用到有什么经验建议吗

    回复
    ?? 0
    2017/9/4 14:23:42

    使用ajax查询数据,对返回数据进行分页,显示不了要加载的内容

        乖乖的猪猪0
        2017/10/12 14:58:45
        具体情况是什么呢
    回复
    ?不见海的声音 0
    2017/8/22 15:05:00

    楼主,这个插件用的ajax返回的数据,callback里面result的值为空怎么解决啊?如果callback函数用datas填充的话又不能分页,求解决啊?卡住了!

    回复
    ^^死寂" 0
    2017/8/11 10:31:26
    web前端-朱世雄 0
    2017/8/10 11:48:55
    ajax只能同步发送,不能异步发送,并且代码不能放在外部文件里面,options会报错,这怎么解决呢,谢谢作者。 回复
    Kev1n 0
    2017/7/20 15:24:36
    function sub2(){
        alert(datas);
      }
    var datas;
    $(document).ready(function(){
       alert("hi");
         $.ajax({  
           url:"/Blog/GetListBlogServlet", 
           dataTypes:"JSON",//数据类型为json格式
           contentType: "application/x-www-form-urlencoded; charset=utf-8", 
           type:"post",  
           data: {
            },
           async:false,
           success:function(data){ 
             alert(data);
             datas=eval(data);
             $("#demoContent").html(datas[0].title);
             return datas;
           } ,
           error:function(){
             alert("error");
           },
           statusCode: {404: function() {  
                alert('page not found'); }  
             }
           }); 
      });
    var options={
    	"id":"page",//显示页码的元素
    	"data":datas,//显示数据
        "maxshowpageitem":3,//最多显示的页码个数
        "pagelistcount":2,//每页显示数据个数
        "callBack":function(result){
        	     var cHtml="";
            for(var i=0;i<result.length;i++){
                cHtml+="<li>"+ result[i].title+"</li>";//处理数据
            }
            $("#demoContent").html(cHtml);//将数据增加到页面中
        }
    };
       page.init(datas.length,1,options);

    通过按钮测试alert(),可以获取到数据了,可是插件无反应,可是如果用此demo自带的datas又可以运行了,不知什么原因,如果将var options和page.init()放入回调函数 那么插件生效,也可判断datas.length的大小而生成页数,可是无法执行 添加数据操作,怎么回事呢???

        Kev1n0
        2017/7/20 15:40:21

        唯一的问题就是,options下的callBack失效

        Kev1n0
        2017/7/20 20:09:41
        var datas="";
        $(document).ready(function(){
           alert("hi");
             $.ajax({  
               url:"/Blog/GetListBlogServlet", 
               dataTypes:"JSON",//数据类型为json格式
               type:"post",  
               data: {
                },
               async:false,
               success:function(data){ 
                 alert(data);
                 datas=eval(data);
                // $("#demoContent").html(datas[0].title);
               } ,
               error:function(){
                 alert("error");
               },
               statusCode: {404: function() {  
                    alert('page not found'); }  
                 }
               });           
          });
        
          var i=0;
           function sub2(){
            alert(datas);
            page.init(datas.length,1,options);
          }
        
        var options={
           "id":"page",//显示页码的元素
           "data":datas,//显示数据
            "maxshowpageitem":3,//最多显示的页码个数
            "pagelistcount":1,//每页显示数据个数
            "callBack":function(result){
                $("#demoContent").html(datas[i].title);//将数据增加到页面中
                i++;
            }
        };

        我改成这样,完美完成!

        ?不见海的声音0
        2017/8/22 14:57:26

        改成这样貌似分页用不了吧 兄弟?

    回复
    Kev1n 0
    2017/7/20 15:00:40
    var datas;
     function sub2(){
         alert(datas);
         datas=eval(datas);
         return datas;
     }
    
    $(document).ready(function sub(){
       alert("hi");
         $.ajax({  
           dataTypes:"JSON",//数据类型为json格式
           contentType: "application/x-www-form-urlencoded; charset=utf-8", 
           type:"GET",  
           data:null,
           async:false,
           url:"/Blog/GetListBlogServlet",  
           success:function(data){ 
             alert(data);
             datas=data;
           } ,
           error:function(){
             alert("error");
           },
           statusCode: {404: function() {  
                alert('page not found'); }  
             }
           }); 
          
      });
    var options={
    	"id":"page",//显示页码的元素
    	"data":datas,//显示数据
        "maxshowpageitem":3,//最多显示的页码个数
        "pagelistcount":2,//每页显示数据个数
        "callBack":function(result){
        	     var cHtml="";
            for(var i=0;i<result.length;i++){
                cHtml+="<li>"+ result[i].title+"</li>";//处理数据
            }
            $("#demoContent").html(cHtml);//将数据增加到页面中
        }
    };
       page.init(datas.length,1,options);
    后台[{"b_content":"000000000000000000000000000","ca_id":101,"create_time":"12312","id":1,"title":"标题2133333333333333"},{"b_content":"000000000000000000000000000","ca_id":101,"create_time":"12312","id":1,"title":"标题2133333333333333"}]

    datas定义成全局变量了,页面没反应

        web前端-朱世雄0
        2017/8/10 11:43:54
        就是的,都是空的
    回复
取消回复