纯js分页代码(简洁实用)_javascript技巧

复制代码 代码如下:

//每页显示字数
PageSize=5000;
//分页模式
flag=2;//1:根据字数自动分页 2:根据[NextPage]分页
//默认页
startpage = 1;
//导航显示样式 0:常规 1:直接 3:下拉
TopShowStyle = 1;
DownShowStyle = 0;

 var currentSet,CutFlag,TotalByte,PageCount,key,tempText,tempPage;
 key="";
 currentSet=0;
 var Text=xmlArticle.selectSingleNode("//Content").text;
 TotalByte=Text.length;

 if (flag==1)
 {
  PageCount=Math.round(TotalByte/PageSize);
  if(parseFloat("0."+TotalByte%PageSize)>0){
   if(parseFloat("0."+TotalByte%PageSize)<0.5){
    PageCount=PageCount+1;
    }
  }
  var PageNum=new Array(PageCount+1);
  var PageTitle=new Array(PageCount+1);
  PageNum[0]=0;
  PageTitle[0]="";

  var sDrv1,sDrv2,sDrv3,sDrv4,sFlag;
  var sDrvL,sTemL;
  var sTem1,sTem2,k;
  sFlag=0;

  for(j=1;j<PageCount+1;j++){
   PageNum[j]=PageNum[j-1]+PageSize;
   PageTitle[j]="";
   //alert(j);
   sDrv1="<br>";
   sDrv2="<BR>";
   sDrv3="<Br>";
   sDrv4="<bR>";
   sDrvL=sDrv1.length;
   for(k=PageNum[j];k<=TotalByte;k++){
    sTem1=Text.substring(PageNum[j]-sDrvL,k);
    sTemL=sTem1.length;
    sTem2=sTem1.substring(sTemL-sDrvL,sTemL)
    if (sTem2==sDrv1 || sTem2==sDrv2 || sTem2==sDrv3 || sTem2==sDrv4)
    {
     sFlag=sFlag+1;
     PageNum[j]=k;
     break;
    }
   }
   if (PageNum[j]>TotalByte)
   {
    break;
   }
  }
  if (j<PageCount)
  {
   PageNum.length=j;
   PageCount=j
  }
  if (PageCount>1&&sFlag>1&&PageCount<sFlag)
  {
   PageCount=sFlag+1;
  }
 }
 else{
  //手动分页
  var j,sFlag,PageCount,sText;
  var sTitleFlag;
  var PageNum=new Array();
  var PageTitle=new Array();

  PageSize=0;
  j=1;
  PageNum[0]=-10;
  PageTitle[0]="";
  sFlag=0;
  sText=Text;

  do
  {
   sText=Text.substring(PageNum[j-1]+10,TotalByte);

   sFlag=sText.indexOf("[NextPage");

   if (sText.substring(sFlag+9,sFlag+10)=="=")
   {
    sTitleFlag=sText.indexOf("]",sFlag);
    PageTitle[j]=sText.substring(sFlag+10,sTitleFlag);
   }
   else{
    PageTitle[j]="";
   }

   if (sFlag>0)
   {
    PageNum[j]=sFlag+PageNum[j-1]+10;
   }
   else{
    PageNum[j]=TotalByte;
   }

   j+=1;
  }
  while (PageNum[j-1]<TotalByte);

  PageCount=j-1;
 }

 function text_pagination(Page){
  var Output,Byte;

  if(Page==null){Page=1;}

  Output="";
  Output=Output+"<table width=100% height=30 border=0 align=center cellpadding=0 cellspacing=0>";
  Output=Output+"<tr>";
  Output=Output+"<td height=1 background=Images/DotLine.gif></td>";
  Output=Output+"</tr>";

  //头部功能导航条
  Output=Output+"<tr>";

   //正文查找

   Output=Output+"<td align=left bgcolor=#f0faff width='40%'> ";
   Output=Output+"<input type=text name=keys onchange='key=this.value' size=12> <input type=button name=search value='查找正文' onclick='searchkey();' style='width:60'>";
   Output=Output+"</td>";

   Output=Output+"<td align=right bgcolor=#f0faff>";

   //页码显示方式一
   //第x页：分页标题
   if (Page==0 || PageCount==0){
    Output=Output+"当前是：<font color=red>全文显示</font>" ;   
   }
   else{
    if(TotalByte>PageSize){Byte=PageNum[Page]-PageNum[Page-1]}else{Byte=TotalByte};
    Output=Output+"第 <font color=red>"+Page+"</font> 页";
    if (PageTitle[Page]!="")
    {
     Output=Output+"：<font color=800000>"+PageTitle[Page]+"</font>";
    }
    Output+=' ';
   }

   //显示方式二
   //下拉菜单选择
   //if (PageCount>0)
   //{
   // Output=Output+Article_PageNav(2,Page);
   // Output=Output+" </td>";
   //}

   //显示方式三
   //页码选择列表
   //Output=Output+"<td align=right bgcolor=#f0faff>";
   //Output=Output+Article_PageNav(0,Page);
   //Output=Output+"</td>";

  Output=Output+"</tr>";
  Output=Output+"<tr>";
  Output=Output+"<td height=1 background=Images/DotLine.gif></td>";
  Output=Output+"</tr>";
  Output=Output+"</table>";

  //显示正文
  if(Page==0) {
  //不分页
   tempText=Text;
  }
  else{
  //分页
   if (flag==1)
   //自动分页
   {
    tempText=Text.substring(PageNum[Page-1],PageNum[Page]);
   }
   else{
   //手动分页
    if (PageTitle[Page-1].length==0)
    {
     tempText=Text.substring(PageNum[Page-1]+10,PageNum[Page]);
    }
    else{
     tempText=Text.substring(PageNum[Page-1]+11+PageTitle[Page-1].length,PageNum[Page]);
    }
   }
  }

  //布置内容
  Output=Output+"<div align=center>";
  Output=Output+Article_PageNav(TopShowStyle,Page);
  Output=Output+"</div>";

  Output=Output+"<div id=world>";
  Output=Output+tempText;
  Output=Output+"</div>";
  Output=Output+"<br>";

  Output=Output+"<div align=center>";
  Output=Output+Article_PageNav(DownShowStyle,Page);
  Output=Output+"</div>";

  article.innerHTML = Output;
  if (Page>1)
  {
   document.location.href='#top';
  }

  eval(document.all.keys).value=key;
  if (key!=""){searchkey();}
 }

 function searchkey(){
  //正文查找函数

  h="<font class=keyworld>";
  f="</font>";
  keyset=new Array();
  key=document.all.keys.value;
  if (key==""){
   alert("请输入关键字！");
   return;
  }
  else{
  keyset[0]=tempText.indexOf(key,0);
   if (keyset[0]<0){
     return;
   }else
    temp=tempText.substring(0,keyset[0]);
    temp=temp+h+key+f;
    temp2=tempText.substring(keyset[0]+key.length,tempText.length);
    for (i=1;i<tempText.length;i++) {
     keyset[i]=tempText.indexOf(key,keyset[i-1]+key.length);
     if(keyset[i]<0){
     temp=temp+tempText.substring(keyset[i-1]+key.length,tempText.length);
     break;
     }else{
     temp=temp+tempText.substring(keyset[i-1]+key.length,keyset[i])+h+key+f;
     }
    }
     world.innerHTML = temp;
   }
  }

 function Article_PageNav(ShowStyle,Page){
 //分页码显示函数
 //参数为调用样式，0=简单样式，1=标准样式
  var temp="";

  if (ShowStyle==0)
  //简单样式
  {
   tempPage=Page;
   if(TotalByte>PageSize){
    if (Page-4<=1){
     temp=temp+"<font face=webdings color=#999999>9</font>";
     if (Page<=1){temp=temp+"<font face=webdings color=#999999>7</font>";}else{temp=temp+"<a href=javascript:text_pagination("+(Page-1)+")><font face=webdings>7</font></a>";}
     if (PageCount>10){
      for(i=1;i<8;i++){
       if (i==Page){
        temp=temp+"<font color=red>"+i+"</font> ";
       }else{
        temp=temp+"<a href=javascript:text_pagination("+i+") >"+i+"</a>"+" ";
       }
      }
     temp=temp+" ...";
     }
     else{
      for(i=1;i<PageCount+1;i++){
       if (i==Page){
        temp=temp+"<font color=red>"+i+"</font> ";
       }
       else{
        temp=temp+"<a href=javascript:text_pagination("+i+") >"+i+"</a>"+" ";
       }
      }
     }

     if (Page==PageCount){temp=temp+"<font face=webdings color=#999999>8</font>";}else{temp=temp+"<a href=javascript:text_pagination("+(Page+1)+")><font face=webdings>8</font></a>";}
     if(PageCount<10){temp=temp+"<font face=webdings color=#999999>:</font>";}else{temp=temp+"<a href=javascript:text_pagination("+PageCount+")><font face=webdings>:</font></a>";}
    }
    else if(Page+4<=PageCount){
    temp=temp+"<a href=javascript:text_pagination(1)><font face=webdings>9</font></a>";
    temp=temp+"<a href=javascript:text_pagination("+(Page-1)+")><font face=webdings>7</font></a>";
     if (PageCount>10){
      temp=temp+"..";
      for(i=Page-4;i<Page+4;i++){
       if (i==Page){
        temp=temp+"<font color=red>"+i+"</font> ";
       }
       else{
       temp=temp+"<a href=javascript:text_pagination("+i+") >"+i+"</a>"+" ";
       }
      }
      temp=temp+" ..";
     }
     else{
      for(i=1;i<PageCount+1;i++){
       if (i==Page){
        temp=temp+"<font color=red>"+i+"</font> ";
       }
       else{
       temp=temp+"<a href=javascript:text_pagination("+i+") >"+i+"</a>"+" ";
       }
      }
     }

     if (Page==PageCount){temp=temp+"<font face=webdings color=#999999>8</font>";}else{temp=temp+"<a href=javascript:text_pagination("+(Page+1)+")><font face=webdings>8</font></a>";}
     temp=temp+"<a href=javascript:text_pagination("+PageCount+")><font face=webdings>:</font></a>";

    }
    else{
     temp=temp+"<a href=javascript:text_pagination(1)><font face=webdings>9</font></a>";
     temp=temp+"<a href=javascript:text_pagination("+(Page-1)+")><font face=webdings>7</font></a>";
     temp=temp+".."

     for(i=Page-2;i<PageCount+1;i++){
      if (i==Page){
       temp=temp+"<font color=red>"+i+"</font> ";
      }
      else{
       temp=temp+"<a href=javascript:text_pagination("+i+") >"+i+"</a>"+" ";
      }
     }

     if (Page==PageCount){temp=temp+"<font face=webdings color=#999999>8</font>";}else{temp=temp+"<a href=javascript:text_pagination("+(Page+1)+")><font face=webdings>8</font></a>";}
     temp=temp+"<font face=webdings color=#999999>:</font>";
    }
   }
   else{
    temp=temp+"<font color=red>1</font> ";
   }

   temp=temp+" <a href=javascript:text_pagination(0)>显示全部</a>"
  }
  else if (ShowStyle==1)
  //标准样式
  {
   if(TotalByte>PageSize){if(Page!=0){if(Page!=1){temp=temp+"<a href='#top' onclick=javascript:text_pagination("+(Page-1)+")><font color=3366cc>[上一页]</font></a>  ";}}}
   for (i=1;i<PageCount+1 ;i++ )
   {
    if (Page==i)
    {
     temp=temp+"<font color=800000>["+i+"]</font>  ";
    }
    else{
     temp=temp+"<a href='#top' onclick=javascript:text_pagination("+i+")><font color=3366cc>["+i+"]</font></a>  ";
    }
   }
   temp=temp+"<a name='foot'></a>";
   if(TotalByte>PageSize){if(Page!=0){if(Page!=PageCount){temp=temp+"<a href='#top' onclick=javascript:text_pagination("+(Page+1)+")><font color=3366cc>[下一页]</font></a>";}}}

   temp=temp+" <a href=javascript:text_pagination(0)><font color=3366cc>显示全部</font></a>"
  }
  else if (ShowStyle==2)
  //下拉菜单样式
  {
   temp=temp+'<select onchange="text_pagination(this.value)">'
   for (i=1;i<PageCount+1 ;i++ )
   {
    if (Page==i)
    {
     temp=temp+"<option value='"+i+"' selected style='color:red'>第 "+i+" 页"

    }
    else{
     temp=temp+"<option value='"+i+"'>第 "+i+" 页";
    }
    if (PageTitle[i].length!=0)
    {
     temp=temp+'：'+PageTitle[i];
    }
    temp=temp+"</option>";
   }
   temp=temp+"</select>";
  }

  return (temp);
 }

//默认页
text_pagination(startpage);

--------------分页js代码结束--------------

------------html页面，调用分页js------------------

复制代码 代码如下:

<HTML><HEAD><TITLE>js分页</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
</HEAD>
<BODY bottomMargin=0 leftMargin=0 topMargin=0 rightMargin=0>

            <TABLE cellSpacing=1 cellPadding=5 width="95%" align=center
border=0>
              <TBODY>
              <TR>
                <TD>

<xml id=xmlArticle>
<Article>
<Info>
<Content>
<![CDATA[
大家来试验分页哦~~~~~[NextPage]我分~~~[NextPage]我再分[NextPage]分分分
]]>
</Content>
</Info>
</Article>
</xml>

<!--正文分页Js-->
                  <SCRIPT language=Javascript
                  src="attachments/month_0607/j200674214834.js"></SCRIPT>

                </TD></TD></TR></TBODY></TABLE></TD></TR>
</TBODY></TABLE>

时间： 2024-10-04 12:04:09

纯js分页代码(简洁实用)_javascript技巧的相关文章

jquery库文件略庞大用纯js替换jquery的方法_javascript技巧

jquery库文件略庞大,在某些情况下,需要尽量减少加载的文件(文件大小),需要用纯js来编写效果 $('#layer') document.getElementById('layer') $('#layer span') var layer = document.getElementById('layer'); var span = layer.getElementsByTagName('span'); $('#inner').parent() document.getElementById(

js设置文本框中焦点位置在最后的示例代码(简单实用)_javascript技巧

在火狐浏览器中直接使用this.focus();即可实现. 在IE中,在this.focus();之后再把文本框的值赋给文本框,焦点即在最后了.很简单哟!! 如: 复制代码 代码如下: var tar=document.getElementByIdx_x("name");if(tar.attachEvent){tar.attachEvent('onmouseover',focus(tar),false);}else{tar.addEventListener('mouseover',fo

javascript 新闻标题静态分页代码 (无刷新)_javascript技巧

   一个模板,从数据库取n条记录,生成静态. 做单页面的静态化,索引页面是用JS对数组进行组合的. 因为记录只是一个标题,一个链接,字节数不会太大, 那么用js去用这个大数组进行分页,貌似不错,很节约带宽! 还是很棒的,简单,实用,值得推荐! JS代码: 复制代码 代码如下: function title_array(title, link_add, store_time) { this.title = title; this.link_add = link_add; this.store_t

js常用代码段收集_javascript技巧

每段代码前边都有功能注解和参数要求等说明文字,难度不大也就没做更多注释. 为看得清楚,这里依先后顺序做个小目录: 重写window.setTimeout, 理解递归程序的返回规律, 截取长字符串, 取得元素在页面中的绝对位置, 统计.去除重复字符(多种方法实现), 把有序的数组元素随机打乱(多种方法实现). 复制代码 代码如下: /* 功能:修改 window.setTimeout,使之可以传递参数和对象参数 (同样可用于setInterval) 使用方法: setTimeout(回调函数,时间

js常用代码段整理_javascript技巧

每段代码前边都有功能注解和参数要求等说明文字,难度不大也就没做更多注释. 为看得清楚,这里依先后顺序做个小目录: 重写window.setTimeout, 理解递归程序的返回规律, 截取长字符串, 取得元素在页面中的绝对位置, 统计.去除重复字符(多种方法实现), 把有序的数组元素随机打乱(多种方法实现). 复制代码 代码如下: /* 功能:修改 window.setTimeout,使之可以传递参数和对象参数 (同样可用于setInterval) 使用方法: setTimeout(回调函数,时间

JavaScript使用技巧精萃[代码非常实用]_javascript技巧

(一).确认删除用法: 1. BtnDel.Attributes.Add("onclick","return confirm('"+"确认删除?"+"')"); 2. linktempDelete.Attributes["onclick"]="javascript:return confirm('"+"确认删除?"+"');"; 3. privat

从QQ网站中提取的纯JS省市区三级联动菜单_javascript技巧

我发现在 http://ip.qq.com/ 的网站中有QQ自己的JS省市区三级联动.所以研究了一下.他的界面如下:  何不直接使用的数据呢? 惊喜的是QQ是使用引用外部JS来实现三级联动的.JS如下:http://ip.qq.com/js/geo.js 使用方法如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title> <!-- 直接使用QQ的省市区数据

纯js实现悬浮按钮组件_javascript技巧

先上效果 下面附上代码 使用方式很简单只需要 在页面引入这段js 即可 $(()=> { let param = { tag: true, num: 1, ele: document.createElement('div'), icon: '', homeIcon: '', moreIcon: '', personalIcon: '', closeIcon: '', distance: '500', css: "position:fixed;" + "bott

JS 判断代码全收集_javascript技巧

/*$#################################################$*/ /* 程序功能:输入验证 */ /* 函数名称: */ /* function CheckData(valname,val,valimode,limitlen) */ /* 功能说明:验证字符串数据 */ /* function CheckUserName(val,min,max) */ /* 功能说明:验证用户名 */ /* function CheckPassWord(val,mi