springmvc结合ajax的分页功能

2024-10-15 08:33:32

var itemCount;//符合查找条件的商品总页数，分页参考
var pageIndex = 0;//当前页，默认为0
var pageSize = 8;//每页显示个数为8

//按条件查找用户
function searchItem(pageIndex,pageSize){

//清空要append的目的位置
$('#searchItem').empty();

$('.ajax_page').empty();

var url = "${ctx}/crms/orderCenter/findItemList";
$.post(url,{"pageIndex":0,"pageSize":8},function(data){
　　var items = data.itemList;
　　var appendItem = '';
　　itemCount = Math.ceil(data.itemCount/8);
　　//查询结果所有的商品
　　$.each(items,function(i,result){
　　　　appendItem = "<tr class='w790 h55'><td class='w75 text-center bgc_fafafa'>"
　　　　+ "<input type='text' class='num_iid' value='"+result.numIid+"'>"
　　　　+ "<div onclick='addNumIid("+result.numIid+")' class='w20 h20 bgc_e0e6ef margin0_auto b_radius5 GXK'></div>"
　　　　+ "</td><td class='w620 bgc_fafafa'><img class='w54 h45 m_t5 m_l10 m_r20 f_l' src='"+result.url+"'><p class='w400 h55 lh55 f_l'>"+result.title+"</p></td>"
　　　　+ "<td class='w78 text-center bgc_fafafa'>"+result.price+"</td></tr>";
　　　　$('#searchItem').append(appendItem);
　　});
　　//分页
　　var page = '<div id="userPage" align="center" ><font size="2">共'+itemCount+'页</font><font size="2">第'
　　　　　　+(pageIndex+1)+'页</font> <a href="javascript:void" onclick="goToFirstPage()" id="aFirstPage" >首页</a>'
　　　　　　+'<a href="javascript:void" onclick="goToPrePage()" id="aPrePage">上一页</a>'
　　　　　　+'<a href="javascript:void" onclick="goToNextPage()" id="aNextPage">下一页</a>'
　　　　　　+'<a href="javascript:void" onclick="goToEndPage()" id="aEndPage">尾页</a>';
　　　　　　page+='</div>';
　　　　$('.ajax_page').append(page);
},'json');
};

//首页
function goToFirstPage(){
　　pageIndex = 0;
　　searchItem(pageIndex,pageSize);
}

//前一页
function goToPrePage(){
　　pageIndex -= 1;
　　pageIndex = pageIndex >= 0 ? pageIndex : 0;
　　searchItem(pageIndex,pageSize);
}

//后一页
function goToNextPage(){
　　if(pageIndex + 1 < itemCount){
　　　　pageIndex += 1;
　　}
　　searchItem(pageIndex,pageSize);
}
//尾页
function goToEndPage(){
　　pageIndex = itemCount -1;
　　searchItem(pageIndex,pageSize);
}

最新文章

热门文章