无标题文档

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 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 < pageSize; i++) {

theTable.rows[i].style.display = '';

}

showPage();

preText();

nextLink();

lastLink();

}

//最后一页

function last() {

hideTable();

page = pageCount();

currentRow = pageSize * (page - 1);

for (var i = currentRow; i < numberRowsInTable; i++) {

theTable.rows[i].style.display = '';

}

showPage();

preLink();

nextText();

firstLink();

}

function hideTable() {

for (var i = 0; i < numberRowsInTable; i++) {

theTable.rows[i].style.display = 'none';

}

}

function showPage() {

pageNum.innerHTML = page;

}

//总共页数

function pageCount() {

var count = 0;

if (numberRowsInTable % pageSize != 0) count = 1;

return parseInt(numberRowsInTable / pageSize) + count;

}

//显示链接

function preLink() { spanPre.innerHTML = "上一页"; }

function preText() { spanPre.innerHTML = "上一页"; }

function nextLink() { spanNext.innerHTML = "下一页"; }

function nextText() { spanNext.innerHTML = "下一页"; }

function firstLink() { spanFirst.innerHTML = "首页"; }

function firstText() { spanFirst.innerHTML = "首页"; }

function lastLink() { spanLast.innerHTML = "尾页"; }

function lastText() { spanLast.innerHTML = "尾页"; }

//隐藏表格

function hide() {

for (var i = pageSize; i < numberRowsInTable; i++) {

theTable.rows[i].style.display = 'none';

}

totalPage.innerHTML = pageCount();

pageNum.innerHTML = '1';

nextLink();

lastLink();

}

hide();

html做成分页,静态html分页相关推荐

  1. [转载]ExtJS中grid按照中文拼音首字母排序、改变行背景、列背景、静态数据分页不再困难...

    代码 1 本示例主要使用到了静态数据分页 Ext.data.PagingMemoryProxy组件.Ext.PagingToolbar分页条.viewConfig的getRowClass 方法.列co ...

  2. HTML 的静态网页分页样式

    HTML 的静态网页分页样式 page.css代码如下: #page-normal{color:#ff9655;text-align:center;font-size:0px; }#page-norm ...

  3. 爬取静态页面分页内容

    静态准备爬取静态页面分页知识,因为写博客现在目的是当笔记一样,当学过知识梳理一遍,如果有观众,不喜勿喷,不足之处可以多多指点 工具:python3.6 操作系统:linux 浏览器:谷歌浏览器 创建项 ...

  4. Vue3 element-ui实现Pagination分页组件--封装分页

    什么是Pagination分页组件? 在 B 端的 web 开发中,分页组件或者叫分页器,是较为常用的控件之一,通常配合表格或列表,实现数据量大的情况下,分页拆解数据的功能. 1.scrollTo和滚 ...

  5. Tabulator本地分页和远程分页

    如果您更喜欢将数据显示为页面而不是滚动列表 Tabulator 也可以帮助您. 有两种可用的分页形式.本地分页,其中 Tabulator 将解析所有可用数据,然后对该数据集进行分页.或者远程分页,其中 ...

  6. html layui分页代码,layUI分页处理--乐字节前端

    分页 ​ 模块加载名称:laypage 快速使用 ​ laypage 的使用非常简单,指向一个用于存放分页的容器,通过服务端得到一些初始值,即可完成分页渲染. 分页 layui.use('laypag ...

  7. php分页不跳转,分页源代码,分页时上一页下一页不显示,但可以跳转

    分页源代码,分页时上一页下一页不显示,但可以跳转 $sql="select * from product where pronum like'%$key%' or pdes like '%$ ...

  8. vue分页+spring boot +分页插件pagehelper

    vue分页+spring boot +分页插件pagehelper https://blog.csdn.net/baidu_38603246/article/details/98854013

  9. 数据分页 THINKPHP3.2 分页 三种分页方法

    数据分页复制本页链接opensns 通常在数据查询后都会对数据集进行分页操作,ThinkPHP也提供了分页类来对数据分页提供支持. 下面是数据分页的两种示例.第一种:利用Page类和limit方法$U ...

  10. bootstraptable控制分页_bootstrap table分页(前后端两种方式实现)

    bootstrap table分页的两种方式: 前端分页:一次性从数据库查询所有的数据,在前端进行分页(数据量小的时候或者逻辑处理不复杂的话可以使用前端分页) 服务器分页:每次只查询当前页面加载所需要 ...

最新文章

  1. php倒放,神奇创意怎么让视频倒着播放 还有减速或加速播放
  2. 深度学习debug沉思录
  3. 工作中linux定时任务的设置及相关配置
  4. phpFastCache
  5. 用vs2008打开vs2012项目
  6. 我的学习之路_第十六章_xml
  7. Celery的实践指南
  8. 公众平台模板消息所在行业_第三方工具微信公众号模板消息群发如何操作?
  9. Linux 系统中 Redis 的安装及其使用
  10. IOS开发之Bug--遇到一个类型不确定的bug
  11. Project FreeEIM 2.0:重现失落的飞鸽传书
  12. Python+tkinter实现超时无键盘操作自动退出
  13. 软测基础相关知识回顾
  14. 第二章:循环结构程序设计
  15. 枚举smb共享期间出错_大量三星手机黑屏系统崩溃,客服:闰4月计算出错
  16. nexus下载安装和创建maven私库
  17. Proximal Gradient for LASSO
  18. 一月集 一个会写诗的程序员2019
  19. 408计算机网络04-HTTP 长连接短连接使用场景是什么
  20. Windows 7或Vista Explorer的“上”键盘快捷键

热门文章

  1. 关于FAST迅捷FWR310无线路由器桥接移动光猫吉比特网关的问题
  2. 当代中国社会划分为十大阶层
  3. css判断手机端还是pc端,JavaScript判断设备是手机端还是PC端,并加载不同的css/js文件...
  4. linux+极点五笔输入法,CentOS系统安装极点五笔输入法
  5. javascript连接数据库
  6. MAXScript入门
  7. python身份证区域分割_python 身份证归属地解析
  8. Linux修改MySQL数据库密码
  9. 使用python生成正弦光栅的代码示例,包括竖直光栅,水平光栅,圆光栅
  10. win10录屏_不需要第三方软件,看看WIN10自带的几个强大的截图、录屏工具