laypage分页控件使用实例详解

 更新时间:2016年05月19日 15:43:47   作者:萤火虫小Q  
这篇文章主要为大家详细分享了laypage分页控件使用实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

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

//以下将以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.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节点。
现在看下效果:


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

谢谢大家的阅读,希望大家继续关注脚本之家的更多精彩内容。

相关文章

  • js前端实现登录拼图验证功能

    js前端实现登录拼图验证功能

    行为验证码通过用户的操作来完成验证,常见的行为验证码有拖动式和点触式,下面这篇文章主要给大家介绍了关于js前端实现登录拼图验证功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-02-02
  • JavaScript练习小项目之修改div块的颜色

    JavaScript练习小项目之修改div块的颜色

    这篇文章主要给大家介绍了关于JavaScript练习小项目之修改div块的颜色的相关资料,文中通过举例介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2023-01-01
  • three.js欧拉角和四元数的使用方法

    three.js欧拉角和四元数的使用方法

    这篇文章主要给大家介绍了关于three.js欧拉角和四元数的使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者使用three.js具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2020-07-07
  • 微信小程序中为什么使用var that=this

    微信小程序中为什么使用var that=this

    这篇文章主要介绍了小程序中为什么使用var that=this的相关知识,本文通过示例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • JavaScript阻止浏览器返回按钮的方法

    JavaScript阻止浏览器返回按钮的方法

    这篇文章主要介绍了JavaScript阻止浏览器返回按钮的方法,可实现通过javascript禁用掉返回按钮的功能,需要的朋友可以参考下
    2015-03-03
  • 使用clipboard.js实现复制功能的示例代码

    使用clipboard.js实现复制功能的示例代码

    本篇文章主要介绍了使用clipboard.js实现复制功能的示例代码,详细介绍了clipboard.js插件的使用,有兴趣的可以了解一下
    2017-10-10
  • 微信小程序中使用自定义图标(阿里icon)的方法

    微信小程序中使用自定义图标(阿里icon)的方法

    这篇文章主要介绍了微信小程序中使用自定义图标(阿里icon)的方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-08-08
  • JavaScript navigator.userAgent获取浏览器信息案例讲解

    JavaScript navigator.userAgent获取浏览器信息案例讲解

    这篇文章主要介绍了JavaScript navigator.userAgent获取浏览器信息案例讲解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-08-08
  • js判断对象是否拥有某个key的两种方法对比

    js判断对象是否拥有某个key的两种方法对比

    JS中数组和对象是等同的,我们经常遇到需要判断一个key是否存在于对象中的情况,这篇文章主要给大家介绍了关于如何利用js判断对象是否拥有某个key的两种方法对比,需要的朋友可以参考下
    2023-12-12
  • 微信小程序Flex布局用法深入浅出分析

    微信小程序Flex布局用法深入浅出分析

    这篇文章主要介绍了微信小程序Flex布局用法,深入浅出地罗列分析了flex弹性布局常见的属性、功能及使用方法,需要的朋友可以参考下
    2019-04-04

最新评论