欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

jquery 分页的两种实现方法

程序员文章站 2022-04-27 08:16:30
...
本文主要和大家分享jquery pagination 分页的两种实现方法,此插件是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>
    <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>

相关推荐:

jQuery Pagination分页插件详解

以上就是jquery 分页的两种实现方法的详细内容,更多请关注其它相关文章!