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>
- <span id="spanFirstt">第一页</span> <span id="spanPret">上一页</span> <span id="spanNextt">下一页</span> <span id="spanLastt">最后一页</span> 第<span id="spanPageNumt"></span>页/共<span id="spanTotalPaget"></span>页
- <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>页
- <!--
- <script language="javascript" src="Paging.js"></script>
- -->
- </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 totalPaget = document.getElementById("spanTotalPaget");
- var pageNumt = document.getElementById("spanPageNumt");
- var spanPret = document.getElementById("spanPret");
- var spanNextt = document.getElementById("spanNextt");
- var spanFirstt = document.getElementById("spanFirstt");
- var spanLastt = document.getElementById("spanLastt");
- 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(){
- pagepageNum.innerHTML = page;
- pagepageNumt.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>"; spanPret.innerHTML = "<a href='javascript:pre();'>上一页</a>";}
- function preText(){ spanPre.innerHTML = "上一页"; spanPret.innerHTML = "上一页"; }
- function nextLink(){ spanNext.innerHTML = "<a href='javascript:next();'>下一页</a>"; spanNextt.innerHTML = "<a href='javascript:next();'>下一页</a>";}
- function nextText(){ spanNext.innerHTML = "下一页"; spanNextt.innerHTML = "下一页";}
- function firstLink(){ spanFirst.innerHTML = "<a href='javascript:first();'>第一页</a>"; spanFirstt.innerHTML = "<a href='javascript:first();'>第一页</a>";}
- function firstText(){ spanFirst.innerHTML = "第一页"; spanFirstt.innerHTML = "第一页";}
- function lastLink(){ spanLast.innerHTML = "<a href='javascript:last();'>最后一页</a>"; spanLastt.innerHTML = "<a href='javascript:last();'>最后一页</a>";}
- function lastText(){ spanLast.innerHTML = "最后一页"; spanLastt.innerHTML = "最后一页";}
- //隐藏表格
- function hide(){
- for ( var i = pageSize; i<numberRowsInTable; i++ ){
- theTable.rows[i].style.display = 'none';
- }
- totalPage.innerHTML = pageCount();
- pageNum.innerHTML = '1';
- totalPaget.innerHTML = pageCount();
- pageNumt.innerHTML = '1';
- nextLink();
- lastLink();
- }
- hide();
- </script>
相关推荐
通过上述步骤,我们成功地使用JavaScript实现了一个简单的静态网页文章列表分页功能。这种技术不仅可以应用在文章列表上,还可以广泛应用于各种需要分页展示的场景中,比如商品列表、评论列表等。随着前端技术的发展...
本资源提供了一个基于纯JavaScript实现的表格分页代码,它适用于静态数据的展示,主要功能是通过分页来控制表格中数据行的显示与隐藏,从而提高用户浏览效率和页面性能。 首先,我们来看“tabel纯分页效果.html”这...
在这个“ajax 静态网页操作表格分页哦”的主题中,我们将深入探讨如何使用Ajax技术实现静态网页中的表格分页功能。 一、Ajax基础 Ajax的核心是通过JavaScript异步发送HTTP请求到服务器,获取数据后在客户端进行处理...
div+css百分比表格+DIV+CSS+JS静态分页程序+DIV+CSS像素表格 百分比表格(用DIV+CSS)以百分比显示,可以根据窗口的大小自动调节所显示的大小! DIV+CSS+JS静态分页程序可兼容主流浏览器(IE、FF、Opera) DIV+CSS表格...
通过阅读和学习这些代码,开发者可以了解如何将Vue.js与Bootstrap结合,实现一个功能完善的表格分页组件。 总之,理解并掌握基于Vue.js的表格分页组件的实现,不仅可以提升前端开发技能,还能为实际项目提供强大的...
在本项目中,"jquery动态表格自定义分页.zip"是一个包含使用jQuery和CSS实现动态表格分页功能的示例。下面将详细讲解这个项目的关键知识点: 1. jQuery:jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历...
总的来说,jPage插件通过结合jQuery和AJAX技术,实现了表格数据的动态加载和分页,降低了服务器压力,提高了网页性能。在实际项目中,开发者可以根据自身需求调整jPage的配置,结合后端的"action文件"实现灵活的数据...
这个插件能够帮助开发者轻松地将静态表格转化为具有动态分页和排序功能的交互式表格。下面将详细阐述jQuery表格分页排序插件的核心概念、工作原理以及如何在项目中应用。 1. **核心概念**: - **分页**:分页是将...
本资源提供了基于jQuery的表格列表分页样式特效代码,它可以帮助开发者轻松实现美观且功能丰富的分页功能。以下是对这个jQuery插件的详细解析。 首先,jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、...
这个压缩包“带分页的表格插件JSTable.rar”包含了实现JSTable功能所需的基本文件,包括CSS样式表、JavaScript脚本以及示例HTML文件。 ### 1. CSS样式 在`assets`目录下,我们有两个CSS文件:`bootstrap.min.css`...
"老二牛车Axure夜话:中继器系列视频教程之中继器表格分页动态页数"这个标题指向的是一个关于Axure RP中继器功能的专门教学,特别聚焦于如何实现表格的分页和动态页数计算。 中继器(Repeater)是Axure RP 8引入的...
基于Vue.js的表格分页组件-BootPage,一款支持静态数据和服务器数据的表格分页组件,支持调整每页显示行数和页码显示个数,样式基于bootstrap。 注:在使用ES6及vue-loader的vue项目中才能使用本组件,请求本地json...
在"基于ASP的AJAX 静态分页示例.zip"这个压缩包中,我们可以推测它包含了一个使用ASP和AJAX技术实现的静态分页示例。静态分页是网页显示大量数据时常用的一种优化手段,它将大量记录分成若干个分页,每次只加载一...
总的来说,"静态web表格管理(菜单)"可能是一个使用JQuery来实现的前端应用,其主要功能包括创建和管理HTML表格,尤其是处理菜单项的点击事件,以及可能利用AJAX进行数据交互。虽然具体实现细节未在描述中给出,但...
Vue 和 Element UI 实现表格内容分页的实例分析 Vue 是一款流行的前端框架,而 Element UI 是一个基于 Vue 的 UI 组件库,它提供了许多实用的组件来帮助开发者快速构建应用程序。在本文中,我们将探讨如何使用 Vue...
`jQuery.fancyTable`通过简单的API调用,即可将静态HTML表格转化为具有分页、排序和搜索功能的动态表格,极大地提高了用户体验。开发者无需复杂的后端处理,就能实现在前端对表格数据的操作,降低了开发难度。 ### ...
Vue.js是一个构建用户界面的渐进式JavaScript框架,由Evan You创建,主要目的是能够以数据驱动和组件化的方式构建复杂的单页应用程序。Vue最大的特点是易于上手,且能在不破坏已有项目结构的前提下,渐进式的引入。...
在提供的压缩包中,有两个使用treetable实现的示例:一个是静态加载数据,另一个是动态通过AJAX获取数据。treetable的优势在于其直观的可视化效果,通过折叠和展开图标,用户可以清晰地看到数据的层级关系。实现...
layui是一个流行的JavaScript组件库,它提供了丰富的UI元素,如表格(laytable)、分页(laypage)和日期选择器(laydate)。当我们在使用这些组件时,如果处理不当,可能会出现字符乱码的现象。这里我们将深入探讨...
通过这种方式,项目实现了无刷新的分页效果,提升了用户体验。由于代码结构清晰,逻辑简单,对于初学者来说,这是一个很好的学习分页技术的实际案例。同时,这种技术方案也具有较好的可扩展性,可以适应不同的数据源...