<!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. 使用expdp的心得

    第一步:首先使用DBA权限的用户创建directory,我使用system ,可以在服务器本地创建,也可以远程连接sqlplus进行创建,使用的将是服务器上面的路径.要确保创建directory时,操 ...

  2. 小程序-demo：知乎日报

    ylbtech-小程序-demo:知乎日报 1.返回顶部 0.         1.app.js //app.js App({ onLaunch: function () { //调用API从本地缓存 ...

  3. vue 使用过程中自己遇到的bug

    需要安装npm git(windows系统需要安装) npm 是node的包管理工具 npm 国内的网站比较慢,推荐使用cnpm(淘宝的镜像) cnpm(npm) install 创建依赖-----因 ...

  4. bzoj4276

    线段树优化建图+费用流 朴素的做法是每个强盗直接对每个区间的每个点连边,然后跑最大权匹配,这样有5000*5000条边,肯定过不去,那么我们用线段树优化一下,因为线段树能把一个O(n)的区间划分为O( ...

  5. bzoj4390

    树上差分 感觉挺巧妙的... 每次更新就是在u,v上+1,x是lca(u,v),在x和fa[x]上-1,那么每个点的权值就是子树和,正确性yy一下就行了 不过树状数组的常数真是小,改成前缀和才快了20 ...

  6. SpringMVC数据绑定四（自定义的类型转换器）

    1.PropertyEditor 继承PropertyEditorSupport //controller @Controller public class TestController extend ...

  7. (转)IE内存泄露，iframe内存泄露造成的原因和解决方案

    http://my.oschina.net/jsan/blog/11169 http://blog.csdn.net/tianma630/article/details/8502395 jQuery ...

  8. POJ 2259 Team Queue(队列)

    题目原网址:http://poj.org/problem?id=2259 题目中文翻译: Description 队列和优先级队列是大多数计算机科学家已知的数据结构. 然而,Team Queue并不是 ...

  9. flask请求访问数据

    flask请求访问数据 在flask框架中,访问请求数据由全局的request对象来提供,在flask框架中,request对象具有 全局作用域: from flask import request ...

  10. thinkphp3.2 + soap

    服务器配置 扩展libxml2下载地址:http://xmlsoft.org/downloads.html 在windows下的php.ini文件里 找到这一行代码(如没有则自行添加) extensi ...