當(dāng)前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript实现数据分页
生活随笔
收集整理的這篇文章主要介紹了
JavaScript实现数据分页
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
目錄
- 分頁
- 效果圖
- 如何分頁
- 代碼
分頁
當(dāng)表單數(shù)據(jù)過多時(shí)，比較不容易瀏覽。這個(gè)時(shí)候就需要分頁查看。
效果圖
如何分頁
1、首先確定總記錄條數(shù) len
2、單頁瀏覽條數(shù) page_number
3、頁數(shù) Total_pages=len % page_number == 0 ? len / page_number : len / page_number + 1;
計(jì)算出頁數(shù)后就好辦了,我們只需要對頁碼按鈕設(shè)置點(diǎn)擊事件，事件內(nèi)容為，根據(jù)頁數(shù)顯示表格中的數(shù)據(jù)。數(shù)據(jù)用一個(gè)數(shù)組對象來保存，我們只需要遍歷數(shù)組對象在頁面展示即可。
數(shù)據(jù)展示的范圍為：start為每頁循環(huán)遍歷數(shù)據(jù)數(shù)組的起點(diǎn)，end為終點(diǎn)
如果當(dāng)前頁數(shù)大于1則start=(pagethis-1)*page_number end=start+page_number
如果當(dāng)前頁數(shù)等于1則start=0 end=page_number-1
如果end>數(shù)據(jù)數(shù)組的最大下標(biāo)值 則讓end=數(shù)據(jù)數(shù)組的最大下標(biāo)值
代碼
<!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>商品價(jià)格</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")//模擬后臺響應(yīng)的數(shù)據(jù)var json = [{"product_id": "1001","product_name": "java核心技術(shù)1","price": "120","imgurl": "res/productimg/1.jpeg"}, {"product_id": "1002","product_name": "java核心技術(shù)2","price": "130","imgurl": "res/productimg/2.jpeg"}, {"product_id": "1003","product_name": "web技術(shù)","price": "100","imgurl": "res/productimg/3.jpeg"}, {"product_id": "1004","product_name": "Mysql必知必會(huì)","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": "高等數(shù)學(xué)","price": "50","imgurl": "res/productimg/1.jpeg"}, {"product_id": "1008","product_name": "離散數(shù)學(xué)","price": "60","imgurl": "res/productimg/1.jpeg"}, {"product_id": "1010","product_name": "線性代數(shù)","price": "50","imgurl": "res\\productimg/3e83c2a6-b529-4bee-8ca9-ecc868b4d6f7.jpeg"}, {"product_id": "1011","product_name": "數(shù)據(jù)結(jié)構(gòu)","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": "大數(shù)據(jù)","price": "120","imgurl": "res\\productimg/f891569d-45e3-4b7f-a37e-980273f84508.jpg"}];var ul = document.querySelector(".pagination");var page_number = 5; //單頁瀏覽的條數(shù)var Total_pages; //頁數(shù)var liAll; //頁碼按鈕下標(biāo)為 1到length-2是頁數(shù) 0和length-1為上一頁和下一頁var pre; //上一頁var next; //下一頁function clearTable() {table.innerHTML = `<tbody><tr><th>商品名稱</th><th>商品價(jià)格</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; //總記錄條數(shù)Total_pages = len % page_number == 0 ? len / page_number : len / page_number + 1; //頁數(shù)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; //當(dāng)前是第幾頁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; //獲取當(dāng)前是第幾頁liAll[pagethis].childNodes[0].style.color = "red";// console.log(liAll[i])let start; //當(dāng)頁數(shù)據(jù)的起始下標(biāo)let end; //當(dāng)頁數(shù)據(jù)的結(jié)束下標(biāo)if (pagethis != 1) {start = (pagethis - 1) * page_number;end = start + page_number;if (end > json.length - 1) { //如果當(dāng)頁數(shù)據(jù)結(jié)束值大于總數(shù)據(jù)條數(shù)下標(biāo)的值則賦值為總數(shù)據(jù)條數(shù)最大下標(biāo)值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) { //當(dāng)前頁數(shù)不等于1時(shí)執(zhí)行上一頁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) { //當(dāng)前頁數(shù)小于最后一頁則執(zhí)行下一頁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>總結(jié)
以上是生活随笔為你收集整理的JavaScript实现数据分页的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JQuery Datatables Aj
- 下一篇： 什么是JSON? 以及jackson的使