原生js實現(xiàn)表格翻頁和跳轉(zhuǎn)
本文實例為大家分享了js實現(xiàn)表格翻頁和跳轉(zhuǎn)的具體代碼,供大家參考,具體內(nèi)容如下
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="跳轉(zhuǎn)" /> <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); } };
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
javascript如何讀寫本地sqlite數(shù)據(jù)庫
這篇文章主要介紹了javascript如何讀寫本地sqlite數(shù)據(jù)庫問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-02-02JS如何實現(xiàn)Base64編碼和解碼(及中文亂碼問題)
這篇文章主要給大家介紹了關(guān)于JS如何實現(xiàn)Base64編碼和解碼及中文亂碼問題的相關(guān)資料,Base64編碼是一種常用的將二進(jìn)制數(shù)據(jù)轉(zhuǎn)換為文本數(shù)據(jù)的方式,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10解決微信瀏覽器Javascript無法使用window.location.reload()刷新頁面
這篇文章主要介紹在微信瀏覽器Javascript無法使用window.location.reload()刷新頁面的解決方法,比較實用,需要的朋友可以參考下。2016-06-06整理Javascript基礎(chǔ)入門學(xué)習(xí)筆記
整理Javascript基礎(chǔ)入門學(xué)習(xí)筆記,之前一系列的文章是跟我學(xué)習(xí)Javascript,本文就是進(jìn)一步學(xué)習(xí)javascript,希望大家繼續(xù)關(guān)注2015-11-11神奇的代碼 通殺各種網(wǎng)站-可隨意修改復(fù)制頁面內(nèi)容
在瀏覽器地址欄輸入這一行代碼,然后回車,就發(fā)現(xiàn)整個頁面都可以隨意編輯了。僅僅是一行很短的代碼。2008-07-07JavaScript實現(xiàn)樹結(jié)構(gòu)轉(zhuǎn)換的五種方法總結(jié)
在?JavaScript?編程中,將數(shù)組轉(zhuǎn)換為樹結(jié)構(gòu)是一個常見的需求。本篇博客將介紹五種常用的方法來實現(xiàn)數(shù)組轉(zhuǎn)樹結(jié)構(gòu),希望對大家有所幫助2023-03-03解決在layer.open中使用時間控件laydate失敗的問題
今天小編就為大家分享一篇解決在layer.open中使用時間控件laydate失敗的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09