【IT】JS分页附效果 (8/261)

本帖地址: 复制地址

楼主: ┊☆..培培℡

用户形象图片


直接复制到Macromedia Dreamweaver里就可以使用的

 

 

<!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>
<p>footer</p>
<p>&nbsp;</p>
<form name="form1" method="post" action="">
  <input name="textfield" type="text" id="textfield" lang="zh" value="123123123111111111111">

  //value=""这里显示你要分页的文章
</form>
<p>&nbsp;</p>

<SCRIPT LANGUAGE="JavaScript">
s= document.forms[0].elements["textfield"].value;
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>

回到帖子顶部

1楼[楼主] ┊☆..培培℡

用户形象图片

自己沙发自己拿走..哼哼
回到帖子顶部

2楼╃凤吖頭★

用户形象图片

    不错,凤儿支持个!!
回到帖子顶部

3楼這個籹子~{ T

用户形象图片

只有地板了
回到帖子顶部

4楼Esρecia!′

用户形象图片

不懂   不知道这些东西......
回到帖子顶部

5楼の想飛的魚

用户形象图片

呵呵~支持培培~支持支持``       
回到帖子顶部

6楼我就s神

用户形象图片

。。。支持一下 ,不过本人喜欢用hibernate来分页 用不了这么多代码~~~~~~~只要最多5行
回到帖子顶部

7楼劣迹、斑斑

用户形象图片

楼主的代码编写习惯有待改进。。

  <input name="textfield" type="text" id="textfield" lang="zh" value="123123123111111111111">

  //value=""这里显示你要分页的文章

这个 name值和id都没有设置
还有value值写的...
建议而已··
回到帖子顶部

8楼℡-聆聽風吟

用户形象图片

引用 劣迹、斑斑 (369550903)在 2009年7月6日 22:22:51的发表:
楼主的代码编写习惯有待改进。。

  <input name="textfield" type="text" id="textfield" lang="zh" value="123123123111111111111">

  //value=""这里显示你要分页的文章

这个 name值和id都没有设置
还有value值写的...
建议而已··


呵呵`

`

 

回到帖子顶部
个人信息
  • 荣誉+3
  • 荣誉+2
  • 荣誉+1
  • 荣誉-1
  • 荣誉-2
  • 荣誉-3
发表留言
  • 文章不错!
  • 精华好文!
  • 支持原创文章!
  • 帖子图文并茂,好!
  • 真知灼见,说得好!
  • 恶意广告
  • 违规内容
  • 严重灌水
  • 重复发帖
  • 标题党
你确定要删除此楼层吗
扣20点经验值