zoukankan      html  css  js  c++  java
  • 静态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">&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>

  • 相关阅读:
    Solution -「ARC 101D」「AT4353」Robots and Exits
    Solution -「多校联训」轮回
    Solution -「多校联训」种蘑菇
    Solution -「多校联训」染色
    luoguP4389 完全背包计数
    Js 之notification浏览器桌面通知
    Linux 之shell脚本调用另一个shell脚本
    Linux 之开机自启动脚本
    Js 之简单ajax封装
    PHP 之phpsocket.io客户端主动推送给服务器
  • 原文地址:https://www.cnblogs.com/soundcode/p/3412075.html
Copyright © 2011-2022 走看看