jQuery分页插件

所属分类:导航-分页

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

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

相关插件-分页

jQuery分页插件jPages

jPages是一个客户端分页插件,它比其他大多数插件多了很多功能,比如自动翻页,滚动浏览,显示延迟,完全可定制的导航面板也集成项目与Animate.css和延迟加载。
  分页
 201812  125

简单实用的jquery分页插件

简单实用的jquery分页插件
  分页
 18513  57

jQueryPaging分页数据获取插件

基于jQuery的分页及数据获取插件
  分页
 5632  23

强大的js分页组件laypage

layPage是一款多功能的js分页组件,即适用于异步分页,又可用于传统的整页刷新跳页,还支持信息流加载,并且可无缝迁移至Node.js平台。layPage不依赖于任何第三方库,直接拿来用即可,它的接口继承了layui系列组件的一贯简洁,极易上手
  分页
 20139  94

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

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

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

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

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

    回复
    ?不见海的声音 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
        就是的,都是空的
    回复
    ?jeson・ 0
    2017/7/10 9:58:08

    点击下一页的数据就用不了

        0
        2017/7/21 16:38:09

        我也是 会出现 page.setPageListCount is not a function 报错

    回复
    DM 0
    2017/7/5 11:31:46
    兄弟,你的为啥只能每页显示的数量最大是10条啊
        DM0
        2017/7/5 11:32:35
        你测试一下就会发现这个bug
    回复
    dreams 0
    2017/6/19 15:54:07

    就是下面点击的页面是怎么获取的 page-data

    回复
取消回复