使用laypage分页

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">     </span><span style="font-family: Arial, Helvetica, sans-serif; font-size: 18px; background-color: rgb(255, 255, 255);">在开发的时候经常遇到分页比较麻烦，尤其对于一个后端程序猿来说，但是这个问题不能不解决，于是找了一个分页的控件用用，记录在下，以便以后使用。</span>

首先看下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'); //你也可以直接使用jqueryvar 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>

插件下载地址：http://res.sentsin.com/download/laypage-v1.2.zip

现在来看看插件的配置：

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节点。

现在看下效果：

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

记录于此。2015-08-09

使用laypage分页相关推荐

java实现layui分页_基于LayUI分页和LayUI laypage分页的使用示例
本文介绍了LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页,分享给大家,具体如下: 效果图: 一.引用js依赖主要是jquery-1.11. ...
SpringBoot + laypage分页 + 模糊查询
之前写过一篇关于JSP调用laypage分页的博客,写的比较详细,但是也比较繁杂,正好由于新项目分页的需要,故用SpringBoot将其重写,顺便集成了模糊查询. 1.效果图 2.domain(实体类 ...
laypage分页java例子_laypage分页插件的使用
laypage是用于分页的插件,该插件通过js请求分页数据 1.载入js文件 2.在页面中显示分页信息的地方插入标记 3.添加js var url = '{:url("article/lis ...
layui的laypage分页插件使用
window.onload= function () {loadData() //请求数据getPage() //分页操作}var page=1; //设置首页页码var limit=2; //设置一 ...
laypage 分页控件使用方法
1.官方网站 http://laypage.layui.com/ 2.示例demo /*** 分页工具类,支持自动进行数据分页* @param {page.totalPage} 总页数* @param ...
使用laypage进行分页
laypage是一款开源的js分页组件,用起来十分方便,官网:http://sentsin.com/layui/laypage/ 前台代码: <head><title>用户列表 ...
【Layui】使用table和laypage组件实现动态显示列和分页
脚本内容 layui.use(['table', 'laypage'], function () {var table = layui.table;var laypage = layui.laypag ...
基于layuiCMS2.0开发后台管理系统，实现自定义分页并动态加载数据表格的示例...
2019独角兽企业重金招聘Python工程师标准>>> 公司让做一个app基础数据管理后台系统,前端就以layuiCMS2.0为模板,拷贝到项目resources/static目录下 ...
【Springboot学习笔记】SpringBoot+Mybatis+Thymeleaf+Layui数据表单从零开始实现按条件模糊分页查询的方法
[Springboot学习笔记]SpringBoot+Mybatis+Thymeleaf+Layui数据表单从零开始实现按条件模糊分页查询的方法目录 1.搭建环境 1.1直接从网上下载SpringB ...
html财务统计,财务统计.html · 珠烟/layuiadmin-templete - Gitee.com
众创数字资产综合运营管理平台年份请选择 2017 2016 2015 2014 今日近7天近30天查询 2016-12-01 至 2016-12-28共计: 成交数量:1800 商品成本:1200 ...

使用laypage分页

使用laypage分页相关推荐

最新文章

热门文章