jquery pagination分页的两种实现方式

原文链接：http://blog.csdn.net/qq_37936542/article/details/79457012

此插件是jQuery的ajax分页插件。如果你用到此插件作分页的时候，涉及到的数据量大，可以采用异步加载数据，当数据不多的时候，直接一次性加载，方便简单。

 

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

 

下载地址：点击打开链接

[html] view plain copy

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

 

[html] view plain copy

1.   
2.   
3.   

三：准备jsp页面元素

 

[html] view plain copy

1.   

  

  

  

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

 

[html] view plain copy

1. $(function() {  
2.     var pageSize = 5; // 每页显示多少条记录  
3.     var total; // 总共多少记录  
4.     Init(0); // 注意参数，初始页面默认传到后台的参数，第一页是0;  
5.     $(".Pagination").pagination(total, {  
6.         callback : PageCallback,  
7.         prev_text : '上一页',  
8.         next_text : '下一页',  
9.         items_per_page : pageSize,  
10.         num_display_entries : 4, // 连续分页主体部分显示的分页条目数  
11.         num_edge_entries : 1, // 两侧显示的首尾分页的条目数  
12.     });  
13.       
14.     //点击上一页、下一页、页码的时候触发的事件  
15.     function PageCallback(index, jq) { // 前一个参数表示当前点击的那个分页的页数索引值，后一个参数表示装载容器。  
16.         Init(index);  
17.     }  
18.   
19.   
20.     function Init(pageIndex) { // 参数就是点击的那个分页的页数索引值  
21.         $.ajax({  
22.                     type : "get",  
23.                     url : ROOT + "/map/getPeopleList?rows=" + pageSize + "&page="  
24.                             + pageIndex,  
25.                     async : false,  
26.                     dataType : "json",  
27.                     success : function(data) {  
28.                         // 赋值total，用于计算  
29.                         total = data.total;  
30.                         //拼接html(这个部分根据自己的需求去实现)  
31.                         var list = data.pList;  
32.                         var html = '
    '  
33.                         for (var i = 0; i < list.length; i++) {  
34.                             html += "

    " + list[i].name + "

    "  
35.                         }  
36.                         html += '

';  

                        $('.list').html(html)  

  

  

                    },  

                    error : function() {  

                        alert("请求超时，请重试！");  

                    }  

                });  

    };  

});  

后台代码：
pojo对象

 

[html] view plain copy

1. package com.debo.map.pojo;  
2.   
3.   
4. public class People {  
5.       
6.     private String name;  
7.     private int limit;//用于分页  
8.     private int Offset;//用于分页  
9.     public String getName() {  
10.         return name;  
11.     }  
12.     public void setName(String name) {  
13.         this.name = name;  
14.     }  
15.       
16.     public int getLimit() {  
17.         return limit;  
18.     }  
19.     public void setLimit(int limit) {  
20.         this.limit = limit;  
21.     }  
22.     public int getOffset() {  
23.         return Offset;  
24.     }  
25.     public void setOffset(int offset) {  
26.         Offset = offset;  
27.     }  
28.       
29.   
30.   
31. }  

controller代码

 

[html] view plain copy

1. @RequestMapping(value="/getPeopleList",method = RequestMethod.GET)  
2.     @ResponseBody  
3.     public Map getPeopleList(HttpServletRequest request){  
4.         //创建对象，封装查询条件  
5.         People people = new People();  
6.         //获取每页记录数  
7.         int limit = Integer.parseInt(request.getParameter("rows"));  
8.         people.setLimit(limit);  
9.         //获取当前页数  
10.         int page = Integer.parseInt(request.getParameter("page"));  
11.         people.setOffset(page*limit);  
12.           
13.         Map map = new HashMap();  
14.         //查询总记录数  
15.         int total = mapService.countNumb();  
16.         map.put("total", total);  
17.         //查询当前页面需要的数据  
18.         List pList = mapService.getPeopleList(people);  
19.         map.put("pList", pList);  
20.           
21.         return map;  
22.           
23.     }  

mapper配置sql语句

 

[html] view plain copy

1.   
2.         SELECT count(1)  
3.         FROM people  
4.   
5.   
6.     SELECT * FROM people  
7.     LIMIT #{offset},#{limit}  
8.   

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

 

[html] view plain copy

1. $(function() {  
2.     //默认每一页显示5条数据  
3.     getMsg(5)  
4.       
5.     //分页实现函数  
6.     function getMsg(num) {  
7.         $.ajax({  
8.             url : ROOT+'/map/getPeopleList',  
9.             type : 'GET',  
10.             dataType : 'json',  
11.             success : function(data) {  
12.             // 1.计算分页数量  
13.             var showNum = num;  
14.             var dataL = data.length;  
15.             var pageNum = Math.ceil(dataL / showNum);  
16.             $('.Pagination').pagination(pageNum,{  
17.                 num_edge_entries : 1,  
18.                 num_display_entries : 4,  
19.                 prev_text : "<<",  
20.                 next_text : ">>",  
21.                 callback : function(index) {  
22.                     var html = '
    '  
23.                     for (var i = showNum * index; i < showNum  
24.                             * index + showNum; i++) {  
25.                         if (i < dataL) {  
26.                             html += "

    " + data[i].name + "

    "  
27.                         }  
28.                           
29.                     }  
30.                     html += '

';  

                    $('.list').html(html)  

                })  

            }  

         })  

       }  

      }  

})  

后台代码：
pojo对象

 

[html] view plain copy

1. package com.debo.map.pojo;  
2.   
3.   
4. public class People {  
5.       
6.     private String name;  
7.     public String getName() {  
8.         return name;  
9.     }  
10.     public void setName(String name) {  
11.         this.name = name;  
12.     }  
13. }  

controller层代码

 

[html] view plain copy

1. @RequestMapping(value="/getPeopleList",method = RequestMethod.GET)  
2. @ResponseBody  
3. public List getPeopleList(HttpServletRequest request){  
4.     List pList = mapService.getPeopleList();  
5.     return pList;  
6.           
7. }  

 

mapper配置sql语句

[html] view plain copy

1.   
2.     SELECT * from people  
3.   

 

• 关注「编程微刊」公众号 ，在微信后台回复「领取资源」，获取IT资源300G干货大全。