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;
  6.     // 获取总条数
  7.     $count = M('Article') -> where(array('status'=>array('egt', 0))) -> count();
  8.     // 计算总页面
  9.     $allpage = ceil($count / $limits);
  10.     $allpage = intval($allpage);
  11.         
  12.     $lists = M('Article') -> where(array('status'=>array('egt', 0)))
  13.                     -> page($nowpage, $limits)  // page 方法分页
  14.                     -> order('createtime desc')
  15.                     -> select();
  16.     
  17.     // 跳转分页输出
  18.     $this -> assign('lists', $lists);
  19.     $this -> assign('allpage', $allpage);
  20.     $this -> assign('nowpage', $nowpage);
  21.     $this->display();
  22.     
  23.     /*
  24.     // ajax 分页输出
  25.     $info = array('lists'=>$lists,'allpage'=>$allpage,'nowpage'=>$nowpage);
  26.     $this->ajaxReturn($info,'json');
  27.     */
  28.     
  29.  }
复制代码
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();
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值