<!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. struts2学习笔记（二）

    一. 国际化的目标 1). 如何配置国际化资源文件 I. Action 范围资源文件: 在Action类文件所在的路径建立名为 ActionName_language_country.properti ...

  2. [洛谷P1382] 楼房

    题目描述 地平线(x轴)上有n个矩(lou)形(fang),用三个整数h[i],l[i],r[i]来表示第i个矩形:矩形左下角为(l[i],0),右上角为(r[i],h[i]).地平线高度为0.在轮廓 ...

  3. android View实现变暗效果

    android项目中做一个默认图片变暗,有焦点时变亮的效果.相信大家都能各种办法,各种手段很容易的实现这个效果.这里记录下作者实现这个效果的过程及遇到的问题,仅供参考.见下图(注:因为是eclipse ...

  4. DotNETCore 学习笔记 配置

    Configuration var builder = new ConfigurationBuilder(); builder.AddInMemoryCollection(); var config ...

  5. Invalidate()（转）

    原文转自 http://m.blog.csdn.net/blog/piaopiaopiaopiaopiao/41521211 使用Invalidate(TRUE)函数时,它会向消息队列中添加了WM_E ...

  6. redis有string，hash,list,sets.zsets几种数据类型

    1.string数据类型 可包含任何数据,是二进制安全的,比如图片或者序列化的对象set key valueset name hkset age 20get name 得到"hk" ...

  7. System and method for parallel execution of memory transactions using multiple memory models, including SSO, TSO, PSO and RMO

    A data processor supports the use of multiple memory models by computer programs. At a device extern ...

  8. P2654 原核生物培养

    P2654 原核生物培养 题目描述 W教授最近正在研究一种原核生物,这种生物的生长方式很奇特,只能通过吃掉同类而生长.两个该种生物相遇,较大质量的会把较小的吃掉(相同的话就看RP了),吃掉后较大的生物 ...

  9. slatstack Master的配置

    Salt系统非常简单并且易于配置,Salt系统的两个组件都有各自的配置文件.如"salt-master"是通过主配置文件来配置的,"salt-minion"是通 ...

  10. [libgdx游戏开发教程]使用Libgdx进行游戏开发(9)-场景过渡

    本章主要讲解场景过渡效果的使用.这里将用到Render to Texture(RTT)技术. Libgdx提供了一个类,实现了各种常见的插值算法,不仅适合过渡效果,也适合任意特定行为. 在本游戏里面, ...