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 相关文章推荐
最近项目写了一些js,水平有待提高
Jan 31 Javascript
JQuery从头学起第二讲
Jul 04 Javascript
jquery form 隐藏的input 选择
Apr 29 Javascript
js中的json对象详细介绍
Oct 29 Javascript
js正则表达式匹配数字字母下划线等
Apr 14 Javascript
原生ajax处理json格式数据的实例代码
Dec 25 Javascript
JavaScript仿支付宝6位数字密码输入框
Dec 29 Javascript
three.js实现3D模型展示的示例代码
Dec 31 Javascript
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
vue项目中使用scss的方法步骤
May 16 Javascript
深入解读VUE中的异步渲染的实现
Jun 19 Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
Aug 10 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下实现伪 url 的超简单方法[转]
2007/09/24 PHP
PHP 函数call_user_func和call_user_func_array用法详解
2014/03/02 PHP
PHP实现二叉树的深度优先与广度优先遍历方法
2015/09/28 PHP
WordPress中用于检索模版的相关PHP函数使用解析
2015/12/15 PHP
php实现异步数据调用的方法
2015/12/24 PHP
PHP中strnatcmp()函数“自然排序算法”进行字符串比较用法分析(对比strcmp函数)
2016/01/07 PHP
Yii2中YiiBase自动加载类、引用文件方法分析(autoload)
2016/07/25 PHP
laravel 5.3中自定义加密服务的方案详解
2017/05/09 PHP
PHP清除缓存的几种方法总结
2017/09/12 PHP
简单实现php上传文件功能
2017/09/21 PHP
自动完成JS类(纯JS, Ajax模式)
2009/03/12 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
2013/01/04 Javascript
jQuery实现文本框邮箱输入自动补全效果
2015/11/17 Javascript
JavaScript文本框脚本编写的注意事项
2016/01/25 Javascript
JS未跨域操作iframe里的DOM
2016/06/01 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
2016/08/24 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
2017/02/05 Javascript
老生常谈ES6中的类
2017/07/31 Javascript
vue计算属性无法监听到数组内部变化的解决方案
2019/11/06 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
2020/02/09 Javascript
[48:31]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第一场 2月2日
2021/03/11 DOTA
Python实现替换文件中指定内容的方法
2018/03/19 Python
在PYQT5中QscrollArea(滚动条)的使用方法
2019/06/14 Python
Python批量将图片灰度化的实现代码
2020/04/11 Python
python对批量WAV音频进行等长分割的方法实现
2020/09/25 Python
PyCharm2019.3永久激活破解详细图文教程,亲测可用(不定期更新)
2020/10/29 Python
Python实现邮件发送的详细设置方法(遇到问题)
2021/01/18 Python
彻底解决pip下载pytorch慢的问题方法
2021/03/01 Python
CSS3实现超酷的黑猫警长首页
2016/04/26 HTML / CSS
商场中秋节广播稿
2014/01/17 职场文书
集中整治工作方案
2014/05/01 职场文书
园林专业毕业生自荐信
2014/07/04 职场文书
2014年公务员工作总结
2014/11/18 职场文书
2016年度农村党员干部主题教育活动总结
2016/04/06 职场文书
SpringBoot 整合mongoDB并自定义连接池的示例代码
2022/02/28 MongoDB
深入理解 Golang 的字符串
2022/05/04 Golang