Zwei Implementierungsmethoden für JQuery-Paging

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

1. Name Beschreibung                                       ose Parameter des Gesamteintrags, Ganzzahl

2. items_per_page jede angezeigte Seite Zahl optionaler Parameter, der Standardwert ist 10

3. Num_display_entries fortlaufendes Paging Hauptteil Die Anzahl der Paginierungseinträge Wird in der Teilanzeige angezeigt. Der Standardwert ist 10.

4. current_page >

num_edge_entries Auf beiden Seiten angezeigte paginierte Einträge. Der Standardwert ist 0.
link_to Paginierte Links Zeichenfolge, optionaler Parameter, Standardwert ist „#“
prev_text Der Text, der auf der Paging-Schaltfläche „Vorherige Seite“ angezeigt wird. String-Parameter, optional, der Standardwert ist „Prev“
next_text „Next Der Text, der auf der Paging-Schaltfläche „Eine Seite“ angezeigt wird button. String-Parameter, optional. Der Standardwert ist „Weiter“. Das heißt, die Schaltfläche „Vorherige Seite“ wird angezeigt.
next_show_always Gibt an, ob die Paging-Schaltfläche „Nächste Seite“ angezeigt werden soll. Boolescher Typ, optionaler Parameter. Der Standardwert ist true, d. h. „ Schaltfläche „nächste Seite“ wird angezeigt
Rückruffunktion Standardmäßig kein Ausführungseffekt
11. Zweitens: Einführung von jquery.js, jquery.pagination .js und pagination.css

13. Drei: JSP-Seitenelemente vorbereiten

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

   Viertens: Asynchrones Laden implementieren

JS-Code:

Backend-Code :

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

Pojo-Objekt

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

1. Controller-Code



2. Mapper-Konfigurations-SQL-Anweisung

3. <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 = &#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;  
    }  
}

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分页插件详解

Das obige ist der detaillierte Inhalt vonZwei Implementierungsmethoden für JQuery-Paging. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!