目录
- 分页
- 效果图
- 如何分页
- 代码
分页
当表单数据过多时，比较不容易浏览。这个时候就需要分页查看。
效果图
如何分页
1、首先确定总记录条数
len
2、单页浏览条数page_number
3、页数Total_pages=len % page_number == 0 ? len / page_number : len / page_number + 1;
计算出页数后就好办了,我们只需要对页码按钮设置点击事件，事件内容为，根据页数显示表格中的数据。数据用一个数组对象来保存，我们只需要遍历数组对象在页面展示即可。
数据展示的范围为：start为每页循环遍历数据数组的起点，end为终点
如果当前页数大于1则start=(pagethis-1)*page_numberend=start+page_number
如果当前页数等于1则start=0end=page_number-1
如果end>数据数组的最大下标值则让end=数据数组的最大下标值
代码
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimal-ui:ios"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href=""><script src=""></script><link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"><style>#main {width: 80%;margin: 20px auto;}nav {text-align: center;}</style>
</head><body><div id="main"><table class="table table-bordered"><tbody><tr><th>商品名称</th><th>商品价格</th><th>图片路径</th></tr></tbody></table><nav aria-label="Page navigation"><ul class="pagination"><li id="pre"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li></ul></nav></div></body>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script>var table = document.querySelector("table")//模拟后台响应的数据var json = [{"product_id": "1001","product_name": "java核心技术1","price": "120","imgurl": "res/productimg/1.jpeg"}, {"product_id": "1002","product_name": "java核心技术2","price": "130","imgurl": "res/productimg/2.jpeg"}, {"product_id": "1003","product_name": "web技术","price": "100","imgurl": "res/productimg/3.jpeg"}, {"product_id": "1004","product_name": "Mysql必知必会","price": "39","imgurl": "res/productimg/4.jpeg"}, {"product_id": "1005","product_name": "中国近代史","price": "105","imgurl": "res/productimg/4.jpeg"}, {"product_id": "1006","product_name": "世界史","price": "110","imgurl": "res/productimg/1.jpeg"}, {"product_id": "1007","product_name": "高等数学","price": "50","imgurl": "res/productimg/1.jpeg"}, {"product_id": "1008","product_name": "离散数学","price": "60","imgurl": "res/productimg/1.jpeg"}, {"product_id": "1010","product_name": "线性代数","price": "50","imgurl": "res\\productimg/3e83c2a6-b529-4bee-8ca9-ecc868b4d6f7.jpeg"}, {"product_id": "1011","product_name": "数据结构","price": "100","imgurl": "res\\productimg/53dccb9f-b918-4a81-acc9-f99594992db1.jpeg"}, {"product_id": "1013","product_name": "人工智能","price": "120","imgurl": "res\\productimg/94736781-046b-4c7c-8499-bebad2542b6f.jpg"}, {"product_id": "1014","product_name": "大数据","price": "120","imgurl": "res\\productimg/f891569d-45e3-4b7f-a37e-980273f84508.jpg"}];var ul = document.querySelector(".pagination");var page_number = 5; //单页浏览的条数var Total_pages; //页数var liAll; //页码按钮下标为 1到length-2是页数 0和length-1为上一页和下一页var pre; //上一页var next; //下一页function clearTable() {table.innerHTML = `<tbody><tr><th>商品名称</th><th>商品价格</th><th>图片路径</th></tr></tbody>`}window.onload = function() {json.forEach(function(item, i) {var tbody = document.querySelector("tbody");if (i < page_number) {var tr = document.createElement("tr");tr.innerHTML = `<td>${item.product_name}</td><td>${item.price}</td><td>${item.imgurl}</td>`tbody.appendChild(tr);}})var len = json.length; //总记录条数Total_pages = len % page_number == 0 ? len / page_number : len / page_number + 1; //页数for (var i = 1; i <= Total_pages; i++) {ul.innerHTML += `<li id="${i}"><a href="#">${i}</a></li>`}ul.innerHTML += `<li id="next"><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>`;liAll = document.querySelectorAll("li");liAll[1].childNodes[0].style.color = "red"; //初始第一页页码是红的// console.log([liAll])var pagethis = 1; //当前是第几页for (var i = 1; i < liAll.length - 1; i++) {liAll[i].onclick = function() {for (var j = 1; j < liAll.length - 1; j++) {liAll[j].childNodes[0].style.color = "blue"}pagethis = this.id; //获取当前是第几页liAll[pagethis].childNodes[0].style.color = "red";// console.log(liAll[i])let start; //当页数据的起始下标let end; //当页数据的结束下标if (pagethis != 1) {start = (pagethis - 1) * page_number;end = start + page_number;if (end > json.length - 1) { //如果当页数据结束值大于总数据条数下标的值则赋值为总数据条数最大下标值end = json.length - 1;}} else {start = 0;end = page_number - 1;}// console.log("start=" + start)// console.log("end=" + end)clearTable();var tbody = document.querySelector("tbody");json.forEach(function(item, i) {if (i >= start && i <= end) {var tr = document.createElement("tr");tr.innerHTML = `<td>${item.product_name}</td><td>${item.price}</td><td>${item.imgurl}</td>`tbody.appendChild(tr);}})}}pre = document.querySelector("#pre") //上一页next = document.querySelector("#next") //下一页pre.onclick = function() {// alert(pagethis)if (pagethis != 1) { //当前页数不等于1时执行上一页pagethis--;for (var j = 1; j < liAll.length - 1; j++) {liAll[j].childNodes[0].style.color = "blue"}liAll[pagethis].childNodes[0].style.color = "red";let start;let end;if (pagethis != 1) {start = (pagethis - 1) * page_number;end = start + page_number;if (end > json.length - 1) {end = json.length - 1;}} else {start = 0;end = page_number - 1;}clearTable();var tbody = document.querySelector("tbody");json.forEach(function(item, i) {if (i >= start && i <= end) {var tr = document.createElement("tr");tr.innerHTML = `<td>${item.product_name}</td><td>${item.price}</td><td>${item.imgurl}</td>`console.log(tr)tbody.appendChild(tr);}})}}next.onclick = function() {// alert(pagethis)if (pagethis < liAll.length - 2) { //当前页数小于最后一页则执行下一页pagethis++;for (var j = 1; j < liAll.length - 1; j++) {liAll[j].childNodes[0].style.color = "blue"}liAll[pagethis].childNodes[0].style.color = "red";let start;let end;if (pagethis != 1) {start = (pagethis - 1) * page_number;end = start + page_number;if (end > json.length - 1) {end = json.length - 1;}} else {start = 0;end = page_number - 1;}clearTable();var tbody = document.querySelector("tbody");json.forEach(function(item, i) {if (i >= start && i <= end) {var tr = document.createElement("tr");tr.innerHTML = `<td>${item.product_name}</td><td>${item.price}</td><td>${item.imgurl}</td>`console.log(tr)tbody.appendChild(tr);}})}}}
</script></html>
![[linux]Ubuntu12.1下打开terminal的方式](https://s1.51cto.com/attachment/201303/221630343.png)
