比较靠谱的网页分页代码

最新推荐文章于 2024-07-01 11:34:43 发布
最新推荐文章于 2024-07-01 11:34:43 发布
阅读量894 收藏
点赞数
分类专栏： html 文章标签： 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=utf-8" />
<title>无标题文档</title>
</head>


<body>


<style type="text/css">
.tablebox{border:solid 1px #ddd;}
.tablebox td{text-align:center;border:solid 1px #ddd;padding:5px;}
</style>


<div style="width:530px;margin:0 auto;">
    <table class="tablebox" width="500" border="0" cellpadding="0" cellspacing="0">
        <tbody id="table2">
            <tr>
                <td>1</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>2</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>3</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>4</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>5</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>6</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>7</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>8</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>9</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>10</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>11</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
        </tbody>
    </table>
    
    <div style="height:30px;margin:20px 0 0 0;">
        <span id="spanFirst">第一页</span>
        <span id="spanPre">上一页</span>
        <span id="spanNext">下一页</span>
        <span id="spanLast">最后一页</span>
        第
        <span id="spanPageNum"></span>
        页/共
        <span id="spanTotalPage"></span>
        页
    </div>


</div>




<script type="text/javascript">
var theTable = document.getElementById("table2");
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 = 3;
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;
}

//显示链接  

<!--

innerHTML在JS是双向功能：获取对象的内容 或 向对象插入内容；
如：<div id="aa">这是内容</div> ，我们可以通过 document.getElementById('aa').innerHTML 来获取id为aa的对象的内嵌内容；
也可以对某对象插入内容，如 document.getElementById('abc').innerHTML='这是被插入的内容'; 这样就能向id为abc的对象插入内容。

-->

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>


</body>
</html>
n8765
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
网页分页代码
09-19
Java后台web网页分页代码
网页分页源代码
04-23
就是java的源代码
php后端分页_网页的分页下标生成（PHP后端方法）【原创】
weixin_35917193的博客
03-09 147
网页的分页选择效果直接影响用户的使用体验。类似功能的方法有很多，我在这里写的方法主要是的优势在于前后端分离，可以自己定义长度和分页的行数。测试图例：效果图:/**** @param $page 页码(1至正无穷)* @param $num 数据中多上行为一页* @param $rows 数据的总行数* @param $length 下标的最大长度* @return a...
用JavaScript实现分页功能
最新发布
qq_52530691的博客
07-01 1377
用JavaScript实现分页功能
web分页代码
findblackhorse的博客
11-27 316
// 当前页数 int page; //从前台获取当前页数,进行判断赋值 Object currentPageObj = session.getAttribute("page"); if (currentPageObj == null) { page = 1; } else { page = (Integer) currentPageObj; } //根据
简单分页代码
qq_19865223的博客
07-09 808
1.paging.js function Paging(paramsObj, callback) { this.pageSize = paramsObj.pageSize || 10; //每页条数（不设置时，默认为10 this.pageIndex = paramsObj.pageIndex || 1; //当前页码 this.totalCount = p...
学生综合靠谱管理系统JAVA源代码
08-19
【标题】中的“学生综合靠谱管理系统JAVA源代码”指出，这是一个使用Java编程语言开发的学生管理系统的源代码。在IT行业中，源代码是程序设计的基础，它由程序员编写，用于控制软件的行为。Java是一种广泛使用的面向...
数据标注有哪些平台比较靠谱,数据标注有哪些平台可以学习
04-02
数据标注有哪些平台比较靠谱,数据标注有哪些平台可以学习
adManager 比较靠谱的版本
08-17
大甩卖了
java代码-ewdwd
07-14
- 靠谱指南：列出项目依赖的库或框架，以及安装和配置的指导。 - 版本信息：项目的版本号，可能还包括更新历史。 - 许可证信息：项目所采用的开源许可证类型。 - 贡献指南：对于开源项目，说明如何向项目贡献代码或...
Python代码规范.pdf
12-02
Python代码规范是一份全面靠谱的编程指南，旨在帮助开发者编写简洁、易读、易维护的代码。下面将详细解释该规范中的各个方面。 ### 1. 编码风格 在 Python 中，编码风格非常重要。以下是一些基本规则： * 使用 ...
页面分页实现源代码java
11-14
页面分页实现源代码java， 说明很详细，博客解析请看个人博客，搜索页面分页
分页代码 分页代码 分页代码
10-14
分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码
网页分页的实现
09-18
分页：运用代码实现网页的分页。希望能帮您解决问题，对您有所帮助
JS+HTML分页代码
05-22
通过JS和HTML实现的分页功能代码，有首页，前页，后页，尾页和分页页号等功能，
分页代码(完整)
08-21
asp.net 分页代码完整版<br>
分页显示详解（with php）
yeaha的专栏
07-20 1446
1、前言 分页显示是一种非常常见的浏览和显示大量数据的方法，属于web编程中最常处理的事件之一。对于web编程的老手来说，编写这种代码实在是和呼吸一样自然，但是对于初学者来说，常常对这个问题摸不着头绪，因此特地撰写此文对这个问题进行详细的讲解，力求让看完这篇文章的朋友在看完以后对于分页显示的原理和实现方法有所了解。本文适合初学者阅读，所有示例代码均使用php编写。 2、原理 所谓分页显示，也就
分页代码
蜗牛
09-19 506
 分页的方式：    页面分页    数据库分页（现在通用的分页方式）：一次取数据的一部分，尽量采取数据库    机制来实现！ 除了SQL 和 Access外 其他的数据库都提供了数据库分页机制，现在来用通用的分页方法来实现：游标分页！ 本代码是基于java的反射机制实现！ 首先：在数据库连接时给定参数，代码：Class.forName("sun.j
比较靠谱的c盘清理软件
06-09
有许多靠谱的C盘清理软件可供选择，以下是其中一些： 1. CCleaner：这是一款知名的系统优化和清理软件，能够清理浏览器缓存、临时文件、无效注册表等。 2. Wise Disk Cleaner：这是一款免费的磁盘清理软件，可以快速清理不需要的临时文件、无效注册表、浏览器缓存等。 3. Glary Utilities：这是一款功能强大的系统优化和清理软件，能够快速清理C盘中的不需要的文件和无效注册表。 4. Advanced SystemCare：这是一款全面的系统优化和清理软件，能够清理C盘中的无效文件、无效注册表、临时文件等。 这些软件都比较靠谱，但是使用时需要谨慎，如果不确定某些文件是否可以删除，最好不要随意清理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值