100分：如何在一个固定大小的层中显示一个动态表，如果表太长，能够自动分页？

1:你可以用AJAX去按需取数据,每次只取5行,再作后续处理;
2:用隐藏框架,原理同上;
3:或者把数据直接组织到客户端,再用客户端脚本,作上述处理;
4:如果库中数据量较大时,可能上述方法会反应慢些,所以你也可结合上述来用,(1-3,2-3).

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

这是我的代码：<script language="javascript">
<!--
  function showLayers(i)
  {
    eval("document.all.layer" + i + ".style.visibility='visible';");
    eval("document.all.a"+i+".style.backgroundColor='#1eb2ef';");
    eval("document.all.f"+i+".style.color='#ffffff';");
  }
  function hideLayers(i)
  {
    eval("document.all.layer" + i + ".style.visibility='hidden';");
    eval("document.all.a" + i + ".style.backgroundColor='';");
    eval("document.all.f"+i+".style.color='#0000FF';");
  }
  function navbarOver(src, clrOver)
  {
    if(!src.contains(event.fromElement))
    {
      src.bgColor = clrOver;
    }
  }
  function navbarOut(src, clrIn)
  {
    if(!src.contains(event.toElement))
    {
      src.bgColor = clrIn;
    }
  }
//--------------
function OnGoto(pageId) {
var pageURL1="enterpriseList.asp?action=search&page="+pageId;
corpForm.action = pageURL1;
corpForm.submit();
}      function DivSetVisible(state,layerid)
      {
      //alert(layerid)
        var DivRef=document.getElementById(layerid);
        //var DivRef=document.getElementById('layer0');
        var IfrRef=document.getElementById('DivShim');
        if(state)
        {
          DivRef.style.display="block";
          IfrRef.style.width=DivRef.offsetWidth;
          IfrRef.style.height=DivRef.offsetHeight;
          IfrRef.style.top=DivRef.style.top;
          IfrRef.style.left=DivRef.style.left;
          IfrRef.style.zIndex=DivRef.style.zIndex;
          IfrRef.style.display="block";
        }
        else
        {
          //DivRef.style.display="none";
          IfrRef.style.display="none";
        }
      }
</script>   <html>
<head>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link href="../images/admin.css" rel="stylesheet" type="text/css">
<SCRIPT LANGUAGE="JavaScript" src="../js/comm.js"> </SCRIPT>
<SCRIPT LANGUAGE="JavaScript" src="../js/enterprise.js"> </SCRIPT>
<SCRIPT LANGUAGE="JavaScript" src="../js/date.js"> </SCRIPT><title>Informaiton</title>
</head>
<body topmargin="30" leftmargin="80" style="background-image: url('');  background-attachment: fixed; background-repeat:no-repeat" >
<div style="position: absolute; width: 86px; height: 24px; z-index: 2; left: 254px; top: 273px" id="layer15">
<a href="#" onclick="javascript:showLayers(35);DivSetVisible(true,'layer35')" onMousedown="javascript:hideLayers(35);DivSetVisible(false,'layer35')">Product</a></div>
<div id="tooltip" style="position:absolute"></div><DIV id=t_info2
style="PADDING-RIGHT: 12px; PADDING-LEFT: 12px; Z-INDEX: 1; BACKGROUND: #cccccc; VISIBILITY: hidden; PADDING-BOTTOM: 12px; WIDTH: 260px; LINE-HEIGHT: 22px; PADDING-TOP: 12px; POSITION: absolute; HEIGHT: 90px"></DIV>
<DIV id=t_info
style="BORDER-RIGHT: #b2d1ff 1px solid; PADDING-RIGHT: 12px; BORDER-TOP: #b2d1ff 1px solid; PADDING-LEFT: 12px; Z-INDEX: 2; BACKGROUND: #ffffff; VISIBILITY: hidden; PADDING-BOTTOM: 12px; BORDER-LEFT: #b2d1ff 1px solid; WIDTH: 260px; LINE-HEIGHT: 22px; PADDING-TOP: 12px; BORDER-BOTTOM: #b2d1ff 1px solid; POSITION: absolute; HEIGHT: 90px"></DIV>
<%
if session("view")=1 then
queryrs = "select * from company where tran=0"
elseif session("view")=2 then
queryrs = "select * from company where tran=0 and addcity='"&session("areaid")&"'"
end if
queryrs = queryrs & " order by id"
%>
<div id='layerall' style='position:absolute; width:160px;z-index:100; height:1px;' overflow-y:scroll;>
<iframe id='DivShim' src=javascript:false; scrolling=yes frameborder=0 style='position:absolute;top:0px;left:0px;display:none;filter=progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)'></iframe><div id='layer35' onMouseOver="javascript:showLayers(35);DivSetVisible(true,'layer35')" onMouseOut=javascript:hideLayers(35);DivSetVisible(false,'layer35')
style='position:absolute;visibility:hidden;z-index:100;left:406px;top:46px;'overflow:auto;>
<table width=260 border='0' cellspacing='1' cellpadding='0' bgcolor='#040108'>
<%
Set rs = Server.CreateObject("ADODB.Recordset")
rs.open queryrs,conn,1,1
total=RS.RecordCount
if total>0 then
for i=0 to 4(每页显示的数量)
if rs.EOF then exit for
%><tr>
<td width=260 onMouseOver="javascript:navbarOver(this,'#1eb2ef');"
onMouseOut="javascript:navbarOut(this,'#ffffff');" bgcolor=#FFFFFF height=20 width=100>
<font size="2"> <a class=menu14 href=#><%=trim(rs("name"))%></a> </font></td>
</tr>
<%
                  rs.movenext
           next
end if
rs.close
set rs=nothing
%>
</table>
</div>
</div><p><img border="0" src="pic/Large.jpg"></p>
你可以试着,生成所有的页面,比方每5条一个div,
当然每个div有相应的ID,这样再去控制显示或隐藏;
//有个缺点:如果数据量大,用户在等待上不一定能接受;
帮你写了个简单的例子,基本思想
1:把全部的数据先读到JS的变量AryData里
2:通过一个全局变量来控制页数Page整个例子已经可以实现了在div里的分页,但是仅此而已,还有很多需要改进的地方.lz参考下吧,希望对你有帮助^_^
<head>
<style>
div.FatherDiv
{
display:none;
border:1px solid red;
overflow:auto;
width:200px;
height:100px;
overflow:100px;
left:100px;
top:100px;
position:absolute;
}
</style>
</head>
<body>
<a ClickFlag=1 href="#">hei , click here</a>
</body><SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
fengruzhuo(傻大木) :
   thx，
   不过，我的数据比较多，有的时候一次会读出100个左右字符串的，每个字符串又比较长，所以可能不行。 anyway， thx
1:如果怕一次读出来太多,可以用ajax来做,只是比较麻烦
基本思想是:每次把请求的页数传回去,再在后台根据请求的页数组织数据,返回你请求的那5条数据和总页数
这样是肯定可行的,只是后台处理变得稍微复杂了2:我不知道你担心读出来的数据太多是什么原因,怕页面慢?把全部的数据读出来写到一个js的变量里后,再分割成数组,即使这个数组很大,但是我的程序里并没有每次都把它全部循环,只是循环了5次,所以不会慢的.那你担心的是什么?