js分页之前端代码实现和请求处理


Posted in Javascript onAugust 04, 2017

分页之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;
   }
   str+='<li>'+i+'</li>';
  }
  pageNum.innerHTML = str;

  //numInp bind
  numInp.value = n;

  }
  //事件委托实现分页区域的按钮操作 给文本框enter键绑定操作
  function bindEvent(){
  page.onclick = function(e){
   e = e || window.event;
   var tar = e.target || e.srcElement
   tarTag = tar.tagName.toUpperCase(),
   tarInn = tar.innerHTML;
   if(tarTag==="SPAN"){
   if(tarInn==="FIRST"){
    if(n===1){
    return;
    }
    n = 1;
   }
   if(tarInn==="LAST"){
    if(n === total){
    return;
    }
    n = total;
   }
   if(tarInn==="PREV"){
    if(n === 1){
    return;
    }
    n--;
   }
   if(tarInn==="NEXT"){
    if(n === total){
    return;
    }
    n++;
   }
   }

   if(tarTag==="LI"){
   if(n === parseFloat(tarInn)){
    return;
   }
   n = parseFloat(tarInn);
   }

   //input
   if(tarTag==="INPUT"){
   return;
   }

   //重新发送请求
   sendAJAX()

  }

  numInp.onkeyup = function(e){
   e = e || window.event;
   if(e.keyCode===13){//enter键
   var val = parseFloat(this.value.replace(/^ +| +$/,''));
   if(isNaN(val)){
    this.value = n;
    return;
   }
   val = Math.round(val)
   if(val<1){
    n = 1;
   }else if(val>total){
    n = total;
   }else{
    n = val;
   }
   sendAJAX();

   }
  }
  }
  //content区域的LI跳转事件
  function bindLink(){
  var oLis = content.getElementsByTagName('li');
  for(var i = 0;i<oLis.length;i++){
   oLis[i].onclick = function(){
   // window.location.href = "detail.html";
   //在跳转的时候还需要把当前点击学员得ID传到详情页面
   window.open("detail.html?id="+this.getAttribute('studentId'));
   
   }
  }
  }
  function sendAJAX(){
  ajax({
   url:"/getList?n="+n,
   success:function(jsonData){
   if(jsonData && jsonData.code===0){
    total = jsonData["total"];
    data = jsonData['data'];
    bindHTML();
    bindLink();
   }
   }
  })
  }
  //模块入口
  function init(){
  sendAJAX();
  bindEvent();
  }

  return {
  init:init
  }
 })()

 pageModule.init();
 </script>
</body>
</html>

detail.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>
 <ul class='box2' id='box2'>
 <li>
  <span>编号</span>
  <span>4</span>
 </li>
 <li>
  <span>姓名</span>
  <span>xxx</span>
 </li>
 <li>
  <span>性别</span>
  <span>男</span>
 </li>
 <li>
  <span>分数</span>
  <span>99</span>
 </li>
 </ul>
 <script src='js/ajax.js'></script>
 <script>
 String.prototype.queryURLParameter = function(){
  //PARAMETER
  var obj = {},
  reg = /([^?=&#]+)=([^?=&#]+)/g;
  this.replace(reg,function(){
  var key = arguments[1],
   value = arguments[2];
  obj[key] = value;
  });
  //->HASH
  // reg = /#([^?=&#]+)/;
  // if (reg.test(this)) {
  // obj['hash'] = reg.exec(this)[1];
  // }
  return obj;
 }
 var detailModuel = (function(){
  var data = null,urlId = window.location.href.queryURLParameter().id,oBox = document.getElementById('box2');
  function bindHTML(){
  var str = "";
  str+="<li><span>编号</span><span>"+data["id"]+"</span></li>";
  str+="<li><span>编号</span><span>"+data["name"]+"</span></li>";
  str+="<li><span>编号</span><span>"+(data["sex"]==1 ? "男" : "女")+"</span></li>";
  str+="<li><span>编号</span><span>"+data["score"]+"</span></li>";
  oBox.innerHTML = str;
  }

  function init(){
  ajax({
   url:"/getInfo?id="+urlId,
   success:function(jsonData){
   if(jsonData && jsonData.code===0){
    data = jsonData["data"];
    bindHTML();
   }
   }
  })
  }

  return {
  init:init
  }
 })()
 detailModuel.init();
 </script>
</body>
</html>

最终效果图:

js分页之前端代码实现和请求处理

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery里选择超链接的实现代码
May 22 Javascript
30个精美的jQuery幻灯片效果插件和教程
Aug 23 Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
Nov 28 Javascript
JQuery以JSON方式提交数据到服务端示例代码
May 05 Javascript
把Node.js程序加入服务实现随机启动
Jun 25 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
Nov 24 Javascript
js实现微信分享代码
Oct 11 Javascript
JS组件Bootstrap实现图片轮播效果
May 16 Javascript
微信小程序 欢迎界面开发的实例详解
Nov 30 Javascript
移动端使用localResizeIMG4压缩图片
Apr 22 Javascript
vue使用Proxy实现双向绑定的方法示例
Mar 20 Javascript
Vue的双向数据绑定实现原理解析
Feb 17 Javascript
微信小程序 rich-text的使用方法
Aug 04 #Javascript
Easyui和zTree两种方式分别实现树形下拉框
Aug 04 #Javascript
JS中使用media实现响应式布局
Aug 04 #Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
Aug 04 #Javascript
node中Express 动态设置端口的方法
Aug 04 #Javascript
微信小程序 同步请求授权的详解
Aug 04 #Javascript
微信小程序 转发功能的实现
Aug 04 #Javascript
You might like
迁移PHP版本到PHP7
2015/02/06 PHP
高性能Javascript笔记 数据的存储与访问性能优化
2012/08/02 Javascript
jQuery(js)获取文字宽度(显示长度)示例代码
2013/12/31 Javascript
JS循环遍历JSON数据的方法
2014/07/08 Javascript
IE8中动态创建script标签onload无效的解决方法
2014/12/22 Javascript
JS模仿手机端九宫格登录功能实现代码
2016/04/28 Javascript
jquery动态遍历Json对象的属性和值的方法
2016/07/27 Javascript
最丑的时钟效果!js canvas时钟制作方法
2016/08/15 Javascript
微信小程序 WebSocket详解及应用
2017/01/21 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
2017/03/08 Javascript
微信小程序的日期选择器的实例详解
2017/09/29 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
2017/12/15 Javascript
JS实现的视频弹幕效果示例
2018/08/17 Javascript
js中的闭包实例展示
2018/11/01 Javascript
解决一个微信号同时支持多个环境网页授权问题
2019/08/07 Javascript
JavaScript进阶(一)变量声明提升实例分析
2020/05/09 Javascript
微信小程序文章列表功能完整实例
2020/06/03 Javascript
[50:15]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
Python中字符编码简介、方法及使用建议
2015/01/08 Python
17个Python小技巧分享
2015/01/23 Python
低版本中Python除法运算小技巧
2015/04/05 Python
Django中URL视图函数的一些高级概念介绍
2015/07/20 Python
python 爬取微信文章
2016/01/30 Python
Windows下Python的Django框架环境部署及应用编写入门
2016/03/10 Python
利用python求解物理学中的双弹簧质能系统详解
2017/09/29 Python
Python+OpenCV图像处理——图像二值化的实现
2020/10/24 Python
远程Wi-Fi宠物监控相机:Petcube
2017/04/26 全球购物
印度购买眼镜和太阳镜网站:Coolwinks
2018/09/26 全球购物
Tommy Hilfiger美国官网:美国高端休闲领导品牌
2019/01/14 全球购物
十八大报告观后感
2014/01/28 职场文书
核心价值观演讲稿
2014/05/13 职场文书
高中美术教师事迹材料
2014/08/22 职场文书
党员个人对照检查材料思想汇报
2014/09/16 职场文书
机关班子查摆问题及整改措施
2014/10/28 职场文书
班主任工作总结范文
2015/08/13 职场文书
vue elementUI批量上传文件
2022/04/26 Vue.js