javascript分页问题，求高手帮忙！！！！！

gaopeng1988 2008-11-04 02:20:43
比如这样：页面上有这样一部分，不用考虑提取数据库，就当页面上的东西是死的，现在就是想实现分页。
就想这个div，让每页显示三条，当然div里面的li不是固定的。这个功能如何能够实现呢？？？？
<div id="div">
<ul>
<li>1111111111111111111111111</li>
<li>2222222222222222222222222</li>
<li>3333333333333333333333333</li>
<li>4444444444444444444444444</li>
<li>5555555555555555555555555</li>
<li>6666666666666666666666666</li>
<li>7777777777777777777777777</li>
<li>8888888888888888888888888</li>
<li>9999999999999999999999999</li>
<li>0000000000000000000000000</li>
</ul>
</div>
...全文
161 12 打赏 收藏 转发到动态 举报
写回复
用AI写文章
12 条回复
切换为时间正序
请发表友善的回复…
发表回复
扎德 2008-11-04
  • 打赏
  • 举报
 回复
<!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>
<script language="javascript">
var totalPage=0;
var currentPage=0;
var totalNum = 0;
function Pre()
{
if(currentPage==0)
{
alert("It's the first page");
return;
}
currentPage--;
for(var i=currentPage*3;i<currentPage*3+3;i++)
{
document.getElementsByTagName("li")[i].style.display="block";
}
for(var i=0;i<currentPage*3;i++)
{
document.getElementsByTagName("li")[i].style.display="none";
}
for(var i=currentPage*3+3;i<totalNum;i++)
{
document.getElementsByTagName("li")[i].style.display="none";
}

}

function Next()
{
if(currentPage==totalPage-1)
{
alert("It's the last page");
return;
}
currentPage++;
var num = (currentPage*3+3)>totalNum?totalNum:(currentPage*3+3);
for(var i=currentPage*3;i<num;i++)
{
document.getElementsByTagName("li")[i].style.display="block";
}
for(var i=0;i<currentPage*3;i++)
{
document.getElementsByTagName("li")[i].style.display="none";
}
for(var i=currentPage*3+3;i<totalNum;i++)
{
document.getElementsByTagName("li")[i].style.display="none";
}
}

function start()
{
totalNum = document.getElementsByTagName("li").length;
totalPage = document.getElementsByTagName("li").length%3==0?document.getElementsByTagName("li").length:Math.floor(document.getElementsByTagName("li").length/3)+1;
currentPage = 0;
for(i=3;i<totalNum;i++)
{
document.getElementsByTagName("li")[i].style.display="none";
}
}
function test()
{
for(var i=0;i<totalPage;i++)
{
var t = document.createElement("a");
t.innerText = i+1;
t.onclick=function(){currentPage=this.innerText-2;Next();};
t.href="#";
document.getElementById("tt").appendChild(t);
}

}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Test</title>
</head>

<body onload="start();test();">
<div id="div">
<ul>
<li>1111111111111111111111111 </li>
<li>2222222222222222222222222 </li>
<li>3333333333333333333333333 </li>
<li>4444444444444444444444444 </li>
<li>5555555555555555555555555 </li>
<li>6666666666666666666666666 </li>
<li>7777777777777777777777777 </li>
<li>8888888888888888888888888 </li>
<li>9999999999999999999999999 </li>
<li>0000000000000000000000000 </li>
</ul>
</div>
<div id="tt"></div>
<a href='#' onclick='return Pre()'>previous page</a>　<a href='#' onclick='return Next()'>nextpage</a>
</body>
</html>

已测
Jack123 2008-11-04
  • 打赏
  • 举报
 回复
现在开始：
首先，我们需要写一个传统的分页程序。
第一步，从数据库中读取数据

<%
Set conn=Server.CreateObject("Adodb.Connection")
connstr="provider=Microsoft.JET.OLEDB.4.0;Data Source="&Server.MapPath("data.mdb")
conn.open connstr
Set rs=Server.CreateObject("Adodb.Recordset")
sql="Select * from info"
rs.open sql,conn,1,1
%>


这些代码相信大家都已经很熟悉了，连接数据库并读取数据。
下面是分页的重要部分

<%
rs.pagesize=5
curpage=Request.QueryString("curpage")
if curpage="" then curpage=1
rs.absolutepage=curpage
%>


接着开始循环显示数据

<%
for i= 1 to rs.pagesize
if rs.eof then
exit for
end if
%>
<%=rs("record_info")%><br>
<%
rs.movenext
next
%>


下面，是做好翻页的功能链接

<%if curpage=1 then%>
首页
<%else%>
<a href="?curpage=1">首页</a>
<%end if%>

<%if curpage=1 then%>
上一页
<%else%>
<a href="?curpage=<%=curpage-1%>">上一页</a>
<%end if%>

<%if rs.pagecount<curpage+1 then%>
下一页
<%else%>
<a href="?curpage=<%=curpage+1%>">下一页</a>
<%end if%>

<%if rs.pagecount<curpage+1 then%>
尾页
<%else%>
<a href="?curpage=<%=rs.pagecount%>">尾页</a>
<%end if%>


将这个文件保存为showpage.asp
这时我们拥有了一个传统的简单asp分页显示数据的小程序，下面，我们开始利用jquery把这段程序更改为ajax分页。首先建立一个空的html页面，并引入jquery支持，然后加入一个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>
<script type="text/javascript" src="js/jquery.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ASP+Ajax+Jquery分页程序</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="show_list"></div>

</body>
</html>


将这个文件保存为fenye.html
下面，在head区域写入以下函数：

function ()
{
//这里是在页面载入时通过Jquery的loadIfModified函数将showpage.asp载入到当前的html文件中。
$("#show_list").loadIfModified("showpage.asp");
}
function get_page(url)
{
//这里的意思就是使用jquery载入指定页面的地址。
$("#show_list").loadIfModified(url);
}


接着，我们需要对我们刚刚写好的那个asp传统的分页程序做一点点改动。就是把分页的功能链接变为调用javascript函数，以调用我们刚刚写好的函数get_page(url)，将首页、上一页、下一页、尾页四个链接做这样的修改。
修改前

<%if curpage=1 then%>
首页
<%else%>
<a href="?curpage=1">首页</a>
<%end if%>

<%if curpage=1 then%>
上一页
<%else%>
<a href="?curpage=<%=curpage-1%>">上一页</a>
<%end if%>

<%if rs.pagecount<curpage+1 then%>
下一页
<%else%>
<a href="?curpage=<%=curpage+1%>">下一页</a>
<%end if%>

<%if rs.pagecount<curpage+1 then%>
尾页
<%else%>
<a href="?curpage=<%=rs.pagecount%>">尾页</a>
<%end if%>



修改后

<%if curpage=1 then%>
首页
<%else%>
//使用刚刚做好的get_page(url)函数来向html中载入制定的页面。
<a href="#" onclick="get_page('showpage.asp?curpage=1');">首页</a>
<%end if%>

<%if curpage=1 then%>
上一页
<%else%>
<a href="#" onclick="get_page('showpage.asp?curpage=<%=curpage-1%>');">上一页</a>
<%end if%>

<%if rs.pagecount<curpage+1 then%>
下一页
<%else%>
<a href="#" onclick="get_page('showpage.asp?curpage=<%=curpage+1%>');">下一页</a>
<%end if%>

<%if rs.pagecount<curpage+1 then%>
尾页
<%else%>
<a href="#" onclick="get_page('showpage.asp?curpage=<%=rs.pagecount%>');">尾页</a>
<%end if%>


gaopeng1988 2008-11-04
  • 打赏
  • 举报
 回复
[Quote=引用 9 楼 lee576 的回复:]
可以用jquery做，可以简化不少
[/Quote]

能给个例子吗
lee576 2008-11-04
  • 打赏
  • 举报
 回复
可以用jquery做，可以简化不少
Go 旅城通票 2008-11-04
  • 打赏
  • 举报
 回复
如果你还有分显示多少个页码，这种数字分页麻烦要死

除非你一次输出完所有的页数，如下面的，如果是上面的，楼主自己慢慢改

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

<script language="javascript">

var pagesize=3,totalpage,currentpage=0;

var li;

function ShowHide(page){

  currentpage=page;

  var i;

  for( i=0;i<currentpage*pagesize&&i<li.length;i++)li[i].style.display="none";

  for(i=currentpage*pagesize;i<(currentpage*pagesize+pagesize)&&i<li.length;i++)li[i].style.display="";

  for(i=currentpage*pagesize+pagesize;i<li.length;i++)li[i].style.display="none";

}



window.onload=function(){

  li=document.getElementById("div").getElementsByTagName("ul")[0].getElementsByTagName("li");

  var licount=li.length;

  totalpage=licount%pagesize==0?licount/pagesize:Math.floor(licount/pagesize)+1;

  ShowHide(0);

  var g=document.getElementById("divGuide");

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

    g.innerHTML+="<a href='javascript:ShowHide("+i+")'>"+(i+1)+"</a> ";

  }

}

</script>

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

<title>Test</title>

</head>



<body>

<div id="div"> 

<ul> 

<li>1111111111111111111111111 </li> 

<li>2222222222222222222222222 </li> 

<li>3333333333333333333333333 </li> 

<li>4444444444444444444444444 </li> 

<li>5555555555555555555555555 </li> 

<li>6666666666666666666666666 </li> 

<li>7777777777777777777777777 </li> 

<li>8888888888888888888888888 </li> 

<li>9999999999999999999999999 </li> 

<li>0000000000000000000000000 </li> 

<li>8888888888888888888888888 </li> 

<li>9999999999999999999999999 </li> 

<li>0000000000000000000000000 </li> 

<li>8888888888888888888888888 </li> 

<li>9999999999999999999999999 </li> 

</ul> 

</div>

<div id="divGuide"></div>

</body>

</html>
gaopeng1988 2008-11-04
  • 打赏
  • 举报
 回复
能不能显示出来
共n页，当前第N页，1，2，3.....之类的
换一种分页分页形式呢
扎德 2008-11-04
  • 打赏
  • 举报
 回复
楼上正解
Go 旅城通票 2008-11-04
  • 打赏
  • 举报
 回复 
<!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>

<script language="javascript">

var pagesize=3,totalpage,currentpage=0;

var li;

function ShowHide(){

  var i;

  for( i=0;i<currentpage*pagesize&&i<li.length;i++)li[i].style.display="none";

  for(i=currentpage*pagesize;i<(currentpage*pagesize+pagesize)&&i<li.length;i++)li[i].style.display="";

  for(i=currentpage*pagesize+pagesize;i<li.length;i++)li[i].style.display="none";

}



window.onload=function(){

  li=document.getElementById("div").getElementsByTagName("ul")[0].getElementsByTagName("li");

  var licount=li.length;

  totalpage=licount%pagesize==0?licount/pagesize:Math.floor(licount/pagesize)+1;

  ShowHide();

}

function Pre(){

  if(currentpage==0) alert('已经是第一页！');

  else{

    currentpage--;

    ShowHide();

  }

  return false;

}

function Next(){

  if(currentpage>=totalpage-1) alert('已经是最后一页！');

  else{

    currentpage++;

    ShowHide();

  }

  return false;

}

</script>

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

<title>Test</title>

</head>



<body>

<div id="div"> 

<ul> 

<li>1111111111111111111111111 </li> 

<li>2222222222222222222222222 </li> 

<li>3333333333333333333333333 </li> 

<li>4444444444444444444444444 </li> 

<li>5555555555555555555555555 </li> 

<li>6666666666666666666666666 </li> 

<li>7777777777777777777777777 </li> 

<li>8888888888888888888888888 </li> 

<li>9999999999999999999999999 </li> 

<li>0000000000000000000000000 </li> 

<li>8888888888888888888888888 </li> 

<li>9999999999999999999999999 </li> 

<li>0000000000000000000000000 </li> 

<li>8888888888888888888888888 </li> 

<li>9999999999999999999999999 </li> 

</ul> 

</div>

<a href='#' onclick='return Pre()'>上一页</a>　<a href='#' onclick='return Next()'>下一页</a>

</body>

</html>
xupeihuagudulei 2008-11-04
  • 打赏
  • 举报
 回复
有人，接分的。
jimu8130 2008-11-04
  • 打赏
  • 举报
 回复
http://junyaxu.javaeye.com/blog/81276
http://www.cnblogs.com/symjie520/archive/2008/03/02/1088029.html
http://www.dwww.cn/News/2008-6/2008682038137362.shtml
http://www.yibin001.com/Archives/745.aspx
gaopeng1988 2008-11-04
  • 打赏
  • 举报
 回复
来个人啊
gaopeng1988 2008-11-04
  • 打赏
  • 举报
 回复
有没有人会呀，来帮帮忙啊！
JavaScript+jQuery+项目实战系列视频教程
JavaScript jQuery 项目实战系列教程 能掌握JS和Jquery的基本技能，能完成基本的网页特效！
如何在用javascript:history.back();返回后自动刷新返回后的页面
有两个页面 页面A是数据列表显示，有查询和分页功能，通过查询显示共3页数据，翻到第2页点击其中一行数据连接到页面B进行查看， 然后从页面B返回到页面A（用history.back()返回），因为数据查看后要改变查看状态，但是返回到页面A后数据还是原来 的状态，请问javascript怎么刷新该页面。 要实现刷新该页面后还要是查询后的数据并且是在第二页，请高手帮忙！！！！非常感谢。...
JavaScript技术
● &运算符_1.htm● ·JavaScript的脆弱性_1.htm● ·JavaScript技巧环绕三维文字_1.htm● ·JavaScript时间显示三大心法_1.htm● ·Javascript特效欣赏(一)飘雪_1.htm● ·Java技巧（一）会变色的超链接_1.htm● ·弹出式说明窗口---JavaScript的使用_1.htm● ·第八讲WEB页面信息交互_1.htm● ·第二
HTML ASP VBSCRIPT JAVASCRIPT SKILLS 常见问题
1.如何 最小化、最大化、关闭窗口答：2.如何静止页面缓存答：htm网页或者asp网页response.expires=-1response.expiresabsolute=now()-1response.cachecontrol="no-cache"php网页header("expires:mon,26j
layui 如何动态加载局部页面_从输入URL到页面加载的过程？如何由一道题完善自己的前端知识体系！
前言见解有限，如有描述不当之处，请帮忙指出，如有错误，会及时修正。为什么要梳理这篇文章？最近恰好被问到这方面的问题，尝试整理后发现，这道题的覆盖面可以非常广，很适合作为一道承载知识体系的题目。关于这道题目的吐槽暂且不提（这是一道被提到无数次的题，得到不少人的赞同，也被很多人反感），本文的目的是如何借助这道题梳理自己的前端知识体系！窃认为，每一个前端人员，如果要往更高阶发展，必然会将自己的知识体系梳...
.NET社区

62,046

社区成员

669,049

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见，支持健康理性的辩论和互动，反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

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

+ 用AI写文章