谁帮我改一下这段JS分页代码，谢谢

zhilongquan2 2010-08-19 11:58:00
一段JS分页代码，我想结合CKEDITER编辑器自动生成的分页代理 “<div style="page-break-after: always">
<span style="display: none"> </span></div>”来分页。二楼付上这段代码的原样





<!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>

<title>测试</title>

<meta http-equiv="content-Type" content="text/html;charset=gb2312">

<!--把下面代码加到<head>与</head>之间-->

<style type="text/css">

tr{display:none}

</style>

</head>

<body>

<!--把下面代码加到<body>与</body>之间-->

<div>美丽图片大家一起来欣赏</div>

<div id="mydiv">

<p style="text-align: center">

	<a class="lightview" href="/ckfinder/userfiles/images/bliss/201008151339/9.jpg" rel="gallery[080500]" target="_blank"><img alt="点击看大图" src="/ckfinder/userfiles/images/bliss/201008151339/s/9.jpg" style="border-bottom: 0px solid; border-left: 0px solid; width: 350px; height: 219px; border-top: 0px solid; border-right: 0px solid" /></a>  <a class="lightview" href="/ckfinder/userfiles/images/bliss/201008151339/2.jpg" rel="gallery[080500]" target="_blank"><img alt="点击看大图" src="/ckfinder/userfiles/images/bliss/201008151339/s/2.jpg" style="border-bottom: 0px solid; border-left: 0px solid; width: 350px; height: 219px; border-top: 0px solid; border-right: 0px solid" /></a>  </p>

<div style="page-break-after: always">

	<span style="display: none"> </span></div>

<p style="text-align: center">

	<a class="lightview" href="/ckfinder/userfiles/images/bliss/201008151339/7.jpg" rel="gallery[080500]" target="_blank"><img alt="点击看大图" src="/ckfinder/userfiles/images/bliss/201008151339/s/7.jpg" style="border-bottom: 0px solid; border-left: 0px solid; width: 350px; height: 219px; border-top: 0px solid; border-right: 0px solid" /></a>  <a class="lightview" href="/ckfinder/userfiles/images/bliss/201008151339/4.jpg" rel="gallery[080500]" target="_blank"><img alt="点击看大图" src="/ckfinder/userfiles/images/bliss/201008151339/s/4.jpg" style="border-bottom: 0px solid; border-left: 0px solid; width: 350px; height: 219px; border-top: 0px solid; border-right: 0px solid" /></a>  </p>

<div style="page-break-after: always">

	<span style="display: none"> </span></div>

<p style="text-align: center">

	<a class="lightview" href="/ckfinder/userfiles/images/bliss/201008151339/1.jpg" rel="gallery[080500]" target="_blank"><img alt="点击看大图" src="/ckfinder/userfiles/images/bliss/201008151339/s/1.jpg" style="border-bottom: 0px solid; border-left: 0px solid; width: 350px; height: 219px; border-top: 0px solid; border-right: 0px solid" /></a>  <a class="lightview" href="/ckfinder/userfiles/images/bliss/201008151339/3.jpg" rel="gallery[080500]" target="_blank"><img alt="点击看大图" src="/ckfinder/userfiles/images/bliss/201008151339/s/3.jpg" style="border-bottom: 0px solid; border-left: 0px solid; width: 350px; height: 219px; border-top: 0px solid; border-right: 0px solid" /></a>  </p>

<div style="page-break-after: always">

	<span style="display: none"> </span></div>

<p style="text-align: center">

	<a class="lightview" href="/ckfinder/userfiles/images/bliss/201008151339/5.jpg" rel="gallery[080500]" target="_blank"><img alt="点击看大图" src="/ckfinder/userfiles/images/bliss/201008151339/s/5.jpg" style="border-bottom: 0px solid; border-left: 0px solid; width: 350px; height: 219px; border-top: 0px solid; border-right: 0px solid" /></a>  <a class="lightview" href="/ckfinder/userfiles/images/bliss/201008151339/6.jpg" rel="gallery[080500]" target="_blank"><img alt="点击看大图" src="/ckfinder/userfiles/images/bliss/201008151339/s/6.jpg" style="border-bottom: 0px solid; border-left: 0px solid; width: 350px; height: 219px; border-top: 0px solid; border-right: 0px solid" /></a></p>

<p style="text-align: center">

	<a class="lightview" href="/ckfinder/userfiles/images/bliss/201008151339/8.jpg" rel="gallery[080604]" target="_blank"><img alt="点击看大图" src="/ckfinder/userfiles/images/bliss/201008151339/s/8.jpg" style="border-bottom: 0px solid; border-left: 0px solid; width: 350px; height: 219px; border-top: 0px solid; border-right: 0px solid" /></a>  </p>



</div>



<div id="changpage"></div>

<script language="javascript">

var obj,j;

var page=0;

var nowPage=0;//当前页

var listNum=5;//每页显示<ul>数

var PagesLen;//总页数

var PageNum=4;//分页链接接数(5个)

onload=function(){

obj=document.getElementById("mydiv").getElementsByTagName("div");

j=obj.length

PagesLen=Math.ceil(j/listNum);

upPage(0)

}

function upPage(p){

nowPage=p

//内容变换

for (var i=0;i<j;i++){

obj[i].style.display="none"

}

for (var i=p*listNum;i<(p+1)*listNum;i++){

if(obj[i])obj[i].style.display="block"

}

//分页链接变换

strS='<a href="###" onclick="upPage(0)">首页</a>  '

var PageNum_2=PageNum%2==0?Math.ceil(PageNum/2)+1:Math.ceil(PageNum/2)

var PageNum_3=PageNum%2==0?Math.ceil(PageNum/2):Math.ceil(PageNum/2)+1

var strC="",startPage,endPage;

if (PageNum>=PagesLen) {startPage=0;endPage=PagesLen-1}

else if (nowPage<PageNum_2){startPage=0;endPage=PagesLen-1>PageNum?PageNum:PagesLen-1}//首页

else {startPage=nowPage+PageNum_3>=PagesLen?PagesLen-PageNum-1: nowPage-PageNum_2+1;var t=startPage+PageNum;endPage=t>PagesLen?PagesLen-1:t}

for (var i=startPage;i<=endPage;i++){

 if (i==nowPage)strC+='<a href="###" style="color:red;font-weight:700;" onclick="upPage('+i+')">'+(i+1)+'</a> '

 else strC+='<a href="###" onclick="upPage('+i+')">'+(i+1)+'</a> '

}

strE=' <a href="###" onclick="upPage('+(PagesLen-1)+')">尾页</a>  '

strE2=nowPage+1+"/"+PagesLen+"页"+"  共"+j+"条"



document.getElementById("changpage").innerHTML=strS+strC+strE+strE2

}

</script>

</body>

</html>
...全文
42 1 打赏 收藏 转发到动态 举报
写回复
用AI写文章
1 条回复
切换为时间正序
请发表友善的回复…
发表回复
zhilongquan2 2010-08-19
  • 打赏
  • 举报
 回复

这是JS的原代码，结合TR标签 可以分页


最佳答案

<!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>

<title>中国站长天空-网页特效-综合特效-静态代码的分页效果</title>

<meta http-equiv="content-Type" content="text/html;charset=gb2312">

<!--把下面代码加到<head>与</head>之间-->

<style type="text/css">

tr{display:none}

</style>

</head>

<body>

<!--把下面代码加到<body>与</body>之间-->

<table id="mydiv">

<tr><td>01</td></tr>

<tr><td>02</td></tr>

<tr><td>03</td></tr>

<tr><td>04</td></tr>

<tr><td>05</td></tr>

<tr><td>06</td></tr>

<tr><td>07</td></tr>

<tr><td>08</td></tr>

<tr><td>09</td></tr>

<tr><td>10</td></tr>

<tr><td>11</td></tr>

<tr><td>12</td></tr>

<tr><td>13</td></tr>

<tr><td>14</td></tr>

<tr><td>15</td></tr>

<tr><td>16</td></tr>

<tr><td>17</td></tr>

<tr><td>18</td></tr>

<tr><td>19</td></tr>

<tr><td>20</td></tr>

<tr><td>21</td></tr>

</table>

<div id="changpage"></div>

<script language="javascript">

var obj,j;

var page=0;

var nowPage=0;//当前页

var listNum=5;//每页显示<ul>数

var PagesLen;//总页数

var PageNum=4;//分页链接接数(5个)

onload=function(){

obj=document.getElementById("mydiv").getElementsByTagName("tr");

j=obj.length

PagesLen=Math.ceil(j/listNum);

upPage(0)

}

function upPage(p){

nowPage=p

//内容变换

for (var i=0;i<j;i++){

obj[i].style.display="none"

}

for (var i=p*listNum;i<(p+1)*listNum;i++){

if(obj[i])obj[i].style.display="block"

}

//分页链接变换

strS='<a href="###" onclick="upPage(0)">首页</a>  '

var PageNum_2=PageNum%2==0?Math.ceil(PageNum/2)+1:Math.ceil(PageNum/2)

var PageNum_3=PageNum%2==0?Math.ceil(PageNum/2):Math.ceil(PageNum/2)+1

var strC="",startPage,endPage;

if (PageNum>=PagesLen) {startPage=0;endPage=PagesLen-1}

else if (nowPage<PageNum_2){startPage=0;endPage=PagesLen-1>PageNum?PageNum:PagesLen-1}//首页

else {startPage=nowPage+PageNum_3>=PagesLen?PagesLen-PageNum-1: nowPage-PageNum_2+1;var t=startPage+PageNum;endPage=t>PagesLen?PagesLen-1:t}

for (var i=startPage;i<=endPage;i++){

 if (i==nowPage)strC+='<a href="###" style="color:red;font-weight:700;" onclick="upPage('+i+')">'+(i+1)+'</a> '

 else strC+='<a href="###" onclick="upPage('+i+')">'+(i+1)+'</a> '

}

strE=' <a href="###" onclick="upPage('+(PagesLen-1)+')">尾页</a>  '

strE2=nowPage+1+"/"+PagesLen+"页"+"  共"+j+"条"



document.getElementById("changpage").innerHTML=strS+strC+strE+strE2

}

</script>

</body>

</html>
使用BootStrap原生分页按钮 动态加载JS代码
如果你是自己想写分页，或者用bootStrap的分页按钮。这段代码应该有帮助的。
原生JS实现分页效果
做开发久了，会越来越依赖框架，毕竟利用框架可以快速的完成工作任务，如常见的分页效果，只需要与后端配合，由后端返回总页数和当前第几页这两个参数传给一些框架的分页功能，就可以轻松的实现分页效果，那如果在不依赖框的情况下利用原生JS如何实现一个分页效果呢？接下来给大家分享一段分页代码实现下面的效果。 <!DOCTYPE html> <html> <head>.........
纯JS前端分页方法（JS分页）
如后台传回的数据条数非常多，达到几千条甚至上万条，但是后台又不方便分页传回数据，这个时候就只能前端先获取所有数据保存下来，然后前端本地进行分页并渲染显示。1、JS分页函数：开发过程中，分页功能一般是后台提供接口，前端只要传page（当前页码）和pageSize（每页最大显示条数）及对应的其他查询条件，就可以返回所需分页显示的数据。原创博客禁止抄袭，原文地址:https://www.cnblogs.com/xiao-pengyou/只需要传入对应参数就可以返回带有对应分页属性的对象，用于前端界面展示。
前端分页代码实现简要思路
前端分页代码实现简要思路
前端实现分页
前端分页 文章目录前端分页前言一、后台的传入数据二、前端页面准备步骤1.准备一个div2.在上方引入jquery.js文件3.js代码总结 前言 当后台通过写查询得到多条数据时，不在使用数据库分页，直接返回查询的全部数据，在前台直接通过前端js进行分页处理： 一、后台的传入数据 示例： List list = forderService.selectList(); model.addAttribute(“list”, list); 二、前端页面准备步骤 1.准备一个div 在这个div里面会放入一个ta
Web 开发

81,092

社区成员

341,716

社区内容

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章