ajax 分页点击数据缓存
2024-08-24 16:36:36
<!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>
最新文章
- 非常简单的XML解析（SAX解析、pull解析）
- 20145215《Java程序设计》第2周学习总结
- 摩托罗拉SE4500 三星 S3C6410 Wince6.0平台软解码调试记录以及驱动相关问题解释
- SqlServer数据库正在还原的解决办法
- java与.net之间xml传递，xml最前面多了个?
- js2word/html2word的简单实现
- Java文件清单列表
- BZOJ_1008_[HNOI2008]_越狱_(简单组合数学+快速幂)
- angular-fullstack test
- javascript 数组 排除null, undefined, 和不存在的元素
- [LeetCode 109] - 将已排序链表转换为二叉搜索树 (Convert Sorted List to Binary Search Tree)
- zoj1013 Great Equipment
- 使用CDN对动态网站内容加速有效果吗
- linux history 命令详解
- java 对象流
- 浏览器输入URL加载的全过程都发生了什么事情，你知道？
- @keyframs实现图片gif效果
- 借网站日记分析~普及一下Pandas基础
- mongoose与express
- 转 cousera computational neuroscience week5 学习笔记（part 1）