JQuery-ajax-Pagination分页例子
<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%><%@ taglib prefix="s" uri="/struts-tags" %>
<!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>
<title>file upload</title>
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/pagination.css" />
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/demo.css" />
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.pagination.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
type : "POST",
url : "<%=request.getContextPath()%>/findForPage2.action", //此处是调用后台的ACTION
//data : "ws.gameid="+gameid,
dataType : "json",
success :function(data){
initPagination(data);//data是返回来的json数据
}
});
});
function initPagination(msg) {
$("#Pagination").pagination(msg.listProduct.length, {
num_edge_entries: 2,
num_display_entries: 8,
callback: function(page_index,jq){
pageselectCallback(page_index,jq,msg);//回调函数，把json数据传过去以便显示时取数
},
items_per_page:2//每页两条
});
}
function pageselectCallback(page_index, jq,msg){
var new_content="";
for(var i=page_index*2;i<(page_index+1)*2;i++)
{
if(null!=msg.listProduct){//判断如果存在那么多条记录才循环
new_content = "<tr>"+msg.listProduct.productname+"</tr>"+new_content;
}
}
$('#Searchresult').empty().append(new_content);
return false;
}
</script>
</head>
<body>
<h1>jQuery Pagination Plugin Demo</h1>
<div id="Pagination"></div>
<br style="clear:both;" />
<div id="Searchresult">
This content will be replaced when pagination inits.
</div>
<div id="hiddenresult" >
</div>
</body>
</html>
不明白的联系：QQ 654865674
http://dl.iteye.com/upload/attachment/432920/21f3b28f-3198-3abc-b68a-5349dfd30493.jpghttp://dl.iteye.com/upload/attachment/432922/24afd2ae-81c5-370c-ad20-7abb18f6d9ce.jpg
页:
[1]