原生js实现表格翻页和跳转

本文实例为大家分享了js实现表格翻页和跳转的具体代码，供大家参考，具体内容如下

js代码里的row_num变量是显示数据的行数，修改后可改变每页显示的数量。

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);
 }
};

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持免费资源网。