jQuery分页插件

所属分类:导航-分页

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

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

相关插件-分页

简单实用的jQuery分页插件Page

一个简单实用的jQuery分页插件,功能齐全,选择你需要的配置
  分页
 21392  40

基于Vue的分页插件pagination.js

基于jQuery的分页插件大家都用过很多了吧,今天分享一下基于Vue的分页插件pagination.js
  分页
 12625  24

个性的分页插件-JQPAGINATION

jqPagination 为我们提供了一种全新的分页方式,传统的分页是一系列的数字页码,而 jqPagination 则是采用了交互式的文本框来显示类似“Page 1 of 5”的页码。当我们选中文本框的时候,我们可以在文本框中输入指定的页码并跳转到该页。
  分页
 16614  23

jQuery分页插件pagination.js

基于jQuery的分页插件,配置比较详细
  分页
 57357  160

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

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

        我改成这样,完美完成!

    回复
    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定义成全局变量了,页面没反应

    回复
    ?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

    回复
    dreams 0
    2017/6/19 15:52:19
     黑眼圈 0
    2017/6/18 15:10:15

    怎么可以让这些居中显示呀,我加一个<div align="center">不行的呀

        欧米伽1
        2017/6/19 9:59:01

        额   css控制,比如margin:0 auto;这些居中操作也要问  我也不知道说啥了 

    回复
    @咕咕 0
    2017/6/17 12:01:43

    ajax 数据不能保存为全局变量 我怎么把数据填到那个datas里去呢

        欧米伽1
        2017/6/19 9:59:51

        在全局定义datas  然后ajax拿到数据后赋值给datas

    回复
    dreams 0
    2017/6/14 15:22:57

    楼主代码放在ajax里面报错  Error: options is not defined 

        Anony0
        2017/6/15 14:50:56
        把options 前面的var去掉
        欧米伽0
        2017/6/16 15:14:55

        options是全局变量   所以不要再ajax里面定义  在全局定义

    回复
    Anony 0
    2017/6/14 14:28:08

    顶一个,已收藏,挺好用

    回复
取消回复