本文实例为大家分享了js实现表格翻页和跳转的具体代码,供大家参考,具体内容如下
js代码里的row_num变量是显示数据的行数,修改后可改变每页显示的数量。
html代码:
No | Name | Age |
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 && ipre(); 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); } };
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。