JqPagination动态分页，每次点击下一页都加载一次后台

来源：互联网发布：域名必须实名认证吗编辑：程序博客网时间：2024/05/19 19:15

javascript:

function initProductPage(currentPage) {

//删除相关数据(删除Id为edc的tbody的相关数据，移除Class为content的tr的行数据)
//设置每一页展示的产品数量，如果要调整的话可能需要自行修改样式
var perPage = "6";
$("#itemContainer").empty();
$.ajax( {
url : '<c:url value="loadProduct.do"/>'+'?currentPage='+currentPage+'&perPage='+perPage,
type : 'post',
success : function(dataArray) {
if (dataArray != null || dataArray != "") {
// 解析相关json 格式数据
var dataObj = dataArray.data;
for ( var i = 0; i < dataObj.length; i++)
{
var li =" <li class='goodlist' style='text-align: left;border:1px solid red;padding:10px;margin:1px;margin-left:15px;float:left;width:18%'>" +
/* "<input type='checkbox' class='productGirdCheckBox' name='"+dataObj[i].entityId+"' id='"+dataObj[i].entityId+"' value='"+dataObj[i].entityId+"' style='overflow:hidden; display:block; float:none;'>"+ */
"<a href='#' class='"+dataObj[i].entityId+"' onclick='showProdInfo(this.className);' style='overflow:hidden; display:block; float:none;text-align:center;'><img height='150px;' src='"+dataObj[i].thumbnailPath +"'></a>"+
" <dl style='width: 100%;'> <div style='border:1px solid gray;padding:5px;margin:5px;'> <dt > <a href='#' target='_blank' class='title'>"+dataObj[i].productName +"</a>"+
" <span class='en'>"+dataObj[i].categoryName+ "</span> "+
"<p><spring:message code='pm.buyPm.searchForm.initPmProductInfo.intro.buyPrice'></spring:message><span class='change-price"+dataObj[i].entityId+"'>"+dataObj[i].suppRetailPrice+"</span></p>"+
"<p><spring:message code='pm.buyPm.searchForm.supplierInst'></spring:message>:<span>"+dataObj[i].instName +"</span></p>"+
"<p><a href='javascript:;' class='buy' onclick=\"submitOrders('"+dataObj[i].entityId+"','"+dataObj[i].suppRetailPrice+"');\")>"+
"<spring:message code='pm.buyPm.searchForm.initPmProductInfo.intro.buyProduct'></spring:message> <a href='javascript:;' class='putToCart' onclick=\"put2Cart('"+dataObj[i].entityId+"','"+dataObj[i].suppRetailPrice+"');\"><spring:message code='pm.buyPm.searchForm.initPmProductInfo.intro.putToShoppingCart'></spring:message> </a></p>"+
"</dt></div></dl></li>";
$("#itemContainer").append(li);
}

$('.JqPagination').jqPagination({
link_string : '/?page={page_number}',
current_page: dataArray.currentPage, //设置当前页默认为1
max_page : dataArray.totalPage, //设置最大页默认为1
page_string : '当前第{current_page}页,共{max_page}页',
paged : function(page) {
//设置每一页展示的产品数量，如果要调整的话可能需要自行修改样式
var perPage = 6;
//删除相关数据
$("#itemContainer").empty();
$.ajax( {
url : '<c:url value="loadProduct.do"/>'+'?currentPage='+page+'&perPage='+perPage,
type : 'post',
success : function(dataArray) {
if (dataArray != null || dataArray != "") {
// 解析相关json 格式数据
var dataObj = dataArray.data;
for ( var i = 0; i < dataObj.length; i++)
{
var li =" <li class='goodlist' style='text-align: left;border:1px solid red;padding:10px;margin:1px;margin-left:15px;float:left;width:18%;'>" +
/* "<input type='checkbox' class='productGirdCheckBox' name='"+dataObj[i].entityId+"' id='"+dataObj[i].entityId+"' value='"+dataObj[i].entityId+"' style='overflow:hidden; display:block; float:none;'>"+ */
"<a href='#' class='"+dataObj[i].entityId+"' onclick='showProdInfo(this.className);' style='overflow:hidden; display:block; float:none;text-align:center;'><img height='150px;' src='"+dataObj[i].thumbnailPath +"'></a>"+
" <dl style='width: 100%;'> <div style='border:1px solid gray;padding:5px;margin:5px;'> <dt > <a href='#' target='_blank' class='title'>"+dataObj[i].productName +"</a>"+
" <span class='en'>"+dataObj[i].categoryName+ "</span> "+
"<p><spring:message code='pm.buyPm.searchForm.initPmProductInfo.intro.buyPrice'></spring:message><span class='change-price"+dataObj[i].entityId+"'>"+dataObj[i].suppRetailPrice+"</span></p>"+
"<p><spring:message code='pm.buyPm.searchForm.supplierInst'></spring:message>:<span>"+dataObj[i].instName +"</span></p>"+
"<p><a href='javascript:;' class='buy' onclick=\"submitOrders('"+dataObj[i].entityId+"','"+dataObj[i].suppRetailPrice+"');\")>"+
"<spring:message code='pm.buyPm.searchForm.initPmProductInfo.intro.buyProduct'></spring:message> <a href='javascript:;' class='putToCart' onclick=\"put2Cart('"+dataObj[i].entityId+"','"+dataObj[i].suppRetailPrice+"');\"><spring:message code='pm.buyPm.searchForm.initPmProductInfo.intro.putToShoppingCart'></spring:message> </a></p>"+
"</dt></div></dl></li>";
$("#itemContainer").append(li);
}
}
}
});
//结束
}
});

} else {
}

},
error : function(data) {

}
});

};

div:

<div id="container" class="clearfix" style="position:relative; text-align: center;height:auto; width:90%; margin-left:15px;padding:0 auto;overflow: hidden;">
<div id="content" class="defaults" style="margin:0 auto; text-align:centre;display: block; overflow: hidden;" >

<ul id="itemContainer" style="margin:0 auto;display: block;height:auto; overflow: hidden;width: 100%;">
</ul>
</div>
<div style="margin-left: 15px;padding-right:165px;">
<div class="JqPagination" style="position: relative;margin-top: 18px;margin-left: 15px; padding: 10px; " >
<a href="#" class="first" data-action="first">«</a>
<a href="#" class="previous" data-action="previous">&lsaquo;</a>
<input type="text" readonly="readonly" data-max-page="40" />
<a href="#" class="next" data-action="next">&rsaquo;</a>
<a href="#" class="last" data-action="last">»</a>
</div>
</div>
</div>

注：在这里我修改了css的选择器，因为项目的选择器paganation和这边的pagenation冲突了，所以将名称改为了Jqpagenation

后台自己写一下就可以了

0 0