求一算法:JS处理分页标签 有没有规定,只能用哪些标签啊?要不然,像table这样的,含有很多内容的,该怎么分割? 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 需求看的不是挺明白如果是自动加分页符的话, 内容多少肯定不好控制提供个大概思路,参考:可以通过获取一级容器的所有子元素大概判断~ 比如获得到第三个子元素的时候, 算下,1-3元素内容加起来的大小,(基本就是字符数量)或者你可以用offsetHeight求出内容的大概高度, 如果和要求接近了,就在第三个元素后面加个分页符,然后接着向下获取子元素判断内容.... 不会有什么完美的分页的,就是写出算法,执行效率也会是个问题。不如在录入的时候就注意,不用table,div等标签。服务器端分页类以前写过http://blog.csdn.net/xuStanly/archive/2006/09/10/1204808.aspx 这是我写的一个 JS 分页代码,具体是操作 Cookie ,其中关键部分算法也指明了,我先把代码贴给你再来做说明关键算法: // 得到该页显示的总数据pageDataCounts = (pageIndex*pageCount%size)==(pageIndex*pageCount)?pageIndex*pageCount:(pageIndex*pageCount-pageIndex*pageCount%size) // 得到显示数据的总页数var pageCounts = size%pageCount==0?(size/pageCount):parseInt((size/pageCount).toString().substring(0,(size/pageCount).toString().indexOf('.')))+1;pageIndex : 当前第几页,size : 一共有多少条数据(具体根据 array 或者 list 来得到大小)pageCount : 每页分几行我是做 java 的,写出来后觉得算法和 java 里的分页差不多,只需要把这几个关键的值存到 Cookie 中,下次用的时候再从 Cookie 中取就行了,不是很难,我写的时候 2 个小时搞定,相信你会跟快解决的,关键代码就是上面红色部位的代码! <!-- 接受用户传入静态参数的页码 号 --> <script language="javascript"> var LocString=String(window.document.location.href); function GetQueryString(str){ var rs=new RegExp("(^|)"+str+"=([^\&]*)(\&|$)","gi").exec(LocString),tmp; if(tmp=rs)return tmp[2]; return "没有这个参数"; } </script> <!-- 将政务新闻从 XML 文档中读取出来,并显示在 DataSource 层中 --> <xml id="Newsdb"/><script> // 设置页面是否第一次加载 setFirstLoad("true"); var IsfistLoad = getIndex("IsfistLoad"); if(IsfistLoad == '') //如果此 Cookie 值为空,即该页面为第一次加载 { // 设置初始为第 1 页 setPageIndex(1); // Cookie 名为 "pageIndex=?" } else { var temp = GetQueryString("pageIndex"); // 页面不是第一次加载则,设置对应的页下标 setPageIndex(parseInt(temp)); } // 设置每页显示 5 行数据 setPageCount(10); // Cookie 名为 "pageCount=?"; pageIndex = getIndex("pageIndex"); var pageCount = getIndex("pageCount"); try { var xmlDso = Newsdb.XMLDocument; xmlDso.load("xml_dataSource/GreenOlympicInfo.xml"); // 获取用于显示数据的层节点 var divResult = document.getElementById("DataSource"); var str = ""; str += "<table width='100%' height='100%' border='0' cellspacing='0' cellpadding='0' border='1'>"; str += "<tr>"; str += "<td width='56%'> </td>"; str += "<td width='15%'> </td>"; str += "<td width='29%'> </td>"; str += "</tr>"; var NodeList = xmlDso.getElementsByTagName("info"); var size = NodeList.length; // 得到该页显示的总数据 pageDataCounts = (pageIndex*pageCount%size)==(pageIndex*pageCount)?pageIndex*pageCount:(pageIndex*pageCount-pageIndex*pageCount%size) // 得到显示数据的总页数 var pageCounts = size%pageCount==0?(size/pageCount):parseInt((size/pageCount).toString().substring(0,(size/pageCount).toString().indexOf('.')))+1; for(var i = (pageIndex*pageCount - pageCount); i< pageDataCounts ; i++) { var SonNodeList = NodeList[i].childNodes; var SonSize = SonNodeList.length; str +="<tr>"; str += "<td> <a href='GreenOlympicContent.html?Id="+SonNodeList[0].nodeTypedValue+"' class='a'>" +SonNodeList[1].nodeTypedValue+"</a></td>"; str += "<td align='center'>"+SonNodeList[2].nodeTypedValue+"</td>"; str += "<td align='center'>"+SonNodeList[3].nodeTypedValue+"</td>"; str += "</tr>"; str += "<tr>"; str += "<td colspan='3'> </td>"; str += "</tr>"; } str += "</table>"; divResult.innerHTML = str; // 显示 上一页,下一页的按钮 divGotoPage = document.getElementById("GotoPage"); var str2 =" "; str2 +="<input type='submit' class='button_style' value='首页' onClick='jumping(1)'> "; str2 +="<input type='submit' class='button_style' value='上一页' onClick='jumping("+(pageIndex-1).toString()+")'> "; str2 +="<input type='submit' class='button_style' value='下一页' onClick='jumping("+(pageIndex+1).toString()+")'> "; str2 +="<input type='submit' class='button_style' value='最后一页' onClick='jumping("+pageCounts+")'>"; str2 += " <font size=2 color='#993300'>转到</font> "+ "<select name='select_page' onChange=jumping(this.value)>"; for(var k = 1 ; k<=pageCounts ;k++) { if(k==pageIndex) { str2 += "<option value="+k+" selected>"+k+"</option>"; } else { str2 += "<option value="+k+">"+k+"</option>"; } } str2 += "</select> <font size=2 color='#993300'>页</font>"; divGotoPage.innerHTML = str2; } catch(e) { alert(e.toString()); } function jumping(pageIndex) { if(pageIndex > pageCounts) // 如果传入的页码大于最大页数,则将页码设置为最大页数 { location.href="GreenOlympicList.html?pageIndex="+pageCounts; } else if(pageIndex < 1) // 如果传入的页码小于1 ,则将页码设置为第一页 { location.href="GreenOlympicList.html?pageIndex="+1; } else // 其他情况则将页码设置为传入的 pageIndex { location.href="GreenOlympicList.html?pageIndex="+pageIndex; } } // 设置分页的页码 function setPageIndex(pageIndex) { document.cookie="pageIndex="+pageIndex; } // 设置每页分多少行数据 function setPageCount(pageCount) { document.cookie="pageCount="+pageCount; } // 当页面第一次加载时,设置标识 function setFirstLoad(flag) { document.cookie="IsfistLoad="+flag; } function getIndex(pageIndex){ //从所有的 Cookie 中将 "pageIndex=?" 的值取出来 var index= " "; var pageIndex = pageIndex +"="; if(document.cookie.length >0){ offset = document.cookie.indexOf(pageIndex); end=document.cookie.indexOf( "; ",offset); if(end == -1) // 即此 Cookie 的值为最后一个 Cookie 值 { length1 = pageIndex.length; str = document.cookie.substring(offset,end); length2 = str.length; temp = document.cookie.substring(length2); index = temp.substring(length1,length2); } else { length1 = pageIndex.length; str = document.cookie.substring(offset,end); index = str.substring(length1,(end-offset)); } } return parseInt(index); // return index; } </script> 谢谢大家捧场,我也考虑了该操作的麻烦性和可行性,大家提供的思路都很好很现实,回头去写个,写好了和大家分享下,主要也是table之类的容器边界不好控制,要不就是字数限制不是很好,再次感谢大家 求大神解一个js问题 导航条鼠标单击变色问题 jsp页面执行存储过程 为什么不能获取元素 即时计算文本框数据 求救:全部分啦.^_^.. 一个javascript传递值问题. 在showModalDialog窗口中,按提交“按钮”后如何不弹出新窗口? 怎样连续打印多个文件 media的在网页中的声音控制????????? 用JAVAScript怎么读取指定目录下的Cookie 求一正则,验证密码不能是中文且必须以英文字母开头 麻烦给个树形结构最简单的例子
如果是自动加分页符的话, 内容多少肯定不好控制提供个大概思路,参考:可以通过获取一级容器的所有子元素大概判断~
比如获得到第三个子元素的时候, 算下,1-3元素内容加起来的大小,(基本就是字符数量)或者你可以用offsetHeight求出内容的大概高度, 如果和要求接近了,就在第三个元素后面加个分页符,然后接着向下获取子元素判断内容....
不如在录入的时候就注意,不用table,div等标签。
服务器端分页类以前写过
http://blog.csdn.net/xuStanly/archive/2006/09/10/1204808.aspx
关键算法:
// 得到该页显示的总数据
pageDataCounts = (pageIndex*pageCount%size)==(pageIndex*pageCount)?pageIndex*pageCount:(pageIndex*pageCount-pageIndex*pageCount%size)
// 得到显示数据的总页数
var pageCounts = size%pageCount==0?(size/pageCount):parseInt((size/pageCount).toString().substring(0,(size/pageCount).toString().indexOf('.')))+1;pageIndex : 当前第几页,
size : 一共有多少条数据(具体根据 array 或者 list 来得到大小)
pageCount : 每页分几行
我是做 java 的,写出来后觉得算法和 java 里的分页差不多,只需要把这几个关键的值存到 Cookie 中,下次用的时候再从 Cookie 中取就行了,不是很难,我写的时候 2 个小时搞定,相信你会跟快解决的,关键代码就是上面红色部位的代码!
<script language="javascript">
var LocString=String(window.document.location.href);
function GetQueryString(str){
var rs=new RegExp("(^|)"+str+"=([^\&]*)(\&|$)","gi").exec(LocString),tmp;
if(tmp=rs)return tmp[2];
return "没有这个参数";
}
</script>
<!-- 将政务新闻从 XML 文档中读取出来,并显示在 DataSource 层中 -->
<xml id="Newsdb"/>
<script> // 设置页面是否第一次加载
setFirstLoad("true");
var IsfistLoad = getIndex("IsfistLoad"); if(IsfistLoad == '') //如果此 Cookie 值为空,即该页面为第一次加载
{
// 设置初始为第 1 页
setPageIndex(1); // Cookie 名为 "pageIndex=?"
}
else
{
var temp = GetQueryString("pageIndex"); // 页面不是第一次加载则,设置对应的页下标
setPageIndex(parseInt(temp));
}
// 设置每页显示 5 行数据
setPageCount(10); // Cookie 名为 "pageCount=?";
pageIndex = getIndex("pageIndex");
var pageCount = getIndex("pageCount");
try
{
var xmlDso = Newsdb.XMLDocument;
xmlDso.load("xml_dataSource/GreenOlympicInfo.xml");
// 获取用于显示数据的层节点
var divResult = document.getElementById("DataSource");
var str = "";
str += "<table width='100%' height='100%' border='0' cellspacing='0' cellpadding='0' border='1'>"; str += "<tr>";
str += "<td width='56%'> </td>";
str += "<td width='15%'> </td>";
str += "<td width='29%'> </td>";
str += "</tr>";
var NodeList = xmlDso.getElementsByTagName("info");
var size = NodeList.length;
// 得到该页显示的总数据
pageDataCounts = (pageIndex*pageCount%size)==(pageIndex*pageCount)?pageIndex*pageCount:(pageIndex*pageCount-pageIndex*pageCount%size)
// 得到显示数据的总页数
var pageCounts = size%pageCount==0?(size/pageCount):parseInt((size/pageCount).toString().substring(0,(size/pageCount).toString().indexOf('.')))+1; for(var i = (pageIndex*pageCount - pageCount); i< pageDataCounts ; i++)
{
var SonNodeList = NodeList[i].childNodes;
var SonSize = SonNodeList.length;
str +="<tr>";
str += "<td> <a href='GreenOlympicContent.html?Id="+SonNodeList[0].nodeTypedValue+"' class='a'>"
+SonNodeList[1].nodeTypedValue+"</a></td>";
str += "<td align='center'>"+SonNodeList[2].nodeTypedValue+"</td>";
str += "<td align='center'>"+SonNodeList[3].nodeTypedValue+"</td>";
str += "</tr>";
str += "<tr>";
str += "<td colspan='3'> </td>";
str += "</tr>";
}
str += "</table>"; divResult.innerHTML = str;
// 显示 上一页,下一页的按钮
divGotoPage = document.getElementById("GotoPage");
var str2 =" ";
str2 +="<input type='submit' class='button_style' value='首页' onClick='jumping(1)'> ";
str2 +="<input type='submit' class='button_style' value='上一页' onClick='jumping("+(pageIndex-1).toString()+")'> ";
str2 +="<input type='submit' class='button_style' value='下一页' onClick='jumping("+(pageIndex+1).toString()+")'> ";
str2 +="<input type='submit' class='button_style' value='最后一页' onClick='jumping("+pageCounts+")'>";
str2 += " <font size=2 color='#993300'>转到</font> "+
"<select name='select_page' onChange=jumping(this.value)>";
for(var k = 1 ; k<=pageCounts ;k++)
{
if(k==pageIndex)
{
str2 += "<option value="+k+" selected>"+k+"</option>";
}
else
{
str2 += "<option value="+k+">"+k+"</option>";
}
}
str2 += "</select> <font size=2 color='#993300'>页</font>";
divGotoPage.innerHTML = str2;
}
catch(e)
{
alert(e.toString());
}
function jumping(pageIndex)
{
if(pageIndex > pageCounts) // 如果传入的页码大于最大页数,则将页码设置为最大页数
{
location.href="GreenOlympicList.html?pageIndex="+pageCounts;
}
else if(pageIndex < 1) // 如果传入的页码小于1 ,则将页码设置为第一页
{
location.href="GreenOlympicList.html?pageIndex="+1;
}
else // 其他情况则将页码设置为传入的 pageIndex
{
location.href="GreenOlympicList.html?pageIndex="+pageIndex;
}
}
// 设置分页的页码
function setPageIndex(pageIndex)
{
document.cookie="pageIndex="+pageIndex;
}
// 设置每页分多少行数据
function setPageCount(pageCount)
{
document.cookie="pageCount="+pageCount;
}
// 当页面第一次加载时,设置标识
function setFirstLoad(flag)
{
document.cookie="IsfistLoad="+flag;
}
function getIndex(pageIndex){
//从所有的 Cookie 中将 "pageIndex=?" 的值取出来
var index= " ";
var pageIndex = pageIndex +"=";
if(document.cookie.length >0){
offset = document.cookie.indexOf(pageIndex);
end=document.cookie.indexOf( "; ",offset);
if(end == -1) // 即此 Cookie 的值为最后一个 Cookie 值
{
length1 = pageIndex.length;
str = document.cookie.substring(offset,end);
length2 = str.length;
temp = document.cookie.substring(length2);
index = temp.substring(length1,length2);
}
else
{
length1 = pageIndex.length;
str = document.cookie.substring(offset,end);
index = str.substring(length1,(end-offset));
}
}
return parseInt(index);
// return index;
}
</script>