<!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">&nbsp;</td>   
    <td bgcolor="#FFFFFF">&nbsp;</td>   
    <td bgcolor="#FFFFFF">&nbsp;</td>   
  </tr>   
  <tr>   
    <td bgcolor="#FFFFFF">2</td>   
    <td bgcolor="#FFFFFF">&nbsp;</td>   
    <td bgcolor="#FFFFFF">&nbsp;</td>   
    <td bgcolor="#FFFFFF">&nbsp;</td>   
    <td bgcolor="#FFFFFF">&nbsp;</td>   
  </tr>   
  <tr>   
    <td bgcolor="#FFFFFF">3</td>   
    <td bgcolor="#FFFFFF">&nbsp;</td>   
    <td bgcolor="#FFFFFF">&nbsp;</td>   
    <td bgcolor="#FFFFFF">&nbsp;</td>   
    <td bgcolor="#FFFFFF">&nbsp;</td>   
  </tr>   
  <tr>   
    <td bgcolor="#FFFFFF">4</td>   
    <td bgcolor="#FFFFFF">&nbsp;</td>   
    <td bgcolor="#FFFFFF">&nbsp;</td>   
    <td bgcolor="#FFFFFF">&nbsp;</td>   
    <td bgcolor="#FFFFFF">&nbsp;</td>   
  </tr>   
  <tr>   
    <td bgcolor="#FFFFFF">5</td>   
    <td bgcolor="#FFFFFF">黎摄文</td>   
    <td bgcolor="#FFFFFF">&nbsp;</td>   
    <td bgcolor="#FFFFFF">&nbsp;</td>   
    <td bgcolor="#FFFFFF">&nbsp;</td>   
  </tr>   
  <tr>   
    <td bgcolor="#FFFFFF">6</td>   
    <td bgcolor="#FFFFFF">&nbsp;</td>   
    <td bgcolor="#FFFFFF">&nbsp;</td>   
    <td bgcolor="#FFFFFF">&nbsp;</td>   
    <td bgcolor="#FFFFFF">&nbsp;</td>   
  </tr>   
  <tr>   
    <td bgcolor="#FFFFFF">7</td>   
    <td bgcolor="#FFFFFF">&nbsp;</td>   
    <td bgcolor="#FFFFFF">&nbsp;</td>   
    <td bgcolor="#FFFFFF">&nbsp;</td>   
    <td bgcolor="#FFFFFF">&nbsp;</td>   
  </tr>   
  <tr>   
    <td bgcolor="#FFFFFF">8</td>   
    <td bgcolor="#FFFFFF">&nbsp;</td>   
    <td bgcolor="#FFFFFF">&nbsp;</td>   
    <td bgcolor="#FFFFFF">&nbsp;</td>   
    <td bgcolor="#FFFFFF">&nbsp;</td>   
  </tr>   
  <tr>   
    <td bgcolor="#FFFFFF">9</td>   
    <td bgcolor="#FFFFFF">&nbsp;</td>   
    <td bgcolor="#FFFFFF">&nbsp;</td>   
    <td bgcolor="#FFFFFF">&nbsp;</td>   
    <td bgcolor="#FFFFFF">&nbsp;</td>   
  </tr>   
  <tr>   
    <td bgcolor="#FFFFFF">10</td>   
    <td bgcolor="#FFFFFF">&nbsp;</td>   
    <td bgcolor="#FFFFFF">&nbsp;</td>   
    <td bgcolor="#FFFFFF">&nbsp;</td>   
    <td bgcolor="#FFFFFF">&nbsp;</td>   
  </tr>   
  <tr>   
    <td bgcolor="#FFFFFF">11</td>   
    <td bgcolor="#FFFFFF">&nbsp;</td>   
    <td bgcolor="#FFFFFF">&nbsp;</td>   
    <td bgcolor="#FFFFFF">&nbsp;</td>   
    <td bgcolor="#FFFFFF">&nbsp;</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分页的更多相关文章

  1. 【js】使用javascript 实现静态网页分页效果

    <!DOCTYPE html> <html> <head> <meta http-equiv="content-Type" content ...

  2. 静态页分页功能js代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. js静态数据分页展示

    拿vue做示例 首先定义data data() { return { tableData: [], // 当前页的数据,用于给表格展示用的 tableDataAll: [], // 需要拿来分页的总数 ...

  4. Vue实现静态数据分页

    <div style="padding:20px;" id="app"> <div class="panel panel-prima ...

  5. 织梦DeDeCms列表分页和内容页分页错位解决办法

    文章页分页代码在这里/include/arc.archives.class.php列表页分页/include/arc.listview.class.php 很多入门的站长会碰到这样的问题,织梦的通病, ...

  6. dedecms_分页技术

    <ul>{dede:list pagesize='30'} <li><a href="[field:arcurl/]">[field:title ...

  7. dedecms讲解－arc.listview.class.php分析，列表页展示

    ./plus/list.php - 动态展示栏目列表页(也可能是频道封面)arc.listview.class.php 是dedecms的列表页的相关处理类__construct()         ...

  8. DEDECMS之二 如何修改模板页

    使用织梦系统最经常是为了仿站,那么模板应该怎么改? 这里主要谈谈关于比较常用的几个模板页 网站主页.列表页.内容页.栏目的调用 1.主页模板 常用组合方法:index.htm + head.htm + ...

  9. dedecms5.7文章实现阅读全文功能二次开发

    阅读全文功能其实在很多的流行站点都有的,比如网易,新浪等,随着文章内容的增加,当一个页面有多个分页的时候,就会显示出这个“在本页阅读全文”的链接,点击这个链接之后,出现的,将是这篇文章以没有分页出现的 ...

随机推荐

  1. [06] 盒模型 + auto 居中 + 垂直合并

    1.盒模型 盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型. 标准(W3C)模型中:CSS中的宽(width) = 内容 (content)的宽 CSS中的宽(width) = 内容( ...

  2. HDU 5685 Problem A | 快速幂+逆元

    Problem A Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total S ...

  3. 51nod数字1的数量

    这道题瞎jbyy了很久 方法可能很奇怪... #include<cstdio> #include<cstring> #include<algorithm> #inc ...

  4. 【CF1027F】Session in BSU（dsu，基环树）

    题意:给出n场考试,每场考试有2天可以通过(第ai与bi天).每天最多参加一场考试,现在要求所有考试全部通过的最小天数 n<=1e6,1<=a[i]<b[i]<1e9 思路:F ...

  5. 2017年上海金马五校程序设计竞赛：Problem C : Count the Number （模拟）

    Description Given n numbers, your task is to insert '+' or '-' in front of each number to construct ...

  6. 对象是否拥有某个属性，in和for in以及object.hasOwnProperty('×××')的异同，以及Object.defineProperty()，Object.keys()，Object.getOwnPropertyNames()的用法

    1.在某个对象是否拥有某个属性,判断的方法有很多,常用的方法就是object.hasOwnProperty('×××'),这个方法是不包括对象原型链上的方法的,举个例子: var obj = { na ...

  7. bzoj 4569 [Scoi2016]萌萌哒 并查集 + ST表

    题目链接 Description 一个长度为\(n\)的大数,用\(S_1S_2S_3...S_n\)表示,其中\(S_i\)表示数的第\(i\)位,\(S_1\)是数的最高位,告诉你一些限制条件,每 ...

  8. UVA 10385 Duathlon

    Problem HDuathlonInput: standard inputOutput: standard outputTime Limit: 15 seconds A duathlon is a ...

  9. 无法解析的DNS服务地址

    如果DNS服务器地址设置不当,可能会导致网速慢.出现弹窗广告.网址打不开.打开不是自己想要的网站等一系列问题. 请参考: DNS的作用是什么,怎样设置DNS? https://jingyan.baid ...

  10. 我的一次安装oracle的过程

    1.在装oracle之前,先安装.net3.5 2.然后正常安装oracle,一直next 3.装完oracle后,安装plsql dev工具,打开工具,发现没有connect as,是需要进行一些配 ...