Home > Article > Web Front-end > Detailed explanation of front-end code implementation and request processing of JavaScript paging function

Detailed explanation of front-end code implementation and request processing of JavaScript paging function

巴扎黑Original: 2017-08-08 11:01:302091browse

This article mainly introduces the js paging front-end code implementation and request processing in detail. It has certain reference value. Interested friends can refer to

js front-end implementation and request of paging. The processing code is for your reference. The specific content is as follows

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>

Final rendering:

The above is the detailed content of Detailed explanation of front-end code implementation and request processing of JavaScript paging function. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of JavaScript variable promotionNext article：Detailed explanation of JavaScript variable promotion

See more

Detailed explanation of front-end code implementation and request processing of JavaScript paging function

Related articles