基于mybatis ajax 分页的实现

博主这里的ajax 分页是基于上一篇 自定义标签的分页，其根本区别在于 ajax 分页 把自定义标签的内容 用 ajax 方式实现了，所以此ajax 分页也属于后台数据库分页，好了，看代码

1、说好了，在这里是基于上一篇文章的
所有的 service 层 和 dao 层的代码，包括page.java 基础类 和 mybatis 的拦截器实现，都是和上一篇文章一样的一样的，讲清楚以上，开始实现ajax 分页了

1、既然 是用ajax 访问，那么 control 层肯定是和普通方式不一样的了

     @RequestMapping(value="/testajax",method=RequestMethod.POST)
        public ResponseEntity<AjaxPageResponse> 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<String, String> params = new HashMap<String, String>();

            if(null !=branch.getGeoCode())
                params.put("geoCode", branch.getGeoCode()+"");
            if(null !=branch.getTel())
                params.put("tel", branch.getTel()+"");

            page.setParams(params);

            List<Branch> 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<AjaxPageResponse>(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<String, Object>{



    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<String, ?> 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+="<div class='row-fluid'>";
                    str+="<div class='fyhpagediv' style='float: right;'>";

                    if (current!=1 && end!=0){  
                        nums =current-1;
                        str+="<span class='fyhfybk'><a href='javascript:void(0);' onclick='pageClick("+nums+")'>上一页</a>";
                    }else{ 
                        str+="<span class='fyhfybk'><a href='javascript:void(0);'>上一页</a>";
                    }  

                    for(var i=0;i<pageObject.totalPage;i++){

                        if(i + 1 == current){
                            nums=i+1;
                            str+="<a href='#' class='pagebtn-red' >"+nums+"</a>";
                            }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+="<a href='#' onclick='pageClick("+nums+")'>"+nums+"</a>";
                                }else{
                                    if(i == 4 && current > 7){
                                        str+="<a href='#'>...</a>";
                                    }
                                    if(i == Number(pageObject.totalPage) - 3  && current < Number(pageObject.totalPage) - 4){
                                        str+="<a href='#'>...</a>";
                                    }
                                }
                            }
                    }


                    if (current<end && end!=0){
                        nums =current+1;
                        str+="<a href='javascript:void(0);' onclick='pageClick("+nums+")'>下一页</a></span>";
                    }else{
                        str+="<a href='javascript:void(0);'>下一页</a></span>";
                    } 

                    str+="</div>";

                    str+="<div class='fyhpagenum' style='float: right;'>";
                    str+="<span>每页</span>";
                    str+="<select id='choosePageSize' class='fyhpageselect' onchange='chPageSize(this)'>";
                    str+="<option ";
                    if(pageObject.pageSize==10){
                        str+="selected";
                    }
                    str+=" >10</option>";
                    str+="<option ";
                    if(pageObject.pageSize==25){
                        str+="selected";
                    }
                    str+=" >25</option>";
                    str+="<option ";
                    if(pageObject.pageSize==50){
                        str+="selected";
                    }
                    str+=" >50</option>";
                    str+="</select>";
                    str+="<span>条</span>";
                    str+="<span>共"+pageObject.totalRecord+"条</span>";
                    str+="</div>";
                    str+="</div>";
                    str+="</div>";

                    $("#pageTag").html("");

                    $("#pageTag").append(str);
                }



                //以下是用来增加ajax 分页的

                //jQuery 应用扩展
                jQuery.extend({

                      ajaxPage:function (ajaxBodyObject) {
                           ajaxBodyObjectTmp=ajaxBodyObject;
                           successFuction =ajaxBodyObject.success;

                           ajaxBodyObject.success=function(ajaxResult){
                               ajaxResult=eval("("+ajaxResult+")");

                                paraJson = ajaxResult.page.params;

                                paraListJson=ajaxResult.page.paramLists;

//                              alert("paraJson:"+paraJson);
//                              alert("paraListJson:"+paraListJson);
                                pageObject=ajaxResult.page;
                                setPageTag(pageObject);
                                successFuction(ajaxResult.modelMap);
                          }

                          $.ajax(ajaxBodyObject);
                      }
                });

                jQuery.extend({

                      reloadAjaxPage:function () {
                          pageClick();
                      }
                });

            })

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<result.length;i++){
                             str+="<tr class='odd gradeX ' >";
                             str+="<td >"+result[i].name+"</td>";
                             str+="<td>"+result[i].address+"</td>";
                             str+="<td >"+result[i].tel+"</td>";
                             str+="<td>"+result[i].businessScope+"</td>";
                             str+="<td>"+result[i].releaseTime+"</td>";
                             str+="<td>";
                             str+="<a title='查看' class=' fyhcz ' href='${pageContext.request.contextPath}/branchControl/branch?branchId="+result[i].branchId+"'><i class='icon-search'></i></a>";
                             str+="<a title='编辑' class=' fyhcz ' href='${pageContext.request.contextPath}/branchControl/forUpdate?branchId="+result[i].branchId+"'><i class='icon-edit'></i> </a>";
                             str+="<a title='删除' class=' fyhcz ' href='javascript:void(0);' onclick=delbranch("+result[i].branchId+",'"+result[i].name+"')><i class='icon-trash'></i></a>";
                             str+="</td>";
                             str+="</tr>";
                            }
                         $("#wsltable").children("tbody").html("");
                         $("#wsltable").children("tbody").append(str);
                    },       
                    error:function(e){
                        alert(e);
                    }  
                });
            }

再然后，得在显示分页按钮的地方加入以下div

                                    <div class="row-fluid" id="pageTag">
                                    </div>

再然后就是赶紧跑起你的项目查看你的分页效果了