欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

js分页之前端代码实现和请求处理

程序员文章站 2023-02-24 08:06:29
分页之js前端实现和请求处理代码，供大家参考，具体内容如下 index.html

分页之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分页之前端代码实现和请求处理

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇： nodejs中解决异步嵌套循环和循环嵌套异步的问题

下一篇： JS解析url查询参数的简单代码

推荐阅读