<!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 分页点击数据缓存的更多相关文章

  1. ThinkPHP AJAX分页及JS缓存的应用

    //AJAX分页详见兄弟连PHP项目视频教程22讲35分钟左右 主要实现是需要将分页中的每个链接都改为AJAX请求 //前端缓存技术:基于javascript传输的数据,只要浏览器没关,都保存在内存中 ...

  2. [jQuery]jQuery DataTables插件自定义Ajax分页实现

    前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...

  3. MvcPager 概述 MvcPager 分页示例 — 标准Ajax分页 对SEO进行优化的ajax分页 (支持asp.net mvc)

    该示例演示如何使用MvcPager最基本的Ajax分页模式. 使用AjaxHelper的Pager扩展方法来实现Ajax分页,使用Ajax分页模式时,必须至少指定MvcAjaxOptions的Upda ...

  4. MVC - 11（下）jquery.tmpl.js +ajax分页

    继续 mvc-11(上).dto:http://www.cnblogs.com/tangge/p/3840060.html jquery.tmpl.js 下载:http://pan.baidu.com ...

  5. 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 ...

  6. ajax分页效果、分类联动、搜索功能

    一.使用smarty+ajax+php实现无刷新分页效果 效果图 <!DOCTYPE html> <html lang="en"> <head> ...

  7. ThinkPHP 整合Bootstrap Ajax分页

    ThinkPHP Ajax分页代码 publicfunction index() { $where=array(); $name = I('name'); if(!empty($name)){ $wh ...

  8. yii2的分页和ajax分页

    要想使用Yii分页类第一步:在控制器层加载分页类 use yii\data\Pagination;第二步: 使用model层查询数据,并用分分页,限制每页的显示条数$data = User::find ...

  9. [js开源组件开发]ajax分页组件

    ajax分页组件 我以平均每一周出一个开源的js组件为目标行动着,虽然每个组件并不是很庞大,它只完成某一个较小部分的工作,但相信,只要有付出,总会得到回报的.这个组件主要完成分页的工作. 这张图里显示 ...

随机推荐

  1. （unix domain socket）使用udp发送>=128K的消息会报ENOBUFS的错误

    一个困扰我两天的问题, Google和Baidu没有找到解决方法! 此文为记录这个问题,并给出原因和解决方法. 1.Unix domain socket简介 unix域协议并不是一个实际的协议族,而是 ...

  2. bzoj2038 小Z的袜子(hose)——莫队算法

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2038 就是莫队算法: 先写了个分块,惨WA: #include<iostream> ...

  3. VS2013Xml文件节点导航插件开发

    一.功能描述 该插件的功能跟代码文件的导航功能类似,只是下拉框里的内容是元素的某一属性值,如图-1所示 图-1 当点击下拉框的选项后,会自动定位到该内容在xml文件的位置.此功能适用于xml文件内容较 ...

  4. bzoj3160

    fft+manacher fft都快忘了... 其实我们发现,这个问题是可以用fft做的,因为是回文子序列,所以我们直接自己和自己求卷积,然后扫描每个位置,注意是每个位置,因为包括奇数长度和偶数长度, ...

  5. MD5 密码加密算法 系统等待

    MD5 密码加密算法 public static String md(String md, String pass) { MessageDigest m; String passok = " ...

  6. 【转载】OAuth的机制原理讲解及开发流程

    1.OAuth的简述 OAuth(Open Authorization,开放授权)是为用户资源的授权定义了一个安全.开放及简单的标准,第三方无需知道用户的账号及密码,就可获取到用户的授权信息,并且这是 ...

  7. linux下解压tgz文件(转载)

    转自:http://www.blogjava.net/chenlb/archive/2008/09/03/226654.html .tgz 解压:    tar zxvf myfile.tgz

  8. （矩阵快速幂）51NOD 1242斐波那契数列的第N项

    斐波那契数列的定义如下:   F(0) = 0 F(1) = 1 F(n) = F(n - 1) + F(n - 2) (n >= 2)   (1, 1, 2, 3, 5, 8, 13, 21, ...

  9. vs2013问题解决办法—>fatal error LNK1168 如何避免

    问题:在使用visial studio 2013运行成功程序,但当修改其中的一段后,即语法,执行后报错  出现error:fatal error LNK1168:无法打开……\xxx.exe进行写入. ...

  10. Qt事件系统之四：定时器事件与随机数

    一.定时器事件和随机数 QTimerEvent类用来描述一个定时器事件.对于一个QObject的子类,只需要使用int QObject::startTimer ( int interval)函数来开启 ...