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分页插件。如果你用到此插件作分页的时候,涉及到的数据量大,可以采用异步加载数据,当数据不多的时候,直接一次性加载,方便简单。
文末福利:
福利一:前端,Java,产品经理,微信小程序,Python等资源合集大放送:https://www.jianshu.com/p/e8197d4d9880
福利二:微信小程序入门与实战全套详细视频教程
领取方式:
如果需要学习视频,欢迎关注 【编程微刊】微信公众号,回复【领取资源】一键领取以下所有干货资源,获取更多有用技术干货、文档资料。所有文档会持续更新,欢迎关注一起成长!
原文作者:祈澈姑娘
原文链接:https://www.jianshu.com/u/05f416aefbe1
创作不易,转载请告知
90后前端妹子,爱编程,爱运营,爱折腾。
坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。
Jquery前端分页插件pagination同步加载和异步加载的更多相关文章
- Jquery前端分页插件pagination使用
插件描述:JqueryPagination是一个轻量级的jquery分页插件.只需几个简单的配置就可以生成分页控件.并且支持ajax获取数据,自定义请求参数,提供多种方法,事件和回调函数,功能全面的分 ...
- 前端分页插件pagination
摘要: 最近在开发项目中又用到了前端分页,以前也做过,为了方便以后使用所以将他封装成第三方插件,不依赖任何库.网上已经有很多插件,问什么还要自己造轮子? 自己写的扩展性高 不依赖任何库 作为一次技术沉 ...
- angularJS前端分页插件
首先在项目中引入 分页插件的 js 和 css: 在html页面引入 相关js 和 css: 在控制器中引入分页插件中定义的 module[可以打开pagination.js查看,可以看到 其实,在插 ...
- 转:精心挑选的12款优秀 jQuery Ajax 分页插件和教程
在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 ...
- Vue2.0 分页插件pagination使用详细说明
Vue2.0 分页pagination使用 插件下载地址:Vue_Pagination 插件描述:基于jQuery的分页插件大家都用过很多了吧,今天分享一下基于Vue的分页插件pagination.j ...
- 12款优秀 jQuery Ajax 分页插件和教程
12款优秀 jQuery Ajax 分页插件和教程 在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 W ...
- Jquery的分页插件
Jquery的分页插件, 用起来还不错. 来自: http://flaviusmatis.github.io/simplePagination.js/ 下载地址: https://github.c ...
- 【UE4 C++ 基础知识】<11>资源的同步加载与异步加载
同步加载 同步加载会造成进程阻塞. FObjectFinder / FClassFinder 在构造函数加载 ConstructorHelpers::FObjectFinder Constructor ...
- jQuery插件实例六:jQuery 前端分页
先来看看效果: 对于前端分页,关键是思路,和分页算法.本想多说两句,可又觉得没什么可说的,看代码吧: 如何使用? $("#pging").zPagination({ 'navEve ...
随机推荐
- 96.udp通信
运行截图 客户端 创建客户端套接字,用于创建UDP通信 SOCKET socket_client; 创建UDP通信 socket_client = socket(AF_INET, SOCK_DGRAM ...
- 【干货】前端开发者最常用的六款IDE
一.Visual Studio Code 下载地址:https://code.visualstudio.com/ 功能介绍: 微软在2015年4月30日Build 开发者大会上正式宣布了 Visual ...
- COdeVS——T 1082 线段树练习 3 (分块练习)
http://codevs.cn/problem/1082/ 时间限制: 3 s 空间限制: 128000 KB 题目等级 : 大师 Master 题解 题目描述 Descriptio ...
- Day1:用户交互与格式化输出
一.用户交互 1.input()方法 #!/usr/bin/env python # -*- coding:utf-8 -*- # Author:Hiuhung Wan username = inpu ...
- 驱动学习2-Menuconfig与Kconfig
Menuconfig: 执行make Menuconfig命令是为了产生.config文件 Kconfig: Kconfig中的指令可以改变Menuconfig图形界面中的东西,例如假如leds控制选 ...
- Python中的Sets数据结构
Python的set和其他语言类似,是一个无序不重复元素集,基本功能包括关系测试和消除重复元素.集合对象支持union(联合),intersection(交),difference(差)和sysmme ...
- flask的使用(一)
1.程序基本的说明 #-*-encoding=utf--*- 从flask中引入类 from flask import Flask ,render_template import config 初始化 ...
- [TypeScript] Distinguishing between types of Strings in TypeScript
In JavaScript, many libraries use string arguments to change behavior. In this lesson we learn how T ...
- 超链接a的download属性 实现文件下载功能
今天做项目遇到一个要点击按钮下载文件的功能. 百度之 知道了a的download属性.这是HTML5的新特性.主要功能是实现下载功能.主要语法是 <a href="url" ...
- C++基础学习教程(七)----类编写及类的两个特性解析--->多态&继承
类引入 到眼下为止我们所写的自己定义类型都是keywordstruct,从如今起我们将採用class方式定义类,这样的方式对于学习过其它高级语言包含脚本(Such as Python)的人来说再熟悉只 ...