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 相关文章推荐
从sohu弄下来的flash中展示图片的代码
Apr 27 Javascript
IE8提示Invalid procedure call or argument 异常的解决方法
Sep 30 Javascript
JS实现标签页效果(配合css)
Apr 03 Javascript
js获取当前页面路径示例讲解
Jan 08 Javascript
jQuery 动态云标签插件
Nov 11 Javascript
js动态修改表格行colspan列跨度的方法
Mar 30 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
Nov 13 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
Dec 09 Javascript
每个 JavaScript 工程师都应懂的33个概念
Oct 22 Javascript
深入理解令牌认证机制(token)
Aug 22 Javascript
Javascript模块化机制实现原理详解
Apr 02 Javascript
小程序实现侧滑删除功能
Jun 25 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创建PDF中文文档
2006/10/09 PHP
php中对xml读取的相关函数的介绍一
2008/06/05 PHP
PHP管理内存函数 memory_get_usage()使用介绍
2012/09/23 PHP
邮箱正则表达式实现代码(针对php)
2013/06/21 PHP
php利用ZipArchive类操作文件的实例
2020/01/21 PHP
基于jQuery的投票系统显示结果插件
2011/08/12 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
2013/08/25 Javascript
javascript生成随机数的方法
2014/05/16 Javascript
纯JavaScript实现获取onclick、onchange等事件的值
2014/12/29 Javascript
javascript中Array数组的迭代方法实例分析
2015/02/04 Javascript
轻松搞定js表单验证
2016/10/13 Javascript
JS出现失效的情况总结
2017/01/20 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
2017/07/07 Javascript
webpack 2的react开发配置实例代码
2017/07/28 Javascript
JS去掉字符串中所有的逗号
2017/10/18 Javascript
微信小程序通过保存图片分享到朋友圈功能
2018/05/24 Javascript
vue-cli安装使用流程步骤详解
2018/11/08 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
2018/11/14 Javascript
js实现拖拽元素选择和删除
2020/08/25 Javascript
js重写alert事件(避免alert弹框标题出现网址)
2020/12/04 Javascript
Python操作word常见方法示例【win32com与docx模块】
2018/07/17 Python
django_orm查询性能优化方法
2018/08/20 Python
django model object序列化实例
2020/03/13 Python
使用Python matplotlib作图时,设置横纵坐标轴数值以百分比(%)显示
2020/05/16 Python
CSS3中box-shadow的用法介绍
2015/07/15 HTML / CSS
美国奢侈品在线团购网站:Gilt City
2017/11/16 全球购物
给校长的一封建议书
2014/03/12 职场文书
法制宣传月活动总结
2014/04/29 职场文书
2014年六一儿童节演讲稿
2014/05/23 职场文书
本科毕业生自荐信
2014/06/02 职场文书
2014年招商引资工作总结
2014/11/22 职场文书
匿名信格式范文
2015/05/27 职场文书
小学思品教学反思
2016/02/20 职场文书
Pycharm连接远程服务器并远程调试的全过程
2021/06/24 Python
Pandas数据类型之category的用法
2021/06/28 Python
DIV CSS实现网页背景半透明效果
2021/12/06 HTML / CSS