最详细的JS动态创建表格以及实现分页!_新建20 15的单元格动态网页

最后

由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

## 搜索功能


接下来搜索功能，在主函数中定义searchList()这个方法

    searchList() {
        let searchInput = document.getElementById("search-input")
        searchInput.addEventListener("keyup", function (event) { //搜索用的键盘回车事件
            event.preventDefault();
            let searchValue = $("#search-input").val()
            if (event.keyCode === 13) {
                let data = searchValue
                getTableList(data, 1) //getTableList为表格查询请求接口的方法
            }
        });
    },

这里就实现了搜索功能，效果看图  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210611172429822.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pldF9Mb3Zlcg==,size_16,color_FFFFFF,t_70)


## 表格下面的功能


接下来实现表格下面的功能，html代码

        <nav aria-label="Page navigation example" style="display: flex;align-items: center;justify-content: space-between;height: 74px;">
            <div id="page-text">
            </div>
            <div style="display: flex;align-items: center">
                <ul class="pagination">
                </ul>
                <input style="width:50px;margin: 0 5px" type="text" class="form-control" id="search-page" />
                <div  class="btn btn-default page-confirm" >跳转</div>
            </div>
        </nav>

实现之前要先定义一个对象来储存页码信息

var pageList= {       //不要在意名字===/~\_~/
    pageNo: 1,    //当前页
    pageSize: 10,   //一页多少条,我这里写死了的没有涉及到改变展示页数
    pageCount: 0,    //总共多少条
    pageTotal: 0,    //总共多少页
    pagingShowNum: []  //展示的页码数组成的数组
};
var newPagingShowNum=[]  //定义一个新的页码数组成的数组，来装页码

并在请求到后端返回的接口数据中初始化pageObj 对象

            pageList.pageNo = data.pageNum    //当前页
            pageList.pageCount = data.count   //总共多少条数据
            pageList.pageTotal = Math.ceil(pageList.pageCount / pageList.pageSize) //总共多少页

### 左下的页码展示


实现动态生成左下的页码展示

KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲page-text").app…{pageList.pageNo}页,总KaTeX parse error: Expected 'EOF', got '#' at position 51: … style="color: #̲a2a2a2">{pageList.pageTotal}页
`)

效果图  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210611173242663.png)


### 分页


接下来实现分页，分页有点复杂，当显示到中间时效果如图  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210611173647263.png)


因为我做的分页只展示**四条**数据，涉及到小于五条与大于四条分页时两种情况。  
 定义**pagingShowNum**

                if (pageList.pageTotal <= 5) {
                    for (let i = 0; i < pageList.pageTotal; i++) {
                        pageList.pagingShowNum[i] = i + 1
                    }
                } else {
                    for (let i = 0; i < 4; i++) {       //最长显示五页
                        pageList.pagingShowNum[i] = i + 1
                    }
                    pageList.pagingShowNum[pageList.pagingShowNum.length - 1] = pageList.pageTotal
                }

动态生成分页的js代码

       if (pageList.pageTotal <= 5) {//小于五条的情况
                 $(".pagination").append(`

• «
• 1
• »
• `) for (let i = 1; i < pageList.pagingShowNum.length; i++) { if (pageList.pagingShowNum[i]) { $("#page-div").append(` ${pageList.pagingShowNum[i]} `) } } } else { }//大于四条的情况

  
  当页数大于4条时就要考虑生成…来隐藏没有展示的代码
  
  
  
  

                $(".pagination").append( `
  

• «
• 1
• ${pageList.pageTotal}
• »
• `) $('#page-div').after(`
• ...
• `); //右边省略号 $('#page-div').before(`
• ...
• `); //左边省略号 for (let i = 1; i < pageList.pagingShowNum.length - 1; i++) { if (newPagingShowNum.length != 0) { pageList.pagingShowNum[1] = newPagingShowNum[1] pageList.pagingShowNum[2] = newPagingShowNum[2] $("#page-div").append(` ${pageList.pagingShowNum[i]}`) } else { if (pageList.pagingShowNum[i]) { $("#page-div").append(` ${pageList.pagingShowNum[i]} `) } } } if (pageList.pagingShowNum[2] < 4) { $(".ellipsis-left").hide() //中间页面小于4，左边省略号隐藏 } if (pageList.pagingShowNum[2] > pageList.pageTotal - 2) { $(".ellipsis-right").hide() //中间页面大于最大页码-2，右边省略号隐藏 }

  
  右边省略号展开
  
  
  
  

              $(".ellipsis-right").on("click", function () {
                  $("#page-div").empty()
                  if (pageList.pagingShowNum[2] < pageList.pageTotal - 2) {
                      pageList.pagingShowNum[1] = pageList.pagingShowNum[1] + 2
                      pageList.pagingShowNum[2] = pageList.pagingShowNum[2] + 2
                  } else {      //点到最右边是[1,…,total-2,total-1,total]
                      pageList.pagingShowNum[1] = pageList.pageTotal - 2
                      pageList.pagingShowNum[2] = pageList.pageTotal - 1
                      $(".ellipsis-right").hide()
                  }
                  if (pageList.pagingShowNum[2] == pageList.pageTotal - 1) {
                      $(".ellipsis-right").hide()
                  }
                  if (pageList.pagingShowNum[1] > 3) {
                      $(".ellipsis-left").show()
                  }
                  for (let i = 1; i < pageList.pagingShowNum.length - 1; i++) {
                      if (pageList.pagingShowNum[i]) {
                          $("#page-div").append(`
  

  ${pageList.pagingShowNum[i]}
  `)
  }
  }
  newPagingShowNum= pageList.pagingShowNum
  })

  
  ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210616161756946.png)
  
  
  左边省略号展开
  
  
  
  

              $(".ellipsis-left").on("click", function () {
                  $("#page-div").empty()
                  if (pageList.pagingShowNum[1] > 3) {
                      pageList.pagingShowNum[1] = pageList.pagingShowNum[1] - 2
                      pageList.pagingShowNum[2] = pageList.pagingShowNum[2] - 2
                      $(".ellipsis-right").show()
                  } else {  //点到最左边是[1,2,3,…,total]
                      pageList.pagingShowNum[1] = 2
                      pageList.pagingShowNum[2] = 3
                  }
                  if (pageList.pagingShowNum[1] < 3) {
                      $(".ellipsis-left").hide()
                  }
                  for (let i = 1; i < pageList.pagingShowNum.length - 1; i++) {
                      if (pageList.pagingShowNum[i]) {
                          $("#page-div").append(`
  

  ${pageList.pagingShowNum[i]}
  `)
  }
  }
  newPagingShowNum = pageList.pagingShowNum
  })

  
  ![在这里插入图片描述](https://img-blog.csdnimg.cn/2021061616173230.png)
  
  
  页码选择
  
  
  
  

              $("#page-div").on("click", function (e) {
                  if (e.target.classList.value.includes("page-a")) {
                      let pageNum = Number(e.target.text)
                      Action.isValue("", pageNum)   //向后端请求数据的方法
                      if (pageNum >= 3 && pageNum != newPagingShowNum[2] && pageNum < pageList.pageTotal) {
                          newPagingShowNum = [1, pageNum - 1, pageNum, pageList.pageTotal]
                      } else if (pageNum >= 3 && pageNum == newPagingShowNum[2] && pageNum < pageList.pageTotal - 1) {
                          newPagingShowNum = [1, pageNum, pageNum + 1, pageList.pageTotal]
                      } else if (pageNum < 3) {
                          newPagingShowNum = [1, 2, 3, pageList.pageTotal]
                      }
                  }
              })
  

  
  ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210616162037775.png)  
   第一页
  
  
  
  

              $(".pageFirst").on("click", function () {
                  let pageNum = 1
                  Action.isValue("", pageNum)  //向后端请求数据的方法
                  newPagingShowNum = [1, 2, 3, pageList.pageTotal]
              })
  

  
  ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210616162256519.png)
  
  
  最后一页
  
  
  
  

              $(".pageLast").on("click", function () {
                  let pageNum = pageList.pageTotal
                  Action.isValue("", pageNum)   //向后端请求数据的方法
                  newPagingShowNum = [1, pageNum - 2, pageNum - 1, pageList.pageTotal]
              })
  

  
  ![在这里插入图片描述](https://img-blog.csdnimg.cn/2021061616233076.png)  
   上一页
  
  
  
  

              $("#pre a").on('click', function () {
                  if (pageList.pageNo > 1) {
                      let pageNum = pageList.pageNo - 1;
                      Action.isValue("", pageNum)    //向后端请求数据的方法
                      if (pageNum > 2 && pageNum < pageList.pageTotal) {
                          newPagingShowNum = [1, pageNum - 1, pageNum, pageList.pageTotal]
                      } else if (pageNum = 2) {
                          newPagingShowNum = [1, pageNum, pageNum + 1, pageList.pageTotal]
                      }
                  }
              });
  

  
  下一页
  
  
  
  

              $("#next a").on('click', function () {
                  if (pageList.pageNo < pageList.pageTotal) {
                      let pageNum = pageList.pageNo + 1;
                      Action.isValue("", pageNum)    //向后端请求数据的方法
                      if (pageNum > 2 && pageNum < pageList.pageTotal - 1) {
                          newPagingShowNum = [1, pageNum, pageNum + 1, pageList.pageTotal]
                      } else if (pageNum = pageList.pageTotal - 1) {
                          newPagingShowNum = [1, pageNum - 1, pageNum, pageList.pageTotal]
                      }
                  }
              });
  

  
  
  ### 最后
  
  由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！
  
  **[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
  
  ![](https://img-blog.csdnimg.cn/img_convert/4c304b72f2ef7e3e92669267356691a7.webp?x-oss-process=image/format,png)
  
  ![](https://img-blog.csdnimg.cn/img_convert/3bfde358fb5930f3c10e5b357a707cf8.webp?x-oss-process=image/format,png)
  
  
  
  , pageNum - 1, pageNum, pageList.pageTotal]
                          }
                      }
                  });
  
  

  最后

  由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  [外链图片转存中…(img-mbvLDifc-1715269508853)]

  [外链图片转存中…(img-P9HzmCwH-1715269508854)]