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 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分页相关推荐
- [转载]ExtJS中grid按照中文拼音首字母排序、改变行背景、列背景、静态数据分页不再困难...
代码 1 本示例主要使用到了静态数据分页 Ext.data.PagingMemoryProxy组件.Ext.PagingToolbar分页条.viewConfig的getRowClass 方法.列co ...
- HTML 的静态网页分页样式
HTML 的静态网页分页样式 page.css代码如下: #page-normal{color:#ff9655;text-align:center;font-size:0px; }#page-norm ...
- 爬取静态页面分页内容
静态准备爬取静态页面分页知识,因为写博客现在目的是当笔记一样,当学过知识梳理一遍,如果有观众,不喜勿喷,不足之处可以多多指点 工具:python3.6 操作系统:linux 浏览器:谷歌浏览器 创建项 ...
- Vue3 element-ui实现Pagination分页组件--封装分页
什么是Pagination分页组件? 在 B 端的 web 开发中,分页组件或者叫分页器,是较为常用的控件之一,通常配合表格或列表,实现数据量大的情况下,分页拆解数据的功能. 1.scrollTo和滚 ...
- Tabulator本地分页和远程分页
如果您更喜欢将数据显示为页面而不是滚动列表 Tabulator 也可以帮助您. 有两种可用的分页形式.本地分页,其中 Tabulator 将解析所有可用数据,然后对该数据集进行分页.或者远程分页,其中 ...
- html layui分页代码,layUI分页处理--乐字节前端
分页 模块加载名称:laypage 快速使用 laypage 的使用非常简单,指向一个用于存放分页的容器,通过服务端得到一些初始值,即可完成分页渲染. 分页 layui.use('laypag ...
- php分页不跳转,分页源代码,分页时上一页下一页不显示,但可以跳转
分页源代码,分页时上一页下一页不显示,但可以跳转 $sql="select * from product where pronum like'%$key%' or pdes like '%$ ...
- vue分页+spring boot +分页插件pagehelper
vue分页+spring boot +分页插件pagehelper https://blog.csdn.net/baidu_38603246/article/details/98854013
- 数据分页 THINKPHP3.2 分页 三种分页方法
数据分页复制本页链接opensns 通常在数据查询后都会对数据集进行分页操作,ThinkPHP也提供了分页类来对数据分页提供支持. 下面是数据分页的两种示例.第一种:利用Page类和limit方法$U ...
- bootstraptable控制分页_bootstrap table分页(前后端两种方式实现)
bootstrap table分页的两种方式: 前端分页:一次性从数据库查询所有的数据,在前端进行分页(数据量小的时候或者逻辑处理不复杂的话可以使用前端分页) 服务器分页:每次只查询当前页面加载所需要 ...
最新文章
- php倒放,神奇创意怎么让视频倒着播放 还有减速或加速播放
- 深度学习debug沉思录
- 工作中linux定时任务的设置及相关配置
- phpFastCache
- 用vs2008打开vs2012项目
- 我的学习之路_第十六章_xml
- Celery的实践指南
- 公众平台模板消息所在行业_第三方工具微信公众号模板消息群发如何操作?
- Linux 系统中 Redis 的安装及其使用
- IOS开发之Bug--遇到一个类型不确定的bug
- Project FreeEIM 2.0:重现失落的飞鸽传书
- Python+tkinter实现超时无键盘操作自动退出
- 软测基础相关知识回顾
- 第二章:循环结构程序设计
- 枚举smb共享期间出错_大量三星手机黑屏系统崩溃,客服:闰4月计算出错
- nexus下载安装和创建maven私库
- Proximal Gradient for LASSO
- 一月集 一个会写诗的程序员2019
- 408计算机网络04-HTTP 长连接短连接使用场景是什么
- Windows 7或Vista Explorer的“上”键盘快捷键
热门文章
- 关于FAST迅捷FWR310无线路由器桥接移动光猫吉比特网关的问题
- 当代中国社会划分为十大阶层
- css判断手机端还是pc端,JavaScript判断设备是手机端还是PC端,并加载不同的css/js文件...
- linux+极点五笔输入法,CentOS系统安装极点五笔输入法
- javascript连接数据库
- MAXScript入门
- python身份证区域分割_python 身份证归属地解析
- Linux修改MySQL数据库密码
- 使用python生成正弦光栅的代码示例,包括竖直光栅,水平光栅,圆光栅
- win10录屏_不需要第三方软件,看看WIN10自带的几个强大的截图、录屏工具