Deux méthodes d'implémentation de la pagination jquery

Cet article partage principalement avec vous deux méthodes d'implémentation de la pagination jquery. Ce plug-in est le plug-in de pagination ajax de jQuery. Si vous utilisez ce plug-in pour la pagination et que la quantité de données impliquées est importante, vous pouvez charger les données de manière asynchrone. Lorsqu'il n'y a pas beaucoup de données, chargez-les directement en une seule fois, ce qui est pratique et simple.

1: Télécharger l'adresse et l'introduction du paramètre de la méthode

1. Nom Description 🎜>

2. Maxentries Must -choose paramètres de l'entrée totale, entier

3. items_per_page chaque page affichée numéro paramètre facultatif, la valeur par défaut est 10

Num_display_entries pagination continue corps principal Le nombre d'entrées de pagination affiché dans l'affichage partiel. Paramètre facultatif. La valeur par défaut est 10.
current_page La page actuellement sélectionnée. La valeur par défaut est 0, indiquant la page 1.

5. num_edge_entries Le nombre de première et dernière entrées paginées affichées des deux côtés. Paramètre facultatif, la valeur par défaut est 0.

6. link_to Liens paginés Chaîne, paramètre facultatif, par défaut. est "#"

7. prev_text Le texte affiché sur le bouton de pagination "Page précédente" Paramètre de chaîne, facultatif, la valeur par défaut est "Prev"

8. next_text "Suivant Le texte affiché sur le bouton de pagination "Une page". Paramètre de chaîne, facultatif. La valeur par défaut est "Suivant". "…"

9. prev_show_always Indique s'il faut afficher le "précédent" bouton de pagination "page" Booléen, paramètre facultatif, la valeur par défaut est vraie, c'est-à-dire que le bouton "page précédente" est affiché

10. next_show_always S'il faut afficher le bouton de pagination "page suivante" Type booléen , paramètre facultatif, la valeur par défaut est vraie, c'est-à-dire que le bouton "page suivante" est affiché

11. fonction de rappel Aucun effet d'exécution par défaut
2 : Introduire jquery.js, jquery.pagination.js et pagination.css

Trois : Préparer les éléments de la page jsp

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

Quatre : Implémenter le chargement asynchrone

1. Code js :

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

Code backend :

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

objet pojo



2. code du contrôleur

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

instruction SQL de configuration du mappeur

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!