recherche

Maison  >  Article  >  interface Web  >  Explication détaillée de l'implémentation du code frontal et du traitement des demandes de la fonction de pagination JavaScript

Explication détaillée de l'implémentation du code frontal et du traitement des demandes de la fonction de pagination JavaScript

巴扎黑
巴扎黑original
2017-08-08 11:01:302095parcourir

Cet article présente principalement en détail l'implémentation du code frontal de pagination JS et le traitement des demandes. Il a une certaine valeur de référence. Les amis intéressés peuvent se référer à

Implémentation frontale JS et demande de pagination. le code est pour votre référence. Le contenu spécifique est le suivant

index.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>

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>
 <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>

Rendu final :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée de la promotion des variables JavaScriptArticle suivant：Explication détaillée de la promotion des variables JavaScript

Articles Liés

Voir plus