ajax 分页点击数据缓存
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul,li{
list-style: none;
}
</style>
</head>
<body>
<!--<ul class="list">
<li></li>
</ul>-->
<table border="1" cellspacing="0" width="500">
<tr>
<th>编号</th>
<th>名称</th>
<th>时间</th>
<th>信息</th>
<th>编辑</th>
</tr>
<tbody id="tabList">
<!--<tr>
<td>1</td>
<td>summit</td>
<td>2019-03-22</td>
<td>gis</td>
<td>删除</td>
</tr>
<tr>
<td>1</td>
<td>summit</td>
<td>2019-03-22</td>
<td>gis</td>
<td>删除</td>
</tr>-->
</tbody> </table>
<button id="sss1">1</button>
<button id="sss">2</button>
<button id="addList">添加数据</button>
<script type="text/javascript" src="js/jquery-1.9.1.js" ></script>
<script type="text/javascript"> var cacel = {}; //保存缓存数据
var page = function () {
return function (page, fn) {
// console.log(cacel[page])
// console.log(page)
if(cacel[page]){
ajaxList(cacel[page])
fn && fn();
}else {
$.ajax({
type:"get",
url:"http://127.0.0.1:3001/list",
data: {
page:page
},
success: function(data){
console.log(data);
if(data.ok){
cacel[page] = data.list;
console.log(cacel)
//console.log()
ajaxList(data.list)
fn && fn();
// $("#tabList").empty();
// var str = '';
// for(var i = 0;i<data.list.length;i++){
// str += "<tr><td>" + (i + 1) + "</td><td>" + data.list[i].name + "</td><td>" + data.list[i].time + "</td><td>" + data.list[i].info + "</td><td onclick='delet(\""+data.list[i].listNo+"\")'>删除</td></tr>"
// }
// $("#tabList").append(str);
}
}
});
}
}
}
var p = page();
$(function(){ p(1) });
$("#sss").on("click", function() { p(6)
})
$("#sss1").on("click", function() { p(1)
})
function ajaxList(pageNo){
let data = pageNo;
//$.ajax({
// type:"get",
// url:"http://127.0.0.1:3001/list",
// data: {
// page:pageNo
// },
// async:true,
// success: function(data){
// console.log(data);
// if(data.ok){
$("#tabList").empty();
var str = '';
for(var i = 0;i<data.length;i++){
str += "<tr><td>" + (i + 1) + "</td><td>" + data[i].name + "</td><td>" + data[i].time + "</td><td>" + data[i].info + "</td><td onclick='delet(\""+data[i].listNo+"\")'>删除</td></tr>"
}
$("#tabList").append(str);
// }
// }
//});
}
$("#addList").click(function() {
$.ajax({
type:"get",
url:"http://127.0.0.1:3001/addList",
async:true,
success: function(data){
ajaxList();
console.log(data);
}
});
});
function delet(listNo){
$.ajax({
type:"get",
url:"http://127.0.0.1:3001/deletList",
data: {
listNo: listNo
},
async:true,
success: function(data){
if(data.ok){
ajaxList();
console.log(data);
}
}
});
// console.log(i)
}
</script>
</body>
</html>
ajax 分页点击数据缓存的更多相关文章
- ThinkPHP AJAX分页及JS缓存的应用
//AJAX分页详见兄弟连PHP项目视频教程22讲35分钟左右 主要实现是需要将分页中的每个链接都改为AJAX请求 //前端缓存技术:基于javascript传输的数据,只要浏览器没关,都保存在内存中 ...
- [jQuery]jQuery DataTables插件自定义Ajax分页实现
前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...
- MvcPager 概述 MvcPager 分页示例 — 标准Ajax分页 对SEO进行优化的ajax分页 (支持asp.net mvc)
该示例演示如何使用MvcPager最基本的Ajax分页模式. 使用AjaxHelper的Pager扩展方法来实现Ajax分页,使用Ajax分页模式时,必须至少指定MvcAjaxOptions的Upda ...
- MVC - 11（下）jquery.tmpl.js +ajax分页
继续 mvc-11(上).dto:http://www.cnblogs.com/tangge/p/3840060.html jquery.tmpl.js 下载:http://pan.baidu.com ...
- PHP+jQuery 列表分页类 ( 支持 url 分页 / ajax 分页 )
/* ******* 环境:Apache2.2.8 ( 2.2.17 ) + PHP5.2.6 ( 5.3.3 ) + MySQL5.0.51b ( 5.5.8 ) + jQuery-1.8.3.mi ...
- ajax分页效果、分类联动、搜索功能
一.使用smarty+ajax+php实现无刷新分页效果 效果图 <!DOCTYPE html> <html lang="en"> <head> ...
- ThinkPHP 整合Bootstrap Ajax分页
ThinkPHP Ajax分页代码 publicfunction index() { $where=array(); $name = I('name'); if(!empty($name)){ $wh ...
- yii2的分页和ajax分页
要想使用Yii分页类第一步:在控制器层加载分页类 use yii\data\Pagination;第二步: 使用model层查询数据,并用分分页,限制每页的显示条数$data = User::find ...
- [js开源组件开发]ajax分页组件
ajax分页组件 我以平均每一周出一个开源的js组件为目标行动着,虽然每个组件并不是很庞大,它只完成某一个较小部分的工作,但相信,只要有付出,总会得到回报的.这个组件主要完成分页的工作. 这张图里显示 ...
随机推荐
- bzoj1426 (洛谷P4550) 收集邮票——期望
题目:https://www.luogu.org/problemnew/show/P4550 推式子……:https://blog.csdn.net/pygbingshen/article/detai ...
- Linux下安装Redis及搭建主从
Linux下安装Redis 首先在官网下载对应版本的redis包,这里本人使用的是redis-4.0.8.tar.gz. 然后在服务器中存放redis包的路径下执行tar –vxf redis-4 ...
- tar 报错gzip: stdin: not in gzip format（转载）
转自:http://blog.sina.com.cn/s/blog_6f2274fb0100z026.html 今天在linux下 用tar -zxf xxx.tar.bz2 然后就报这个错. gzi ...
- 洛谷P4303 [AHOI2006]基因匹配（树状数组）
传送门 我已经连这种傻逼题都不会了orz 正常的dp是$O(n^2)$的,枚举第一个数组的$j$,然后第二个数组的$k$,如果相等,则$dp[i]=dp[j]+1$,否则$dp[i]=dp[j]$ 然 ...
- Intellij IDEA 快捷键整理（史上最全）
[常规] Ctrl+Shift + Enter,语句完成 “!”,否定完成,输入表达式时按 “!”键 Ctrl+E,最近的文件 Ctrl+Shift+E,最近更改的文件 Shift+Click,可以关 ...
- 51nod 1138 连续整数的和
1138 连续整数的和 基准时间限制:1 秒 空间限制:131072 KB 分值: 10 难度:2级算法题 收藏 关注 给出一个正整数N,将N写为若干个连续数字和的形式(长度 >= 2). ...
- 51nod 1126 求递推序列的第N项
1126 求递推序列的第N项 基准时间限制:1 秒 空间限制:131072 KB 分值: 10 难度:2级算法题 收藏 关注 有一个序列是这样定义的:f(1) = 1, f(2) = 1, f( ...
- 文件输入输出C++操作
基于C++的文件操作 在C++中,有一个stream这个类,所有的I/O都以这个"流"类为基础的,包括我们要认识的文件I/O,stream这个类有两个重要的运算符: 1.插入器(& ...
- Service官方教程(9)绑定服务时的注意事项
Binding to a Service Application components (clients) can bind to a service by calling bindService() ...
- 【转】【开源下载】基于TCP网络通信的即时聊天系统（IM系统）（c#源码）
原文链接 强烈关注,学习!