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 相关文章推荐
JavaScript 异步方法队列链实现代码分析
Jun 05 Javascript
js图片自动切换效果处理代码
May 07 Javascript
JavaScript拆分字符串时产生空字符的解决方案
Sep 26 Javascript
jQuery插件expander实现图片翻转特效
May 21 Javascript
javascript图片滑动效果实现
Jan 28 Javascript
基于jquery实现的仿优酷图片轮播特效代码
Jan 13 Javascript
javascript拖拽应用实例
Mar 25 Javascript
JavaScript中的子窗口与父窗口的互相调用问题
Feb 08 Javascript
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
vue利用axios来完成数据的交互
Mar 23 Javascript
JavaScript怎样在删除前添加确认弹出框?
May 27 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
Aug 09 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文件的实现方法
2007/03/19 PHP
php session_start()关于Cannot send session cache limiter - headers already sent错误解决方法
2009/11/27 PHP
PHP列出MySQL中所有数据库的方法
2015/03/12 PHP
JS 有名函数表达式全面解析
2010/03/19 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
2014/06/06 Javascript
Knockout自定义绑定创建方法
2015/12/26 Javascript
javascript实现一个简单的弹出窗
2016/02/22 Javascript
JavaScript中setTimeout的那些事儿
2016/11/14 Javascript
Web前端开发之水印、图片验证码
2016/11/27 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
2017/03/15 Javascript
浅谈箭头函数写法在ReactJs中的使用
2017/08/22 Javascript
vue2实现数据请求显示loading图
2017/11/28 Javascript
vue计算属性和监听器实例解析
2018/05/10 Javascript
JS数组去重常用方法实例小结【4种方法】
2018/05/28 Javascript
详解create-react-app 自定义 eslint 配置
2018/06/07 Javascript
vue.js实现插入数值与表达式的方法分析
2018/07/06 Javascript
nodejs 使用nodejs-websocket模块实现点对点实时通讯
2018/11/28 NodeJs
在Vant的基础上封装下拉日期控件的代码示例
2018/12/05 Javascript
深入了解query和params的使用区别
2019/06/24 Javascript
Vertx基于EventBus发送接受自定义对象
2020/11/16 Javascript
Django日志模块logging的配置详解
2017/02/14 Python
Python利用multiprocessing实现最简单的分布式作业调度系统实例
2017/11/14 Python
Python下载网络文本数据到本地内存的四种实现方法示例
2018/02/05 Python
浅析python3中的os.path.dirname(__file__)的使用
2018/08/30 Python
浅谈Python中(&amp;,|)和(and,or)之间的区别
2019/08/07 Python
详解PyTorch中Tensor的高阶操作
2019/08/18 Python
Python 矩阵转置的几种方法小结
2019/12/02 Python
关于python的缩进规则的知识点详解
2020/06/22 Python
水上运动奥特莱斯:Wasterports Outlet
2018/08/08 全球购物
银行内勤岗位职责
2014/04/09 职场文书
学生保证书范文
2014/04/28 职场文书
工厂车间标语
2014/06/19 职场文书
2015年汽车销售工作总结
2015/04/07 职场文书
2017大学生寒假社会实践心得体会
2016/01/14 职场文书
解决pytorch 损失函数中输入输出不匹配的问题
2021/06/05 Python
MySQL中varchar和char类型的区别
2021/11/17 MySQL