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 3809 Gty的二逼妹子序列 —— 莫队+分块
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3809 据说一开始应该想到莫队+树状数组,然而我想的却是莫队+权值线段树... 如果用权值线段 ...
- python创建文件
创建文件: 1. os.mknod(“test.txt”) 创建空文件 2. open(“test.txt”,w) 直接打开一个文件,如果文件不存在则创建文件 import os def mkdir_ ...
- 虚拟机C盘扩容
使用 <分区助手> 下载地址:http://115.com/file/belj8wkm
- Ruby Array类
Array类 更新: 2017/06/03 更新: 2017/08/31 更新sort的详细内容 更新: 2017/09/07 增加each_with_index, each.with_index(o ...
- python 面向对象四 继承和多态
一.继承 class Animal(object): def run(self): print('Animal is running...') class Dog(Animal): def run(s ...
- 【插件开发】—— 5 SWT控件以及布局使用
前文回顾: 1 插件学习篇 2 简单的建立插件工程以及模型文件分析 3 利用扩展点,开发透视图 4 SWT编程须知 经过前几篇的介绍,多少对SWT又有了一些认识,那么这篇继续来看一下一些控件的组合使用 ...
- Survival on the Titanic (泰坦尼克号生存预测)
>> Score 最近用随机森林玩了 Kaggle 的泰坦尼克号项目,顺便记录一下. Kaggle - Titanic: Machine Learning from Disaster On ...
- Java知识点脑图
做服务器开发有十几年了,其中大部分用到的都是Java服务器开发,从JDK1.4到现在的JDK1.8,从基本的Java Application到 J2EE(JBOSS,Glassfish),OSGI,到 ...
- SQL标量函数-日期函数
select day(createtime) from life_unite_product --取时间字段的天值 select month(createtime) from life_uni ...
- Spring的事务传播性与隔离级别以及实现事物回滚
一.事务的四个特性(ACID) 原子性(Atomicity):一个事务中所有对数据库的操作是一个不可分割的操作序列,要么全做,要么全部做. 一致性(Consistency): 数据不会因为事务的执行而 ...