tapestry5---jquery 异步分页
袁泰
思路：
1.用actionlink和jquery.ajax访问页面类；
2.用jquery做分页条（只是个分页条功能）；
3.用block接受返回的结果集（用loop）。
代码如下：
1.tml代码：--Index.tml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<t:MainLayout xmlns:t="http://tapestry.apache.org/schema/tapestry_5_0_0.xsd">
<head>
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript" src="pagenation.js"></script>
<script>
<!--//
var j = jQuery.noConflict();
//-->
</script>
</head>
<body>
<!-- 搜索结果search_list start-->
<div id="search_list" >
<!-- 分页start -->
<div class="brand_page">
<div class="page" id="page"></div>
</div>
<!-- 分页end -->
<!-- 结果列表start-->
<div id="search_final">
<t:zone t:id="zone">
<t:block t:id="block">
<t:loop t:source="goodslist" t:value="goods">
<!-- 一个商品start-->
<div id="search_line">
<div id="search_top">
<img src="../common/images/200812311331299124.jpg" style="cursor:pointer;" />
</div>
<div id="search_bottom">
<div id="search_single">
<table class="search_text1">
<tr>
<td>${goods.goodsdescript}</td>
<td>${goods.goodsname}</td>
</tr>
<tr>
<td colspan="2">${goods.goodsno}</td>
</tr>
<tr>
<td colspan="2">零售价格：<span class="purple">${goods.goodsid}</span>
</td>
</tr>
</table>
</div>
<div class="search_text2">${goods.goodsid}</div>
</div>
</div>
<!-- 一个商品end-->
</t:loop>
<input type="hidden" value="${totalPage}" id="total"/>
</t:block>
<input type="hidden" value="${totalPage}" id="total"/>
<t:loop t:source="goodslist" t:value="goods">
<!-- 一个商品start-->
<div id="search_line">
<div id="search_top">
<img src="../common/images/200812311331299124.jpg" style="cursor:pointer;"/>
</div>
<div id="search_bottom">
<div id="search_single">
<table class="search_text1">
<tr>
<td>${goods.goodsdescript}</td>
<td>${goods.goodsname}</td>
</tr>
<tr>
<td colspan="2">${goods.goodsno}</td>
</tr>
<tr>
<td colspan="2">零售价格：<span class="purple">${goods.goodsid}</span>
</td>
</tr>
</table>
</div>
<div class="search_text2">${goods.goodsid}</div>
</div>
</div>
<!-- 一个商品end-->
</t:loop>
</t:zone>
<t:actionlink t:id="cx" t:zone="zone"><input type="button" id="cxdate" style="display:none"/></t:actionlink>
<t:actionlink t:id="getpageNum"></t:actionlink>
</div>
<!-- 结果列表end-->
<!-- 翻页 start-->
<div class="brand_page">
<div class="page" id="page1"></div>
</div>
<!-- 翻页 end-->
</div>
<!-- 搜索结果search_list end-->
</body>
<script language="JavaScript">
<!--//
//生成分页条
totalpage = j("#total").val();
pageN(arr);
//分页查询方法
function resultListByPage(index){
j.ajax({
url:"/Index.getpageNum/"+index,
success:function(msg){
j("#cxdate").click();
totalpage = j("#total").val();
},
error:function(msg){
alert("error");
}
});
}
//-->
</script>
</t:MainLayout>
2.页面类代码：---Index.java
public class Index {
@Inject
private IBrand service;
@Inject
private Block block;
@Persist
private Goods goods;
public Goods getGoods() {
return goods;
}
public void setGoods(Goods goods) {
this.goods = goods;
}
public Block getBlock() {
return block;
}
public void setBlock(Block block) {
this.block = block;
}
//当前页数
@Persist
private Long curpage;
public Long getCurpage() {
return curpage;
}
public void setCurpage(Long curpage) {
this.curpage = curpage;
}
//每页显示条数
private long perpage = 8;
//总页数
@Persist
private long totalPage;
public long getTotalPage() throws Exception {
long totalnum = (service.getTotal(3));
totalPage = totalnum%perpage==0 ? totalnum/perpage : totalnum/perpage+1;
return totalPage;
}
public void setTotalPage(long totalPage){
this.totalPage = totalPage;
}
@Persist
private List<Goods> goodslist;
//结果集
public List<Goods> getGoodslist() throws Exception{
if(curpage==null || curpage==0){
curpage=new Long(1);
}
long start = (curpage-1)*perpage;
long end = curpage*perpage;
goodslist = service.getGoodsTest(3,start,end);
return goodslist;
}
public void setGoodslist(List<Goods> goodslist) {
this.goodslist = goodslist;
}
//获得当前页数
void onActionFromGetpageNum(long curPage){
curpage = curPage;
}
//商品列表---测试分页
Block onActionFromCx() throws Exception{
return block;
}
}
3.JS代码：---pagenation.js
网上下的一个jqeury插件，稍微修改了一下，可以自己换个。
/**
* 分页导航条
* 分页条上最多显示9个页数，当总页数小于9时，有几页就显示几个
* @param fnName 翻页时执行的函数名(传入的第一个参数必须是“当前页码”）)
* @param fnNameParams fnName函数的参数，数组形式（比如：var arr = new Array(); arr[0] = 1;arr[1] = "hello"）
* @param pagetotal 总页码
* @param showID 页面显示分页导航条的div ID
*/
function pageNavigation(fnName, fnNameParams, pagetotal, showID) {
var fnParam = new Array();
//如果这样fnParam = fnNameParams;两个都指向同一引用
for(var i = 0 ; i < fnNameParams.length; i++)
fnParam[i] = fnNameParams[i];
var pageIndex = parseInt(fnNameParams[0]);//当前页
// 无记录
if (pagetotal == 0) {
jQuery('#' + showID).empty();//清空翻页导航条
return;
}
// 分页
var front = pageIndex - 4;// 前面一截
var back = pageIndex + 4; // 后面一截
jQuery('#' + showID).empty(); //清空翻页导航条
// 红色字体显示当前页
var str = "<font color = 'black'>" + pageIndex +"</font>";
jQuery('#' + showID).append(str);
// 斜线"/"
jQuery('#' + showID).append("/");
// 蓝色字体显示总页数
var str = "<font color = 'blue'>" + pagetotal +"</font>";
jQuery('#' + showID).append(str);
// 首页, 上一页
if (pageIndex == 1) {
jQuery('#' + showID).append("<a href='javascript:void(0)' disabled='true' >首页</a><a href='javascript:void(0)' disabled='true'>上一页</a>");
//front = 0;
//back = pageIndex + 8;
} else {
fnParam[0] = 1 ;
var fn = fnName + "(" + fnParam + ")"; //组装执行的函数
var str = "<a alt='首页' href = 'javascript:" + fn + "'>首页</a>";//创建连接
jQuery('#' + showID).append(str);
fnParam[0] = pageIndex - 1 ;
var fn = fnName + "(" + fnParam + ")"; //组装执行函数
var str = "<a alt='上一页' href = 'javascript:" + fn + "'>上一页</a>";//创建连接
jQuery('#' + showID).append(str);
}
if (pagetotal == 1) {
jQuery('#' + showID).append("<a href='javascript:void(0)'>1</a>");
}
// 如果当前页是5,前面一截就是1234,后面一截就是6789
if (pagetotal > 1) {
var tempBack = pagetotal;
var tempFront = 1;
//如果当前页数小于5，也显示9个，如，pageIndex=2,前面一截就是1,后面一截就是3456789
if(pageIndex<=4){
back = pageIndex+8-(pageIndex-1);
}
//如果当前页数大于（总页数-3），也显示9个，如，pageIndex=8,pagetotal=10，前面一截就是12345678,后面一截就是10
if(pageIndex>=(pagetotal-4)){
front =pageIndex-(8-(pagetotal-pageIndex));
}
if (back < pagetotal){
tempBack = back;
}
if (front > 1){
tempFront = front;
}
for (var i = tempFront; i <= tempBack; i++) {
if (pageIndex == i) {
var str = "<a class='currentChecked' href='javascript:void(0)'>" + i + "</a>";
jQuery('#' + showID).append(str);
} else {
fnParam[0] = i;
var fn = fnName + "(" + fnParam + ")"; //组装执行的函数
var str = "<a href = 'javascript:" + fn + "'>" + i + "</a>";//创建连接
jQuery('#' + showID).append(str);
}
}
}
// 下一页, 尾页
if (pageIndex == pagetotal) {
jQuery('#' + showID).append("<a href='javascript:void(0)' disabled='true'>下一页</a><a href='javascript:void(0)' disabled='true' >尾页</a>");
} else {
fnParam[0] = pageIndex + 1 ;
var fn = fnName + "(" + fnParam + ")"; //组装执行的函数
var str = "<a href = 'javascript:" + fn + "'>下一页</a>";//创建连接
jQuery('#' + showID).append(str);
fnParam[0] = pagetotal ;
var fn = fnName + "(" + fnParam + ")"; //组装执行的函数
var str = "<a href = 'javascript:" + fn + "'>尾页</a>";//创建连接
jQuery('#' + showID).append(str);
}
}
//调用分页函数
function pageN(){
var arr = new Array();
for(var i = 0 ; i < pageN.arguments.length ; i++){
arr[i] = pageN.arguments[i];
}
pageNavigation('pageN',arr,totalpage,'page');
pageNavigation('pageN',arr,totalpage,'page1');
resultListByPage(arr);//点击后做的分页查询操作,arr表示当前页数
}
var arr = new Array();
arr[0] = 1;
var totalpage = 0;
4.jquery-1.3.1.js,自己去网上下一个哈。
类似资料：