前端之家收集整理的这篇文章主要介绍了
jquery+json实现分页,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
基本方法:通过使用jquery向服务器发送一个ajax请求,获取json格式的数据,然后将数据拼凑成行,附加到表格的后面,通过使用jquery pagination插件实现分页。
页面需要引入的js文件:
<link href="jqueryPager/pagination.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jqueryPager/jquery-1.3.2.js"></script>
<script type="text/javascript" src="jqueryPager/jquery.pagination.js"></script>
//页面加载时,进行绑定
$(function(){
bind(0);
});
//点击分页时调用的函数,page_id为当前页的索引
function pageselectCallback(page_id,jq) {
bind(page_id);
}
function bind(pageIndex)
{
var trs="";
$.ajax({
type:"GET",
url:"Handler1.ashx",
data:"pageIndex="+(pageIndex+1),//传递页面索引
dataType:"json",
//发送请求前,显示加载动画
beforeSend:function(){$("#divload").show();$("#datas #Pagination").hide()},
//请求完毕后,隐藏加载动画
complete:function(){$("#divload").hide();$("#datas #Pagination").show()},
success:function(msg){
//将除表头以外的行移除
$("#datas @H_502_144@ tr:gt(0)").remove();
var json=msg.table;
$.each(json,function(index,data){
trs += "<tr><td>" + data.ID + "</td><td>"
+ data.FirstName + "</td><td>" + data.LastName
+ "</td><td>" + data.Note + "</td></tr>";
});
//将创建的新行附加在表格中
$("#datas").append(trs);
//设置表格除表头外,奇偶行的样式
$("#datas @H_502_144@tr:gt(0):odd").attr("class","odd");
$("#datas @H_502_144@tr:gt(0):even").attr("class","enen");
//设置鼠标停留在某一行的样式
$("#datas tr:gt(0)").hover(function(){
$(this).addClass('mouSEOver');
},function(){
$(this).removeClass('mouSEOver');
});
}
});
//调用分页函数,将分页插件绑定到id为Pagination的div上
$("#Pagination").pagination(@H_502_144@<%=recordCount%>,{ //recordCount在后台定义的一个公有变量,通过从数据库查询记录进行赋值,返回记录的总数
callback: pageselectCallback, //点击分页时,调用的回调函数
prev_text: '« PrevIoUs', //显示上一页按钮的文本
next_text: 'Next »', //显示下一页按钮的文本
items_per_page:20, //每页显示的项数
num_display_entries:6, //分页插件中间显示的按钮数目
current_page:pageIndex, //当前页索引
num_edge_entries:2 //分页插件左右两边显示的按钮数目
});
}
页面HTML代码:
<table id="datas" border="1" cellspacing="0" style="border-collapse: collapse" align="center">
<tr>
<th>用户ID</th>
<th>用户姓氏</th>
<th>用户名字</th>
<th>备注</th>
</tr>
</table>
//显示加载动画
<div id="divload" style="text-align:center">
<img src="ajax-loader.gif" />
</div>
//显示分页插件 <div id="Pagination" class="digg" ></div>