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组件为目标行动着,虽然每个组件并不是很庞大,它只完成某一个较小部分的工作,但相信,只要有付出,总会得到回报的.这个组件主要完成分页的工作. 这张图里显示 ...
随机推荐
- JS获得本月的第一天和最后一天
<script> //本月第一天 function showFirstDay() { var Nowdate=new Date(); var MonthFirstD ...
- idea 设置项目编码
目前我了解的设置idea编码有两种形式(但深层次不太了解) 方式一: 这个方式需要你点击要设置编码单个文件,选择编码.一次只能修改一个文件编码 方式二: 一般工作时使用这个方式,文件编码,选择项目文件 ...
- Linux 常用命令三 touch mkdir
一.touch命令 创建一个文件: wang@wang:~/workpalce/python$ ls wang@wang:~/workpalce/python$ .txt wang@wang:~/wo ...
- Ocelot（十一）- 服务发现
Ocelot允许您指定服务发现提供程序,并使用它来查找Ocelot正在将请求转发给下游服务的主机和端口.目前,这仅在GlobalConfiguration部分中受支持,这意味着所有ReRoute将使用 ...
- C++中的static修饰的变量和函数
原文地址:http://blog.csdn.net/he3913/archive/2008/09/18/2944737.aspxC++里的静态成员函数(不能用const的原因+static在c++中的 ...
- git 文件回滚
场景1:当你改乱了工作区某个文件的内容,想直接丢弃工作区的修改时,用命令git checkout -- file.场景2:当你不但改乱了工作区某个文件的内容,还添加到了暂存区时,想丢弃修改,分两步,第 ...
- django 第一个项目测试
我们安装好Django以后就可以使用Django命令来创建项目了 1.Django 创建第一个项目 安装 Django 之后,您现在应该已经有了可用的管理工具 django-admin.py.我们可以 ...
- 12c pdb expdp use DATA_PUMP_DIR meet ORA-39145
ORA-39002: invalid operation ORA-39070: Unable to open the log file. ORA-39087: directory name DATA_ ...
- 转 SQL*PLUS中的替换变量(& &&)
今天oracle support提供一个脚本,大致如下: PROMPT ROUTING_SEQUENCE_ID = &ROUT_SEQ_ID PROMPT OPERATION_SEQUENCE ...
- D. Winter Is Coming 贪心（好题）
http://codeforces.com/contest/747/problem/D 大概的思路就是找到所有两个负数夹着的线段,优先覆盖最小的长度.使得那时候不用换鞋,是最优的. 但是这里有个坑点, ...