静态html分页
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<table width="500" border="0" cellpadding="5" cellspacing="1" bgcolor="#999999">
<tr>
<th colspan="5">lishewen</th>
</tr>
<tbody id="tablelsw">
<tr>
<td bgcolor="#FFFFFF">1</td>
<td bgcolor="#FFFFFF">算神</td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td bgcolor="#FFFFFF">2</td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td bgcolor="#FFFFFF">3</td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td bgcolor="#FFFFFF">4</td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td bgcolor="#FFFFFF">5</td>
<td bgcolor="#FFFFFF">黎摄文</td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td bgcolor="#FFFFFF">6</td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td bgcolor="#FFFFFF">7</td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td bgcolor="#FFFFFF">8</td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td bgcolor="#FFFFFF">9</td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td bgcolor="#FFFFFF">10</td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td bgcolor="#FFFFFF">11</td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
</tbody>
</table>
<span id="spanFirst">首页</span> <span id="spanPre">上一页</span> <span id="spanNext">下一页</span> <span id="spanLast">尾页</span> 第<span id="spanPageNum"></span>页/共<span id="spanTotalPage"></span>页
</body>
</html>
<script>
// 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 = "<a href='javascript:pre();'>上一页</a>";}
function preText(){ spanPre.innerHTML = "上一页";}
function nextLink(){ spanNext.innerHTML = "<a href='javascript:next();'>下一页</a>";}
function nextText(){ spanNext.innerHTML = "下一页";}
function firstLink(){ spanFirst.innerHTML = "<a href='javascript:first();'>首页</a>";}
function firstText(){ spanFirst.innerHTML = "首页";}
function lastLink(){ spanLast.innerHTML = "<a href='javascript:last();'>尾页</a>";}
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();
</script>
静态html分页的更多相关文章
- 【js】使用javascript 实现静态网页分页效果
<!DOCTYPE html> <html> <head> <meta http-equiv="content-Type" content ...
- 静态页分页功能js代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js静态数据分页展示
拿vue做示例 首先定义data data() { return { tableData: [], // 当前页的数据,用于给表格展示用的 tableDataAll: [], // 需要拿来分页的总数 ...
- Vue实现静态数据分页
<div style="padding:20px;" id="app"> <div class="panel panel-prima ...
- 织梦DeDeCms列表分页和内容页分页错位解决办法
文章页分页代码在这里/include/arc.archives.class.php列表页分页/include/arc.listview.class.php 很多入门的站长会碰到这样的问题,织梦的通病, ...
- dedecms_分页技术
<ul>{dede:list pagesize='30'} <li><a href="[field:arcurl/]">[field:title ...
- dedecms讲解－arc.listview.class.php分析，列表页展示
./plus/list.php - 动态展示栏目列表页(也可能是频道封面)arc.listview.class.php 是dedecms的列表页的相关处理类__construct() ...
- DEDECMS之二 如何修改模板页
使用织梦系统最经常是为了仿站,那么模板应该怎么改? 这里主要谈谈关于比较常用的几个模板页 网站主页.列表页.内容页.栏目的调用 1.主页模板 常用组合方法:index.htm + head.htm + ...
- dedecms5.7文章实现阅读全文功能二次开发
阅读全文功能其实在很多的流行站点都有的,比如网易,新浪等,随着文章内容的增加,当一个页面有多个分页的时候,就会显示出这个“在本页阅读全文”的链接,点击这个链接之后,出现的,将是这篇文章以没有分页出现的 ...
随机推荐
- javaScript中的this关键字解析
this是JavaScript中的关键字之一,在编写程序的时候经常会用到,正确的理解和使用关键字this尤为重要.接下来,笔者就从作用域的角度粗谈下自己对this关键字的理解,希望能给到大家一些启示, ...
- Sencha Touch2 -- 11.1：定义具有关联关系的模型
在Sencha Touch2.0中,可以定义不同模型之间的关联关系.例如,在开发博客网站的时候,可以首先定义用户(User)模型,然后为用户定义文章(Article)模型.一个用户可以发表多篇文章,因 ...
- 转：Linux下使用Nginx搭建简单图片服务器
最近经常有人问图片上传怎么做,有哪些方案做比较好,也看到过有关于上传图片的做法,但是都不是最好的,今天再这里简单讲一下Nginx实现上传图片以及图片服务器的大致理念. 如果是个人项目或者企业小项目,仅 ...
- centos 防火墙关闭/开启
从配置菜单关闭防火墙是不起作用的,索性在安装的时候就不要装防火墙查看防火墙状态:/etc/init.d/iptables status暂时关闭防火墙:/etc/init.d/iptables stop ...
- POJ1286 Necklace of Beads
Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 8263 Accepted: 3452 Description Beads ...
- 【Atcoder】AGC 016 C - +/- Rectangle
[题意]给定大矩阵的边长H和W,给每格填数(<=|10^9|),要求大矩形总和为正数,而每个h*w的小矩形总和为负数,求构造方式. [算法]数学 [题解]结论题. ★当h|H&& ...
- mysql 等 null 空值排序
[sqlserver]: sqlserver 认为 null 最小. 升序排列:null 值默认排在最前. 要想排后面,则:order by case when col is null then 1 ...
- bzoj 2705 数学 欧拉函数
首先因为N很大,我们几乎不能筛任何东西 那么考虑设s(p)为 gcd(i,n)=p 的个数,显然p|n的时候才有意义 因为i与n的gcd肯定是n的因数,所以那么可得ans=Σ(p*s(p)) 那么对于 ...
- Web Application Vulnerabilities and Potential Problem Due to Bad Design
web应用设计中不安全的设计及潜在的风险: REF: https://msdn.microsoft.com/en-us/library/ff648647.aspx
- 教你从头到尾利用DQN自动玩flappy bird（全程命令提示，GPU+CPU版）【转】
转自:http://blog.csdn.net/v_JULY_v/article/details/52810219?locationNum=3&fps=1 目录(?)[-] 教你从头到尾利用D ...