静态html分页

最新推荐文章于 2021-06-09 18:01:58 发布
Litt_J
最新推荐文章于 2021-06-09 18:01:58 发布
阅读量869
点赞数
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <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>