layPage 多功能的js分页组件

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

新增 demo(2016-01-14)

php 部分

1. function index(){
2.     header('Content-Type:text/html;charset=utf-8');
3.     // 获取当前页码，默认第一页，设置每页默认显示条数
4.     $nowpage = I('get.page', 1, 'intval');
5.     $limits = 8;
7.     // 获取总条数
8.     $count = M('Article') -> where(array('status'=>array('egt', 0))) -> count();
9.     // 计算总页面
10.     $allpage = ceil($count / $limits);
11.     $allpage = intval($allpage);
12.         
13.     $lists = M('Article') -> where(array('status'=>array('egt', 0)))
14.                     -> page($nowpage, $limits)  // page 方法分页
15.                     -> order('createtime desc')
16.                     -> select();
17.     
18.     // 跳转分页输出
19.     $this -> assign('lists', $lists);
20.     $this -> assign('allpage', $allpage);
21.     $this -> assign('nowpage', $nowpage);
22.     $this->display();
23.     
24.     /*
25.     // ajax 分页输出
26.     $info = array('lists'=>$lists,'allpage'=>$allpage,'nowpage'=>$nowpage);
27.     $this->ajaxReturn($info,'json');
28.     */
29.     
30.  }

复制代码

js 中 laypage(新版本) 跳转分页

1. // 分页
2. laypage({
3.     cont: 'show_pages', // 分页容器
4.     pages: "{$allpage}",     // 总页数
5.     skip: true, //是否开启跳页
6.     curr: function(){
7.         var page = "{$nowpage}"; // 当前页(后台获取到的)
8.         return page ? page : 1; // 返回当前页码值
9.     }(),
10.     jump: function(e, first){ //触发分页后的回调(单击页码后)
11.         if(!first){ //一定要加此判断，否则初始时会无限刷新
12.             var urls = "{:U('article/index',array('page'=>'pageval'))}";
13.             var nowpage = e.curr;  // (被单击的页码)
14.             urls = urls.replace('pageval',nowpage); // 替换链接样式和页码
15.             window.location.href = urls;
16.         }
17.     }
18.  });

复制代码

js 中 laypage(新版本) ajax 分页

1. function demo(curr){
2.     $.getJSON("{:U('article/index')}", {
3.         page: curr //向服务端传的参数，此处只是演示
4.     }, function(res){ // 服务器返回的 json 结果
5.         // 这里处理 res.lists 中的数据内容，使用 html() 方法显示
6.         // 略……
7.         
8.         //显示分页
9.         laypage({
10.             cont: 'show_pages', // 容器
11.             pages: res.allpage,     // 总页数(后台的)
12.             curr: res.nowpage, //当前页(后台获取到的)
13.             jump: function(obj, first){ //触发分页后的回调(单击页码后)
14.                 if(!first){ //点击跳页触发函数自身，并传递当前页：obj.curr
15.                     demo(obj.curr);  // (被单击的页码)
16.                 }
17.             }
18.         });
19.     });
20.  };
21.  // 初始化运行
22. demo();