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

 

 

  
No
  
Name
  
Age
 
 
 

 

 

  

  
  
  
  
  
  
 
 

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