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

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

但是这样写的缺点就是一次性加载数据进行分页的,后期数据多的话可能不行,数据量太大比如说上千条数据,在给每个页面分配固定的条数,一下子加载不出来,就会导致页面间的短暂空白,如果遇上网速不好,那差不多就是一个不完美的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分页插件。如果你用到此插件作分页的时候,涉及到的数据量大,可以采用异步加载数据,当数据不多的时候,直接一次性加载,方便简单。

自荐前端干货:

进阶攻略|前端最全的框架总结:https://www.jianshu.com/p/2a8ce7075d79 web开发快速提高工作效率的一些资源:https://www.jianshu.com/p/3cede64e87e5 前端学习的几个网站:https://www.jianshu.com/p/c36463dd56db 老司机程序员用到的各种网站整理:https://www.jianshu.com/p/c806eabe5bec 进阶攻略|前端完整的学习路线:https://www.jianshu.com/p/ed50ee3889d4 八款前端开发人员更轻松的实用在线工具:https://www.jianshu.com/p/267a01fb8bdb 前端几个常用简单的开发手册拿走不谢:https://www.jianshu.com/p/fd9689046a9b 程序员常用的六大技术博客类:https://www.jianshu.com/p/d1614f890282 九款优秀的企业项目协作工具推荐:https://www.jianshu.com/p/7df25e438610 移动端手势的七个事件库:https://www.jianshu.com/p/0754d5daa27e Bootstrap相关优质项目学习清单:https://www.jianshu.com/p/80d229e7fedc 2018前端越来越流行的的技术:https://www.jianshu.com/p/d4af2aa96cee

文末福利:

福利一:前端,Java,产品经理,微信小程序,Python等资源合集大放送:https://www.jianshu.com/p/e8197d4d9880 福利二:微信小程序入门与实战全套详细视频教程

image

原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1 90后前端妹子,爱编程,爱运营,爱折腾。 坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java学习网

网页开发之目前流行的五大浏览器内核介绍

浏览器的内核是分为两个部分的,一是渲染引擎,另一个是JS引擎。现在JS引擎比较独立,内核更加倾向于说渲染引擎。

28630
来自专栏IT技术精选文摘

海量之道之弱联网优化

14140
来自专栏零基础使用Django2.0.1打造在线教育网站

零基础使用Django2.0.1打造在线教育网站(二十一):讲师相关页面配置

努力与运动兼备~~~有任何问题可以加我好友或者关注微信公众号,欢迎交流,我们一起进步!

19920
来自专栏灯塔大数据

技术 | Python从零开始系列连载(二十九)

为了解答大家学习Python时遇到各种常见问题,小灯塔特地整理了一系列从零开始的入门到熟练的系列连载,每周五准时推出,欢迎大家学积极学习转载~

9140
来自专栏web前端教室

[前端常见病] 之 后端数据还没有,前端怎么进行?

标题所描述的情况,一般出现在后端进度滞后,前端又积累了一些工作量的情况下。在业务需求已经基本清晰的时候,前端的进度是很快的,UI设计出设计图,前端小兄弟切页面,...

241100
来自专栏芋道源码1024

Dubbo 源码解析 —— 集群容错架构设计

前言 本来是想把整个dubbo源码解析一次性弄完,再做成一个系列来发布的,但是正巧最近有位好朋友要去杭州面试,就和我交流了一下.本着对dubbo源码略有心得的心...

32570
来自专栏木可大大

RAID技术

RAID 的两个关键目标是提高数据可靠性和 I/O 性能。磁盘阵列中,数据分散在多个磁盘中,然而对于计算机系统来说,就像一个单独的磁盘。通过把相同数据同时写入到...

14120
来自专栏Data Analysis & Viz

手把手教你完成一个数据科学小项目(1):数据爬取

请先阅读“中国年轻人正带领国家走向危机”,这锅背是不背? 一文,以对“手把手教你完成一个数据科学小项目”系列有个全局性的了解。

18420
来自专栏小詹同学

Python程序员需要掌握的网络爬虫技术

当下是一个大数据的时代,各个行业都离不开数据的支持,因此,网络爬虫应运而生。编写网络爬虫当下最为火热的语言毫无疑问是Python,原因是,Python开发爬虫相...

18430
来自专栏刁寿钧的专栏

10 分钟梳理关系数据库基础知识(二):存储结构

本文是《十分钟入门关系型数据库》系列技术文章的第二篇,,主要介绍了数据库的存储结构。

75400

扫码关注云+社区

领取腾讯云代金券