原生js實現(xiàn)表格翻頁和跳轉
更新時間：2020年09月29日 16:48:46 作者：知我未夠好丶
這篇文章主要為大家詳細介紹了原生js實現(xiàn)表格翻頁和跳轉，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)表格翻頁和跳轉的具體代碼，供大家參考，具體內容如下
js代碼里的row_num變量是顯示數(shù)據(jù)的行數(shù)，修改后可改變每頁顯示的數(shù)量。
html代碼：
<table border="" cellspacing="" cellpadding="" id="table"> <thead> <tr> <td>No</td> <td>Name</td> <td>Age</td> </tr> </thead> <tbody></tbody> <tfoot> <tr> <td colspan="3"> <input type="button" name="pre-btn" id="pre" value="<" /> <input type="text" name="page_num" id="page_num" value="" /> <span id="cur_page"></span> <input type="button" name="jump" id="jump" value="跳轉" /> <input type="button" name="next-btn" id="next" value=">" /> </td> </tr> </tfoot> </table>
js代碼：
let datas = [
[1, 'a', 16],
[2, 'b', 20],
[3, 'c', 22],
[4, 'd', 44],
[5, 'e', 11],
[6, 'f', 12],
[7, 'g', 13]
];
let cur_page = 0;
let t = document.querySelector('tbody');
let page_num = document.querySelector('#page_num');
let row_num = 2;
(() => jump_to(cur_page))();
function pre() {
if (cur_page > 0) {
cur_page--;
jump_to(cur_page);
}
}
function next() {
if (cur_page < (datas.length / row_num) - 1) {
cur_page++;
jump_to(cur_page);
}
}
function jump_to(page) {
t.innerHTML = '';
for (let i = page * row_num; i < (page + 1) * row_num && i < datas.length; i++) {
let row = t.insertRow();
for (let item of datas[i]) {
row.insertCell().innerHTML = item;
}
}
page_num.value = page + 1;
}
document.querySelector('#cur_page').innerText = `/${Math.ceil(datas.length / row_num)}`;
document.querySelector('#pre').onclick = () => pre();
document.querySelector('#next').onclick = () => next();
document.querySelector('#jump').onclick = function() {
if (page_num.value < (datas.length / row_num) + 1 && page_num.value - 1 !== cur_page && page_num.value > 0 && Number.isInteger(parseInt(page_num.value))) {
cur_page = page_num.value - 1;
jump_to(cur_page);
}
};
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
在你的網(wǎng)頁中嵌入外部網(wǎng)頁的方法...2007-04-04
本篇文章主要是對js中reverse函數(shù)的用法進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
這篇文章主要介紹了JavaScript類型判斷的四種方法，幫助大家更好的理解和學習JavaScript，感興趣的朋友可以了解下2020-10-10
單例模式也稱作為單子模式，更多的也叫做單體模式。為軟件設計中較為簡單但是最為常用的一種設計模式。這篇文章主要介紹了Javascript實現(xiàn)單例模式的相關資料,需要的朋友可以參考下2016-01-01
下面小編就為大家?guī)硪黄仙Ｕ刯s中0到底是 true 還是 false。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
詳解js如何優(yōu)雅處理后端返回的單元格數(shù)據(jù)
這篇文章主要為大家詳細介紹了JavaScript如何優(yōu)雅處理后端返回的單元格數(shù)據(jù),文中的示例代碼講解詳細,有需要的小伙伴可以跟隨小編一起學習一下2023-10-10
這篇文章主要為大家詳細介紹了JS實現(xiàn)鼠標按下拖拽效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07
JavaScript省市聯(lián)動實現(xiàn)代碼
這篇文章主要介紹了JavaScript省市聯(lián)動實現(xiàn)代碼,需要的朋友可以參考下2014-02-02
IE DOM實現(xiàn)存在的部分問題及解決方法2009-07-07
這篇文章主要介紹了移動端手指放大縮小插件與js源碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05