jquery ajax分页
1.jQuery Pagination参数
参数名 描述 参数值
maxentries 总条目数 必选参数，整数
items_per_page 每页显示的条目数 可选参数，默认是10
num_display_entries 连续分页主体部分显示的分页条目数 可选参数，默认是10
current_page 当前选中的页面 可选参数，默认是0，表示第1页
num_edge_entries 两侧显示的首尾分页的条目数 可选参数，默认是0
link_to 分页的链接 字符串，可选参数，默认是"#"
prev_text “前一页”分页按钮上显示的文字 字符串参数，可选，默认是"Prev"
next_text “下一页”分页按钮上显示的文字 字符串参数，可选，默认是"Next"
ellipse_text 省略的页数用什么文字表示 可选字符串参数，默认是"…"
prev_show_always 是否显示“前一页”分页按钮 布尔型，可选参数，默认为true，即显示“前一页”按钮
next_show_always 是否显示“下一页”分页按钮 布尔型，可选参数，默认为true，即显示“下一页”按钮
callback 回调函数 默认无执行效果
2.使用举例
Js代码
$("#Pagination").pagination(56, {
num_edge_entries: 2,
num_display_entries: 4,
callback: pageselectCallback,
items_per_page:1
});
这段代码表示的含义是：总共有56(maxentries)个列表项，首尾两侧分页显示2(num_edge_entries)个，连续分页主体数目显示4(num_display_entries)个，回调函数为pageselectCallback(callback)，每页显示的列表项为1(items_per_page)。您可以对照参数表修改配置这里的参数
例子：
<script src="js/jquery-1.2.6.pack.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.pagination.js" type="text/javascript"></script>
<link href="js/pagination.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function(){
$("#Pagination").pagination(100, {
callback: pageselectCallback,
prev_text: '<< 上一页',
next_text: '下一页 >>',
items_per_page:2,
num_display_entries:3,
current_page:1,
num_edge_entries:2
});
});
//翻页响应
function pageselectCallback(page_id,jq) {
alert(page_id);
}
</script>
<hr/>
<div id="Pagination" class="flickr" style="text-align:left"></div>
例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript"
src="../../../js/jquery-1.3.2.min.js"></script>
<script type="text/javascript"
src="http://localhost/dyw/js/page/jquery.pagination.js"></script>
<link href="http://localhost/dyw/js/page/pagination.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
/* P返回的是父窗口对象，也就是lhgdialog.html这个页面的window对象。
E调用lhgdialog.html页面的loadinndlg()函数，返回的就是窗口调用页面对象，也就是
加载lhgdialog.js这个页面的window对象。
*/
// 注意！这行代码是每个内容页必须加的内容，否则无法正确显示。
var P = window.parent, E = P.setDialog();
$(document).ready(function(){
$("#wip").html(E.fip);
//启动遮罩层
$("#loading").show();
//加载详情信息
loadHistory(0);
});
//查询角色
function loadHistory(pz) {
$.ajax({type:"POST", url:E.fUrl+"admin/ajaxPageHistory.action",data:{sip:E.fip,p:(pz+1)}, beforeSend:function () {
//$("#QXdiv").html("<img src='"+E.fUrl+"js/image/loading.gif'/ title='\u6b63\u5728\u767b\u5f55,\u8bf7\u7a0d\u540e...'> Loading...");
}, success:function (data) {
var objJson = eval("(" + data + ")");
//alert( eval("(" +objJson.datas+ ")").length);
//总条数
$("#zts").html(objJson.zts);
//分页
loadData(objJson.datas,objJson.zts,pz+1);
}})};
//装载数据
function loadData(obj,pageCount,pageindx){
//除了第一行删除id为t1表格所有行
$("#t1 tr:not(:first)").remove();
var data = eval("(" +obj+ ")");
if(data.length>0){
//有数据
for(var i=0;i<data.length;i++){
$("#t1 >tbody").append("<tr id=\"t1dt\"><td align=\"center\" height=\"25\" valign=\"middle\" bgcolor=\"#fffaee\">"+data[i].xh+"</td><td align=\"center\" valign=\"middle\">"+data[i].wdate+"</td><td align=\"center\" valign=\"middle\"><a href=\""+data[i].wurl+"\" target=\"_blank\">"+data[i].wurl+"</a></td><td align=\"center\" valign=\"middle\">"+data[i].wbrowser+"</td></tr>");
}
$("#Pagination").pagination(pageCount, {
callback: pageselectCallback,
prev_text: '<<上一页',
next_text: '下一页>>',
items_per_page:10,
num_display_entries:4,
current_page:pageindx-1,
num_edge_entries:2
});
}else{
//没有数据...
$("#t1No").show();
}
//数据装载完毕
$("#loading").hide();
}
//翻页响应
function pageselectCallback(page_id,jq) {
//启动遮罩层
$("#loading").show();
loadHistory(page_id);
}
</script>
</head>
<body>
<div id="loading"
style="position: fixed !important; position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 999; background: #000 url(../../../js/image/o_loading.gif) no-repeat center center; opacity: 0.6; filter: alpha(opacity =60); font-size: 14px; line-height: 20px; display: none;"
>
<p id="loading-one"
style="color: #fff; position: absolute; top: 50%; left: 50%; margin: 20px 0 0 -50px; padding: 3px 10px;">
数据加载中...
</p>
</div>
<table style="font-size: 15px;" width="100%">
<tr >
<td align="left" height="25" valign="middle" >
IP:<label id="wip" style="color: red;"></label>共访问页面<label id="zts" style="color: red;"></label>次
</td>
</tr>
</table>
<table width="100%"
style="border: #52aff4 1px solid; border-collapse: collapse; font-size: 12px;"
rules="all" border="1" cellpadding="0" cellspacing="0"
bordercolor="#52aff4" bgcolor="#ffffff" id="t1">
<!--DWLayoutTable-->
<!--DWLayoutTable-->
<tbody>
<tr bgcolor="#c6e6ff">
<td width="44" height="30" align="center" valign="middle">
序号
</td>
<td width="107" align="center" valign="middle">
访问时间
</td>
<td width="362" align="center" valign="middle">
访问页面
</td>
<td width="105" align="center" valign="middle">
浏览器
</td>
</tr>
<tr id="t1No" style="display: none;">
<td align="center" height="25" valign="middle" colspan="4" bgcolor="#fffaee">
没有访问记录...
</td>
</tr>
</tbody>
</table>
<table style="font-size: 12px;" width="100%">
<tr >
<td align="center" height="25" valign="middle" >
<div id="Pagination" class="flickr" style="text-align:center;"></div>
</td>
</tr>
</table>
</body>
</html>