js实现分页

最新推荐文章于 2023-02-13 09:21:28 发布

乄鎭鈊愛妳

最新推荐文章于 2023-02-13 09:21:28 发布

阅读量483

点赞数 1

本文链接：https://blog.csdn.net/g529739784/article/details/8682928

版权

1.html页面、

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>js_users.html</title>

2.js页面

var upTr =null;//更新的行
window.onload = function() {

var pagesize = 3;//每页显示的记录是数
var recondsize = 0;//总记录数
var countpage = 0;//总页数
var nowpage = 1;
var users = new Array();//存放所有的记录

var start = 0;
var end = 0;

//声明添加用户的信息的Dom对象
var domUserName = $("userName");
var domUserSex = $("userSex");
var domUserRole = $("userRole");

//声明添加到指定元素节点的对象
var domshowUsers = $("showUsers");
//获取按钮对象
var addBtn = $("addUsers");

var domUpdateBtn = $("updateUsers");

domUpdateBtn.onclick = function(){
  if(upTr==null){
   alert("没有要更新的数据");
  }else{
    var tds = upTr.childNodes; //所有的td节点对象
    tds[0].firstChild.nodeValue=domUserName.value;
    tds[1].firstChild.nodeValue=domUserSex.value;
    tds[2].firstChild.nodeValue=domUserRole.value;

  }
}
//为按钮注册事件
addBtn.onclick = function() {
  //创建user对象
  var user = new User(domUserName.value, domUserSex.value,
    domUserRole.value);
  //把user对象存放数组中
  users.push(user);
  recondsize = users.length;
  countpage = recondsize % pagesize == 0 ? recondsize / pagesize : Math
    .ceil(recondsize / pagesize);

  if (users.length <= pagesize && users.length > 0) {
   start = 0;
   end = users.length;
  }else{
   start=users.length-pagesize;
   end=users.length;
  }
  showUser(start, end, recondsize, countpage, users, domshowUsers);

alert("用户添加成功");
};

//获取分页相关的按钮
var firstPage = $("firstPage");
var backPage = $("backPage");
var nextPage = $("nextPage");
var lastPage = $("lastPage");

firstPage.onclick = function() {
  nowpage = 1;//重新赋值
  if (users.length <= pagesize && users.length > 0) {
   start = 0;
   end = users.length;
  } else {
   start = (nowpage - 1) * pagesize;
   end = (nowpage - 1) * pagesize + pagesize;
  }
  showUser(start, end, recondsize, countpage, users, domshowUsers);

}
backPage.onclick = function() {
  nowpage = nowpage - 1;//重新赋值
  if (nowpage <= 1) {
   nowpage = 1;
  }
  if (users.length <= pagesize && users.length > 0) {
   start = (nowpage - 1) * pagesize;
   end = users.length;
  } else {
   start = (nowpage - 1) * pagesize;
   end = (nowpage - 1) * pagesize + pagesize;
  }
  showUser(start, end, recondsize, countpage, users, domshowUsers);

}

nextPage.onclick = function() {
nowpage = nowpage + 1;//重新赋值

  if (nowpage >= countpage) {
   nowpage = countpage;
   start = (nowpage - 1) * pagesize;
   end = recondsize;
  } else {
   start = (nowpage - 1) * pagesize;
   end = (nowpage - 1) * pagesize + pagesize;
  }
  showUser(start, end, recondsize, countpage, users, domshowUsers);

}
lastPage.onclick = function() {
  nowpage = countpage;//重新赋值
  if (users.length <= pagesize && users.length > 0) {
   start = (nowpage - 1) * pagesize;
   end = users.length;
  } else {
   start = (nowpage - 1) * pagesize;
   end = (nowpage - 1) * pagesize + pagesize;
  }
  showUser(start, end, recondsize, countpage, users, domshowUsers);

};

//bug 清空数据
//bug end每页显示结束的位置
};

//创建一个Function函数函数是保存User对象数据的
function User(name, sex, role) {
this.name = name;
this.sex = sex;
this.role = role;
}

function $(id) {
return document.getElementById(id);
}

function showUser(start, end, recondsize, countpage, users, domshowUsers) {

//清空数据
for ( var jj = 0; jj < domshowUsers.childNodes.length;) {
domshowUsers.removeChild(domshowUsers.childNodes[jj]);
}

for ( var i = start; i < end; i++) {
  var user = users[i];
  //创建一行
  var tr = document.createElement("tr");
  //创建列
  var td1 = document.createElement("td");
  //创建文本节点
  var td1TextNode = document.createTextNode(user.name);
  //文本节点添加到td中
  td1.appendChild(td1TextNode);

  //创建列
  var td2 = document.createElement("td");
  //创建文本节点
  var td2TextNode = document.createTextNode(user.sex);
  //文本节点添加到td中
  td2.appendChild(td2TextNode);

  //创建列
  var td3 = document.createElement("td");
  //创建文本节点
  var td3TextNode = document.createTextNode(user.role);
  //文本节点添加到td中
  td3.appendChild(td3TextNode);

  //创建列
  var td4 = document.createElement("td");
  //创建删除按钮
  var delBtn = document.createElement("button");
  //为按钮添加文本节点
  delBtn.appendChild(document.createTextNode("删除"));

  //实现删除操作
  delBtn.onclick = function(){
   domshowUsers.removeChild(this.parentNode.parentNode);
  }


  //创建修改按钮
  var updateBtn = document.createElement("button");
  //为按钮添加文本节点
  updateBtn.appendChild(document.createTextNode("编辑"));


  updateBtn.onclick = function(){
   upTr = this.parentNode.parentNode;

   var tds = upTr.childNodes;

   for(var i=0;i<tds.length;i++){
    var td = tds[i];
    if(td.nodeType==1){
     if(i==0){
      domUserName.value=td.firstChild.nodeValue;
     }else if(i==1){
      domUserSex.value=td.lastChild.nodeValue;
     }else if(i==2){
      domUserRole.value=td.childNodes[0].nodeValue;
     }
    }
   }


  };

  //把按钮添加到对应td中
  td4.appendChild(delBtn);
  td4.appendChild(updateBtn);
  //把列添加到行中
  tr.appendChild(td1);
  tr.appendChild(td2);
  tr.appendChild(td3);
  tr.appendChild(td4);

  //把行添加到tbody中
  domshowUsers.appendChild(tr);


  document.getElementById("msg").innerHTML = "总共：{" + recondsize
    + "}条记录,共{" + countpage + "}页";
}
}