當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
在 JavaScript 中为任何表格添加分页
生活随笔
收集整理的這篇文章主要介紹了
在 JavaScript 中为任何表格添加分页
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
分頁是每個人都討厭在他們的網(wǎng)站上實現(xiàn)的那些事情之一，并且在數(shù)據(jù)大小需要它之前我們會避免這樣做。或者直到頁面太長以至于滾輪斷開并且瀏覽器崩潰。并且有充分的理由。通常，這是一項有些乏味且不必要的復雜任務。但是一項非常需要的繁瑣而復雜的任務。以下腳本旨在一勞永逸地處理 HTML 表格的所有客戶端分頁。
要詳細了解分頁邏輯的工作原理，請隨時查看我的博客文章。
只要它有助于您的編碼之旅，請隨意使用它并以您希望的任何方式進行修改。我只想問，如果你這樣做的話，你會以我的方式說些客氣話。
在我們開始之前，如果您對 JavaScript 比較陌生，那么我推薦使用 HTML、CSS、JavaScript 和 jQuery 進行網(wǎng)頁設計作為一本很好的書籍和一個很好的起點。
一個簡單的例子，讓您享受觀看樂趣。
每頁 2 行 1 2| 3 | 瑪麗·s。 | 123假圣 | 333-333-3333 |
| 4 | 南希·s。 | 123假圣 | 333-333-3333 |
這個怎么運作
整個過程非常簡單，并且混淆了開發(fā)人員的大部分復雜性。只需將腳本添加到您的站點并按照以下步驟操作，您就可以在不到 100 行代碼中進行即時客戶端分頁。
1.將分頁類添加到要添加分頁的每個表中。
2.設置數(shù)據(jù)集值中每頁、每張表的記錄元素數(shù)，如下所示：
<table class="pagination" data-pagecount="3">就是這樣。分頁完成。這里有幾個例子可以再次為您帶來尋呼樂趣。
每頁 2 條記錄 1 2| 1 | 鮑勃. | 123假圣 | 333-333-3333 |
| 2 | 鮑勃. | 123假圣 | 333-333-3333 |
| 1 | 鮑勃. | 123假圣 | 333-333-3333 |
| 2 | 鮑勃. | 123假圣 | 333-333-3333 |
| 3 | 鮑勃. | 123假圣 | 333-333-3333 |
這只是我必須再次提及的客戶端實現(xiàn)，適用于小型數(shù)據(jù)集。如果您要處理數(shù)千條記錄，那么您肯定需要服務器端實現(xiàn)。我將在以后的帖子中介紹。
但是，與此同時，請盡情享受腳本并隨意使用它。快樂編碼！
<html><head><title>TODO supply a title</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script>var perPage = 20;function genTables() {var tables = document.querySelectorAll(".pagination");for (var i = 0; i < tables.length; i++) {perPage = parseInt(tables[i].dataset.pagecount);console.log(perPage);createFooters(tables[i]);createTableMeta(tables[i]);loadTable(tables[i]);}}// based on current page, only show the elements in that rangefunction loadTable(table) {var startIndex = 0;if (table.querySelector('th'))startIndex = 1;console.log(startIndex);var start = (parseInt(table.dataset.currentpage) * table.dataset.pagecount) + startIndex;var end = start + parseInt(table.dataset.pagecount);var rows = table.rows;for (var x = startIndex; x < rows.length; x++) {if (x < start || x >= end)rows[x].classList.add("inactive");elserows[x].classList.remove("inactive");}}function createTableMeta(table) {table.dataset.currentpage = "0";}function createFooters(table) {var hasHeader = false;if (table.querySelector('th'))hasHeader = true;console.log(hasHeader);var rows = table.rows.length;if (hasHeader)rows = rows - 1;var numPages = rows / perPage;var pager = document.createElement("div");// add an extra page, if we'reif (numPages % 1 > 0)numPages = Math.floor(numPages) + 1;pager.className = "pager";for (var i = 0; i < numPages; i++) {var page = document.createElement("div");page.innerHTML = i + 1;page.className = "pager-item";page.dataset.index = i;if (i == 0)page.classList.add("selected");page.addEventListener('click', function () {var parent = this.parentNode;var items = parent.querySelectorAll(".pager-item");console.log(items.length);for (var x = 0; x < items.length; x++) {items[x].classList.remove("selected");}this.classList.add('selected');table.dataset.currentpage = this.dataset.index;loadTable(table);});pager.appendChild(page);}// insert page at the top of the tabletable.parentNode.insertBefore(pager, table);}window.addEventListener('load', function () {genTables();});</script><style>/*PAGINATION*/.pagination tr.inactive{display: none;}.pager{padding: 10px 0px;}.pager .pager-item{padding: 10px;border: solid 1px #fff;text-align: center;display: inline-block;cursor: pointer;background-color: #1caff6;transition: .5s background-color;color: White;}.pager .pager-item:hover{background-color: #0e384c;}.pager .pager-item.selected{background-color: #0e384c;}</style></head><body><p>A quick example for your viewing pleasure.</p><div><strong>2 rows per page</strong></div><table style="width:100%" class="pagination data-table table" data-pagecount="2" border="1"><thead><tr><th>Index</th><th>Name</th><th>Address</th><th>Phone</th></tr></thead><tbody><tr><td>1</td><td>bob s.</td><td>123 fake st</td><td>333-333-3333</td></tr><tr><td>2</td><td>steve q.</td><td>123 fake st</td><td>333-333-3333</td></tr><tr><td>3</td><td>mary m s.</td><td>123 fake st</td><td>333-333-3333</td></tr><tr><td>4</td><td>nancy s.</td><td>123 fake st</td><td>333-333-3333</td></tr></tbody></table></body> </html>總結
以上是生活随笔為你收集整理的在 JavaScript 中为任何表格添加分页的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： matlab 打包封装,matlab中如
- 下一篇： 重磅！李飞飞、颜宁等9位华人当选美国艺术