您的位置: 首页  >  文章  >  jquery pagination分页的两种实现方式

jquery pagination分页的两种实现方式

分类: 文章 • 2023-02-26 00:04:04

原文链接：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. <script src="js/jquery.min.js"></script>  
  2. <script src="js/jquery.pagination.js"></script>  
  3. <link href="js/pagination.css" rel="stylesheet" type="text/css" />  

三：准备jsp页面元素
[html] view plain copy
  1. <!--  显示分页数据 -->  
  2. <div class="list"></div>  
  3. <!-- 显示页码 -->  
  4. <div class="Pagination" id="pagination"></div>  


四：实现异步加载
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 = '<div>'  
  33.                         for (var i = 0; i < list.length; i++) {  
  34.                             html += "<p>" + list[i].name + "</p>"  
  35.                         }  
  36.                         html += '</div>';  
  37.                         $('.list').html(html)  
  38.   
  39.   
  40.                     },  
  41.                     error : function() {  
  42.                         alert("请求超时，请重试！");  
  43.                     }  
  44.                 });  
  45.     };  
  46. });  

后台代码：
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<String,Object> 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<String, Object> map = new HashMap<String,Object>();  
  14.         //查询总记录数  
  15.         int total = mapService.countNumb();  
  16.         map.put("total", total);  
  17.         //查询当前页面需要的数据  
  18.         List<People> pList = mapService.getPeopleList(people);  
  19.         map.put("pList", pList);  
  20.           
  21.         return map;  
  22.           
  23.     }  

mapper配置sql语句
[html] view plain copy
  1. <select id="countNumb" resultType="int">  
  2.         SELECT count(1)  
  3.         FROM people  
  4. </select>  
  5. <select id="getPeopleList" resultType="com.debo.map.pojo.People">  
  6.     SELECT * FROM people  
  7.     LIMIT #{offset},#{limit}  
  8. </select>  

五：实现一次性加载
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 = '<div>'  
  23.                     for (var i = showNum * index; i < showNum  
  24.                             * index + showNum; i++) {  
  25.                         if (i < dataL) {  
  26.                             html += "<p>" + data[i].name + "</p>"  
  27.                         }  
  28.                           
  29.                     }  
  30.                     html += '</div>';  
  31.                     $('.list').html(html)  
  32.                 })  
  33.             }  
  34.          })  
  35.        }  
  36.       }  
  37. })  

后台代码：
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<People> getPeopleList(HttpServletRequest request){  
  4.     List<People> pList = mapService.getPeopleList();  
  5.     return pList;  
  6.           
  7. }  


mapper配置sql语句

[html] view plain copy
  1. <select id="getPeopleList" resultType="com.debo.map.pojo.People">  
  2.     SELECT * from people  
  3. </select>  

文末福利：

福利一：前端，Java，产品经理，微信小程序，Python等资源合集大放送：https://www.jianshu.com/p/e8197d4d9880
福利二：微信小程序入门与实战全套详细****：https://www.jianshu.com/p/e8197d4d9880


jquery pagination分页的两种实现方式

领取方式：
如果需要学习视频，欢迎关注 【编程微刊】微信公众号，回复【领取资源】一键领取以下所有干货资源，获取更多有用技术干货、文档资料。所有文档会持续更新，欢迎关注一起成长！


ok了

相关推荐