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 2726 任务安排
题目大意: 机器上有N个需要处理的任务,它们构成了一个序列把这些任务分成若干批从时刻0开始,这些任务被分批加工,第i个任务单独完成所需的时间是Ti 在每批任务开始前,机器需要启动时间S,而完成这批 ...
bzoj 1127 KUP —— 最大子矩形+答案构造
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1127 首先,把权值 > 2*k 的点作为“坏点”,然后在图中用悬线法找权值最大的子矩形 ...
shell 与空格
shell脚本中,不能随意添加空格,否则出错: 1,=等号两边必须无空格.否则出错.如i =$1和i= $1都是错的.但是在()内部不限制如for ((i= 1;i < 3;i= i+1))是正 ...
Macaca框架
收藏 http://www.cnblogs.com/jinjiangongzuoshi/p/6537795.html
VS2010 AnkhSvn
有时候打开别的项目用的是 TFS等造成 VS本来用的AnkhSvn失效了 .工具---选项----插件选择---
join示例分析
join示例分析 public class TestJoin { public static void main(String[] args) throws InterruptedException ...
Gym 100548A Built with Qinghuai and Ari Factor (水题)
题意:给定 n 个数,问是不是全是3的倍数. 析:略. 代码如下: #pragma comment(linker, "/STACK:1024000000,1024000000") ...
ThinkPHP3.2.3学习笔记4---统计ThinkPHP3.2.3加载的文件
将ThinkPHP3.2.3的入口文件index.php加入一个函数getIncludeFiles,文件内容变成如下所示: <?php // +------------------------- ...
bzoj 1612: [Usaco2008 Jan]Cow Contest奶牛的比赛【Floyd】
floyd传递关系,一个牛能确定排名的条件是能和所有牛确定关系 #include<iostream> #include<cstdio> using namespace std; ...
在gnome3.x中添加eclipse菜单
ubuntu-gnome 16.04采用gnome3,界面和gnome2有较大区别.对于自己手动解压安装,而非用包管理器安装的程序,需要手工建立应用程序的启动快捷方式.例如,对于eclipse程序,采 ...

ajax 分页点击数据缓存

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

随机推荐

热门专题