jquery实现html页面 div 假分页有原理有代码

div假分页原理：填充后div的总高度 （1000px） 显示高度（100px） 则页面总数为10页 。当查看第二页时，显示的div高度为100 - 200之间，以此类推

看见页面在翻页 实则为div滚动条移动。

<div id="applications">显示数据集合</div>
<style>
#applications
{
/* width:500px;调整显示区的宽*/
height: 1592px; /*调整显示区的高*/
font-size: 14px;
margin-top:23px;
line-height: 20px;
overflow-pageindex: hidden;
overflow-y: hidden;
word-break: break-all;
}
</style>

<script language="javascript">
var obj = document.getElementById("applications"); //获取内容层
var pages = document.getElementById("pages"); //获取翻页层
window.onload = function ()//重写窗体加载的事件
{
var allpages = Math.ceil(parseInt(obj.scrollHeight) / parseInt(obj.offsetHeight)); //获取页面数量
// pages.innerHTML = "<b>共" + allpages-1+ "页</b> "; //输出页面数量
for (var i = 1; i <= allpages; i++) {
if (i == 1) {
pages.innerHTML += "<a href=\"javascript:showPage('" + i + "');\">首页</a> ";
}
else{
pages.innerHTML += "<a href=\"javascript:showPage('" + i + "');\">" + i + "</a> ";
}
//循环输出第几页
}
}
function showPage(pageINdex) {
obj.scrollTop = (pageINdex - 1) * parseInt(obj.offsetHeight); //根据高度，输出指定的页
}
</script>

动态数据分页时，尾页不够分页条数，需填充具体高度，不然分页会把上一页的数据重复显示在最后一页中。

赞 (0)

相关推荐

  • Jquery在指定DIV加载HTML示例代码

    首先引入Jquery 复制代码 代码如下: <script src="js/jquery.js"></script> 在页面加入JS 复制代码 代码如下: <script> $(function(){ $("div#top_sidebar").load("top_sidebar.html"); }) </script> #top_sidebar 为指定DIV的ID

  • 解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)

    复制代码 代码如下: nav1 = "<div style='width:145px;height:62px;float:left;background:url(login_image/index/on_1.jpg);font-size:18px;color:white;line-height:65px;' id='left_tab" +  "</div>" 复制代码 代码如下: $("#top_1").html(nav1);

  • 用jQuery向div中添加Html文本内容的简单实现

    前台代码: <link href="http://www.jb51.net/Content/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> <script src="http://www.jb51.net/Scripts/jquery-1.4.4.min.js" type="text/javascript">

  • jQuery+html5实现div弹出层并遮罩背景

    渐入弹窗,背景变色不可点击.查看效果:http://runjs.cn/detail/t08gmoij <!doctype html> <html> <head> <meta charset="utf-8"> <title>popup</title> <script type="text/javascript" src="jquery-2.1.3.min.js">&

  • jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)

    jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)

    本文实例讲述了jQuery实现鼠标跟随提示层效果代码.分享给大家供大家参考,具体如下: 运行效果截图如下: Web网站有不少需要用到tip提示层的地方,结合jquery的jquery.cluetip.js ,可以实现本地字符或ajax异步调用显示提示层.如以上购评分明细提示.(优势:宽度需要调用页加载时定义,高度auto , 且三角指定图标能根据显示层的大小位置来调用它的位置,达到醒目直观的效果) jquery.cluetip.css /* global */ #cluetip-close im

  • 使用jQuery加载html页面到指定的div实现方法

    一.jQuery加载一个html页面到指定的div里 把a.html里面的某一部份的内容加载到b.html的一个div里. 比如:加载a.html里面的<div id="row"></div>这个div里面的所有内容加载到b.html的这个div里<div id="content"></div> 用jquery ajax 可以实现 假设 a.html 和b.html在同一目录 b.html <script >

  • jquery实现html页面 div 假分页有原理有代码

    div假分页原理:填充后div的总高度 (1000px) 显示高度(100px) 则页面总数为10页 .当查看第二页时,显示的div高度为100 - 200之间,以此类推 看见页面在翻页 实则为div滚动条移动. <div id="applications">显示数据集合</div> <style> #applications { /* width:500px;调整显示区的宽*/ height: 1592px; /*调整显示区的高*/ font-si

  • 基于jquery的让页面控件不可用的实现代码

    应用背景 当用户需要某项功能时要填写一些表单信息,在填写完成并提交后,该部分信息是不允许再次修改的.表单包含TextBox.DropDownList.CheckBox等控件. 需求实现 第一种方案,绑定用户填写的数据时,设置控件的Enable属性为False.如果页面的表单数较少时可采用这样的方法,但是如果在表单较多的情况下则并不是更好的方法. 第二种方案,使用Foreach访问页面控件,判断类型如果是TextBox.DropDownList.CheckBox等,则设置Enable=False.

  • .net页面访问次数统计实现原理与代码

    数据库准备:建立一个表total里面数据项为totals类型为varchar 50.net语言环境:C#global.asax里的代码 复制代码 代码如下: <%@ Import Namespace="System.Data" %><%@ Import Namespace="System.Data.SqlClient" %><script language="C#" runat="server"&

  • jQuery实现随意改变div任意属性的名称和值(部分原生js实现)

    一些简单的例子,用原生js和jQuery实现随意改变div属性,和重置.代码如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>函数传参,改变Div任意属性的值</title> <style type="text/css"> body,p{margin:0;padding:0;} bo

  • Jquery+Ajax+Json+存储过程实现高效分页

    之前在做分页时,很多朋友都是用Jquery分页插件,之前我就用的jquery.paper,有需要的朋友可以联系我,接下来小编给大家分享用Jquery+Ajax+Json+存储过程实现高效分页. 实现此功能用分页存储过程,pagination,js样式,废话不多了,具体请看下面代码  分页存储过程:PAGINATION CREATE PROCEDURE [dbo].[PAGINATION] @FEILDS VARCHAR(),--要显示的字段 @PAGE_INDEX INT,--当前页码 @PAG

  • jQuery实现的页面遮罩层功能示例【测试可用】

    jQuery实现的页面遮罩层功能示例【测试可用】

    本文实例讲述了jQuery实现的页面遮罩层功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"

  • Jquery实现视频播放页面的关灯开灯效果

    本示例使用Jquery实现视频播放页面的关灯开灯效果.其中视频显示使用embed 元素,该元素是html5的元素,所以使用支持html5的浏览器效果会更好. 效果预览网址:http://www.keleyi.com/keleyi/phtml/guandeng/ 完整代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm

  • 一个用jquery写的判断div滚动条到底部的方法【推荐】

    一个用jquery写的判断div滚动条到底部的方法【推荐】

    jQuery 里和滚动条有关的概念很多,但是有三个属性和滚动条的拖动有关,就是:scrollTop.scrollLeft.scrollHeight.其中 scrollHeight 属性,互联网上几乎搜素不到关于它的应用技巧,而我正好需要用到它. 我们现在只探讨和垂直滚动有关的 scrollTop.scrollHeight 属性. 一.滚动条有关属性的正确理解: 假设有以下Html代码: <div id="div1" style="overflow-y:auto; ove

  • jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码

    iframe和弹窗这些词对于js高手来说都是耳熟能详的东西,作为一个新人来说,还在学习阶段的我就在工作中遇到这么一个奇葩的需求,要在引入的iframe页面里做一个全屏化的功能. 粗略一看,这还不容易,模拟下F11的功能键什么的,于是网上一搜还真有一大堆关于全屏化的案例,遂借来用之. 然后高高兴兴的拿一个没有iframe引入的页面做了个测试页面查看全屏化功能效果,代码如下(fullScreenPage.html): <!DOCTYPE html> <html xmlns="htt

  • jQuery 实时保存页面动态添加的数据的示例

    本文介绍了jQuery 实时保存页面动态添加的数据的示例,分享给大家,具体如下: 需求:用户填写的东西,必须要实时保存 分析:监听用户操作事件,如:change.keyup 等,向后端发送请求 实际情况: 用户填写的表单,是通过 JavaScript 动态新增的,这就需要使用为动态新增元素绑定事件. 发送请求给后端,取决于前面的必填项是否已经完整填写. 必须区分用户是动态新增了填写栏目呢?还是在修改? 当前事件对象是什么?怎么通过该对象获取用户输入的数据? 用户多次修改同一栏目,必须传送带有 I

随机推荐