本文纯属自己平时编代码时的总结,主要用于自己以后方便查看
后端controller代码
JsonMessage jsonMessage = new JsonMessage();//***********************经过一些处理将数据存储在map中********************Map<String,Object> map = new HashMap<String,Object>();//list中放返回的数据map.put("list", list);//pages为总页数map.put("pages",pages);//curpage表示当前页 map.put("curpage", curPage); jsonMessage.setObj(map);return jsonMessage;
前端处理
/* 翻页功能 */
ajax请求体内容{
//清空标签中的数据$(".pagenationul").html("");var obj = showPages(jsonmsg.obj.curpage,jsonmsg.obj.pages);for(var i=1;i<=jsonmsg.obj.pages;i++){//active作为标签用来标识当前页var st = i == jsonmsg.obj.curpage ? 'active' : '';var strpage;if(obj[i]){strpage ='<li><a class="'+st+'" href="javascript:void(0)">'+i+'</a></li>';}else{strpage ='<li><span class="'+st+'" href="javascript:void(0)">......</span></li>';if(i<jsonmsg.obj.curpage){i=jsonmsg.obj.curpage-4;}else{i=jsonmsg.obj.pages-1;}}$(".pagenationul").append(strpage);}$(".pagenationul a").on("click",function(){turnpage(this,client);}); }
}
showPage:
<script type="text/javascript"><!--页码处理 -->function showPages(curpage,total){var obj = new Array();obj[1]=1;obj[total]=1;if(total>=5){for(var i=2;i<total;i++){if(Math.abs(curpage-i)<=3){obj[i]=1;}}}else{for(var i=2;i<total;i++){obj[i]=1;}}return obj;}</script>
turnpage:
<script type="text/javascript">function turnpage(page,client){var curpage = 1;clickpage = page.text;$(".pagination li").each(function(index,item){if($(this).find("a").attr("class") == "active"){curpage = index + 1;}});if(curpage!=clickpage){ //如果点击也不等于当前页,责再次发起ajax请求matchlists(client);} }</script>