tapestry 5---jquery非同期ページング
13254 ワード
考え方:1.Actionlinkとjqueryを使います.ajaxアクセスページクラス;2.jqueryでページングバーを作成する(ページングバー機能のみ);3.戻る結果セットをblockで受け入れる(loop).コードは次のとおりです.
1.tmlコード:--Index.tml
2.ページクラスコード:---Index.java
3.JSコード:---pagenation.js
ネット上の次のjqeuryプラグインは、少し修正して、自分で交換することができます.
4.jquery-1.3.1.js、自分でネット上に行って次へ.
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、自分でネット上に行って次へ.