laypage分页控件使用实例详解


Posted in Javascript onMay 19, 2016

在开发的时候经常遇到分页比较麻烦,尤其对于一个后端程序猿来说,但是这个问题不能不解决,于是找了一个分页的控件用用,记录在下,以便以后使用。

以下是官网中使用的简单例子:

//以下将以jquery.ajax为例,演示一个异步分页 
$.getJSON('test/demo1.json', {curr: 6}, function(res){ //从第6页开始请求。返回的json格式可以任意定义 
 laypage({ 
  cont: 'page1', //容器。值支持id名、原生dom对象,jquery对象。【如该容器为】:<div id="page1"></div> 
  pages: res.pages, //通过后台拿到的总页数 
  curr: 6, //初始化当前页 
  jump: function(e){ //触发分页后的回调 
   $.getJSON('test/demo1.json', {curr: e.curr}, function(res){ 
    e.pages = e.last = res.pages; //重新获取总页数,一般不用写 
    //渲染 
    var view = document.getElementById('view1'); //你也可以直接使用jquery 
    var demoContent = (new Date().getTime()/Math.random()/1000)|0; //此处仅仅是为了演示 
    view.innerHTML = res.content + demoContent; 
   }); 
  } 
 }); 
});

一个基本的分页效果也就出来了。

laypage分页控件使用实例详解

如果你需要其他更加绚丽的效果请修改源代码。
先来说下,如果呈现出来一个分页的效果的。
首先呢,引用下控件laypage.js
<script type="text/javascript" src="/lib/laypage/laypage.js"></script> 

插件下载地址:

现在来看看插件的配置:

function SearchJoinMemberInfoPage() { 
 var ccId = parseInt($("#hid_ccid").val(), 10); 
 var saveKey = $("#targetKey").val(); 
 var pageSize = 10; 
 
 //以下将以jquery.ajax为例,演示一个异步分页 
 $.getJSON('/Mobile/AjaxHandler/QuestionAjax.aspx?action=GetRedisJoinMemberInformationById', { 
  type: 2, 
  ccId: ccId, 
  pageIndex: 1, 
  pageSize: pageSize, 
  saveKey: saveKey 
 }, 
 function (res) { //从第1页开始请求。返回的json格式可以任意定义 
  laypage({ 
   cont: 'page1', //容器。值支持id名、原生dom对象,jquery对象。【如该容器为】:<div id="page1"></div> 
   pages: res.pageCount, //通过后台拿到的总页数 
   curr: 1, //初始化当前页 
   skin: '#429842',//皮肤颜色 
   groups: 3, //连续显示分页数 
   skip: true, //是否开启跳页 
   first: '首页', //若不显示,设置false即可 
   last: '尾页', //若不显示,设置false即可 
   //prev: '<', //若不显示,设置false即可 
   //next: '>', //若不显示,设置false即可 
   jump: function (e) { //触发分页后的回调 
    $.getJSON('/Mobile/AjaxHandler/QuestionAjax.aspx?action=GetRedisJoinMemberInformationById', { 
     type: 2, 
     ccId: ccId, 
     pageIndex: e.curr,//当前页 
     pageSize: pageSize, 
     saveKey: saveKey 
    }, function (res) { 
     e.pages = e.last = res.pageCount; //重新获取总页数,一般不用写 
     //渲染 
     var view = document.getElementById('userTable'); //你也可以直接使用jquery 
     //解析数据 
     var resultHtml = PackagData(res); 
     view.innerHTML = resultHtml; 
    }); 
   } 
  }); 
 }); 
}

 /Mobile/AjaxHandler/QuestionAjax.aspx?action=GetRedisJoinMemberInformationById显示了一个异步的地址,该异步返回需要展示的数据,和页数。type:
 2,ccId: ccId,pageIndex: 1,pageSize: pageSize,saveKey: saveKey则是异步中需要用到的参数就不说了。
PackagData(res);该函数是解析返回的数据并呈现出来。
userTable是用于显示返回的数据的dom节点,page1是用于显示页数的按钮的dom节点。
现在看下效果:

laypage分页控件使用实例详解

其实很简单了,这就完成了一个分页显示了。

谢谢大家的阅读,希望大家继续关注三水点靠木的更多精彩内容。

Javascript 相关文章推荐
腾讯的ip接口 方便获取当前用户的ip地理位置
Nov 25 Javascript
JS实现程序暂停与继续功能代码解读
Oct 10 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
Jan 05 Javascript
js实现字符串转日期格式的方法
May 20 Javascript
jquery trigger函数执行两次的解决方法
Feb 29 Javascript
微信小程序 wxapp视图容器 view详解
Oct 31 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
Jan 12 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
Dec 01 Javascript
浅谈node模块与npm包管理工具
Jan 03 Javascript
简单实现vue中的依赖收集与响应的方法
Feb 18 Javascript
小程序两种滚动公告栏的实现方法
Sep 17 Javascript
javascript实现前端分页功能
Nov 26 Javascript
js多功能分页组件layPage使用方法详解
May 19 #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
You might like
php入门教程 精简版
2009/12/13 PHP
在Windows系统上安装PHP运行环境文字教程
2010/07/19 PHP
php自动载入类用法实例分析
2016/06/24 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
PHP钩子实现方法解析
2019/05/21 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
Javascript insertAfter() 实现函数代码
2011/10/12 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
2013/12/14 Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
2015/11/30 Javascript
探讨JavaScript语句的执行过程
2016/01/28 Javascript
浅谈$_FILES数组为空的原因
2017/02/16 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
2017/03/05 Javascript
jQuery EasyUI window窗口使用实例代码
2017/12/25 jQuery
解决layui的form里的元素进行动态生成,验证失效的问题
2019/09/14 Javascript
JS数组方法slice()用法实例分析
2020/01/18 Javascript
Python函数的周期性执行实现方法
2016/08/13 Python
解决在Python编辑器pycharm中程序run正常debug错误的问题
2019/01/17 Python
Python实现生成密码字典的方法示例
2019/09/02 Python
PyTorch实现ResNet50、ResNet101和ResNet152示例
2020/01/14 Python
对tensorflow中tf.nn.conv1d和layers.conv1d的区别详解
2020/02/11 Python
Python基于正则表达式实现计算器功能
2020/07/13 Python
如何在python中实现线性回归
2020/08/10 Python
Python+Appium实现自动化清理微信僵尸好友的方法
2021/02/04 Python
澳大利亚玩具剧场:Toy Playhouse
2019/03/03 全球购物
医学生个人求职信范文
2014/02/07 职场文书
公务员诚信承诺书
2014/05/26 职场文书
服务理念口号
2014/06/11 职场文书
社会学专业求职信
2014/07/17 职场文书
祖国在我心中演讲稿450字
2014/09/05 职场文书
党的群众路线学习笔记
2014/11/06 职场文书
幼儿园教师自我评价
2015/03/04 职场文书
2015年审计人员工作总结
2015/05/26 职场文书
人生遥控器观后感
2015/06/11 职场文书
使用Oracle跟踪文件的问题详解
2021/06/28 Oracle
Pytest中skip skipif跳过用例详解
2021/06/30 Python
Nginx如何获取自定义请求header头和URL参数详解
2022/07/23 Servers