suchen

Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Erläuterung der Front-End-Code-Implementierung und Anforderungsverarbeitung der JavaScript-Paging-Funktion

Detaillierte Erläuterung der Front-End-Code-Implementierung und Anforderungsverarbeitung der JavaScript-Paging-Funktion

巴扎黑
巴扎黑Original
2017-08-08 11:01:302095Durchsuche

Dieser Artikel stellt hauptsächlich die JS-Frontend-Implementierung und die Anforderungsverarbeitung im Detail vor. Interessierte Freunde können sich auf die JS-Frontend-Implementierung und die Anforderungsverarbeitung beziehen Der Code dient als Referenz. Der spezifische Inhalt lautet wie folgt:

index.html



detail.html
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <link rel="stylesheet" href="css/public.css" charset=&#39;utf-8&#39;>
</head>
<body>
 <p class=&#39;box&#39;>
 <h2>
  <span>编号</span>
  <span>姓名</span>
  <span>性别</span>
  <span>分数</span>
 </h2>
 <ul class=&#39;con&#39; id=&#39;content&#39;>
  <li>
  <span>1</span>
  <span>xxx</span>
  <span>男</span>
  <span>90</span>
  </li>
 </ul>
 <p class=&#39;page&#39; id=&#39;page&#39;>
  <span>FIRST</span>
  <span>PREV</span>
  <ul class=&#39;pageNum&#39; id=&#39;pageNum&#39;>
  <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=&#39;numInp&#39; value=&#39;1&#39;/>
 </p>
 </p>
 <script src=&#39;js/ajax.js&#39;></script>
 <script>
 var pageModule = (function(){
  //获取需要操作的DOM元素
  var content = document.getElementById(&#39;content&#39;),
  page = document.getElementById(&#39;page&#39;),
  pageNum = document.getElementById(&#39;pageNum&#39;),
  numInp = document.getElementById(&#39;numInp&#39;);

  //设定当前也和总页数及本次请求的数据
  var n = 1,total = 0,data = null;
  //实现页面数据绑定及其他数据的绑定
  function bindHTML(){
  //content bind
  var str = &#39;&#39;;
  for(var i = 0;i<data.length;i++){
   var curData = data[i];
   str+=&#39;<li studentId="&#39;+curData["id"]+&#39;">&#39;;
   str+=&#39;<span>&#39;+curData["id"]+&#39;</span>&#39;;
   str+=&#39;<span>&#39;+curData["name"]+&#39;</span>&#39;;
   str+=&#39;<span>&#39;+(curData["sex"]==1 ? "女" : "男")+&#39;</span>&#39;;
   str+=&#39;<span>&#39;+curData["score"]+&#39;</span>&#39;;
   str+=&#39;</li>&#39;;
  }
  content.innerHTML = str;
  //page bind
  str = &#39;&#39;;
  for(i = 1;i<=total;i++){
   if(i===n){
   str+=&#39;<li class="bg">&#39;+i+&#39;</li>&#39;;
   continue;
   }
   str+=&#39;<li>&#39;+i+&#39;</li>&#39;;
  }
  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(/^ +| +$/,&#39;&#39;));
   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(&#39;li&#39;);
  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(&#39;studentId&#39;));
   
   }
  }
  }
  function sendAJAX(){
  ajax({
   url:"/getList?n="+n,
   success:function(jsonData){
   if(jsonData && jsonData.code===0){
    total = jsonData["total"];
    data = jsonData[&#39;data&#39;];
    bindHTML();
    bindLink();
   }
   }
  })
  }
  //模块入口
  function init(){
  sendAJAX();
  bindEvent();
  }

  return {
  init:init
  }
 })()

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


Endgültiges Rendering: 
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <link rel="stylesheet" href="css/public.css" charset=&#39;utf-8&#39;>
</head>
<body>
 <ul class=&#39;box2&#39; id=&#39;box2&#39;>
 <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=&#39;js/ajax.js&#39;></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[&#39;hash&#39;] = reg.exec(this)[1];
  // }
  return obj;
 }
 var detailModuel = (function(){
  var data = null,urlId = window.location.href.queryURLParameter().id,oBox = document.getElementById(&#39;box2&#39;);
  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>

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Front-End-Code-Implementierung und Anforderungsverarbeitung der JavaScript-Paging-Funktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erläuterung der JavaScript-VariablenförderungNächster Artikel：Detaillierte Erläuterung der JavaScript-Variablenförderung

In Verbindung stehende Artikel

Mehr sehen