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 相关文章推荐
JQuery下的Live方法和$.browser方法使用代码
Jun 02 Javascript
js实现的仿新浪微博完美的时间组件升级版
Dec 20 Javascript
使用PHP+JQuery+Ajax分页的实现
Apr 23 Javascript
使用jquery局部刷新(jquery.load)从数据库取出数据
Jan 22 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
Jun 24 Javascript
浅谈jQuery中ajaxPrefilter的应用
Aug 01 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
Aug 31 Javascript
Angularjs中controller的三种写法分享
Sep 21 Javascript
jquery.validate表单验证插件使用方法解析
Nov 07 Javascript
vue实现登录后页面跳转到之前页面
Jan 07 Javascript
Vue实现兄弟组件间的联动效果
Jan 21 Javascript
JS自定义滚动条效果
Mar 13 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
Wordpress 相册插件 NextGEN-Gallery 添加目录将中文转为拼音的解决办法
2010/12/29 PHP
php中关于普通表单多文件上传的处理方法
2011/03/25 PHP
PHP无限分类(树形类)
2013/09/28 PHP
PHP中返回引用类型的方法
2015/04/03 PHP
防止动态加载JavaScript引起的内存泄漏问题
2009/10/08 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
2012/05/23 Javascript
jquery如何改变html标签的样式(两种实现方法)
2013/01/16 Javascript
ajax请求get与post的区别总结
2013/11/04 Javascript
jquery操作checkbox实现全选和取消全选
2014/05/02 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
2014/11/03 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
2015/06/25 Javascript
详解Javascript中的原型OOP
2016/10/12 Javascript
JavaScript中常用的验证reg
2016/10/13 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
2016/10/18 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
2017/04/07 jQuery
JavaScript中offsetWidth的bug及解决方法
2017/05/17 Javascript
Nodejs搭建wss服务器教程
2017/05/24 NodeJs
浅谈vue引入css,less遇到的坑和解决方法
2018/01/20 Javascript
在NPM发布自己造的轮子的方法步骤
2019/03/09 Javascript
JS中的算法与数据结构之字典(Dictionary)实例详解
2019/08/20 Javascript
Vue根据条件添加click事件的方式
2019/11/09 Javascript
JS中数组实现代码(倒序遍历数组,数组连接字符串)
2019/12/29 Javascript
JS实现普通轮播图特效
2020/01/01 Javascript
JS继承定义与使用方法简单示例
2020/02/19 Javascript
利用python发送和接收邮件
2016/09/27 Python
Python scipy的二维图像卷积运算与图像模糊处理操作示例
2019/09/06 Python
python实现发送form-data数据的方法详解
2019/09/27 Python
英国领先的运动物理治疗供应公司:Vivomed
2018/07/14 全球购物
什么是跨站脚本攻击
2014/12/11 面试题
审计工作个人的自我评价
2013/12/25 职场文书
公积金转移接收函
2014/01/11 职场文书
计算机应用应届生求职信
2014/07/12 职场文书
大学生上课迟到检讨书
2014/10/15 职场文书
工程项目经理岗位职责
2015/02/02 职场文书
考研经验交流会策划书
2015/11/02 职场文书
win10双系统怎么删除一个系统?win10电脑有两个系统删除一个的操作方法
2022/07/15 数码科技