springmvc结合ajax的分页功能

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);
}

上一篇:利用WPF建立自己的3d gis软件(非axhost方式)(六)跳转,增加外部三维模型


下一篇:BZOJ 3545: [ONTAK2010]Peaks( BST + 启发式合并 + 并查集 )