<script defer="defer" language="javascript" type="text/javascript">
<!--
var _offset = 0;
function _$id(_obj) {
return document.getElementById(_obj);
}
function _$Pages(_i) {
_curPage=_i;
_$id("Content").innerHTML=_contentArray[_i];
for (var i=0;i<_contentArray.length;i++)
{
if (i==_i)
_$id("soojs_"+(_i+1)).style.backgroundColor="#ff9900";
else
_$id("soojs_"+(i+1)).style.backgroundColor="";
}
}
var _contentArray;
var _curPage=0;
var _totalPage;
function _$prePage(){
_curPage--;
if(_curPage>=0){
_$Pages(parseInt(_curPage));
}
else{
_curPage=0;
_$Pages(parseInt(_curPage));
}
}
function _$nextPage(){
_curPage++;
if(_curPage<_totalPage){
_$Pages(parseInt(_curPage));
}
else{
_curPage=_totalPage-1;
}
}
$(function() {
var _s='';
var neirong=_$id("Content").innerHTML;
_contentArray=neirong.split("#page#");
if(_contentArray.length>1){
_totalPage=_contentArray.length;
_$id("Content").innerHTML=neirong.replace("#page#"," ");
_s+="<a href='#' onclick='javascript:_$prePage("+_curPage+")'>上一页</a>";
for (var i=0;i<_contentArray.length;i++) {
_s+=('<a href="#" onclick="javascript:_$Pages('+i+');" onfocus="this.blur()" title="Page '+(i+1)+'" id="soojs_'+(i+1)
+'">'+" "+(i+1)+" "+'</a> ');
}
_s+="<a href='#' onclick='javascript:_$nextPage("+_curPage+")'>下一页</a>";
_$id("Pages").innerHTML=_s;
_$Pages(0);
}
}
);
//-->
</script>
<style type="text/css">
#Content {
margin: 1px 1px 0px 1px;
_margin: 1px 1px 0px 1px; /* CSS Hack For IE6 */
text-align: left;
}
#Pages {
width: 400px;
height: 20px;
margin: 0px;
text-align: right;
}
#Pages a{
display:inline;
}
#Pages a:link{color:#000000}
#Pages a:hover{color:#FF0000}
#Pages a:active{color:#3300FF}
</style>
html:
<div id="Content">
<div id="Pages"></div>
</div>
--------------
使用很简单如果内容很长在分页的地方都添加#page#就ok
分享到:
相关推荐
在JavaScript中,实现分页功能通常分为以下几个步骤: 1. **初始化配置**:设置每页显示的数据量、总数据量以及当前页数。这些参数可以通过HTML元素的属性或者JavaScript对象来传递。 2. **数据处理**:根据当前...
使用纯JavaScript实现表格分页显示,提供页面跳转功能,包括首页、上一页、下一页、尾页等功能。
本篇将详细介绍如何利用JS的`Window`对象的`print()`方法来实现一个具有强大兼容性的分页打印功能。 首先,`Window.print()`方法是JavaScript中用于调用浏览器内置的打印对话框的函数,用户可以在该对话框中选择...
描述和标签提到的“js实现分页”和“table分页”指的是用JavaScript编写代码来控制表格数据的分页显示。实现分页的步骤一般包括设置每页显示的数据条数、获取数据总条数、计算总页数、控制当前页数变量以及能够实现...
纯js分页,用js将内容以分页的形式展现出来,处理数据更简单
在JavaScript中实现表格(table)分页是一种常见的需求,特别是在数据量较大的...以上就是利用JavaScript实现表格分页的详细过程,结合`fenye.html`、`fenye.js`和`gettab.js`文件,你可以构建一个完整的分页表格系统。
在这个场景中,我们将深入探讨如何使用JavaScript来实现分页功能。 一、理解分页原理 1. 数据源:首先,你需要一个数据源,这可能是从服务器获取的JSON数据或者是静态数组。分页的核心是根据每页显示的数据量来...
本文将深入探讨如何使用JavaScript实现分页功能,以及相关的技巧和注意事项。 首先,我们需要理解分页的基本概念。通常,一个分页系统包括以下几个关键部分: 1. **总记录数**:这是你要展示的数据总数。 2. **每...
使用js实现打印分页的功能(包括页码,表头,表尾)
在本篇文章中,我们将深入探讨如何使用JavaScript实现页面分页效果,以及如何添加排序和自定义每页行数的功能。 首先,我们需要理解分页的基本原理。分页通常涉及到两个关键部分:计算总页数和根据当前页数展示对应...
本教程将专注于使用JavaScript库jQuery来实现数据分页显示,涵盖了内存分页和数据库分页两种主要方式。 **一、jQuery分页基础** jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理和动画效果。在实现...
在网页开发中,数据分页是一种...总之,JavaScript实现数据分页是一项涉及前端和后端交互的任务,需要合理组织代码,处理用户交互,并与服务器进行有效通信。掌握这一技能对于提升网页应用的性能和用户体验至关重要。
在网页开发中,数据分页是一种常见的功能,特别是在展示大量表格数据时,为了提高用户体验,通常会将数据分页显示,而不是一次性加载所有内容。本文将详细介绍如何使用JavaScript(JS)来实现表格(table)数据的...
本文将详细讲解如何使用JavaScript实现表格分页。 首先,我们需要理解分页的基本原理。分页主要是通过计算每一页显示的数据数量(通常称为“每页条目数”),然后根据用户当前所在的页码来确定应该加载哪一部分数据...
`jspdf` 提供了在浏览器环境中直接处理PDF的能力,允许开发者通过JavaScript生成动态的PDF内容。用户可以使用这个库将HTML元素转换为PDF格式,从而实现网页内容的离线保存或打印。通过调用`jspdf` 的API,可以轻松...
本资源“JS实现分页效果代码.zip”提供了一种用JavaScript实现分页功能的解决方案,特别适用于动态加载数据或者需要优化用户浏览体验的场合。以下是对这个压缩包中包含的两个文件及其相关知识点的详细解释。 1. **...
总结来说,"JS+HTML分页代码"是一个实用的前端解决方案,通过结合HTML和JavaScript实现了基本的分页功能,适用于多种数据展示场景。理解和掌握这个功能的实现原理,对于提升Web开发能力大有裨益。
html前端获取后端js的数据,实现到html表格,并且实现表格分页显示,分页显示原理是要显示那一页数据就从后端获取需要显示页的数据,不会一次性获取全部数据,减小流前端的压力。后端使用js+express,读取csv文件...
总结起来,JavaScript实现的分页功能主要包括以下几个步骤: 1. 创建分页HTML结构,包含页码、上一页/下一页按钮。 2. 绑定事件监听器,处理分页点击事件。 3. 根据点击的页码获取数据并更新页面内容。 4. 限制最多...
在QML(Qt Quick)中实现分页显示是一项常见的任务,尤其在开发移动应用或桌面应用的用户界面时。QmlPageNavigation是一个专门用于在QML中实现分页导航的组件,它允许用户轻松地在多个页面之间切换,提供流畅的用户...