PageInfo 前台分页js,带分页栏
在使用mybatis3,并且使用分页,PageHelper 接口,分页还是很好使用的。使用pageInfo的后台分页接口。
/** * * @param switchPage方法,切换页码方法 * * function switchPage(pageNum){ $("input[name='pageNum']").val(pageNum); $("#blgTable tr:gt(0)").remove(); getLuoJiaoDianResult(); } * * @getResult() 获取结果集方法 * * function getLuoJiaoDianResult(){ var dat=serializeObject("#dizhi"); $.post("${BASE_PATH}dz/list",dat,function(data){ $("#blgTable tr:gt(0)").remove(); var option=""; if(data.list.length==0){ option+="<tr><td colspan='6'> 没有符合条件的查询结果!</td></tr>" }else{ $(data.list).each(function(i){ if(this.fenquzhihuibu==null){ this.fenquzhihuibu=""; } if(this.paichusuo==null){ this.paichusuo=""; } if(i%2==0){ option+="<tr style='background:rgb(243, 248, 251)'>"; }else{ option+="<tr style='background:rgb(226, 237, 247)'>"; } option+="<td>"+this.xingming+"</td><td>"+ this.shenfenzheng+"</td><td>"+this.dizhi+"</td><td> "+ this.fenquzhihuibu+" </td><td>"+this.paichusuo+"</td><td><a onclick=selectPersonInfo('"+this.personid+"') >详情</a></td></tr>"; }); } pageInfoBar(data,"pagebar"); $("#blgTable").append(option); },"json"); } * * * * 获取分页导航条 * @param pageInfo * @param barDivId */ function pageInfoBar(pageInfo, barDivId) { var barDiv = $("#" + barDivId); var context = "<span>当前页:" + pageInfo.pageNum + " 总页数:" + pageInfo.pages + " 总记录数:"+pageInfo.total+"</span>"; context += "<div class='query-content-page-btn'><ul>"; if (pageInfo.pageNum > 1) { context += "<li class='prev-next' onclick=switchPage('" + pageInfo.prePage + "')>上一页</li>"; } for (var i = 0; i < pageInfo.navigatepageNums.length; i++) { if (pageInfo.pageNum == pageInfo.navigatepageNums[i]) { context += "<li class='query-content-page-cur' onclick=switchPage('" + pageInfo.navigatepageNums[i] + "')>" + pageInfo.navigatepageNums[i] + "</li>" } else { context += "<li onclick=switchPage('" + pageInfo.navigatepageNums[i] + "')>" + pageInfo.navigatepageNums[i] + "</li>" } } if (pageInfo.pageNum < pageInfo.pages) { context += "<li class='bus-border-right prev-next' onclick=switchPage('" + pageInfo.nextPage + "')>下一页</li>"; } context += "</ul></div>"; barDiv.html(context); }
业务驱动技术,技术是手段,业务是目的。