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

简介: 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分页插件。如果你用到此插件作分页的时候,涉及到的数据量大,可以采用异步加载数据,当数据不多的时候,直接一次性加载,方便简单。

相关文章
|
2月前
|
前端开发 JavaScript API
(前端3D模型开发)网页三维CAD中加载和保存STEP模型
本文介绍了如何使用`mxcad3d`库在网页上实现STEP格式三维模型的导入与导出。首先,通过官方教程搭建基本项目环境,了解核心对象如MxCAD3DObject、Mx3dDbDocument等的使用方法。接着,编写了加载和保存STEP模型的具体代码,包括HTML界面设计和TypeScript逻辑实现。最后,通过运行项目验证功能,展示了从模型加载到保存的全过程。此外,`mxcad3d`还支持多种其他格式的三维模型文件操作。
|
5月前
|
缓存 前端开发 JavaScript
探索前端性能优化:从加载速度到用户体验的全面升级
探索前端性能优化:从加载速度到用户体验的全面升级
80 0
|
3月前
|
前端开发 数据可视化 数据挖掘
前端开发者的福音:这些插件让你轻松应对各种复杂需求!
前端开发领域充满创意与挑战,面对复杂需求,开发者常感力不从心。本文通过三个真实案例,介绍如何利用Chart.js、ESLint和Ant Design等强大插件,解决数据可视化、代码质量和UI组件复用等问题,提高开发效率,创造更出色的前端作品。
44 3
|
3月前
|
缓存 前端开发 JavaScript
前端性能优化:提升网页加载速度的10个技巧
【10月更文挑战第25天】在互联网时代,网页加载速度直接影响用户体验和搜索引擎排名。本文介绍了10个提升网页加载速度的技巧,包括减少HTTP请求、启用压缩、使用CDN、延迟加载非关键资源、优化图片、减少重定向、使用浏览器缓存、优化CSS和JavaScript、异步加载JavaScript以及代码分割。通过这些方法,可以显著提高网页性能,改善用户体验。
674 5
|
4月前
|
JSON 分布式计算 前端开发
前端的全栈之路Meteor篇(七):轻量的NoSql分布式数据协议同步协议DDP深度剖析
本文深入探讨了DDP(Distributed Data Protocol)协议,这是一种在Meteor框架中广泛使用的发布/订阅协议,支持实时数据同步。文章详细介绍了DDP的主要特点、消息类型、协议流程及其在Meteor中的应用,包括实时数据同步、用户界面响应、分布式计算、多客户端协作和离线支持等。通过学习DDP,开发者可以构建响应迅速、适应性强的现代Web应用。
|
4月前
|
前端开发 JavaScript
乾坤qiankun(微前端)样式隔离解决方案--使用插件替换前缀
乾坤qiankun(微前端)样式隔离解决方案--使用插件替换前缀
722 8
|
3月前
|
缓存 监控 前端开发
前端性能优化实战:从加载速度到用户体验
前端性能优化实战:从加载速度到用户体验
|
4月前
|
存储 前端开发 Java
验证码案例 —— Kaptcha 插件介绍 后端生成验证码,前端展示并进行session验证(带完整前后端源码)
本文介绍了使用Kaptcha插件在SpringBoot项目中实现验证码的生成和验证,包括后端生成验证码、前端展示以及通过session进行验证码校验的完整前后端代码和配置过程。
523 0
验证码案例 —— Kaptcha 插件介绍 后端生成验证码,前端展示并进行session验证(带完整前后端源码)
|
4月前
|
资源调度 前端开发 安全
前端实战:基于Verdaccio搭建私有npm仓库,轻松上传与下载自定义npm插件包
前端实战:基于Verdaccio搭建私有npm仓库,轻松上传与下载自定义npm插件包
219 0
|
4月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
282 14

热门文章

最新文章