本文实例为大家分享了js实现表格翻页和跳转的具体代码，供大家参考，具体内容如下js代码里的row_num变量是显示数据的行数，修改后可改变每页显示的数量。html代码：

No	Name	Age

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 && 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);
}
};
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);
}
};以上就是本文的全部内容，希望对大家的学习有所帮助。