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组件为目标行动着,虽然每个组件并不是很庞大,它只完成某一个较小部分的工作,但相信,只要有付出,总会得到回报的.这个组件主要完成分页的工作. 这张图里显示 ...

随机推荐

性能-发挥ORACLE分区表
ORACLE分区表发挥性能 http://www.cnblogs.com/zwl715/p/3962837.html 1.1 分区表PARTITION table 在ORACLE里如果遇到特别大的表, ...
BZOJ_3881_[Coci2015]Divljak_AC自动机+dfs序+树状数组
BZOJ_3881_[Coci2015]Divljak_AC自动机+dfs序+树状数组 Description Alice有n个字符串S_1,S_2...S_n,Bob有一个字符串集合T,一开始集合是 ...
配置DTD提示的方法
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE sqlMap PUBLIC "-/ ...
工作日记：C#获取操作系统、MAC地址、登录用户、网卡、物理内存信息
/// <summary> /// 操作系统的登录用户名 /// </summary> /// <returns>系统的登录用户名</returns> ...
Linux 常用命令十一 ps
一.ps命令 Linux中的ps命令是Process Status的缩写. ps命令用来列出系统中当前运行的那些进程.ps命令列出的是当前那些进程的快照,就是执行ps命令的那个时刻的那些进程,如果想要 ...
bzoj3316: JC loves Mkk（单调队列+分数规划）
Description Input 第1行,包含三个整数.n,L,R.第2行n个数,代表a[1..n]. Output 仅1行,表示询问答案.如果答案是整数,就输出整数:否则,输出既约分数“P/Q”来 ...
js 调试方法两种
JS的错误捕获一般有下面两种方式: 1. 异常捕获常用方法是 try/catch/ throw /finally 2. 全局捕获window.onerror 1. try/catch/throw/fi ...
apicloud踩坑集锦
最近在用apicloud开发,这里录入一些踩坑的地方,从头到尾,要多尴尬有多尴尬,新入app开发,记录一些心得,和遇到的坑以及解决办法. 1,apicloud 打包的Android app ,打开fr ...
sigaction函数的功能
sigaction函数的功能是检查或修改与指定信号相关联的处理动作(可同时两种操作). 他是POSIX的信号接口,而signal()是标准C的信号接口(如果程序必须在非POSIX系统上运行,那么就应该 ...
python_pdb断点调试常用命令
Python pdb调试在需要断点调试的地方,加上:import pdb;pdb.set_trace() h:打印当前版本pdb可用的命令,如果需要查询某个命令,可以输入 h [command]l: ...

ajax 分页点击数据缓存

ajax 分页点击数据缓存的更多相关文章

随机推荐

热门专题