jquery 分页的两种实现方法

本文主要和大家分享jquery pagination 分页的两种实现方法，此插件是jQuery的ajax分页插件。如果你用到此插件作分页的时候，涉及到的数据量大，可以采用异步加载数据，当数据不多的时候，直接一次性加载，方便简单。

一：下载地址，及方法参数介绍

名                   描述                                   参数值   

maxentries          总条目数                             必选参数，整数   

items_per_page          每页显示的条目数                     可选参数，默认是10   

num_display_entries 连续分页主体部分显示的分页条目数             可选参数，默认是10   

current_page            当前选中的页面                              可选参数，默认是0，表示第1页   

num_edge_entries    两侧显示的首尾分页的条目数            可选参数，默认是0   

link_to                 分页的链接                            字符串，可选参数，默认是”#”   

prev_text           “前一页”分页按钮上显示的文字          字符串参数，可选，默认是”Prev”   

next_text           “下一页”分页按钮上显示的文字              字符串参数，可选，默认是”Next”   

ellipse_text            省略的页数用什么文字表示                     可选字符串参数，默认是”…”   

prev_show_always    是否显示“前一页”分页按钮                    布尔型，可选参数，默认为true，即显示“前一页”按钮   

next_show_always    是否显示“下一页”分页按钮                    布尔型，可选参数，默认为true，即显示“下一页”按钮   

callback            回调函数                             默认无执行效果   

二：引入jquery.js、jquery.pagination.js和pagination.css

登录后复制

三：准备jsp页面元素

登录后复制

四：实现异步加载
js代码：

$(function() {      var pageSize = 5; // 每页显示多少条记录      var total; // 总共多少记录      Init(0); // 注意参数，初始页面默认传到后台的参数，第一页是0;      $(".Pagination").pagination(total, {          callback : PageCallback,          prev_text : '上一页',          next_text : '下一页',          items_per_page : pageSize,          num_display_entries : 4, // 连续分页主体部分显示的分页条目数          num_edge_entries : 1, // 两侧显示的首尾分页的条目数      });      //点击上一页、下一页、页码的时候触发的事件      function PageCallback(index, jq) { // 前一个参数表示当前点击的那个分页的页数索引值，后一个参数表示装载容器。          Init(index);      }      function Init(pageIndex) { // 参数就是点击的那个分页的页数索引值          $.ajax({                      type : "get",                      url : ROOT + "/map/getPeopleList?rows=" + pageSize + "&page="                              + pageIndex,                      async : false,                      dataType : "json",                      success : function(data) {                          // 赋值total，用于计算                          total = data.total;                          //拼接html(这个部分根据自己的需求去实现)                          var list = data.pList;                          var html = '
'                        for (var i = 0; i " + list[i].name + "
"                          }                          html += '';                          $('.list').html(html)                      },                      error : function() {                          alert("请求超时，请重试！");                      }                  });      };  });

登录后复制

后台代码：

pojo对象

package com.debo.map.pojo;  public class People {      private String name;      private int limit;//用于分页      private int Offset;//用于分页      public String getName() {          return name;      }      public void setName(String name) {          this.name = name;      }      public int getLimit() {          return limit;      }      public void setLimit(int limit) {          this.limit = limit;      }      public int getOffset() {          return Offset;      }      public void setOffset(int offset) {          Offset = offset;      }  }

登录后复制

controller代码

@RequestMapping(value="/getPeopleList",method = RequestMethod.GET)      @ResponseBody      public Map getPeopleList(HttpServletRequest request){          //创建对象，封装查询条件          People people = new People();          //获取每页记录数          int limit = Integer.parseInt(request.getParameter("rows"));          people.setLimit(limit);          //获取当前页数          int page = Integer.parseInt(request.getParameter("page"));          people.setOffset(page*limit);          Map map = new HashMap();          //查询总记录数          int total = mapService.countNumb();          map.put("total", total);          //查询当前页面需要的数据          List pList = mapService.getPeopleList(people);          map.put("pList", pList);          return map;      }

登录后复制

mapper配置sql语句

        SELECT count(1)          FROM people      SELECT * FROM people      LIMIT #{offset},#{limit}  

登录后复制

五：实现一次性加载
js代码：

$(function() {      //默认每一页显示5条数据      getMsg(5)      //分页实现函数      function getMsg(num) {          $.ajax({              url : ROOT+'/map/getPeopleList',              type : 'GET',              dataType : 'json',              success : function(data) {              // 1.计算分页数量              var showNum = num;              var dataL = data.length;              var pageNum = Math.ceil(dataL / showNum);              $('.Pagination').pagination(pageNum,{                  num_edge_entries : 1,                  num_display_entries : 4,                  prev_text : ">",                  callback : function(index) {                      var html = '
'                    for (var i = showNum * index; i " + data[i].name + "
"                          }                      }                      html += '';                      $('.list').html(html)                  })              }           })         }        }  })

登录后复制

后台代码：
pojo对象

package com.debo.map.pojo;  public class People {      private String name;      public String getName() {          return name;      }      public void setName(String name) {          this.name = name;      }  }

登录后复制

controller层代码

@RequestMapping(value="/getPeopleList",method = RequestMethod.GET)  @ResponseBody  public List getPeopleList(HttpServletRequest request){      List pList = mapService.getPeopleList();      return pList;  }

登录后复制

mapper配置sql语句

    SELECT * from people  

登录后复制

相关推荐：

jQuery Pagination分页插件详解

以上就是jquery 分页的两种实现方法的详细内容，更多请关注【创想鸟】其它相关文章！