2024年前端最全最详细的JS动态创建表格以及实现分页!，头条三面刷人吗

最后：

总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。

面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。

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

=================================================================

接下来搜索功能，在主函数中定义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为表格查询请求接口的方法

}

});

},

这里就实现了搜索功能，效果看图

表格下面的功能

====================================================================

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

跳转

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

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) //总共多少页

左下的页码展示

---

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

$(“#page-text”).append(`

当前第KaTeX parse error: Expected 'EOF', got '#' at position 48: … style="color: #̲a2a2a2">{pageList.pageCount}条,共${pageList.pageTotal}页

`)

效果图

分页

---

接下来实现分页，分页有点复杂，当显示到中间时效果如图

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

定义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

  })

  

  左边省略号展开

  $(“.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

  })

  

  页码选择

  $(“#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]

  }

  }

  })

  

  第一页

  $(“.pageFirst”).on(“click”, function () {

  let pageNum = 1

  Action.isValue(“”, pageNum) //向后端请求数据的方法

  newPagingShowNum = [1, 2, 3, pageList.pageTotal]

  })

  

  最后一页

  $(“.pageLast”).on(“click”, function () {

  let pageNum = pageList.pageTotal

  Action.isValue(“”, pageNum) //向后端请求数据的方法

  newPagingShowNum = [1, pageNum - 2, pageNum - 1, pageList.pageTotal]

  })

  

  上一页

  $(“#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]

  基础学习：

  前端最基础的就是 HTML , CSS 和 JavaScript 。

  网页设计：HTML和CSS基础知识的学习

  HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

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

  

  CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

  

  动态交互：JavaScript基础的学习

  JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

  

  newPagingShowNum = [1, pageNum - 1, pageNum, pageList.pageTotal]

  基础学习：

  前端最基础的就是 HTML , CSS 和 JavaScript 。

  网页设计：HTML和CSS基础知识的学习

  HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

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

  [外链图片转存中…(img-LL92R61Z-1715536332613)]

  CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

  [外链图片转存中…(img-uhDCROBj-1715536332613)]

  动态交互：JavaScript基础的学习

  JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

  [外链图片转存中…(img-r3yq5YM7-1715536332614)]