js多功能分页组件layPage使用方法详解


Posted in Javascript onMay 19, 2016

本文的主要目的就是为大家分享layPage 多功能的js分页组件具体操作方法,供大家参考,具体内容如下

php 部分

function index(){
  header('Content-Type:text/html;charset=utf-8');
  // 获取当前页码,默认第一页,设置每页默认显示条数
  $nowpage = I('get.page', 1, 'intval');
  $limits = 8;
  // 获取总条数
  $count = M('Article') -> where(array('status'=>array('egt', 0))) -> count();
  // 计算总页面
  $allpage = ceil($count / $limits);
  $allpage = intval($allpage);
    
  $lists = M('Article') -> where(array('status'=>array('egt', 0)))
          -> page($nowpage, $limits) // page 方法分页
          -> order('createtime desc')
          -> select();
  
  // 跳转分页输出
  $this -> assign('lists', $lists);
  $this -> assign('allpage', $allpage);
  $this -> assign('nowpage', $nowpage);
  $this->display();
  
  /*
  // ajax 分页输出
  $info = array('lists'=>$lists,'allpage'=>$allpage,'nowpage'=>$nowpage);
  $this->ajaxReturn($info,'json');
  */
  
 }

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

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

js 中 laypage(新版本) ajax 分页

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

以上就是本文的全部内容,希望对大家学习分页组件layPage有所帮助。

Javascript 相关文章推荐
Javascript miscellanea -display data real time, using window.status
Jan 09 Javascript
jQuery中ajax的post()方法用法实例
Dec 26 Javascript
3个可以改善用户体验的AngularJS指令介绍
Jun 18 Javascript
javascript简单实现类似QQ头像弹出效果的方法
Aug 03 Javascript
jquery插件方式实现table查询功能的简单实例
Jun 06 Javascript
Angular.js去除页面中显示的空行方法示例
Mar 30 Javascript
微信小程序 websocket 实现SpringMVC+Spring+Mybatis
Aug 04 Javascript
PHP自动加载autoload和命名空间的应用小结
Dec 01 Javascript
JS实现的合并多个数组去重算法示例
Apr 11 Javascript
小程序实现录音上传功能
Nov 22 Javascript
微信小程序pinker组件使用实现自动相减日期
May 07 Javascript
vue 实现动态路由的方法
Jul 06 Javascript
深入理解MVC中的时间js格式化
May 19 #Javascript
Node.js+Express配置入门教程详解
May 19 #Javascript
浅析jquery数组删除指定元素的方法:grep()
May 19 #Javascript
基于jQuery的Web上传插件Uploadify使用示例
May 19 #Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
May 19 #Javascript
当jquery ajax遇上401请求的解决方法
May 19 #Javascript
基于Echarts 3.19 制作常用的图形(非静态)
May 19 #Javascript
You might like
PHP开发不能违背的安全规则 过滤用户输入
2011/05/01 PHP
PHP实现的文件操作类及文件下载功能示例
2016/12/24 PHP
PHP实现更改hosts文件的方法示例
2017/08/08 PHP
实例介绍PHP删除数组中的重复元素
2019/03/03 PHP
ThinkPHP中图片按比例切割的代码实例
2019/03/08 PHP
jQuery学习笔记之控制页面实现代码
2012/02/27 Javascript
JS实现div内部的文字或图片自动循环滚动代码
2013/04/19 Javascript
js采用map取到id集合组并且实现点击一行选中一行
2013/12/16 Javascript
关于网页中的无缝滚动的js代码
2016/06/09 Javascript
微信小程序 video详解及简单实例
2017/01/16 Javascript
用js实现before和after伪类的样式修改的示例代码
2017/09/07 Javascript
js实现登录与注册界面
2017/11/01 Javascript
js实现简单模态框实例
2018/11/16 Javascript
详解nodejs 开发企业微信第三方应用入门教程
2019/03/12 NodeJs
vue+mock.js实现前后端分离
2019/07/24 Javascript
学习LayUI时自研的表单参数校验框架案例分析
2019/07/29 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
2020/04/10 Javascript
JavaScript实现单点登录的示例
2020/09/23 Javascript
[01:09:20]NB vs NAVI Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
python 切片和range()用法说明
2013/03/24 Python
Python六大开源框架对比
2015/10/19 Python
pandas 数据实现行间计算的方法
2018/06/08 Python
python实现杨氏矩阵查找
2019/03/02 Python
Python操作MySQL数据库的两种方式实例分析【pymysql和pandas】
2019/03/18 Python
python3 循环读取excel文件并写入json操作
2020/07/14 Python
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
2013/07/19 HTML / CSS
Hanro官网:奢华男士和女士内衣、睡衣和家居服
2018/10/25 全球购物
英国最大的在线时尚眼镜店:Eyewearbrands
2019/03/12 全球购物
奥地利票务门户网站:oeticket.com
2019/12/31 全球购物
《小山羊和小灰兔》教学反思
2014/02/19 职场文书
《跟踪台风的卫星》教学反思
2014/04/10 职场文书
教育基金募捐倡议书
2014/05/14 职场文书
计算机网络及管理学专业求职信
2014/06/05 职场文书
廉政承诺书2015
2015/04/28 职场文书
杨善洲电影观后感
2015/06/04 职场文书
详解Python+OpenCV绘制灰度直方图
2022/03/22 Python