无标题文档

第一页 上一页 下一页 最后一页 第页/共页

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表格分页相关推荐

  1. 计算机如何分页打印,[计算机]Excel表格如何分页打印、自动分页、取消分页等技巧.doc...

    [计算机]Excel表格如何分页打印.自动分页.取消分页等技巧.doc 上传人:max****ui 文档编号:13468786 上传时间:2019-01-18 格式:DOC 页数:5 大小:334.1 ...

  2. [原创]ExtAspNet秘密花园(十六) — 表格之排序与分页

    排序和分页是表格必备的两个重要功能,本章会详细阐述如何在ExtAspNet中实现这两个功能. 排序 首先来看一个排序的例子,ASPX标签如下: 1: <ext:Grid ID="Gri ...

  3. html制作固定列的表格,带固定列的简单HTML表格

    我期望中间列的宽度是左右两列的3倍. 200(从左到右)的宽度看起来好像按照200,200,600的顺序指定宽度,而不是按照200,600,200的规定出现.换句话说,最后一列的宽度是前两个宽度的3倍 ...

  4. 盘点几种数据库的分页SQL的写法(转)

    Data序列--盘点几种数据库的分页SQL的写法 http://www.cnblogs.com/fireasy/archive/2013/04/10/3013088.html 转载于:https:// ...

  5. uniapp 展示表格并且前端实现分页

    实现效果 实现表格:                                                                                          ...

  6. Vue+Element表格动态列+表格分页

    LayUI表格动态列及分页LayUI+JavaScript表格动态列+表格分页 效果如图: 代码: 引用JQuery,Vue,Element等文件,换成自己的路径 <!DOCTYPE html& ...

  7. 计算机表格怎么取消分页,Excel表格自动分页、取消分页等技巧 专家详解

    Excel是一款功能强大的软件.利用Excel制作表格时,有时我们需要对表格进行分页打印.那么Excel表格如何自动分页.取消分页呢?下面小编为你带来解答. 工具/材料 Excel2010 操作方法 ...

  8. html5怎么给表格设置分页,如何让HTML5的表格支持后台排序与分页

    如何让HTML5的表格支持后台排序与分页 TWaver HTML5发布已有一段时间,使用的客户也是逐渐增加,于是我也迫不及待地申请了一个试用版来写一个小网页,最近正在写到数据查询,表格显示的功能.表格 ...

  9. iview 带有Page分页组件集合的复杂表格

    前言: 这里的表格数据为通过axios获取到的后端的数据,如何将获取到的数据显示在前端,并且配合使用iview 的Page组件实现带有分页组件集合的复杂表格.效果如下: 1.首先既然是使用iview的 ...

最新文章

  1. linux内存使用统计,Linux 中free命令检查内存使用情况
  2. DELPHI listbox去除重复项
  3. 爬取CSDN最新月份所写的文章的最高阅读量文章(以及统计整个月所写的文章的阅读量的累积和)
  4. java exception子类_Java异常 Exception类及其子类(实例讲解)
  5. JAVA编码(27)——执行批量导入Excel文件并进行解析
  6. 设计模式——函数的写作使用外卖模式
  7. AI 崛起?科技公司却偷偷用人类做机器人的工作!
  8. ml5.js入门二(介绍)+featureExtractor特征提取器
  9. pythonds18b20_[python]树莓派第一课之DS18B20温度传感器
  10. TLC5615 产生频率可变的正弦波
  11. oracle全局索引改成本地索引,解析一个通过添加本地分区索引提高SQL性能的案例...
  12. 心法利器[53] | 数据增强的现实应用思考
  13. 为什么事件的最早发生时间是源点到顶点的最长路径长度?(关键路径详解)
  14. 使用三层思想完成商品管理系统
  15. Realsense T265简单测试
  16. [ZZ]终极工程师的造诣 – 不迷信高科技的乔布斯给我们的启示
  17. 【洛谷3110】【USACO14DEC】驮运Piggy Back
  18. PPT文本输入控件如何自动换行
  19. 数据相关的在职研究生_读金融在职研究生有用吗?
  20. python catia 接口_如何使用自己创建的CATIA V5自动化接口与Python?

热门文章

  1. nmap在kali的使用方法和常见命令(入门)
  2. python一年收入_你的年收入过5万了吗?数据科学家的Python模块和包
  3. string_view理解与用法(二)
  4. delimited mysql_在MySQL中存儲逗號分隔的數據
  5. ueditor html中使用方法,vue集成百度UEditor富文本编辑器使用教程
  6. webpack3 css,媒体查询不能使用CSS /样式加载器和Webpack3
  7. python init函数可以外部调用么,如何从python类中调用外部函数
  8. 实现call和apply
  9. Effective Dart 文档注释在Flutter项目中的实践
  10. Mac下Nginx、PHP、MySQL 和 PHP-fpm安装配置