집 >웹 프론트엔드 >JS 튜토리얼 >Jquery 페이징의 두 가지 구현 방법

Jquery 페이징의 두 가지 구현 방법

小云云원래의: 2018-03-21 09:18:304359검색

이 기사에서는 주로 jquery 페이지 매김의 두 가지 구현 방법을 공유합니다. 이 플러그인은 jQuery의 ajax 페이징 플러그인입니다. 페이징에 이 플러그인을 사용하고 관련된 데이터의 양이 많은 경우 데이터를 비동기적으로 로드할 수 있으며, 데이터가 많지 않을 때 한 번에 직접 로드할 수 있어 편리하고 간단합니다.

1: 다운로드 주소 및 메소드 매개변수 소개

이름 총 항목 수는 10입니다.
num_display_entries 연속 페이징의 주요 부분에 표시되는 페이징 항목 수 선택적 매개변수는 10입니다.
current_page 선택적 매개변수, 기본값은 1페이지를 나타내는 0입니다.
num_edge_entries 2개의 앞면과 뒷면에 표시되는 항목 수는 선택사항일 수 있습니다. 기본값은 0입니다.
둘: 소개 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 페이지 요소 준비

<!--  显示分页数据 -->
<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 : &#39;上一页&#39;,  
        next_text : &#39;下一页&#39;,  
        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 = &#39;<p>&#39;
                        for (var i = 0; i < list.length; i++) {  
                            html += "<p>" + list[i].name + "</p>"  
                        }  
                        html += &#39;</p>&#39;;  
                        $(&#39;.list&#39;).html(html)  
                    },  
                    error : function() {  
                        alert("请求超时，请重试！");  
                    }  
                });  
    };  
});

백엔드 코드:

pojo object

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;  
    }  
}

@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;  
    }

<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+&#39;/map/getPeopleList&#39;,  
            type : &#39;GET&#39;,  
            dataType : &#39;json&#39;,  
            success : function(data) {  
            // 1.计算分页数量  
            var showNum = num;  
            var dataL = data.length;  
            var pageNum = Math.ceil(dataL / showNum);  
            $(&#39;.Pagination&#39;).pagination(pageNum,{  
                num_edge_entries : 1,  
                num_display_entries : 4,  
                prev_text : "<<",  
                next_text : ">>",  
                callback : function(index) {  
                    var html = &#39;<p>&#39;
                    for (var i = showNum * index; i < showNum
                            * index + showNum; i++) {  
                        if (i < dataL) {  
                            html += "<p>" + data[i].name + "</p>"  
                        }  
                    }  
                    html += &#39;</p>&#39;;  
                    $(&#39;.list&#39;).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>

Jquery 페이징의 두 가지 구현 방법

관련 기사