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 相关文章推荐
jquery 回车事件实现代码
Aug 23 Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
Oct 14 Javascript
浅析javascript中的Event事件
Dec 09 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
Dec 23 Javascript
微信小程序 JS动态修改样式的实现代码
Feb 10 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
Feb 21 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
Mar 08 Javascript
vue-resource请求实现http登录拦截或者路由拦截的方法
Jul 11 Javascript
js实现每日签到功能
Nov 29 Javascript
vue中选中多个选项并且改变选中的样式的实例代码
Sep 16 Javascript
ant design vue datepicker日期选择器中文化操作
Oct 28 Javascript
微信小程序实现录音Record功能
May 09 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
一个改进的UBB类
2006/10/09 PHP
php程序员应具有的7种能力小结
2014/11/27 PHP
PHP操作FTP类 (上传、下载、移动、创建等)
2016/03/31 PHP
浅谈PHP表单提交(POST&amp;GET&amp;URL编/解码)
2017/04/03 PHP
PHP-CGI远程代码执行漏洞分析与防范
2017/05/07 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
2012/06/22 Javascript
jquery动画3.创建一个带遮罩效果的图片走廊
2012/08/24 Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
2013/10/17 Javascript
jQuery简单图表peity.js使用示例
2014/05/02 Javascript
BootStrap glyphicons 字体图标实现方法
2016/05/01 Javascript
原生的强大DOM选择器querySelector介绍
2016/12/21 Javascript
antd组件Upload实现自己上传的实现示例
2018/12/18 Javascript
[04:30]显微镜下的DOTA2第五期——拉比克
2013/09/26 DOTA
[33:23]Secret vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
rhythmbox中文名乱码问题解决方法
2008/09/06 Python
Python过滤函数filter()使用自定义函数过滤序列实例
2014/08/26 Python
python判断一个集合是否包含了另外一个集合中所有项的方法
2015/06/30 Python
Django实现支付宝付款和微信支付的示例代码
2018/07/25 Python
selenium+python实现自动化登录的方法
2018/09/04 Python
解决Python下imread,imwrite不支持中文的问题
2018/12/05 Python
python3使用flask编写注册post接口的方法
2018/12/28 Python
Python简易版图书管理系统
2019/08/12 Python
PyTorch中topk函数的用法详解
2020/01/02 Python
解决Python 函数声明先后顺序出现的问题
2020/09/02 Python
REISS英国官网:伦敦High Street最受欢迎品牌
2016/12/21 全球购物
巴黎卡诗加拿大官网:Kérastase加拿大
2018/11/12 全球购物
数控技术应届生求职信
2013/11/13 职场文书
捐款倡议书
2014/04/14 职场文书
触电现场处置方案
2014/05/14 职场文书
关于建议书的格式范文
2014/05/20 职场文书
小浪底导游词
2015/02/12 职场文书
党员个人总结自评
2015/02/14 职场文书
2015民办小学年度工作总结
2015/05/26 职场文书
《没有任何借口》读后感:完美的执行能力
2020/01/07 职场文书
基于HTML十秒做出淘宝页面
2021/10/24 HTML / CSS