求一算法：JS处理分页标签

需求看的不是挺明白
如果是自动加分页符的话, 内容多少肯定不好控制提供个大概思路,参考:可以通过获取一级容器的所有子元素大概判断~
比如获得到第三个子元素的时候, 算下,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 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处理分页标签

解决方案 »