jquery pagination分页的两种实现方式

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

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

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

下载地址：点击打开链接

名                   描述                                   参数值
maxentries          总条目数                             必选参数，整数
items_per_page          每页显示的条目数                     可选参数，默认是10
num_display_entries 连续分页主体部分显示的分页条目数             可选参数，默认是10
current_page            当前选中的页面                              可选参数，默认是0，表示第1页
num_edge_entries    两侧显示的首尾分页的条目数            可选参数，默认是0
link_to                 分页的链接                            字符串，可选参数，默认是"#"
prev_text           “前一页”分页按钮上显示的文字          字符串参数，可选，默认是"Prev"
next_text           “下一页”分页按钮上显示的文字              字符串参数，可选，默认是"Next"
ellipse_text            省略的页数用什么文字表示                     可选字符串参数，默认是"…"
prev_show_always    是否显示“前一页”分页按钮                    布尔型，可选参数，默认为true，即显示“前一页”按钮
next_show_always    是否显示“下一页”分页按钮                    布尔型，可选参数，默认为true，即显示“下一页”按钮
callback            回调函数                             默认无执行效果

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

<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页面元素

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

四：实现异步加载
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 = '<div>'
                        for (var i = 0; i < list.length; i++) {
                            html += "<p>" + list[i].name + "</p>"
                        }
                        html += '</div>';
                        $('.list').html(html)


                    },
                    error : function() {
                        alert("请求超时，请重试！");
                    }
                });
    };
});

后台代码：
pojo对象

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;

    }

mapper配置sql语句

<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代码：

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

                    }
                    html += '</div>';
                    $('.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;
    }
}

controller层代码

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

}

mapper配置sql语句

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

文末福利：

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

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

ok了