layerpage分页能实现数据交互吗

<span style="font-family: Arial, Helvetica, sans-serifbackground-color: rgb(255, 255, 255)"> </span><span style="font-family: Arial, Helvetica, sans-seriffont-size: 18pxbackground-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')//你也可以直接使用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>

插件下载地址：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节点。

1，引入必要的js,css文件。2，在html页面添加:3，添加easyui分页插件到div中：$('#pp').pagination({total:articleJSONArr.length,//总的记录数pageSize:10,//每页显示的大小。pageList:[10,20,50,100],//选择每页显示的记录数的下拉框的值。onSelectPage:function(pageNumber,pageSize){//选择相应的页码时刷新显示内容列表。//把请求的内容放入panel中。varhtml=""articleJSONArr.length/pageSize//页数。//i开始的记录数for(vari=(pageNumber-1)*pageSizeiarticleJSONArr.length?articleJSONArr.length:pageNumber*pageSize)i++)//遍历json{

---