基于mybatis ajax 分页的实现
博主这里的ajax 分页是基于上一篇 自定义标签的分页，其根本区别在于 ajax 分页 把自定义标签的内容 用 ajax 方式实现了，所以此ajax 分页也属于后台数据库分页，好了，看代码
1、说好了，在这里是基于上一篇文章的
所有的 service 层 和 dao 层的代码，包括page.java 基础类 和 mybatis 的拦截器实现，都是和上一篇文章一样的一样的，讲清楚以上，开始实现ajax 分页了
1、既然 是用ajax 访问，那么 control 层肯定是和普通方式不一样的了
@RequestMapping(value="/testajax",method=RequestMethod.POST)
public ResponseEntity testajax( @ModelAttribute Branch branch ,
@RequestParam(required = false, defaultValue = "1") int pageNo,
@RequestParam(required = false, defaultValue = "10") int pageSize, HttpServletRequest request) {
Page page = Page.newBuilder(pageNo, pageSize, "/branchControl/testajax");
Map params = new HashMap();
if(null !=branch.getGeoCode())
params.put("geoCode", branch.getGeoCode()+"");
if(null !=branch.getTel())
params.put("tel", branch.getTel()+"");
page.setParams(params);
List mobileFindBranch = branchService.findDeptByGeoCode(branch,page);
AjaxPageResponse model = new AjaxPageResponse();
model.addObject("secbranch", mobileFindBranch);
if(!"".equalsIgnoreCase(branch.getTel()) && null !=branch.getTel()){
model.addObject("tel", branch.getTel());
}
model.addObject("page", page);
model.addObject("branch", branch);
model.setPage(page);
return new ResponseEntity(model, HttpStatus.OK);
} 2、通过以上代码，可以看出 ，返回结果好像不太一样唉，对的，博主模仿 ModelAndView 类，建立 了一个新类 AjaxPageResponse
import java.util.HashMap;
import org.springframework.ui.ModelMap;
public class AjaxPageResponse {
public Page page;
// public T t;
private ModelMap model;
public AjaxPageResponse() {
}
public ModelMap getModelMap() {
if (this.model == null) {
this.model = new ModelMap();
}
return this.model;
}
public AjaxPageResponse addObject(String attributeName, Object attributeValue) {
getModelMap().addAttribute(attributeName, attributeValue);
return this;
}
public Page getPage() {
return page;
}
public void setPage(Page page) {
this.page = page;
}
}3、基础类 AjaxPageResultMap 及 AjaxPageModel
AjaxPageResultMap 类
import java.util.Collection;
import java.util.LinkedHashMap;
import java.util.Map;
import org.springframework.core.Conventions;
import org.springframework.util.Assert;
public class AjaxPageResultMap extends LinkedHashMap{
public AjaxPageResultMap() {
}
public AjaxPageResultMap(String attributeName, Object attributeValue) {
addAttribute(attributeName, attributeValue);
}
public AjaxPageResultMap(Object attributeValue) {
addAttribute(attributeValue);
}
public AjaxPageResultMap addAttribute(String attributeName, Object attributeValue) {
Assert.notNull(attributeName, "Model attribute name must not be null");
put(attributeName, attributeValue);
return this;
}
public AjaxPageResultMap addAttribute(Object attributeValue) {
Assert.notNull(attributeValue, "Model object must not be null");
if (attributeValue instanceof Collection && ((Collection) attributeValue).isEmpty()) {
return this;
}
return addAttribute(Conventions.getVariableName(attributeValue), attributeValue);
}
public AjaxPageResultMap addAllAttributes(Collection attributeValues) {
if (attributeValues != null) {
for (Object attributeValue : attributeValues) {
addAttribute(attributeValue);
}
}
return this;
}
public AjaxPageResultMap addAllAttributes(Map attributes) {
if (attributes != null) {
putAll(attributes);
}
return this;
}
public boolean containsAttribute(String attributeName) {
return containsKey(attributeName);
}
} AjaxPageModel 类
import org.springframework.ui.ModelMap;
public class AjaxPageModel {
private ModelMap model;
public AjaxPageModel() {
}
public ModelMap getModelMap() {
if (this.model == null) {
this.model = new ModelMap();
}
return this.model;
}
public AjaxPageModel addObject(String attributeName, Object attributeValue) {
getModelMap().addAttribute(attributeName, attributeValue);
return this;
}
}
4、然后当然就 是要把 上一篇博文的自定义标签实现的内容改为ajax 实现了
ajaxPageUtil.js 实现原理为 在原生ajax 函数上又加了一层，用来提取分页的属性值，并且显示分页的页面样式
function pageClick( pNo ){
if(!pNo){
pNo =pageObject.pageNo;
}
var choosePageSize = $('#choosePageSize').find('option:selected').text();
var jsPost = function(action, values, valueLists) {
var ajaxSearchParam={};
for (var key in values) {
ajaxSearchParam["" + key + ""]=values[key];
}
for (var key2 in valueLists) {
for (var index in valueLists[key2]) {
ajaxSearchParam["'" + key2 + "'"]=valueLists[key2][index];
}
}
ajaxSearchParam.pageSize=choosePageSize;
ajaxSearchParam.pageNo=pNo;
// alert("ajaxSearchParam:"+JSON.stringify(ajaxSearchParam));
var ajaxParm ={};
if(ajaxBodyObjectTmp.async){
ajaxParm['async']=ajaxBodyObjectTmp.async;
}
if(ajaxBodyObjectTmp.type){
ajaxParm['type']=ajaxBodyObjectTmp.type;
}
if(ajaxBodyObjectTmp.url){
ajaxParm['url']=ajaxBodyObjectTmp.url;
}
if(ajaxBodyObjectTmp.dataType){
ajaxParm['dataType']=ajaxBodyObjectTmp.dataType;
}
ajaxParm['data']=ajaxSearchParam;
if(successFuction){
ajaxParm['success']=successFuction;
}
if(ajaxBodyObjectTmp.error){
ajaxParm['error']=ajaxBodyObjectTmp.error;
}
$.ajaxPage(ajaxParm);
}
//发送POST
jsPost(pageObject.searchUrl, paraJson, paraListJson);
}
function chPageSize(obj){
/* alert(obj.value); */
pageClick(1);
}
var ajaxBodyObjectTmp=null;
var pageObject=null;
var successFuction =null;
$(function(){
function setPageTag(pageObject){
var current = pageObject.pageNo;
var begin = 1;
var end = pageObject.totalPage;
var str="";
var nums=0;
str+="";
str+="";
if (current!=1 && end!=0){
nums =current-1;
str+="上一页";
}else{
str+="上一页";
}
for(var i=0;iif (i + 1 == current){
nums=i+1;
str+=""+nums+"";
}else{
if(i == 0 || i == 1 || i == 2 || i == 3
|| i == current - 2 || i == current - 3
|| i == current || i == current + 1
|| i == Number(pageObject.totalPage) - 2 || i == Number(pageObject.totalPage) - 1){
nums=Number(i)+1;
str+=""+nums+"";
}else{
if(i == 4 && current > 7){
str+="...";
}
if(i == Number(pageObject.totalPage) - 3 && current < Number(pageObject.totalPage) - 4){
str+="...";
}
}
}
}
if (current0 ){
nums =current+1;
str+="下一页";
}else{
str+="下一页";
}
str+="";
str+="";
str+="每页";
str+=";
str+="";
str+="";
str+="";
str+="";
str+="条";
str+="共"+pageObject.totalRecord+"条";
str+="";
str+="";
str+="5、然后就是要在页面上使用了
首先，在页面中引入js 文件
<script type="text/javascript" src="../js/ajaxPageUtil.js">script>然后，写调用后台control 的方法，在这里 $.ajaxPage 的调用方法和 $.ajax 一模一样,然后，success 方法的 data 参数使用 和 control 最后的model 使用方法一样，直接data.secbranch 这样，就可以取出在control 中存入的值
function submit(){
//以下为应用获取数据提交
var param={};
param['geoCode']=$("#geoCode").val();
param['tel']=$("#tel").val();
$.ajaxPage({
async:false,
type:"POST",
url:"${pageContext.request.contextPath}/branchControl/testajax",
dataType:"text",
data:param,
success:function(data){
var result =data.secbranch;
var str ="";
for(var i=0;i"";
str+=""+result[i].name+" ";
str+=""+result[i].address+" ";
str+=""+result[i].tel+" ";
str+=""+result[i].businessScope+" ";
str+=""+result[i].releaseTime+" ";
str+="";
str+="";
str+=" ";
str+="+result[i].branchId+",'"+result[i].name+"')>";
str+=" ";
str+=" ";
}
$("#wsltable").children("tbody").html("");
$("#wsltable").children("tbody").append(str);
},
error:function(e){
alert(e);
}
});
} 再然后，得在显示分页按钮的地方加入以下div
<div class="row-fluid" id="pageTag">
div>再然后就是赶紧跑起你的项目查看你的分页效果了