ajax tab click data cache

<!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> ID </ th>
				<Th> name </ th>
				<Th> time </ th>
				<Th> information </ th>
				<Th> Edit </ th>
			</tr>
			<tbody id="tabList">
				<!--<tr>
					<td>1</td>
					<td>summit</td>
					<td>2019-03-22</td>
					<td>gis</td>
					<Td> Delete </ td>
				</tr>
				<tr>
					<td>1</td>
					<td>summit</td>
					<td>2019-03-22</td>
					<td>gis</td>
					<Td> Delete </ td>
				</tr>-->
			</tbody>
			
		</table>
		<button id="sss1">1</button>
		<button id="sss">2</button>
		<Button id = "addList"> Add Data </ ​​button>
		<script type="text/javascript" src="js/jquery-1.9.1.js" ></script>
		<script type="text/javascript">
			
			var cacel = {}; // save data cache
			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();
							was 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>

  

Guess you like

Origin www.cnblogs.com/whlBooK/p/11082585.html