js分頁之前端代碼實現和請求處理

2019-11-19 15:53:54

字體：大中小

來源：轉載

供稿：網友

分頁之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>

最終效果圖：