Zwei Implementierungsmethoden für JQuery-Paging-js-Tutorial-php.cn

Zwei Implementierungsmethoden für JQuery-Paging

小云云

Freigeben： 2018-03-21 09:18:30

Original

4329 Leute haben es durchsucht

Dieser Artikel stellt Ihnen hauptsächlich zwei Implementierungsmethoden der JQuery-Paginierung vor. Dieses Plug-In ist das Ajax-Paging-Plug-In. Wenn Sie dieses Plug-in zum Paging verwenden und die Datenmenge groß ist, können Sie die Daten asynchron laden. Wenn nicht viele Daten vorhanden sind, können Sie sie direkt auf einmal laden, was praktisch und einfach ist.

1: Download-Adresse und Einführung in die Methodenparameter

Name Beschreibung ose Parameter des Gesamteintrags, Ganzzahl
items_per_page jede angezeigte Seite Zahl optionaler Parameter, der Standardwert ist 10
Num_display_entries fortlaufendes Paging Hauptteil Die Anzahl der Paginierungseinträge Wird in der Teilanzeige angezeigt. Der Standardwert ist 10.
current_page >
Zweitens: Einführung von jquery.js, jquery.pagination .js und pagination.css
Drei: JSP-Seitenelemente vorbereiten

<script src="js/jquery.min.js"></script>
<script src="js/jquery.pagination.js"></script>
<link href="js/pagination.css" rel="stylesheet" type="text/css" />

Nach dem Login kopieren

Viertens: Asynchrones Laden implementieren

JS-Code:

Backend-Code :

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

Nach dem Login kopieren

Pojo-Objekt

$(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("请求超时，请重试！");  
                    }  
                });  
    };  
});

Nach dem Login kopieren

Controller-Code

Mapper-Konfigurations-SQL-Anweisung

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

Nach dem Login kopieren

五：实现一次性加载
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)  
                })  
            }  
         })  
       }  
      }  
})

Nach dem Login kopieren

后台代码：
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;  
    }  
}

Nach dem Login kopieren

controller层代码

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

Nach dem Login kopieren

mapper配置sql语句

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

Nach dem Login kopieren