|
基本方法：通过使用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 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 tr:gt(0):odd").attr("class","odd");
$("#datas 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(<%=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> （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
