zoukankan      html  css  js  c++  java
  • jquery pagination分页的两种实现方式

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

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


    一:下载地址,及方法参数介绍

    下载地址:点击打开链接

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

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


    四:实现异步加载

    js代码:
    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对象
    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代码
    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语句
    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代码:
    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对象
    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层代码
    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语句

    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



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


    ok了
  • 相关阅读:
    每日一题 为了工作 2020 0412 第四十一题
    每日一题 为了工作 2020 04011 第四十题
    每日一题 为了工作 2020 0410 第三十九题
    每日一题 为了工作 2020 0409 第三十八题
    每日一题 为了工作 2020 0408 第三十七题
    每日一题 为了工作 2020 0407 第三十六题
    每日一题 为了工作 2020 0406 第三十五题
    每日一题 为了工作 2020 0405 第三十四题
    学习总结(二十四)
    学习总结(二十三)
  • 原文地址:https://www.cnblogs.com/wangting888/p/9701651.html
Copyright © 2011-2022 走看看