`
zeng7960983
  • 浏览: 44351 次
  • 性别: Icon_minigender_1
  • 来自: 邵阳
社区版块
存档分类
最新评论

js 实现内容分页显示

阅读更多
<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&nbsp;'+(i+1)+'" id="soojs_'+(i+1)

+'">'+"&nbsp;"+(i+1)+"&nbsp;"+'</a>&nbsp;&nbsp;&nbsp;&nbsp;');
  }
  _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
分享到:
评论

相关推荐

    使用js实现简单分页

    在JavaScript中,实现分页功能通常分为以下几个步骤: 1. **初始化配置**:设置每页显示的数据量、总数据量以及当前页数。这些参数可以通过HTML元素的属性或者JavaScript对象来传递。 2. **数据处理**:根据当前...

    纯js实现表格分页

    使用纯JavaScript实现表格分页显示,提供页面跳转功能,包括首页、上一页、下一页、尾页等功能。

    JS 实现web分页打印功能

    本篇将详细介绍如何利用JS的`Window`对象的`print()`方法来实现一个具有强大兼容性的分页打印功能。 首先,`Window.print()`方法是JavaScript中用于调用浏览器内置的打印对话框的函数,用户可以在该对话框中选择...

    利用js制作html table分页示例(js实现分页)

    描述和标签提到的“js实现分页”和“table分页”指的是用JavaScript编写代码来控制表格数据的分页显示。实现分页的步骤一般包括设置每页显示的数据条数、获取数据总条数、计算总页数、控制当前页数变量以及能够实现...

    纯js分页-用js实现分页显示

    纯js分页,用js将内容以分页的形式展现出来,处理数据更简单

    js实现table分页可以动态生成table

    在JavaScript中实现表格(table)分页是一种常见的需求,特别是在数据量较大的...以上就是利用JavaScript实现表格分页的详细过程,结合`fenye.html`、`fenye.js`和`gettab.js`文件,你可以构建一个完整的分页表格系统。

    js实现分页效果

    在这个场景中,我们将深入探讨如何使用JavaScript来实现分页功能。 一、理解分页原理 1. 数据源:首先,你需要一个数据源,这可能是从服务器获取的JSON数据或者是静态数组。分页的核心是根据每页显示的数据量来...

    js实现的分页

    本文将深入探讨如何使用JavaScript实现分页功能,以及相关的技巧和注意事项。 首先,我们需要理解分页的基本概念。通常,一个分页系统包括以下几个关键部分: 1. **总记录数**:这是你要展示的数据总数。 2. **每...

    使用js实现打印分页的功能(包括页码,表头,表尾)

    使用js实现打印分页的功能(包括页码,表头,表尾)

    用js实现页面分页效果

    在本篇文章中,我们将深入探讨如何使用JavaScript实现页面分页效果,以及如何添加排序和自定义每页行数的功能。 首先,我们需要理解分页的基本原理。分页通常涉及到两个关键部分:计算总页数和根据当前页数展示对应...

    jquery实现数据分页显示

    本教程将专注于使用JavaScript库jQuery来实现数据分页显示,涵盖了内存分页和数据库分页两种主要方式。 **一、jQuery分页基础** jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理和动画效果。在实现...

    JS实现数据分页按钮

    在网页开发中,数据分页是一种...总之,JavaScript实现数据分页是一项涉及前端和后端交互的任务,需要合理组织代码,处理用户交互,并与服务器进行有效通信。掌握这一技能对于提升网页应用的性能和用户体验至关重要。

    JS代码实现table数据分页效果

    在网页开发中,数据分页是一种常见的功能,特别是在展示大量表格数据时,为了提高用户体验,通常会将数据分页显示,而不是一次性加载所有内容。本文将详细介绍如何使用JavaScript(JS)来实现表格(table)数据的...

    js实现table分页

    本文将详细讲解如何使用JavaScript实现表格分页。 首先,我们需要理解分页的基本原理。分页主要是通过计算每一页显示的数据数量(通常称为“每页条目数”),然后根据用户当前所在的页码来确定应该加载哪一部分数据...

    jspdf实现JavaScript显示pdf文档可分页哦

    `jspdf` 提供了在浏览器环境中直接处理PDF的能力,允许开发者通过JavaScript生成动态的PDF内容。用户可以使用这个库将HTML元素转换为PDF格式,从而实现网页内容的离线保存或打印。通过调用`jspdf` 的API,可以轻松...

    JS实现分页效果代码.zip

    本资源“JS实现分页效果代码.zip”提供了一种用JavaScript实现分页功能的解决方案,特别适用于动态加载数据或者需要优化用户浏览体验的场合。以下是对这个压缩包中包含的两个文件及其相关知识点的详细解释。 1. **...

    JS+HTML分页代码

    总结来说,"JS+HTML分页代码"是一个实用的前端解决方案,通过结合HTML和JavaScript实现了基本的分页功能,适用于多种数据展示场景。理解和掌握这个功能的实现原理,对于提升Web开发能力大有裨益。

    html前端动态获取后端数据显示到表格,实现分页显示

    html前端获取后端js的数据,实现到html表格,并且实现表格分页显示,分页显示原理是要显示那一页数据就从后端获取需要显示页的数据,不会一次性获取全部数据,减小流前端的压力。后端使用js+express,读取csv文件...

    js模仿百度分页,最多显示10页

    总结起来,JavaScript实现的分页功能主要包括以下几个步骤: 1. 创建分页HTML结构,包含页码、上一页/下一页按钮。 2. 绑定事件监听器,处理分页点击事件。 3. 根据点击的页码获取数据并更新页面内容。 4. 限制最多...

    多种javascript实现的分页样式

    下面我们将详细介绍几种JavaScript实现分页样式的常见方法和关键技术点。 1. 基础分页实现: 分页的基本原理是通过JavaScript获取服务器上所有数据的总页数,然后根据当前页码显示相应的内容。可以使用数组模拟...

Global site tag (gtag.js) - Google Analytics