JS前端分页的具体例子

login.js ------> 登录页面 

                                                         #listData button{     width: 120px;     height: 30px;     background-color: rgb(114, 165, 73);     color: white;     font-size: 14px;     border: 1px solid rgb(114, 165, 73);     border-radius: 5px; } #sortTime button{     width: 200px;     height: 30px;     background-color: rgb(114, 165, 73);     color: white;     font-size: 14px;     border: 1px solid rgb(114, 165, 73);     border-radius: 5px; } #sortTime span {     font-size: 18px; } #sortTime input{     width: 250px;     height: 30px;     border-radius: 20px;     border: 1px solid #c7c4c4; } #page button{     width: 70px;     height: 30px;     background-color: rgb(114, 165, 73);     color: white;     font-size: 14px;     border: 1px solid rgb(114, 165, 73);     border-radius: 5px; } #page input{     width: 100px;     height: 30px;     border-radius: 20px;     border: 1px solid #c7c4c4;     text-align: center; } #page span{     font-size: 16px; } #page span button{     margin: 0 2px; } #showTable table tr th {     background-color:rgb(114, 165, 73);     color: white;     font-weight: bold; } #showTable table tr td{     text-align: center; }             #modLoginWrap {     position: absolute;     margin: 0 auto; } #loginAccount, #loginPassword, #phraseLogin{     width: 250px;     height: 30px;     border-radius: 10px;     border: 1px solid #c7c4c4; } .login-wrap {     width: 100%;     left:0;     top: 0; } .login-wrap .username, .login-wrap #phraseLoginwarp{     margin-bottom:15px; } #loginSubmit {     width: 70px;     height: 30px;     background-color: rgb(114, 165, 73);     color: white;     font-size: 14px;     border: 1px solid rgb(114, 165, 73);     border-radius: 5px;     margin-left: 150px; }        
 
     
  
        
  
      
      
   
账号：       
      
      
   
密码：       
      
      
   验证码                     
      
            
  
  
      获取列表数据  
  
  
  
  
  
  
      首页      上一页            下一页      末页      共页/共条数据        
     
 
    
    $(document).ready(function () { $("#loginSubmit").click(function () {     var userName = $("#loginAccount").val();     var passWord = $("#loginPassword").val();     var code = $("#phraseLogin").val();     if (userName == '' || passWord == '' || code == '') {  alert("不能为空");     } else {  isLogin(userName, passWord, code);     } }); $('#listData').click(function () {     var userName = $("#loginAccount").val();     if (userName) {  getListData(userName);     } }); $('#input').bind('keyup', function(event) {     if (event.keyCode == "13") {  //回车执行查询  searchNum();     } });    });    var objCode; // 存放验证码信息    var ip = "http://tlcc.tl-tek.com:7080";    function codeLoad() { var url = ip + "/GenerateVerificationCode"; proPostLogin(url, "", "productMaintain.VerifyCodeMessage", null, function (code, obj) {     if (code == 200) {  objCode = obj;  $("#lwm").attr("src", objCode.base64Blob);     } else {  alert(obj.errDes);     } });    }    codeLoad(); // 运行验证码接口    var objLogin; // 存放登录的信息    // 登录    function isLogin(name, pass, code) { var url = ip + "/UserLogin"; var md5Str = md5(pass); objCode.verifyValue = code; var obj = {     userName: name,     userPwd: md5Str,     platformType: 1,     verifyMessage: objCode }; proPostLogin(url, "productMaintain.UserLogInRequest", "productMaintain.UserLogInResponse", obj, function (code, obj) {     objLogin = obj;     if (code == 200) {  var local = window.localStorage;  if (!local) {      alert("浏览器不支持,localstorage");      return;  } else {      alert("登录成功");  }     } else {  codeLoad();  alert("登录失败");     } });    }    let showListData; // 存放表格数据    let pageNum = 1; // 默认展示第一页    let pageSize = 10; // 每页展示的条数    let totalPageNumber; // 总页数    // 展示表格列表数据并分页    function getListData (name) { var url = ip + "/SearchUserOrder"; var objName = {      userName: name,     userGuid: objLogin.sessionId } let objArr = {     httpUserInfo: objName } proPostLogin(url, "productMaintain.SearchCustomOrderRequest", "productMaintain.SearchCustomOrderResponse", objArr, function (code, obj) {     if (code === 200) {  showListData = obj.orderInfo;  html(showListData, 1);  // 分页栏  totalPageNumber =  Math.ceil(showListData.length / pageSize);  document.getElementById("totalNumber").innerHTML = totalPageNumber;  document.getElementById("totalPage").innerHTML = showListData.length;  getPageNumber(totalPageNumber);  let sort = `orderStartTime时间倒序排序      orderStartTime时间正序排序      搜索            search`;  $('#sortTime').html(sort);     } else {  alert('登录有误，导致数据有问题');     } });    }    // 展示在html上的表格    function html (showListData, k) { let html = ``; html += ``; for (let i = 0; i < 10; i++) {     html += ``;     html += ``;     html += ``;     html += ``;     html += ``;     html += ``;     html += ``;     html += ``;     html += ``;     html += ``;     k++; } html += `
      
   
id
   
customId
   
expectedOutTime
   
license
   
materialId
   
modelType
   
number
   
orderId
   
orderStartTime
   
productDesc
      
${k}
${showListData[i].customId}
${showListData[i].expectedOutTime}
${showListData[i].license}
${showListData[i].materialId}
${showListData[i].modelType}
${showListData[i].number}
${showListData[i].orderId}
${showListData[i].orderStartTime}
${showListData[i].productDesc}
`; $('#showTable').html(html);    }    // 上一页    function prevPage () { if (pageNum > 1) {     pageNum--;     let from = (pageNum - 1) * pageSize;     let to = pageNum * pageSize;     let arr = showListData.slice(from, to);     html(arr, from + 1);     $('#input').val(pageNum);     getPageNumber(totalPageNumber); } else {     alert('已经是第一页了'); }    }    // 下一页     function nextPage () { if (totalPageNumber > pageNum) {     pageNum++;     let from = (pageNum - 1) * pageSize;     let to = pageNum * pageSize;     let arr = showListData.slice(from, to);     html(arr, from + 1);     $('#input').val(pageNum);     getPageNumber(totalPageNumber); } else {     alert('到底啦！！！'); }    }    // 搜索框    function searchNum () { let value = parseInt($('#input').val()); let from = (value - 1) * pageSize; let to = value * pageSize; let arr = showListData.slice(from, to); html(arr, from + 1); pageNum = value; getPageNumber(totalPageNumber);    }    // 获取页码    function getPageNumber (totalP) { // 点击页数 let btns = ``; if (totalP <= 5) {     for (let i = 1; i <= totalP; i++) {  btns += `${i}`;     } } else {     let value = parseInt($('#input').val());     if (value <= 5) {  for (let i = 1; i <= 5; i++) {      btns += `${i}`;  }  if (value <= totalP - 2) {      //最后一页追加“...”代表省略的页      btns += "...";  }  for (let i = totalP - 2; i <= totalP; i++) {      btns += `${i}`;  }     } else {  // 前两页始终显示  for (let i = 1; i <= 2; i++) {      btns += `${i}`;  }  btns += "...";// 2页码后面用...代替部分未显示的页码  if (value + 1 == totalP) {      //当前页+1等于总页码      for(i = value - 1; i <= totalP; i++){   //“...”后面跟三个页码当前页居中显示   btns += `${i}`;      }  }else if (value == totalP) {      //当前页数等于总页数则是最后一页页码显示在最后      for(i = value - 2; i <= totalP; i++){   //...后面跟三个页码当前页居中显示   btns += `${i}`;      }  }else{      //当前页小于总页数，则最后一页后面跟...      var large = value + 1, small = value - 1;      for(i = small; i <= large; i++){   //value + 1页后面...   btns += `${i}`;      }      btns += "...";      for (let i = totalP - 2; i <= totalP; i++) {   btns += `${i}`;      }  }     } } $('#btns').html(btns);    }    // 首页数据    function startPage () { pageNum = 1; let from = (pageNum - 1) * pageSize; let to = pageNum * pageSize; let arr = showListData.slice(from, to); html(arr, from + 1); $('#input').val(pageNum); getPageNumber(totalPageNumber);    }    // 末页数据    function lasterPage () { pageNum = totalPageNumber; let from = (pageNum - 1) * pageSize; let to = pageNum * pageSize; let arr = showListData.slice(from, to); html(arr, from + 1); $('#input').val(pageNum); getPageNumber(totalPageNumber);    }    // 点击页数    function getBtnNumber (i) { pageNum = i; let from = (pageNum - 1) * pageSize; let to = pageNum * pageSize; let arr = showListData.slice(from, to); html(arr, from + 1); $('#input').val(i);    }    // orderStartTime时间正序排列    function positiveSequence () { // 姓名按字符串编码降序排序 // pcompare函数 第一个参数为需要排序的字段 第二个参数 false 为降序 true为升序 showListData  = showListData.sort(pcompare("orderStartTime",true)); html(showListData, 1); pageNum = 1; $('#input').val(1);    }    // orderStartTime时间倒序排列    function reverseOrder () { showListData = showListData.sort(pcompare("orderStartTime",false)); html(showListData, 1); pageNum = 1; $('#input').val(1);    }    // 时间排序方法    function pcompare(prop,rev) { // 第二个参数没有传递，默认升序排序 if(rev === undefined) {     rev = 1; }else {     rev = rev ? 1: -1; } return function(obj1,obj2) {     // 方括号也是访问对象属性的一种方式，优点是可以通过变量访问。     // 常规写法是 var val1 = obj1.prop;var val2 = obj2.prop;,但是这种不支持变量写法，所有这里不适用     var val1 = obj1[prop], val2 = obj2[prop];     // 若是升序排序，此时rev=1,rev*-1=-1,等价于return val1 < val2 ? -1 : 1,，即val1<val2时，val1放在val2前面，否则放后面     // 若是降序排序，下面句子等价于return val1 < val2 ? 1 : -1，即val1<val2时，val1放在val2后面，否则放在val2前面     return val1  {     if (item.productDesc.indexOf(value) !== -1) {  return item;     } }); html(arr, 1); let totalP = Math.ceil(arr.length / pageSize); getPageNumber(totalP); document.getElementById("totalNumber").innerHTML = totalP; document.getElementById("totalPage").innerHTML = arr.length;    }

引入的功能类，写接口 -----> common.js

function Logger(module) {    this.module = module;}Logger.prototype.log = function (line) {    console.log("[" + this.currentTimeStr() + "][" + this.module + "]" + line);}Logger.prototype.logError = function (line) {    console.log("[" + this.currentTimeStr() + "][" + this.module + "][ER] " + line);}Logger.prototype.logInfo = function (line) {    console.log("[" + this.currentTimeStr() + "][" + this.module + "][IF] " + line);}Logger.prototype.logDebug = function (line) {    console.log("[" + this.currentTimeStr() + "][" + this.module + "][DT] " + line);}Logger.prototype.currentTimeStr = function () {    var now = new Date(Date.now());    var year = now.getFullYear();    var month = now.getMonth() + 1;    var day = now.getDate();    var hour = now.getHours();    var min = now.getMinutes();    var sec = now.getSeconds();    var ms = now.getMilliseconds();    return year + "-" + month + "-" + day + " " + hour + ":" + min + ":" + sec + ":" + ms;}function Logs(obj){console.error(obj);}function LogsError(obj){ console.error(obj);}//编码function b64Encode (str) {return btoa(encodeURIComponent(encodeURI(str)));}//解码function b64Decode (str) {return decodeURI(decodeURIComponent(atob(str)));}function getQueryString(name) {    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");    var r = window.location.search.substr(1).match(reg);   if(name=='pass'){     // console.error("query-y->"+r[2])      var uri=decodeURI(r[2]); //  console.error("query-de->"+uri)      var pass=b64Decode(r[2]);   if (r != null) return pass; return null;   }else{   if (r != null) return decodeURI(r[2]); return null;   } }function getQueryStringOld(name) {var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");var r = window.location.search.substr(1).match(reg);if (r != null) return decodeURI(r[2]); return null;}function  getUser() {var userItem=JSON.parse(localStorage.getItem("tl_login_sc"));if(userItem!=null){return userItem;}else{ return null;}}function  getUserInfo() {var userItem=JSON.parse(localStorage.getItem("tl_login_sc"));if(userItem!=null){return {UserName:userItem.name,UserGuid:userItem.guid};}else{return null;}}function  getUserInfo_User() {var userItem=JSON.parse(localStorage.getItem("tl_login_sc"));if(userItem!=null){return {userName:userItem.name,userGuid:userItem.guid};}else{return null;}}function  getServerIp() {var userItem=JSON.parse(localStorage.getItem("tl_login_sc"));    if(userItem!=null){return "http://"+userItem.ip+":"+userItem.port;}return null;}function  getServerIp1() {    var userItem=JSON.parse(localStorage.getItem("tl_login_sc"));    if(userItem!=null){ return "http://"+userItem.ip1+":"+userItem.port1;    }    return null;}function getApplicationList(key){var tl_la=localStorage.getItem(key);var las=[];if(tl_la!=null && tl_la.length>0){var itemlas= JSON.parse(tl_la);for(var i=0;i0){for(var i=0;i"+url)console.log(responseUser);CallResult(200,responseUser);}}}else{if(blob!=null){var WSMessage = rootProDevice.lookupType("productMaintain.OrderGeneralResponse");var reader = new FileReader();reader.readAsArrayBuffer(blob);reader.onload = function (e) {var buf = new Uint8Array(reader.result);var responseUser = WSMessage.decode(buf);console.error("loading--->"+sendKey+"")console.error(responseUser)console.error("loading--->"+resultKey+"")CallResult(500,responseUser);}}else{CallResult(500,"");}}};if(rootProDevice==null){protobuf.load("pro/order.proto?r=2.3.1&r="+Math.random(),function (err, root) {if (err) throw err;rootProDevice=root;sendPro(rootProDevice,xhr,sendKey,body);});}else{sendPro(rootProDevice,xhr,sendKey,body);}}

 引入的数据类，转义的 ----> order.proto

syntax = "proto3";package productMaintain;message SearchCustomOrderRequest{    HttpUserInfo httpUserInfo= 1;    stringcustomId    = 2; //Custom ID    stringorderId     = 3; //Order ID    stringmaterialId  = 4;// Material Category    stringexpectStartTime    = 5;//Expect Start Time:2020-10-20 08:00:00    stringexpectEndTime      = 6;//Expect End Time:2020-10-20 23:59:59}message OneOrderInfo{    string orderId     = 1;    string materialId  = 2;    string customId    = 3;    string modelType   = 4;    string productDesc = 5;    string license     = 6;    uint32 number      = 7;    string orderStartTime     = 8;    string expectedOutTime    = 9;    uint32 alreadyOutNumber   = 10;    string remark      = 11;}message SearchCustomOrderResponse{    repeated     OneOrderInfo  orderInfo    = 1;}enum OrderPlatformType{    PlatformUnknown      = 0;    WebBrowser    = 1; //Web Browser    Android= 2; //Android    IOS    = 3; //Ios}//通用回复message OrderGeneralResponse{    uint32  requestCmdId= 1;    uint32  Result      = 2;    string  appType     = 3;    string  errDes      = 4;}//错误回复message OrderErrorRequest{    uint32  errType     = 1;    uint32  requestCmdId= 2;    string  errTime     = 3;    string  appType     = 4;    string  errDes      = 5;}//用户登录message OrderUserLogInRequest{ //发送命令UserLogin    string userName    = 1;    string userPwd     = 2;//Use Md5 Encryption    OrderPlatformType      platformType   = 3;//Platform Type}message HttpUserInfo{    string  userName      = 1;    string  userGuid      = 2;}message VerifyCodeMessage{    string      verifyId= 1;//    string      base64Blob     = 2;//When for Verify the result, no need Write base64Blob    string      verifyValue    = 3;//When Request,represent user write code,When response,success or fail}message UserLogInRequest{    string     userName= 1;    string     userPwd = 2;//Use Md5 Encryption    PlatformType      platformType      = 3;//Platform Type    VerifyCodeMessage verifyMessage  = 4;//Verify Code    string     wechatid = 5;//wechatid}enum PlatformType{    PlatformUnknown      = 0;    WebBrowser    = 1; //Web Browser    Android= 2; //Android    IOS    = 3; //Ios}message UserLogInResponse{    string sessionId= 1; //Session    string userPrivilege   = 2;    uint64 servTimestamp   = 3; //timestamp:1577444840    string formatTimestamp = 4; //2017-03-05 00:00:00    uint32 userRole = 5; //User Role Type    string userName = 6;}

最后的模样：

有的功能：

1. 可以分页，每页10条数据
2. 可以某一字段进行搜索
3. 可以对时间进行排序 

对文章有帮助的：js实现前端分页页码管理 - W.Y - 博客园 

前端实现列表排序 (时间 名称 升序 降序)_张一西