Jquery前端分页插件pagination同步加载和异步加载

王小婷

发布于 2018-06-01 16:08:01

4K0

发布于 2018-06-01 16:08:01

文章被收录于专栏：编程微刊

上一篇文章介绍了Jquery前端分页插件pagination的基本使用方法和使用案例，大致原理就是一次性加载所有的数据再分页。https://cloud.tencent.com/developer/article/1141335

但是这样写的缺点就是一次性加载数据进行分页的，后期数据多的话可能不行，数据量太大比如说上千条数据，在给每个页面分配固定的条数，一下子加载不出来，就会导致页面间的短暂空白，如果遇上网速不好，那差不多就是一个不完美的bug

一次性加载数据，前端分页

上一篇文章中提到的原理js代码如下：

    $(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 = '<div>'  
                        for (var i = showNum * index; i < showNum  
                                * index + showNum; i++) {  
                            if (i < dataL) {  
                                html += "<p>" + data[i].name + "</p>"  
                            }  
                              
                        }  
                        html += '</div>';  
                        $('.list').html(html)  
                    })  
                }  
             })  
           }  
          }  
    })

pagination一次性加载所有的数据再分页，数据太多了，一次性加载不出来，卡的很，和后台商量了一下，得出了一个简单的思路，当前页数和显示的条数即可，解决方案如下：

分批加载数据，前端分页（实现异步加载）

js代码：
    $(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 = '<div>'  
                            for (var i = 0; i < list.length; i++) {  
                                html += "<p>" + list[i].name + "</p>"  
                            }  
                            html += '</div>';  
                            $('.list').html(html)  
      
      
                        },  
                        error : function() {  
                            alert("请求超时，请重试！");  
                        }  
                    });  
        };  
    });

评价：分页插件pagination

此插件是jQuery的ajax分页插件。如果你用到此插件作分页的时候，涉及到的数据量大，可以采用异步加载数据，当数据不多的时候，直接一次性加载，方便简单。