ajax 分页点击数据缓存

最新推荐文章于 2021-08-05 13:28:47 发布

weixin_30794851

最新推荐文章于 2021-08-05 13:28:47 发布

阅读量81

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/whlBooK/p/11082585.html

版权

<!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 οnclick='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 οnclick='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>

转载于:https://www.cnblogs.com/whlBooK/p/11082585.html

weixin_30794851

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax 分页点击数据缓存

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> ul,li{ list-style: none; } </sty...
复制链接

扫一扫