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

随机推荐

BZOJ_1415_[Noi2005]聪聪和可可_概率DP+bfs
BZOJ_1415_[Noi2005]聪聪和可可_概率DP+bfs Description Input 数据的第1行为两个整数N和E,以空格分隔,分别表示森林中的景点数和连接相邻景点的路的条数. 第2 ...
Gerrit代码Review实战
代码审核(Code Review)是软件研发质量保障机制中非常重要的一环,但在实际项目执行过程中,却因为种种原因被Delay甚至是忽略.在实践中,给大家推荐一款免费.开放源代码的代码审查软件Gerri ...
hdu4352(数位DP + LIS(nlogn))
题目描述: 给定一个区间中,将区间的每一个数看成一个字符串,求这个区间内每个字符串的最大上升子序列等于k的个数. 可以采用nlogn的LIS(用一个C数组记录长度为i的最大上升子序列的结尾最小值), ...
JS 对java返回的json格式的数据处理
var dataObj=eval("("+res+")"); alert(dataObj.billBuy) //res是如下的数据 {"billBuy ...
centos配置nodejs和mysql
我使用的是centos7.2 64位,弄了一大晚上试了各种方法,安装的nodejs就是启动不了服务器.全是IP能ping通,浏览器不能访问.端口都是打开了的.安全组也设置了,就是不行.最后阿里云客服电 ...
E20180228-hm-xa
bounds n. 界限; 界限; 出界; 在(某人允许进入的)界限以外; 出格的; 跳跃( bound的名词复数 ); (球等的) 反跳; indice n. 指数(指指标, 如健康指数的指数); ...
E20170521-ts
redirect vt. 使改寄,更改(信件等)姓名地址; 改变方向,改变线路; 重新寄送; teletype n. 电传打字机,电报交换机,打字电报通讯; descriptor n. 描述符; ...
bzoj 1742: [Usaco2005 nov]Grazing on the Run 边跑边吃草【区间dp】
挺好的区间dp,状态设计很好玩一开始按套路设f[i][j],g[i][j]为吃完(i,j)区间站在i/j的最小腐败值,后来发现这样并不能保证最优实际上是设f[i][j],g[i][j]为从i开始吃 ...
selenium3 + python - js 内嵌滚动处理
一.js内嵌html <!DOCTYPE html><html lang="en"><head> <meta charset=" ...
Luogu P3916 图的遍历【优雅的dfs】【内有待填坑】By cellur925
说明 • 对于60% 的数据, n,m在1e3内 • 对于100% 的数据, n,m在1e5内. 本弱弱上来就是一顿暴搜打,dfs n次,每次更新答案,复杂度为O(n*n),果然TLE,60分抱回家. ...

ajax 分页点击数据缓存

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

随机推荐

热门专题