html的带分页的表格写法,Html表格分页
第一页 上一页 下一页 最后一页 第页/共页
lishewen | ||||
---|---|---|---|---|
1 | 算神 | |||
2 | ||||
3 | ||||
4 | ||||
5 | 黎摄文 | |||
6 | ||||
7 | ||||
8 | ||||
9 | ||||
10 | ||||
11 |
第一页
上一页
下一页
最后一页
第页/共页
// JavaScript Document By lishewen
var theTable = document.getElementById("tablelsw");
var totalPage = document.getElementById("spanTotalPage");
var pageNum = document.getElementById("spanPageNum");
var spanPre = document.getElementById("spanPre");
var spanNext = document.getElementById("spanNext");
var spanFirst = document.getElementById("spanFirst");
var spanLast = document.getElementById("spanLast");
var totalPaget = document.getElementById("spanTotalPaget");
var pageNumt = document.getElementById("spanPageNumt");
var spanPret = document.getElementById("spanPret");
var spanNextt = document.getElementById("spanNextt");
var spanFirstt = document.getElementById("spanFirstt");
var spanLastt = document.getElementById("spanLastt");
var numberRowsInTable = theTable.rows.length;
var pageSize = 4;
var page = 1;
//下一页
function next(){
hideTable();
currentRow = pageSize * page;
maxRow = currentRow + pageSize;
if ( maxRow > numberRowsInTable ) maxRow = numberRowsInTable;
for ( var i = currentRow; i< maxRow; i++ ){
theTable.rows[i].style.display = '';
}
page++;
if ( maxRow == numberRowsInTable ) { nextText(); lastText(); }
showPage();
preLink();
firstLink();
}
//上一页
function pre(){
hideTable();
page--;
currentRow = pageSize * page;
maxRow = currentRow - pageSize;
if ( currentRow > numberRowsInTable ) currentRow = numberRowsInTable;
for ( var i = maxRow; i< currentRow; i++ ){
theTable.rows[i].style.display = '';
}
if ( maxRow == 0 ){ preText(); firstText(); }
showPage();
nextLink();
lastLink();
}
//第一页
function first(){
hideTable();
page = 1;
for ( var i = 0; i
theTable.rows[i].style.display = '';
}
showPage();
preText();
nextLink();
lastLink();
}
//最后一页
function last(){
hideTable();
page = pageCount();
currentRow = pageSize * (page - 1);
for ( var i = currentRow; i
theTable.rows[i].style.display = '';
}
showPage();
preLink();
nextText();
firstLink();
}
function hideTable(){
for ( var i = 0; i
theTable.rows[i].style.display = 'none';
}
}
function showPage(){
pageNum.innerHTML = page;
pageNumt.innerHTML = page;
}
//总共页数
function pageCount(){
var count = 0;
if ( numberRowsInTable%pageSize != 0 ) count = 1;
return parseInt(numberRowsInTable/pageSize) + count;
}
//显示链接
function preLink(){ spanPre.innerHTML = "上一页"; spanPret.innerHTML = "上一页";}
function preText(){ spanPre.innerHTML = "上一页"; spanPret.innerHTML = "上一页"; }
function nextLink(){ spanNext.innerHTML = "下一页"; spanNextt.innerHTML = "下一页";}
function nextText(){ spanNext.innerHTML = "下一页"; spanNextt.innerHTML = "下一页";}
function firstLink(){ spanFirst.innerHTML = "第一页"; spanFirstt.innerHTML = "第一页";}
function firstText(){ spanFirst.innerHTML = "第一页"; spanFirstt.innerHTML = "第一页";}
function lastLink(){ spanLast.innerHTML = "最后一页"; spanLastt.innerHTML = "最后一页";}
function lastText(){ spanLast.innerHTML = "最后一页"; spanLastt.innerHTML = "最后一页";}
//隐藏表格
function hide(){
for ( var i = pageSize; i
theTable.rows[i].style.display = 'none';
}
totalPage.innerHTML = pageCount();
pageNum.innerHTML = '1';
totalPaget.innerHTML = pageCount();
pageNumt.innerHTML = '1';
nextLink();
lastLink();
}
hide();
html的带分页的表格写法,Html表格分页相关推荐
- 计算机如何分页打印,[计算机]Excel表格如何分页打印、自动分页、取消分页等技巧.doc...
[计算机]Excel表格如何分页打印.自动分页.取消分页等技巧.doc 上传人:max****ui 文档编号:13468786 上传时间:2019-01-18 格式:DOC 页数:5 大小:334.1 ...
- [原创]ExtAspNet秘密花园(十六) — 表格之排序与分页
排序和分页是表格必备的两个重要功能,本章会详细阐述如何在ExtAspNet中实现这两个功能. 排序 首先来看一个排序的例子,ASPX标签如下: 1: <ext:Grid ID="Gri ...
- html制作固定列的表格,带固定列的简单HTML表格
我期望中间列的宽度是左右两列的3倍. 200(从左到右)的宽度看起来好像按照200,200,600的顺序指定宽度,而不是按照200,600,200的规定出现.换句话说,最后一列的宽度是前两个宽度的3倍 ...
- 盘点几种数据库的分页SQL的写法(转)
Data序列--盘点几种数据库的分页SQL的写法 http://www.cnblogs.com/fireasy/archive/2013/04/10/3013088.html 转载于:https:// ...
- uniapp 展示表格并且前端实现分页
实现效果 实现表格: ...
- Vue+Element表格动态列+表格分页
LayUI表格动态列及分页LayUI+JavaScript表格动态列+表格分页 效果如图: 代码: 引用JQuery,Vue,Element等文件,换成自己的路径 <!DOCTYPE html& ...
- 计算机表格怎么取消分页,Excel表格自动分页、取消分页等技巧 专家详解
Excel是一款功能强大的软件.利用Excel制作表格时,有时我们需要对表格进行分页打印.那么Excel表格如何自动分页.取消分页呢?下面小编为你带来解答. 工具/材料 Excel2010 操作方法 ...
- html5怎么给表格设置分页,如何让HTML5的表格支持后台排序与分页
如何让HTML5的表格支持后台排序与分页 TWaver HTML5发布已有一段时间,使用的客户也是逐渐增加,于是我也迫不及待地申请了一个试用版来写一个小网页,最近正在写到数据查询,表格显示的功能.表格 ...
- iview 带有Page分页组件集合的复杂表格
前言: 这里的表格数据为通过axios获取到的后端的数据,如何将获取到的数据显示在前端,并且配合使用iview 的Page组件实现带有分页组件集合的复杂表格.效果如下: 1.首先既然是使用iview的 ...
最新文章
- linux内存使用统计,Linux 中free命令检查内存使用情况
- DELPHI listbox去除重复项
- 爬取CSDN最新月份所写的文章的最高阅读量文章(以及统计整个月所写的文章的阅读量的累积和)
- java exception子类_Java异常 Exception类及其子类(实例讲解)
- JAVA编码(27)——执行批量导入Excel文件并进行解析
- 设计模式——函数的写作使用外卖模式
- AI 崛起?科技公司却偷偷用人类做机器人的工作!
- ml5.js入门二(介绍)+featureExtractor特征提取器
- pythonds18b20_[python]树莓派第一课之DS18B20温度传感器
- TLC5615 产生频率可变的正弦波
- oracle全局索引改成本地索引,解析一个通过添加本地分区索引提高SQL性能的案例...
- 心法利器[53] | 数据增强的现实应用思考
- 为什么事件的最早发生时间是源点到顶点的最长路径长度?(关键路径详解)
- 使用三层思想完成商品管理系统
- Realsense T265简单测试
- [ZZ]终极工程师的造诣 – 不迷信高科技的乔布斯给我们的启示
- 【洛谷3110】【USACO14DEC】驮运Piggy Back
- PPT文本输入控件如何自动换行
- 数据相关的在职研究生_读金融在职研究生有用吗?
- python catia 接口_如何使用自己创建的CATIA V5自动化接口与Python?
热门文章
- nmap在kali的使用方法和常见命令(入门)
- python一年收入_你的年收入过5万了吗?数据科学家的Python模块和包
- string_view理解与用法(二)
- delimited mysql_在MySQL中存儲逗號分隔的數據
- ueditor html中使用方法,vue集成百度UEditor富文本编辑器使用教程
- webpack3 css,媒体查询不能使用CSS /样式加载器和Webpack3
- python init函数可以外部调用么,如何从python类中调用外部函数
- 实现call和apply
- Effective Dart 文档注释在Flutter项目中的实践
- Mac下Nginx、PHP、MySQL 和 PHP-fpm安装配置