Two implementation methods of jquery paging

This article mainly shares with you two implementation methods of jquery pagination. This plug-in is jQuery's ajax paging plug-in. If you use this plug-in for paging and the amount of data involved is large, you can load the data asynchronously. When there is not much data, load it directly in one go, which is convenient and simple.

1: Download address, and introduction to method parameters

1. ##Name Description Must -choose parameters of the total entry, integrity

2. ## steems_per_page Each page is available for optional parameters, the default is 10

## Num_display_entries continuous paging main body The number of pagination entries that are partially displayed. Optional parameter. The default is 10.
current_page. The currently selected page.
4. #num_edge_entries The number of first and last paginated entries displayed on both sides of the page Optional parameter, the default is 0

##link_to Link to the pagination String, optional parameter, the default is "#"
prev_text The text displayed on the "Previous Page" paging button String parameter, optional, the default is "Prev"

6. ##next_text "Next The text displayed on the "One Page" paging button. String parameter, optional. The default is "Next"

7. ellipse_text. What text is used to represent the omitted page number. Optional string parameter. The default is "Next". "…"

8. prev_show_always Whether to display the "previous page" paging button                 Boolean type, optional parameter, the default is true, that is, the "previous page" button is displayed 

9. next_show_always Whether to display the "next page" paging button Boolean type, optional parameter, the default is true, which means the "next page" button is displayed

10. callback function No execution effect by default
2: Introduce jquery.js, jquery.pagination.js and 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" />

Three: Prepare jsp page elements

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

Four: Implement asynchronous loading

js code:

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

Backend code:

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

1. controller code

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




2. mapper configuration sql statement

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

The above is the detailed content of Two implementation methods of jquery paging. For more information, please follow other related articles on the PHP Chinese website!