分页导航

发表于   |  更新于   |   分类于   |  

根据页面的数量，动态生成导航。支持每次点击切换页面的回调。可选是否在点击后回到顶部。

git地址
演示

使用步骤

属性说明

1
2
3
4
5
6
7
8
9
this.selector = $(o.selector)||document; //页码添加 的位置
this.index = o.index||1;//当前页码
this.totalpage = o.totalpage||1;
this.islast = o.islast||true; //打开上一页按钮
this.isnext = o.isnext||true; //打开下一页按钮
this.isnum = o.isnum||true; //是否显示页码数字
this.isonehidden = o.isonehidden||true; //页码为1 是否显示
this.triggerevt = o.triggerevt||null; //改变绑定的事件
this.istotop = o.istotop||true; //点击翻页，即回到页面顶部

调用

本组件只负责页码的切换，点击页码后页面的切换，将作为回调运行。
将在.pagenav动态生成页码。

已加载全部页面的调用方式

页面结构如下，此时.page，需要控制display:none;如果没有给.page添加.on,默认给第一个添加.on。

1
2
3
4
5
6
<div class="slidepage">
  <div class="red page"></div>
  <div class="green page"></div>
  <div class="blue page"></div>
</div>
<div class="pagenav"></div>

js如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/*
* 页面控制
*/
var pagechange ={
  UI:function(n){
    $(".slidepage").find(".on").removeClass("on");
    $(".slidepage .page").eq(n-1).addClass("on");
  },
  run:function(n){
    pagechange.UI(n);
  }
}
/*
* 页码组件调用
*/
new Pagination({
  selector:".pagenav",
  totalpage: $(".slidepage .page").length,  
  triggerevt: pagechange.run
});

页面是ajax动态传输的

页面结构如下

1
2
3
<div class="mypage">
</div>
<div class="pagenav"></div>

js如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/*
* 页面控制
*/
var pagechange ={
  UI:function(data){
    //data 数据可能需要处理后写入
    $(".mypage")
      .empty()
      .append(data);
    
  },
  run:function(n){
    /*
    * 继续 ajax
    */
    $.ajax(你的请求).done(function(){
      pagechange.UI(data);
    });
  }
}
/*
* 页码组件调用
* 要把这个初始化仅放在，第一次 ajax后；
* 得到页面总数为 n
*/
new Pagination({
  selector:".pagenav",
  totalpage: n,  
  triggerevt: pagechange.run
});

优化

页码省略

现在页码默认是全显示，当page过多，页面数字就会显示过多。
例如有20页，会显示1到20。

bug

ajax加载，页码先于页面内容显示

尚未修复。
解决方案，将点击页码的响应，分为事件响应和ui变化2部分。
实际的页码ui变化，作为一个闭包函数，作为triggerevt的参数。
最后在ajax请求完成后调用。
考虑到网络延迟，如果请求事件较长，需要引入等待加载动画。避免用户认为无响应。