Ajax+Node分页
思路：
ajax分页：
1、服务器server.js,写布局;
2、写接口文档(不管客户端，只写服务器端接口)
3、写客户端，绑定数据，分页，优化点击过了，就不再请求；
4、给每个li绑定点击事件，跳转详情页面；自定义属性传参
5、cookie请求过的直接找缓存；
下面直接上代码index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link type="text/css" rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="table">
<h2 class="head">
<span>学号</span>
<span>姓名</span>
<span>性别</span>
<span>分数</span>
</h2>
<ul class="list" id="pageList">
<!--<li>
<span>001</span>
<span>张三</span>
<span>女</span>
<span>80</span>
</li>
<li>
<span>002</span>
<span>李四</span>
<span>男</span>
<span>80</span>
</li>-->
</ul>
<div class="page" id="page">
<div class="first">首页</div>
<div class="prev">上一页</div>
<ul id="pageTip">
<!--<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>-->
</ul>
<div class="next">下一页</div>
<div class="last">末页</div>
<input id="userNum" type="number" step="1" min="1" max="8">
</div>
</div>
<script type="text/javascript">
//解析数据
function ajax(url, callback) {
var xhr = new XMLHttpRequest;
url.indexOf("?") > -1 ? url += "&_=" + Math.random() : url += "?_=" + Math.random();
xhr.open("get", url, true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && /^2\d{2}$/.test(xhr.status)) {
callback && callback(JSON.parse(xhr.responseText));
}
};
xhr.send(null);
} //绑定数据
var pageNum = 1, pageCount = 10, total = 0; var pageList = document.getElementById("pageList"), pageTip = document.getElementById("pageTip"), tiplist = pageTip.getElementsByTagName("li");
var userNum = document.getElementById("userNum"); bindHTML(true);
function bindHTML(isFir) {
ajax('getData?Count=' + pageCount + '&Num=' + pageNum, function (data) {
isFir ? total = data['total'] : null;
data = data['list'];
//console.log(total); //列表区域的数据绑定
var str1 = '', str2 = '';
for (var i = 0; i < data.length; i++) {
var curData = data[i];
str1 += "<li>";
str1 += "<span>" + curData["num"] + "</span>";
str1 += "<span>" + curData["name"] + "</span>";
str1 += "<span>" + (curData["sex"] == 1 ? "女" : "男") + "</span>";
str1 += "<span>" + curData["score"] + "</span>";
str1 += "</li>";
}
pageList.innerHTML = str1; if (isFir) {
//给每个分页的li绑定点击背景改变
for (var i = 1; i <= total; i++) {
if (i === 1) {
str2 += "<li class='bg'>" + i + "</li>";
continue;
}
str2 += "<li>" + i + "</li>";
}
pageTip.innerHTML = str2;
} }); //->让当前对应页码有选中的样式
for (var i = 0; i < tiplist.length; i++) {
tiplist[i].className = (i + 1) == pageNum ? "bg" : null;
} userNum.value = pageNum;
} //采用事件委托实现数据切换
document.getElementById("page").onclick = function (e) {
e = e || window.event;
var tar = e.target || e.srcElement;
//点击的是li
if (tar.tagName.toUpperCase() === "LI") {
if (parseFloat(tar.innerHTML) === pageNum) {
return;
}
pageNum = parseFloat(tar.innerHTML);
bindHTML();
return;
} //点击的是div
if (tar.tagName.toUpperCase() === "DIV") {
var inn = tar.className;
if (inn === "first") {
if (pageNum === 1) {
return;
}
pageNum = 1;
} else if (inn === "last") {
if (pageNum === total) {
return;
}
pageNum = total;
} else if (inn === "prev") {
if (pageNum > 1) {
pageNum--;
}
} else if (inn === "next") {
if (pageNum < total) {
pageNum++;
}
} bindHTML();
}
}; //处理文本框
userNum.onkeyup = function (e) {
//console.log(e.keyCode);
if (e.keyCode === 13) {
var val = parseFloat(userNum.value);
if (val === pageNum) {
return;
}
if (val < 1) {
userNum.value = 1;
pageNum = 1;
} else if (val > total) {
userNum.value = total;
pageNum = total;
} else {
pageNum = val;
}
bindHTML();
}
}; </script>
</body>
</html>
接下来是样式：css/index.css
@charset "utf-8";
* {
margin: 0;
padding: 0;
font-family: "\5FAE\8F6F\96C5\9ED1", Helvetica, sans-serif;
-webkit-user-select: none;
} ul li {
list-style: none;
} .table {
width: 900px;
margin: 20px auto;
padding: 10px;
border: 1px solid #ccc;
box-shadow: 3px 3px 10px 0 pink;
overflow: hidden;
} .table h2 {
height: 40px;
line-height: 40px;
background: lightblue;
} .head span {
float: left;
width: 25%;
height: 100%;
text-align: center;
font-size: 18px;
} .list {
height: 300px;
} .list li {
height: 10%;
line-height: 30px;
}
.list li:nth-child(even){
background: #e1e1e1;
}
.list li:hover{
background: palegoldenrod;
}
.list li:active{
background: greenyellow;
} .list span {
float: left;
width: 25%;
height: 100%;
text-align: center;
cursor: pointer;
} .page {
margin-top: 20px;
float: right;
overflow: hidden;
} .page div {
width: 50px;
} .page ul {
float: left;
} .page div, .page li, .page input {
margin-left: 5px;
height: 18px;
line-height: 18px;
float: left;
border: 1px solid #ccc;
text-align: center;
font-size: 12px;
cursor: pointer;
} .page ul li {
float: left;
width: 20px;
}
.page ul li.bg{
background: cornflowerblue;
}
json文件夹里面包含一个创建data.json数据的js和data.json:
create.js：
/**
* Created by Administrator on 2016/5/17.
*/
var nameAry = ["赵一", "钱二", "孙三", "李四", "周五", "吴六", "郑七", "王八", "冯九", "陈十", "楚一", "魏二", "蒋三", "沈四", "韩五", "杨六"];
function getRandom(n, m) {
return Math.round(Math.random() * (m - n) + n);
} var ary = [];
for (var i = 1; i <= 78; i++) {
var obj = {};
obj.num = (i >= 1 & i <= 9) ? "00" + i : ((i >= 10 & i <= 99) ? "0" + i : i);
obj.name = nameAry[getRandom(0, 15)];
obj.sex = getRandom(0, 1);
obj.score = getRandom(50, 100);
ary.push(obj);
}
console.log (JSON.stringify(ary));
data.json:
[
{
"num": "001",
"name": "楚一",
"sex": 1,
"score": 79
},
{
"num": "002",
"name": "王八",
"sex": 1,
"score": 96
},
{
"num": "003",
"name": "郑七",
"sex": 1,
"score": 56
},
{
"num": "004",
"name": "韩五",
"sex": 0,
"score": 89
},
{
"num": "005",
"name": "冯九",
"sex": 1,
"score": 56
},
{
"num": "006",
"name": "周五",
"sex": 1,
"score": 65
},
{
"num": "007",
"name": "陈十",
"sex": 1,
"score": 74
},
{
"num": "008",
"name": "郑七",
"sex": 1,
"score": 73
},
{
"num": "009",
"name": "吴六",
"sex": 0,
"score": 94
},
{
"num": "010",
"name": "吴六",
"sex": 0,
"score": 61
},
{
"num": "011",
"name": "王八",
"sex": 1,
"score": 77
},
{
"num": "012",
"name": "沈四",
"sex": 0,
"score": 50
},
{
"num": "013",
"name": "周五",
"sex": 0,
"score": 78
},
{
"num": "014",
"name": "吴六",
"sex": 0,
"score": 84
},
{
"num": "015",
"name": "吴六",
"sex": 0,
"score": 70
},
{
"num": "016",
"name": "韩五",
"sex": 0,
"score": 60
},
{
"num": "017",
"name": "吴六",
"sex": 0,
"score": 90
},
{
"num": "018",
"name": "冯九",
"sex": 1,
"score": 74
},
{
"num": "019",
"name": "周五",
"sex": 0,
"score": 62
},
{
"num": "020",
"name": "郑七",
"sex": 0,
"score": 67
},
{
"num": "021",
"name": "沈四",
"sex": 1,
"score": 74
},
{
"num": "022",
"name": "赵一",
"sex": 0,
"score": 58
},
{
"num": "023",
"name": "冯九",
"sex": 0,
"score": 55
},
{
"num": "024",
"name": "魏二",
"sex": 1,
"score": 87
},
{
"num": "025",
"name": "陈十",
"sex": 1,
"score": 73
},
{
"num": "026",
"name": "李四",
"sex": 0,
"score": 59
},
{
"num": "027",
"name": "王八",
"sex": 1,
"score": 54
},
{
"num": "028",
"name": "魏二",
"sex": 0,
"score": 59
},
{
"num": "029",
"name": "郑七",
"sex": 0,
"score": 84
},
{
"num": "030",
"name": "魏二",
"sex": 0,
"score": 80
},
{
"num": "031",
"name": "韩五",
"sex": 0,
"score": 73
},
{
"num": "032",
"name": "王八",
"sex": 0,
"score": 67
},
{
"num": "033",
"name": "魏二",
"sex": 1,
"score": 76
},
{
"num": "034",
"name": "吴六",
"sex": 0,
"score": 80
},
{
"num": "035",
"name": "王八",
"sex": 0,
"score": 100
},
{
"num": "036",
"name": "吴六",
"sex": 1,
"score": 65
},
{
"num": "037",
"name": "韩五",
"sex": 1,
"score": 53
},
{
"num": "038",
"name": "陈十",
"sex": 0,
"score": 93
},
{
"num": "039",
"name": "魏二",
"sex": 1,
"score": 56
},
{
"num": "040",
"name": "王八",
"sex": 0,
"score": 92
},
{
"num": "041",
"name": "沈四",
"sex": 1,
"score": 69
},
{
"num": "042",
"name": "沈四",
"sex": 0,
"score": 83
},
{
"num": "043",
"name": "吴六",
"sex": 1,
"score": 95
},
{
"num": "044",
"name": "楚一",
"sex": 0,
"score": 97
},
{
"num": "045",
"name": "郑七",
"sex": 0,
"score": 97
},
{
"num": "046",
"name": "王八",
"sex": 1,
"score": 51
},
{
"num": "047",
"name": "王八",
"sex": 0,
"score": 82
},
{
"num": "048",
"name": "冯九",
"sex": 1,
"score": 78
},
{
"num": "049",
"name": "郑七",
"sex": 1,
"score": 81
},
{
"num": "050",
"name": "孙三",
"sex": 1,
"score": 53
},
{
"num": "051",
"name": "孙三",
"sex": 1,
"score": 87
},
{
"num": "052",
"name": "沈四",
"sex": 1,
"score": 65
},
{
"num": "053",
"name": "魏二",
"sex": 0,
"score": 99
},
{
"num": "054",
"name": "冯九",
"sex": 0,
"score": 98
},
{
"num": "055",
"name": "周五",
"sex": 1,
"score": 58
},
{
"num": "056",
"name": "钱二",
"sex": 0,
"score": 76
},
{
"num": "057",
"name": "陈十",
"sex": 0,
"score": 57
},
{
"num": "058",
"name": "魏二",
"sex": 1,
"score": 100
},
{
"num": "059",
"name": "杨六",
"sex": 0,
"score": 96
},
{
"num": "060",
"name": "周五",
"sex": 1,
"score": 67
},
{
"num": "061",
"name": "蒋三",
"sex": 0,
"score": 74
},
{
"num": "062",
"name": "赵一",
"sex": 1,
"score": 59
},
{
"num": "063",
"name": "杨六",
"sex": 1,
"score": 72
},
{
"num": "064",
"name": "陈十",
"sex": 1,
"score": 87
},
{
"num": "065",
"name": "楚一",
"sex": 0,
"score": 77
},
{
"num": "066",
"name": "蒋三",
"sex": 0,
"score": 91
},
{
"num": "067",
"name": "杨六",
"sex": 0,
"score": 81
},
{
"num": "068",
"name": "冯九",
"sex": 1,
"score": 91
},
{
"num": "069",
"name": "吴六",
"sex": 0,
"score": 98
},
{
"num": "070",
"name": "杨六",
"sex": 1,
"score": 65
},
{
"num": "071",
"name": "王八",
"sex": 1,
"score": 76
},
{
"num": "072",
"name": "周五",
"sex": 1,
"score": 69
},
{
"num": "073",
"name": "魏二",
"sex": 1,
"score": 98
},
{
"num": "074",
"name": "韩五",
"sex": 1,
"score": 58
},
{
"num": "075",
"name": "钱二",
"sex": 0,
"score": 62
},
{
"num": "076",
"name": "钱二",
"sex": 0,
"score": 87
},
{
"num": "077",
"name": "赵一",
"sex": 0,
"score": 58
},
{
"num": "078",
"name": "冯九",
"sex": 1,
"score": 64
}
]
最后这个是server.js服务器：
/**
* Created by Administrator on 2016/5/17.
*/
var http = require("http");
var url = require("url");
var fs = require("fs"); var server = http.createServer(function (request, response) {
var urlObj = url.parse(request.url, true);
var pathname = urlObj.pathname;
var query = urlObj.query; var reg = /\.(HTML|CSS|JS)/i;
if (reg.test(pathname)) {
var suffix = reg.exec(pathname)[1].toUpperCase();
var conType = suffix == 'HTML' ? 'text/html' : (suffix === 'CSS' ? 'text/css' : 'text/javascript');
var fileText = fs.readFileSync('.' + pathname);
response.writeHead(200, {'content-type': conType});
response.end(fileText);
return;
} //写API接口：
if (pathname === '/getData') {
var Count = query.pageCount;
//console.log(pageCount);
var page = query.page;
var data = fs.readFileSync('./json/data.json', 'utf8');
data = JSON.parse(data);
var total = Math.ceil(data.length / query.Count);
var ary = [];
for (var i = (query.Num - 1) * query.Count; i <= (query.Num * query.Count) - 1; i++) {
//console.log(query);
var cur = data[i];
if (i > data.length-1) {
break;
}
ary.push(cur);
//console.log(cur);
}
response.writeHead(200, {'content-type': 'application/json; charset=utf8'});
response.end(JSON.stringify({'total': total, 'list': ary}));
} }); server.listen(8888, function () {
console.log('8888端口监听成功');
});
服务器里面的端口号是8888，记得路径是localhost:8888/index.html
Ajax+Node分页的更多相关文章
- Ajax做分页
Ajax做分页 用这种ajax做分页的方法比较简单,把代码直接复制就可以,然后根据实际更改一下里面的参数. .设置分页显示显示的样式,显示效果如下. 复制代码 <style type=" ...
- Yii 框架ajax搜索分页
要想实现ajax搜索分页 其实很简单 第一步:在 Yii 框架自带的搜索和分页正常运行的情况下,在视图层
- 利用Linq + Jquery + Ajax 异步分页的实现
在Web显示的时候我们经常会遇到分页显示,而网上的分页方法甚多,但都太过于消耗带宽,所以我想到了用Ajax来分页,利用返回的Json来处理返回的数据, 大大简化了带宽的压力. 先说下思路,无非就是异步 ...
- 5.Hibernate实现全套增删改查和ajax异步分页
1.1 创建如下oracle数据库脚本 drop sequence seq_stu; create sequence SEQ_STU minvalue maxvalue start increment ...
- PHP中使用jQuery+Ajax实现分页查询多功能操作
1.首先做主页面Ajax_pag.php 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UT ...
- 2018.2.28 PHP中使用jQuery+Ajax实现分页查询多功能如何操作
PHP中使用jQuery+Ajax实现分页查询多功能如何操作 1.首先做主页Ajax_pag.php 代码如下 <!DOCTYPE html> <html> <head& ...
- js ajax php分页组件
github https://github.com/lihefen/pageList html页面 <!DOCTYPE html><html><head>< ...
- PHP+JQUEY+AJAX实现分页
HTML <div id="list"> <ul></ul> </div> <div id="pagec ...
- PHP+JQUEY+AJAX实现分页【转】
HTML CSS #list{width:680px; height:530px; margin:2px auto; position:relative} #list ul li{float:left ...
随机推荐
- 开发Nginx模块
开发Nginx模块 前面的哪些话 关于Nginx模块开发的博客资料,网上很多,很多.但是,每篇博客都只提要点,无法"step by step"照着做,对于初次接触Nginx开发的同 ...
- iOS-MVVM--备用
我会修改一个关键架构,并将其带入我从那时起就在开发的各种应用,即使用一种叫做 Model-View-ViewModel 的架构替换 Model-View-Controller. 所以,MVVM 到底是 ...
- 用C++进行函数式编程
http://www.programmer.com.cn/12717/ 文 / John Carmack 译 / 王江平 <Quake>作者Carmack认为追求函数式的程序设计有着实 ...
- Unity问答——怎么知道屏幕中目前有多少个敌人？
这篇博客源自我在泰课在线的回答.链接:http://www.taikr.com/group/1/thread/92 问:怎么知道屏幕中目前有多少个敌人? 答: 思路一:仅适用于2D游戏,因为这个方法没 ...
- Oracle 多版本控制
SESSION 1: SQL> create table t 2 as 3 select * from all_users; Table created. SQL> variable x ...
- CGI编程完全手册
一．基本原理 CGI:通用网关接口(Common Gateway Interface)是一个Web服务器主机提供信息服务的标准接口.通过CGI接口,Web服务器就能够获取客户端提交的信息,转交给服务器 ...
- wait和waitpid的使用和区别
昨天看到一则新闻,讲的是一个游戏开发大拿猝死去世的新闻,公司发了讣告,打算接下去给他爸爸妈妈每个月10000的赡养费,很是感慨,本来中国的游戏业和国外就差距大,天妒英才啊.真心想对那些游戏公司的领导说 ...
- 常用Application Server
综述,我们这里列出的application server应用服务器,主要是对servlet和JSP提供了良好的支持; [resin] [Tomcat] [jboss] community.jboss. ...
- selenium grid 测试资料
像风一样自由的4篇博客: http://blog.csdn.net/five3/article/details/9671287 http://blog.csdn.net/five3/article/d ...
- 调查：Java程序员最亲睐的Web框架
这是关于Java的第二个调查,第一个调查请点这里查看. 这一次,我们要讨论的是web框架. 只有少数几种语言像Java一样提供了各种各样的web框架,上面的统计图就是一个证据.下面是其他开发者所使用w ...