jquery分页插件jquery.pagination.js与springmvc整合

      jquery.pagination.js插件可以很方便的实现分页效果，并且不需要你编写页码，该插件会自动根据总条数去生成页码，并且每个页码都会有相应的功能。这里插件中的内容我就不重复讲解了，已经有许多大侠讲解。注意：如果你的项目资源是使用maven倒过来的，那你一定要看一下插件内容中的 opts.callback(current_page, this);是否被注释掉了，如果注释掉的话需要你解注释，否则回调函数会出问题。

该插件实现分页需要两个主要的方法，第一个为计算数据库中的总条数，第二个为分页方法。所以整合也就是根据这两个方法来进行相应的调用。步骤如下：

整合步骤：

1、在controller中实现查询数据库中总条数的方法，该方法为ajax调用

@ResponseBody
@RequestMapping("/pageCount")
public Integer pageCount(){
try {
int pageCount = infoBuyService.calculatePageCount();
return pageCount;
} catch (Exception e) {
log.debug("ERROR:/infoBuy/pageCount",e);
}
return null;
}

2、页面上进行ajax调用该方法

//计算总页数
    function calculate(){
    var pageCount = 0;//总页数，需要在Calculate方法中为其赋值
    $.ajax({
    type:"GET",
    dataType:"text",
    async:false,//为js的全局变量赋值，如果设置为true则会赋值不成功
    url:path+"/infoBuy/pageCount",
    success:function(data){
    pageCount = data;
    }
    });
    return pageCount;
    }

 此处的path的为javascript的全局变量： var path = "${pageContext.request.contextPath}";//绝对路径

 URL中/infoBuy为controller上面的@Controller
    @RequestMapping("/infoBuy")
     public class InfoBuyController {........}

3、编写分页代码，此方法也为ajax调用，返回一个页面，然后再把页面添加到相应的区域中

@RequestMapping(value="/listPage",method = RequestMethod.GET)
public String listPage(Model model,Integer pageIndex,Integer pageSize){
try {
List<InfoBuyDto> allInfoBuyDto = infoBuyService.infoBuyPage(pageIndex, pageSize);
model.addAttribute("list",allInfoBuyDto);
return "/infoBuy/infoBuy";//根据视图解析器解析到infoBuy.jsp,在infoBuy.jsp页面进行数据的展示
} catch (Exception e) {
log.debug("ERROR:/infoBuy/listPage",e);
}
return null;
}

pageIndex：为当前的页码，pageSize：为每页显示多少条

4、页面上调用分页方法

//请求数据
            function InitTable(pageIndex) {
                $.ajax({
                    type: "GET",
                    dataType: "text",
                    url: path+"/infoBuy/listPage",  //提交到一般处理程序请求数据
                   data: "pageIndex=" + (pageIndex + 1) + "&pageSize=" + pageSize,  //提交两个参数：pageIndex(页面索引)，pageSize(显示条数)                
                    success: function (data) {
                        $("#list").empty();  
                        $("#list").html(data);
                    }
                });//ajax结尾
            }//请求数据结尾   

   list为该页面上的div的id，用于把controller返回页面加载到该div中。

5、在页面初始化页码的数据
//页码初始数据
      function initPagination(){
           //分页相关配置
            $("#pagination").pagination(calculate(), {
               callback: PageCallback,
               prev_text: '上一页',       //上一页按钮里text
               next_text: '下一页',       //下一页按钮里text
               items_per_page: pageSize,  //显示条数
               num_display_entries: 6,    //连续分页主体部分分页条目数
               current_page: pageIndex,   //当前页索引
               num_edge_entries: 2        //两侧首尾分页条目数
           });
  };    

    //翻页调用
            function PageCallback(index , jq) {
                InitTable(index);
            }

   initPagination();//初始化页码

   InitTable(0);

    pagination为页码显示的div的id，如下代码所示：

    <!-- 求购信息显示位置 -->
   <div id="list"></div>
   <!-- 分页显示位置 -->
   <div id="pagination" style="text-align:center;" class="pagination" ></div> 

   在页面上需要定义三个全局变量，path为一个， var pageIndex = 0;     //页面索引初始值
   var pageSize = 3;     //每页显示条数初始化，修改显示条数，修改这里即可

    在controller中调用service的方法，这里就不在给大家编写了。

infoBuy.jsp页面代码

这里就不给大家截效果图了，如有什么需要的请私信我，看到后会给大家回复的，谢谢