js分页之前端代码实现和请求处理分页之前端代码实现和请求处理
主要为大家详细介绍了js分页之前端代码实现和请求处理，具有一定的参考价值，感兴趣的小伙伴们可以参考一
下
分页之js前端实现和请求处理代码，供大家参考，具体内容如下
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/public.css" charset='utf-8'>
</head>
<body>
<div class='box'>
<h2>
<span>编号</span>
<span>姓名</span>
<span>性别</span>
<span>分数</span>
</h2>
<ul class='con' id='content'>
<li>
<span>1</span>
<span>xxx</span>
<span>男</span>
<span>90</span>
</li>
</ul>
<div class='page' id='page'>
<span>FIRST</span>
<span>PREV</span>
<ul class='pageNum' id='pageNum'>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<span>NEXT</span>
<span>LAST</span>
<input type="text" id='numInp' value='1'/>
</div>
</div>
<script src='js/ajax.js'></script>
<script>
var pageModule = (function(){
//获取需要操作的DOM元素
var content = document.getElementById('content'),
page = document.getElementById('page'),
pageNum = document.getElementById('pageNum'),
numInp = document.getElementById('numInp');
//设定当前也和总页数及本次请求的数据
var n = 1,total = 0,data = null;
//实现页面数据绑定及其他数据的绑定
function bindHTML(){
//content bind
var str = '';
for(var i = 0;i<data.length;i++){
var curData = data[i];
str+='<li studentId="'+curData["id"]+'">';
str+='<span>'+curData["id"]+'</span>';
str+='<span>'+curData["name"]+'</span>';
str+='<span>'+(curData["sex"]==1 ? "女" : "男")+'</span>';
str+='<span>'+curData["score"]+'</span>';
str+='</li>';
}
content.innerHTML = str;
//page bind
str = '';
for(i = 1;i<=total;i++){
if(i===n){
str+='<li class="bg">'+i+'</li>';
continue;
下载后可阅读完整内容，剩余3页未读，立即下载
weixin_38662367
- 粉丝: 4
- 资源: 912
我的内容管理
展开
最新资源
- Flex垃圾回收与内存管理：防止内存泄露
- Python编程规范与最佳实践
- EJB3入门：实战教程与核心概念详解
- Python指南v2.6简体中文版——入门教程
- ANSYS单元类型详解：从Link1到Link11
- 深度解析C语言特性与实践应用
- Gentoo Linux安装与使用全面指南
- 牛津词典txt版：信息技术领域的便捷电子书
- VC++基础教程：从入门到精通
- CTO与程序员职业规划：能力提升与路径指南
- Google开放手机联盟与Android开发教程
- 探索Android触屏界面开发：从入门到设计原则
- Ajax实战：从理论到实践
- 探索Android应用开发：从入门到精通
- LM317T稳压管详解：1.5A可调输出，过载保护
- C语言实现SOCKET文件传输简单教程
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
