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


Posted in Javascript onSeptember 29, 2020

本文实例为大家分享了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);
 }
};

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript在IE和FireFox中的不同表现简析
Dec 03 Javascript
jQuery常见开发技巧详细整理
Jan 02 Javascript
js导航栏单击事件背景变换示例代码
Jan 13 Javascript
js获取域名的方法
Jan 27 Javascript
cookie的secure属性详解
Apr 08 Javascript
Javascript实现获取及设置光标位置的方法
Jul 21 Javascript
JavaScript中的Function函数
Aug 27 Javascript
JavaScript的String字符串对象常用操作总结
May 26 Javascript
JS的Ajax与后端交互数据的实例
Aug 08 Javascript
移动端图片上传旋转、压缩问题的方法
Oct 16 Javascript
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
Sep 24 Javascript
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 jQuery
vue实现井字棋游戏
Sep 29 #Javascript
js实现移动端图片滑块验证功能
Sep 29 #Javascript
js+cavans实现图片滑块验证
Sep 29 #Javascript
如何利用JS将手机号中间四位变成*号
Sep 29 #Javascript
原生JavaScript实现刮刮乐
Sep 29 #Javascript
原生JavaScript实现拖动校验功能
Sep 29 #Javascript
使用JavaScript实现贪吃蛇游戏
Sep 29 #Javascript
You might like
浅谈PHP的反射机制
2016/12/15 PHP
PHP实现的大文件切割与合并功能示例
2018/04/10 PHP
PHP树形结构tree类用法示例
2019/02/01 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
js内置对象 学习笔记
2011/08/01 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
2014/04/20 Javascript
深入理解JavaScript程序中内存泄漏
2016/03/17 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
2016/07/18 Javascript
WEB开发之注册页面验证码倒计时代码的实现
2016/12/15 Javascript
Bootstrap popover用法详解
2016/12/22 Javascript
JS闭包与延迟求值用法示例
2016/12/22 Javascript
javascript 数据存储的常用函数总结
2017/06/01 Javascript
vue父子模板传值问题解决方法案例分析
2020/02/26 Javascript
js实现3D旋转效果
2020/08/18 Javascript
[01:50]WODOTA制作 DOTA2中文宣传片《HERO》
2013/04/28 DOTA
[51:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python文件读写操作与linux shell变量命令交互执行的方法
2015/01/14 Python
Django REST为文件属性输出完整URL的方法
2017/12/18 Python
Python wxPython库消息对话框MessageDialog用法示例
2018/09/03 Python
python的等深分箱实例
2019/11/22 Python
Python谱减法语音降噪实例
2019/12/18 Python
python实现五子棋程序
2020/04/24 Python
Sentry错误日志监控使用方法解析
2020/11/12 Python
python中用ctypes模拟点击的实例讲解
2020/11/26 Python
一款纯css3实现的圆形旋转分享按钮旋转角度可自己调整
2014/09/02 HTML / CSS
西班牙美妆电商:Perfume’s Club(有中文站)
2018/08/08 全球购物
军神教学反思
2014/02/04 职场文书
初三班主任寄语大全
2014/04/04 职场文书
论文评语大全
2014/04/29 职场文书
机械制造专业大学生自我鉴定
2014/09/19 职场文书
见习报告的格式
2014/11/04 职场文书
交通事故协议书范本
2014/11/18 职场文书
学籍证明模板
2015/06/18 职场文书
2015暑假社会调查报告
2015/07/13 职场文书
文案策划岗位个人自我评价(范文)
2019/08/08 职场文书
mysql数据库入门第一步之创建表
2021/05/14 MySQL