jquery分页的两种实现方法

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

1. 名 描述 参数值

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

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

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

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

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

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

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

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

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

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

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

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

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

1. <script src="js/jquery.min.js"></script>
   <script src="js/jquery.pagination.js"></script>
   <link href="js/pagination.css" rel="stylesheet" type="text/css" />

三：准备jsp页面元素

1. <!-- 显示分页数据 -->
   <p class="list"></p>
   <!-- 显示页码 -->
   <p class="Pagination" id="pagination"></p>

四：实现异步加载
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 = '<p>'
 for (var i = 0; i < list.length; i++) { 
 html += "<p>" + list[i].name + "</p>" 
 } 
 html += '</p>'; 
 $('.list').html(html) 
 }, 
 error : function() { 
 alert("请求超时，请重试！"); 
 } 
 }); 
 }; 
});

1. 后台代码：




2. pojo对象

3. 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<String,Object> 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<String, Object> map = new HashMap<String,Object>(); 
 //查询总记录数 
 int total = mapService.countNumb(); 
 map.put("total", total); 
 //查询当前页面需要的数据 
 List<People> pList = mapService.getPeopleList(people); 
 map.put("pList", pList); 
 return map; 
 }

1. mapper配置sql语句

2. <select id="countNumb" resultType="int">
    SELECT count(1) 
    FROM people 
   </select>
   <select id="getPeopleList" resultType="com.debo.map.pojo.People">
    SELECT * FROM people 
    LIMIT #{offset},#{limit} 
   </select>

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

1. $(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 : "<<", 
    next_text : ">>", 
    callback : function(index) { 
    var html = '<p>'
    for (var i = showNum * index; i < showNum
    * index + showNum; i++) { 
    if (i < dataL) { 
    html += "<p>" + data[i].name + "</p>" 
    } 
    } 
    html += '</p>'; 
    $('.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; 
 } 
}

1. controller层代码

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

mapper配置sql语句

1. <select id="getPeopleList" resultType="com.debo.map.pojo.People">
    SELECT * from people 
   </select>