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+"' οnclick='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' οnclick=\"submitOrders('"+dataObj[i].entityId+"','"+dataObj[i].suppRetailPrice+"');\")>"+
"<spring:message code='pm.buyPm.searchForm.initPmProductInfo.intro.buyProduct'></spring:message> <a href='javascript:;' class='putToCart' οnclick=\"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+"' οnclick='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' οnclick=\"submitOrders('"+dataObj[i].entityId+"','"+dataObj[i].suppRetailPrice+"');\")>"+
"<spring:message code='pm.buyPm.searchForm.initPmProductInfo.intro.buyProduct'></spring:message> <a href='javascript:;' class='putToCart' οnclick=\"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;" >
<!-- item container -->
<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">‹</a>
<input type="text" readonly="readonly" data-max-page="40" />
<a href="#" class="next" data-action="next">›</a>
<a href="#" class="last" data-action="last">»</a>
</div>
</div>
</div>
注:在这里我修改了css的选择器,因为项目的选择器paganation和这边的pagenation冲突了,所以将名称改为了Jqpagenation
后台自己写一下就可以了