打印

生成html静态文件后的分页（客户端版）

BlueMiracle [楼主]

中级会员

帖子: 126
体力: 434
威望: 8
当前: 北京海淀区

专长 JS,PHP,AS

1^# 大中小发表于 2006-2-16 13:33

一般情况，都在服务器端完成，完成生，生成类似02.html,20_1.html，这样一来一个文章就有两个文件，假如说，我数据库中有1000条记录，平均每条记录生成2个html静态文件，那么将会有2000个文件。我是不太喜欢文件太多的，于是想到用客户端来进行分页查看，下面是代码（代码没有经过优化），仅为测试版。

复制内容到剪贴板

代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

<META NAME="Generator" CONTENT="EditPlus">

<META NAME="Author" CONTENT="">

<META NAME="Keywords" CONTENT="">

<META NAME="Description" CONTENT="">

<style>

* {

    font-size:10.2pt;

    font-family:tahoma;

    line-height:150%;

}

.divContent

{

    border:1px solid red;

    background-color:#FFD2D3;

    width:500px;

    word-break:break-all;

    margin:10px 0px 10px;

    padding:10px;

}

</style>

</HEAD>

<BODY>

header

<div id="divPagenation"></div>

<div id="divContent"></div>

footer

<SCRIPT LANGUAGE="JavaScript">

<!--

s="<p>女老师竭力向孩子们证明，学习好功课的重要性。 </p><p>她说：“牛顿坐在树下，眼睛盯着树在思考，这时，有一个苹果落在他的头上，于是他发现了万有引力定律，孩子们，你们想想看，做一位伟大的科学家多么好，多么神气啊，要想做到这一点，就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说：“兴许是这样，可是，假如他坐在学校里，埋头书本，那他就什么也发现不了啦。” </p>";

function DHTMLpagenation(content)

{

    // client static html file pagenation

    var contentLength=content.length;

    var pageSizeCount;

    var perpageLength=100; //default perpage byte length.

    var currentPage;

    var locationURL=location.href;

    var regularExp=/.+[\?\&]{1}page=(\d+)/;

    var divDisplayContent;

    var strDisplayContent="";

    var divDisplayPagenation;

    var strDisplayPagenation;

    arguments.length==2?perpageLength=arguments[1]:'';

    pageSizeCount=Math.ceil((contentLength/perpageLength));

    strDisplayPagenation="pagenation：";

    if(document.getElementById("divContent"))

    {

        divDisplayContent=document.getElementById("divContent");

    }

    else

    {

        try

        {

            divDisplayContent=document.createElement("DIV");

            divDisplayContent.id="divContent";

            document.body.appendChild(divDisplayContent);

        }

        catch(e)

        {

            return false;

        }

    }

    divDisplayContent.className="divContent";

    if(document.getElementById("divPagenation"))

    {

        divDisplayPagenation=document.getElementById("divPagenation");

    }

    else

    {

        try

        {

            divDisplayPagenation=document.createElement("DIV");

            divDisplayPagenation.id="divPagenation";

            document.body.appendChild(divDisplayPagenation);

        }

        catch(e)

        {

            return false;

        }

    }

    if(contentLength<=perpageLength)

    {

        strDisplayContent=content;

        divDisplayContent.innerHTML=strDisplayContent;

        return;

    }

    for(var i=1;i<=pageSizeCount;i++)

        strDisplayPagenation+='<a href="?page='+i+'">'+i+'</a> ';

    divDisplayPagenation.innerHTML=strDisplayPagenation;

    if(regularExp.test(locationURL))

    {

        currentPage=RegExp.$1;

        strDisplayContent=content.substr((currentPage-1)*perpageLength,perpageLength);

    }

    else

    {

        strDisplayContent=content.substr(0,perpageLength);

    }

    divDisplayContent.innerHTML=strDisplayContent;

}

DHTMLpagenation(s)

//-->

</SCRIPT>

</BODY>

</HTML>

http://www.never-online.net

TOP

Sheneyan

子虚乌有
超级版主

帖子: 8266
体力: 19489
威望: 177
当前: 福建厦门
离线: 16 天

专长 JS,JAVA,Oracle

2^# 大中小发表于 2006-2-16 14:42

呵呵，想法不错。不过存在几个问题：

0 既然是客户端分页，那何必要整个页面再次进行更新，直接在客户端分页就可以了。也就是说那些超链接导航中采用脚本读取对应页面显示即可。
1 如果客户端的脚本出现问题，没法使用，那文章就看不见了？
2 你文章内容的截取采用非常简单的将innerHTML截断掉，如果内容中存在另外的html标签，那就很可能被截断，导致整个页面变形。

客户端的分页我也一直在寻找突破口，目前有几个点：

1 最好是先将所有内容都显示出来，然后使用脚本将内容块隐藏掉，处理完再放出来。只要小心点，应该不会有闪烁。

2 目前自己感觉最麻烦的就是如何只能的将一整段html截断，而截断之后的内容不会出现异常，比如表格截断，一些加重标记被截断，颜色被截断之类可能产生不良显示效果的文字。当前只想到了将所有内容分段（比如按照p分段），然后以最合适的长度平均分页，但可能出现某页面特别长，而某些页面又只有几行的情况。

子叶:子乌的叶子
帅哥们，美女们，新的一年终于来了，祝贺你们...终于又老了一岁~

TOP

BlueMiracle [楼主]

中级会员

帖子: 126
体力: 434
威望: 8
当前: 北京海淀区

专长 JS,PHP,AS

3^# 大中小发表于 2006-2-16 15:04

Sheneyan在上个帖子中说

引用:

呵呵，想法不错。不过存在几个问题：

0 既然是客户端分页，那何必要整个页面再次进行更新，直接在客户端分页就可以了。也就是说那些超链接导航中采用脚本读取对应页面显示即可。
1 如果客户端的脚本出现问题，没法使用，那文章就看不见了？
2 你文章内容的截取采用非常简单的将innerHTML截断掉，如果内容中存在另外的html标签，那就很可能被截断，导致整个页面变形。

客户端的分页我也一直在寻找突破口，目前有几个点：

1 最好是先将所有内容都显示出来，然后使用脚本将内容块隐藏掉，处理完再放出来。只要小心点，应该不会有闪烁。

2 目前自己感觉最麻烦的就是如何只能的将一整段html截断，而截断之后的内容不会出现异常，比如表格截断，一些加重标记被截断，颜色被截断之类可能产生不良显示效果的文字。当前只想到了将所有内容分段（比如按照p分段），然后以最合适的长度平均分页，但可能出现某页面特别长，而某些页面又只有几行的情况。

谢谢子乌的回复和建议

我晚上回去会完善一些这个代码，希望你能多提些建议，thanks.

我已经考虑到这个两个问题了，

，
1.关于标记被截段的问题
re:一般情况下是寻找一些特殊的标记（如table，p，pre，以及常用的一些HTML标记）来分别进行解析，如果是这样，那样解析这些标记就是个麻烦事儿了，呵呵，现在只能想到这个办法，似乎这个应该叫“智能分页”。

2.关于分页之后重新载入，这个我也想到了，不知道您所说的意思是不是和我一样，我理解的就是，一次载入所有content，点击分页之后只用把每页的字符串赋给一个容器即可，而不必每个分页页面都进行相同的载入和解析。

我晚上回去把这个再做一点，现在没有时间做。

http://www.never-online.net

TOP

子心

网络白痴
金牌会员

帖子: 2145
体力: 3454
威望: 19
当前: 浙江金华
离线: 1 天

专长 前端制作,CFML,MSSQL

4^# 大中小发表于 2006-2-16 15:55

http://www.cfcodes.com/?ID=186
0秒分页列表的实现—FlashPaper版

天也空，地也空，人生渺茫在其中；日也空，月也空，东升西沉为谁功；
田也空，屋也空，换了多少主人翁；金也空，银也空，死后何曾握手中。

TOP

Sheneyan

子虚乌有
超级版主

帖子: 8266
体力: 19489
威望: 177
当前: 福建厦门
离线: 16 天

专长 JS,JAVA,Oracle

5^# 大中小发表于 2006-2-16 16:35

好长。。。。。。。。。。。。看起来似乎不错，先把链接收了有空慢慢研究，看你那demo好像adobe哦？

子叶:子乌的叶子
帅哥们，美女们，新的一年终于来了，祝贺你们...终于又老了一岁~

TOP

子心

网络白痴
金牌会员

帖子: 2145
体力: 3454
威望: 19
当前: 浙江金华
离线: 1 天

专长 前端制作,CFML,MSSQL

6^# 大中小发表于 2006-2-16 16:40

长是因为废话写的多了一些，呵呵。只是把简单的这个给写出来了，数据拆分功能的没有写。

天也空，地也空，人生渺茫在其中；日也空，月也空，东升西沉为谁功；
田也空，屋也空，换了多少主人翁；金也空，银也空，死后何曾握手中。

TOP

BlueMiracle [楼主]

中级会员

帖子: 126
体力: 434
威望: 8
当前: 北京海淀区

专长 JS,PHP,AS

7^# 大中小发表于 2006-2-16 20:31

修改了一下：不必重新载入数据，实现无刷新效果

复制内容到剪贴板

代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

<META NAME="Generator" CONTENT="EditPlus">

<META NAME="Author" CONTENT="">

<META NAME="Keywords" CONTENT="">

<META NAME="Description" CONTENT="">

<style>

* {

    font-size:10.2pt;

    font-family:tahoma;

    line-height:150%;

}

.divContent

{

    border:1px solid red;

    background-color:#FFD2D3;

    width:500px;

    word-break:break-all;

    margin:10px 0px 10px;

    padding:10px;

}

</style>

</HEAD>

<BODY>

header

<div id="divPagenation"></div>

<div id="divContent"></div>

footer

<SCRIPT LANGUAGE="JavaScript">

<!--

s="<p>女老师竭力向孩子们证明，学习好功课的重要性。 </p><p>她说：“牛顿坐在树下，眼睛盯着树在思考，这时，有一个苹果落在他的头上，于是他发现了万有引力定律，孩子们，你们想想看，做一位伟大的科学家多么好，多么神气啊，要想做到这一点，就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说：“兴许是这样，可是，假如他坐在学校里，埋头书本，那他就什么也发现不了啦。” </p><p>女老师竭力向孩子们证明，学习好功课的重要性。 </p><p>她说：“牛顿坐在树下，眼睛盯着树在思考，这时，有一个苹果落在他的头上，于是他发现了万有引力定律，孩子们，你们想想看，做一位伟大的科学家多么好，多么神气啊，要想做到这一点，就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说：“兴许是这样，可是，假如他坐在学校里，埋头书本，那他就什么也发现不了啦。” </p><p>女老师竭力向孩子们证明，学习好功课的重要性。 </p><p>她说：“牛顿坐在树下，眼睛盯着树在思考，这时，有一个苹果落在他的头上，于是他发现了万有引力定律，孩子们，你们想想看，做一位伟大的科学家多么好，多么神气啊，要想做到这一点，就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说：“兴许是这样，可是，假如他坐在学校里，埋头书本，那他就什么也发现不了啦。” </p><p>女老师竭力向孩子们证明，学习好功课的重要性。 </p><p>她说：“牛顿坐在树下，眼睛盯着树在思考，这时，有一个苹果落在他的头上，于是他发现了万有引力定律，孩子们，你们想想看，做一位伟大的科学家多么好，多么神气啊，要想做到这一点，就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说：“兴许是这样，可是，假如他坐在学校里，埋头书本，那他就什么也发现不了啦。” </p><p>女老师竭力向孩子们证明，学习好功课的重要性。 </p><p>她说：“牛顿坐在树下，眼睛盯着树在思考，这时，有一个苹果落在他的头上，于是他发现了万有引力定律，孩子们，你们想想看，做一位伟大的科学家多么好，多么神气啊，要想做到这一点，就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说：“兴许是这样，可是，假如他坐在学校里，埋头书本，那他就什么也发现不了啦。” </p>";

function DHTMLpagenation(content) { with (this)

{

    // client static html file pagenation

    this.content=content;

    this.contentLength=content.length;

    this.pageSizeCount;

    this.perpageLength=100; //default perpage byte length.

    this.currentPage=1;

    //this.regularExp=/.+[\?\&]{1}page=(\d+)/;

    this.regularExp=/\d+/;

    this.divDisplayContent;

    this.contentStyle=null;

    this.strDisplayContent="";

    this.divDisplayPagenation;

    this.strDisplayPagenation="";

    

    arguments.length==2?perpageLength=arguments[1]:'';

    try {

        divExecuteTime=document.createElement("DIV");

        document.body.appendChild(divExecuteTime);

    }

    catch(e)

    {

    }

    if(document.getElementById("divContent"))

    {

        divDisplayContent=document.getElementById("divContent");

    }

    else

    {

        try

        {

            divDisplayContent=document.createElement("DIV");

            divDisplayContent.id="divContent";

            document.body.appendChild(divDisplayContent);

        }

        catch(e)

        {

            return false;

        }

    }

    if(document.getElementById("divPagenation"))

    {

        divDisplayPagenation=document.getElementById("divPagenation");

    }

    else

    {

        try

        {

            divDisplayPagenation=document.createElement("DIV");

            divDisplayPagenation.id="divPagenation";

            document.body.appendChild(divDisplayPagenation);

        }

        catch(e)

        {

            return false;

        }

    }

    DHTMLpagenation.initialize();

    return this;

    

}};

DHTMLpagenation.initialize=function() { with (this)

{

    divDisplayContent.className=contentStyle!=null?contentStyle:"divContent";

    if(contentLength<=perpageLength)

    {

        strDisplayContent=content;

        divDisplayContent.innerHTML=strDisplayContent;

        return null;

    }

    pageSizeCount=Math.ceil((contentLength/perpageLength));

    DHTMLpagenation.goto(currentPage);

    DHTMLpagenation.displayContent();

}};

DHTMLpagenation.displayPage=function() { with (this)

{

    strDisplayPagenation="分页：";

    if(currentPage&&currentPage!=1)

        strDisplayPagenation+='<a href="javascript:void(0)" onclick="DHTMLpagenation.previous()">上一页</a>&nbsp;&nbsp;';

    else

        strDisplayPagenation+="上一页&nbsp;&nbsp;";

    for(var i=1;i<=pageSizeCount;i++)

    {

        if(i!=currentPage)

            strDisplayPagenation+='<a href="javascript:void(0)" onclick="DHTMLpagenation.goto('+i+');">'+i+'</a>&nbsp;&nbsp;';

        else

            strDisplayPagenation+=i+"&nbsp;&nbsp;";

    }

    if(currentPage&&currentPage!=pageSizeCount)

        strDisplayPagenation+='<a href="javascript:void(0)" onclick="DHTMLpagenation.next()">下一页</a>&nbsp;&nbsp;';

    else

        strDisplayPagenation+="下一页&nbsp;&nbsp;";

    strDisplayPagenation+="共 " + pageSizeCount + " 页，每页" + perpageLength + " 字符，调整字符数：<input type='text' value='"+perpageLength+"' id='ctlPerpageLength'><input type='button' value='确定' onclick='DHTMLpagenation.change(document.getElementById(\"ctlPerpageLength\").value);'>";

    divDisplayPagenation.innerHTML=strDisplayPagenation;

}};

DHTMLpagenation.previous=function() { with(this)

{

    DHTMLpagenation.goto(currentPage-1);

}};

DHTMLpagenation.next=function() { with(this)

{

    DHTMLpagenation.goto(currentPage+1);

}};

DHTMLpagenation.goto=function(iCurrentPage) { with (this)

{

    startime=new Date();

    if(regularExp.test(iCurrentPage))

    {

        currentPage=iCurrentPage;

        strDisplayContent=content.substr((currentPage-1)*perpageLength,perpageLength);

    }

    else

    {

        alert("page parameter error!");

    }

    DHTMLpagenation.displayPage();

    DHTMLpagenation.displayContent();

}};

DHTMLpagenation.displayContent=function() { with (this)

{

    divDisplayContent.innerHTML=strDisplayContent;

}};

DHTMLpagenation.change=function(iPerpageLength) { with(this)

{

    if(regularExp.test(iPerpageLength))

    {

        DHTMLpagenation.perpageLength=iPerpageLength;

        DHTMLpagenation.currentPage=1;

        DHTMLpagenation.initialize();

    }

    else

    {

        alert("请输入数字");

    }

}};

// method

// DHTMLpagenation(strContent,perpageLength)

DHTMLpagenation(s,100);

//-->

</SCRIPT>

</BODY>

</HTML>

http://www.never-online.net

TOP

SenFe

盛飞
钻石会员

帖子: 4770
体力: 9454
威望: 14
当前: 四川成都

专长 ASP,Access

8^# 大中小发表于 2006-2-16 21:16

<xml id="users">
<userGroup>
  <user>
    <userid>user 1</userid>
    <name>name 1</name>
  </user>
  <user>
    <userid>user 2</userid>
    <name>name 2</name>
  </user>
  <user>
    <userid>user 3</userid>
    <name>name 3</name>
  </user>
  <user>
    <userid>user 4</userid>
    <name>name 4</name>
  </user>
  <user>
    <userid>user 5</userid>
    <name>name 5</name>
  </user>
  <user>
    <userid>user 6</userid>
    <name>name 7</name>
  </user>
  <user>
    <userid>user 7</userid>
    <name>name 7</name>
  </user>
  <user>
    <userid>user 8</userid>
    <name>name 8</name>
  </user>
  <user>
    <userid>user 9</userid>
    <name>name 9</name>
  </user>
</userGroup>
</xml>
<table id="datatable" datasrc="#users" DATAPAGESIZE="3" width="400" border="1">
<tr>
    <td><a  datafld="userid" onmouseover="if(this.changed==null){this.href='ok.asp?id='+this.href;this.changed=true}"><span datafld="name"></span></a></td>
    <td><span datafld="name"></span></td>
</tr>
</table>
<button onclick="document.all.datatable.previousPage()">Previous Page</button>
<button onclick="document.all.datatable.nextPage()">Next Page</button>

提示：您可以先修改部分代码再运行

淡泊以明志宁静而致远

TOP

Sheneyan

子虚乌有
超级版主

帖子: 8266
体力: 19489
威望: 177
当前: 福建厦门
离线: 16 天

专长 JS,JAVA,Oracle

9^# 大中小发表于 2006-2-17 10:48

to BlueMiracle:

写的不错,呵呵,你现在这个代码就能够很明显的看出强行截断产生的效果并不是很好了吧

这种智能分页如果能够实现,会是一种很棒的效果.

to SenFe:

你的代码是使用ie中xml数据岛与data项的结合构造的.属于ie里很经典的写法,不过....怎么实现分页?对于段落,难道三个p一页吗-_-?

子叶:子乌的叶子
帅哥们，美女们，新的一年终于来了，祝贺你们...终于又老了一岁~

TOP

adleyliu

初级会员

帖子: 42
体力: 157
威望: 0
离线: 208 天

发短消息

10^# 大中小发表于 2006-2-17 11:01

一般情况，都在服务器端完成，完成生，生成类似02.html,20_1.html，这样一来一个文章就有两个文件，假如说，我数据库中有1000条记录，平均每条记录生成2个html静态文件，那么将会有2000个文件。我是不太喜欢文件太多的，于是想到用客户端来进行分页查看，下面是代码（代码没有经过优化），
///////////////////////////////////////////////////
已经生成HTML了，分页两页。就是分成20页
在静态页中选择分页也不会读数据库啊？
你说的分页和数据库中存几条记录没关系吧？
下面是个例子分成两页，选第二页也不会读数据库，和数据库有多少条记录有什么关系吗？
http://www.115000.com.cn/liuy//f ... G2006215145741.html
很多网站都这么作的
2006.html,2006_1.html
只要将2006.HTML存到数据库中就可以了
至于存到目录中一个文件和分两个文件,还是分开好.
既然要分页就是因为内容太多.浏览时只会显示2006.html这页内容.
/////////////////////
XML我是初学
SenFe的方法可以考虑

QQ群联盟：
www.115000.com.cn/liuy/main_qq_index.asp
易点通WEB源：
www.115000.com.cn/
JS→CSS→ASP→PHP→QQ群:4052

TOP

Recordset

中级会员

帖子: 121
体力: 390
威望: 0
离线: 215 天

发短消息

11^# 大中小发表于 2006-2-17 13:12

非新闻系统的话一般都是将Table进行分页，所以，能不能将Table的数据进行分页？

TOP

BlueMiracle [楼主]

中级会员

帖子: 126
体力: 434
威望: 8
当前: 北京海淀区

专长 JS,PHP,AS

12^# 大中小发表于 2006-2-17 14:02

to 子乌

其实最初我做这个page.html?page=1这种效果，最主要的是模拟一个分页的效果，举个例子：

假如，上次看到的是第四页（page.html?page=4），我将此URI存于收藏夹中，下次访问便可直接访问，如果是不重新载入，即分段取出字符串的话，比较难得到预期效果，实现比较麻烦

关于智能分面的问题，我觉得比较难处理，如楼上所说，像用ewebeidt生成的新闻content，HTML比较乱，还有要考虑有人直接paste WORD里面的东西进来，这样就涉及到处理HTML的标记问题，（似乎像tidy了？呵呵），最后还有一点，

假如我生成的content形如：<table>generated html and string</table>

设generated html and string中的内容=n那么如何分析这个字符串（包含标记）来进行分页而又保持显示效果和预期一样呢？

方法1。通过分析把table截断，在下一面的时候，再生成一个table，即继承上页的html标记。
方法2。不截断table标记，一直到</table>的结束标记再截断

我现在在抽空按第一种做法来做。看看能不能成吧，不过这个正则（我是用正则来判断）比较难写：（

http://www.never-online.net

TOP

Sheneyan

子虚乌有
超级版主

帖子: 8266
体力: 19489
威望: 177
当前: 福建厦门
离线: 16 天

专长 JS,JAVA,Oracle

13^# 大中小发表于 2006-2-17 14:08

呵呵,你可以使用hash来标记当前是第几个分页的

,也就是锚点,在页面里实时更新锚点是不会导致页面重新加载的.你可以在onload的时候判断锚点来决定当前在第几页.

关于智能分页,我觉得不能简单的判断长度来截取.表格这种东西尽量还是让它完整的联在一起而不截断,如果实在太长,可以让表格单独一页.其余的内容,可以截断.当然这个想法比较简单,因为截断的内容它的功能是否与之前的标签功能一致,这比较难.

子叶:子乌的叶子
帅哥们，美女们，新的一年终于来了，祝贺你们...终于又老了一岁~

TOP

BlueMiracle [楼主]

中级会员

帖子: 126
体力: 434
威望: 8
当前: 北京海淀区

专长 JS,PHP,AS

14^# 大中小发表于 2006-2-17 14:31

to 子乌
我比较笨，呵呵

不知道是不是你所说的意思：

女老师竭力向

假定每页3个字符，通过插入锚点：

女老师<a name="1"></a>竭力向<a name="2"></a>

当我定位于第2页后，关闭页面打再打页面后定位肯定在第1页呀（除非用cookie等手段存入客户端），锚点肯定会失效的，也是没有page.html?page=2的效果

http://www.never-online.net

TOP

Sheneyan

子虚乌有
超级版主

帖子: 8266
体力: 19489
威望: 177
当前: 福建厦门
离线: 16 天

专长 JS,JAVA,Oracle

15^# 大中小发表于 2006-2-17 15:30

不,你误解我的意思.

我写一个最简单的模型给你.你看一下:

提示：您可以先修改部分代码再运行

我这里假设分页完是一个数组.

子叶:子乌的叶子
帅哥们，美女们，新的一年终于来了，祝贺你们...终于又老了一岁~

TOP

lmxc

高级会员

帖子: 247
体力: 544
威望: 0

发短消息

16^# 大中小发表于 2006-2-25 01:04

你这个是动态页的分页，对于静态页来说不实用

TOP

viewsnake

新手上路

帖子: 15
体力: 31
威望: 0
离线: 50 天

发短消息

17^# 大中小发表于 2006-2-27 19:41

Sheneyan在上个帖子中说

引用:

不,你误解我的意思.

我写一个最简单的模型给你.你看一下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>模拟分页</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Author" content="Sheneyan" /> <script type="text/javascript"> var pages=["<p>这是第一页的内容</p>","<p>这是第二页的内<b>容</b></p>","<p>这是第三页的内容</p>"]; function goto(p){ if (isNaN(p)&&location.hash.replace(/#p/gi,"")) p=location.hash.replace(/#p/gi,""); if (isNaN(p)) p=0; document.getElementById("t").innerHTML=pages[p]+genNav(p); location.hash="#p"+p; } function genNav(p){ var s=""; for (var i=0;i<pages.length;i++) if (i==p) s+="("+(i+1)+")"; else s+="<a href='#p"+i+"' onmouseup='goto("+i+");return true;'>["+(i+1)+"]</a>"; return s; } </script> </head> <body onload="goto()"> <div id="t"></div> </body> </html>
提示：您可以先修改部分代码再运行
我这里假设分页完是一个数组.

这个不错，赞

TOP

lmxc

高级会员

帖子: 247
体力: 544
威望: 0

发短消息

18^# 大中小发表于 2006-2-27 23:55

我能理解可是你这样做就失去静态页的分页优势静态页分页不仅是为了好看而且可以提高更快的速度。你这样的分页需要把整页都读出来只是在显示上有分页实现了分页效果

可是实际你要把整个网页读出来如果网页很大读的速度就很慢，而真正静态页分页是把页面分开成很多小分，每页的内容少了容量也小了打开速度也提高了

TOP

wwwdpxqcom

初级会员

帖子: 57
体力: 85
威望: 0
离线: 14 天

19^# 大中小发表于 2006-3-4 17:35

用不着那么麻烦吧？
css设一下div高度，然后用js修改top属性，就行拉，楼上的说法不怎么理解
可是实际你要把整个网页读出来如果网页很大读的速度就很慢，而真正静态页分页是把页面分开成很多小分，每页的内容少了容量也小了打开速度也提高了

东萍象棋网络杂志，荟萃中国象棋精华。
首页：http://www.dpxq.com
投稿：http://www.dpxq.com/bbs

TOP

kink

中级会员

帖子: 113
体力: 238
威望: 0
离线: 116 天

20^# 大中小发表于 2006-4-26 22:28

如果碰到复杂的需要智能分页的，不如手工加标签？

TOP

mallee

老李飞砖
银牌会员

帖子: 643
体力: 1168
威望: 2
当前: 河北秦皇岛
离线: 2 天

21^# 大中小发表于 2006-7-19 09:33

留下 ,等回来仔细研究!

iw3c.com

TOP

Sheneyan

子虚乌有
超级版主

帖子: 8266
体力: 19489
威望: 177
当前: 福建厦门
离线: 16 天

专长 JS,JAVA,Oracle

22^# 大中小发表于 2006-7-19 09:50

20楼是个好办法～，在在线编辑器中提供一个选项“插入分页符”，然后插入一个自定义的标记，然后在页面中再进行分割。

子叶:子乌的叶子
帅哥们，美女们，新的一年终于来了，祝贺你们...终于又老了一岁~

TOP

ken8544

初级会员

帖子: 35
体力: 82
威望: 0
离线: 82 天

发短消息

23^# 大中小发表于 2006-12-27 13:41

非常经典.
to:子虚乌有
20楼是个好办法～，在在线编辑器中提供一个选项“插入分页符”，然后插入一个自定义的标记，然后在页面中再进行分割。

这个实现了吗?

BlueMiracle 这个也不错.可是好象都却标记分割.有做好的.给我看看吗?

TOP

wuchenghua

初级会员

帖子: 95
体力: 180
威望: 0
当前: 重庆渝中
离线: 12 天

专长 前端制作,PHP

24^# 大中小发表于 2007-2-12 17:52

有空再研究

www.9ihaody.cn

TOP

esnak

中级会员

帖子: 291
体力: 457
威望: 0

发短消息

25^# 大中小发表于 2007-2-12 23:00

大站分页有的时候是为了提高浏览量

jgwy-esnak

TOP

hangxj

新手上路

帖子: 16
体力: 29
威望: 0
离线: 3 天

发短消息

26^# 大中小发表于 2008-4-22 15:31

你这样对搜索引擎不友好吧?

TOP

icoder

新手上路

帖子: 10
体力: 21
威望: 0
离线: 12 天

发短消息

27^# 大中小发表于 2008-4-22 17:13

留个记号

TOP

Nickol

新手上路

帖子: 17
体力: 38
威望: 0
离线: 4 天

发短消息

28^# 大中小发表于 2008-4-23 10:10

html的截断相当麻烦的，没有发现很好的解决方法，我们公司在编辑器里有插入分页符的按钮进行分页，但是对于那种设置字数后自动分页，没有办法处理，客户从word粘贴进编辑器的代码非常复杂混乱，不可能只是简单的table、p就分割的

TOP