原生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 相关文章推荐
关于实现代码语法标亮 dp.SyntaxHighlighter
Feb 02 Javascript
JavaScript 拖拉缩放效果
Dec 10 Javascript
javascript中局部变量和全局变量的区别详解
Feb 27 Javascript
js事件处理程序跨浏览器解决方案
Mar 27 Javascript
jQuery Ajax使用FormData对象上传文件的方法
Sep 07 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
Mar 02 Javascript
史上最全JavaScript常用的简写技巧(推荐)
Aug 17 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
PHP实现基于Redis的MessageQueue队列封装操作示例
Feb 02 Javascript
微信小程序Flex布局用法深入浅出分析
Apr 25 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
Oct 21 Javascript
微信小程序实现抖音播放效果的实例代码
Apr 11 Javascript
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最常用的ini函数分析 针对PHP.ini配置文件
2010/04/22 PHP
hadoop常见错误以及处理方法详解
2013/06/19 PHP
解析php防止form重复提交的方法
2013/07/01 PHP
PHP函数按引用传递参数及函数可选参数用法示例
2018/06/04 PHP
JS取文本框中最小值的简单实例
2013/11/29 Javascript
Javascript的表单验证-初识正则表达式
2016/03/18 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
2017/01/19 Javascript
简单实现js上传文件功能
2017/08/21 Javascript
vue 项目中使用Loading组件的示例代码
2018/08/31 Javascript
详解webpack4之splitchunksPlugin代码包分拆
2018/12/04 Javascript
详解vue路由篇(动态路由、路由嵌套)
2019/01/27 Javascript
在Vue中使用icon 字体图标的方法
2019/06/14 Javascript
小程序和web画三角形实现解析
2019/09/02 Javascript
Vue学习之组件用法实例详解
2020/01/06 Javascript
[01:29]Ti4循环赛第三日精彩回顾
2014/07/13 DOTA
[04:15]DOTA2-DPC中国联赛1月19日Recap集锦
2021/03/11 DOTA
python调用机器喇叭发出蜂鸣声(Beep)的方法
2015/03/23 Python
Python 爬虫学习笔记之多线程爬虫
2016/09/21 Python
python机器学习之决策树分类详解
2017/12/20 Python
Python中new方法的详解
2019/01/15 Python
python自动发微信监控报警
2019/09/06 Python
python实现猜单词游戏
2020/05/22 Python
keras 多任务多loss实例
2020/06/22 Python
Python数据库封装实现代码示例解析
2020/09/05 Python
运行python提示no module named sklearn的解决方法
2020/11/29 Python
Python 数据分析之逐块读取文本的实现
2020/12/14 Python
python 如何上传包到pypi
2020/12/24 Python
PyCharm Ctrl+Shift+F 失灵的简单有效解决操作
2021/01/15 Python
CSS3中引入多种自定义字体font-face
2020/06/12 HTML / CSS
Html5获取高德地图定位天气的方法
2019/12/26 HTML / CSS
毕业生自我鉴定实例
2014/01/21 职场文书
新闻发布会主持词
2014/03/28 职场文书
学前教育专业求职信
2014/09/02 职场文书
党员承诺书格式范文
2015/04/28 职场文书
故意伤害辩护词
2015/05/21 职场文书
Java后端 Dubbo retries 超时重试机制的解决方案
2022/04/14 Java/Android