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


Posted in Javascript onNovember 05, 2013
//每页显示字数
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>
Javascript 相关文章推荐
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
Jan 09 Javascript
extjs实现选择多表自定义查询功能 前台部分(ext源码)
Dec 20 Javascript
jquery动态增加删减表格行特效
Nov 20 Javascript
JS简单编号生成器实现方法(附demo源码下载)
Apr 05 Javascript
jQuery 判断是否包含在数组中Array[]的方法
Aug 03 Javascript
JavaScript实现多栏目切换效果
Dec 12 Javascript
JavaScript中for循环的几种写法与效率总结
Feb 03 Javascript
vue动画打包后失效问题的解决方法
Sep 18 Javascript
Vue.js实现备忘录功能
Jun 26 Javascript
Vue.js仿Select下拉框效果
Feb 18 Javascript
vue proxy 的优势与使用场景实现
Jun 15 Javascript
解决vue自定义组件@click点击失效问题
Apr 30 Vue.js
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
Nov 05 #Javascript
js/jquery去掉空格,回车,换行示例代码
Nov 05 #Javascript
使用Js让Html中特殊字符不被转义
Nov 05 #Javascript
js特殊字符转义介绍
Nov 05 #Javascript
js转义字符介绍
Nov 05 #Javascript
12种不宜使用的Javascript语法整理
Nov 04 #Javascript
jquery $.fn $.fx是什么意思有什么用
Nov 04 #Javascript
You might like
PHP 中的面向对象编程:通向大型 PHP 工程的办法
2006/12/03 PHP
PHP中$_SERVER的详细参数与说明
2008/07/29 PHP
php小偷相关截取函数备忘
2010/11/28 PHP
php获取通过http协议post提交过来xml数据及解析xml
2012/12/16 PHP
PHP中的多行字符串传递给JavaScript的两种方法
2014/06/19 PHP
thinkphp配置连接数据库技巧
2014/12/02 PHP
php实现在服务器端调整图片大小的方法
2015/06/16 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
2008/09/08 Javascript
js 禁用只读文本框获得焦点时的退格键
2010/04/25 Javascript
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
2010/08/27 Javascript
基于jquery实现的可编辑下拉框实现代码
2014/08/02 Javascript
js实现简单选项卡与自动切换效果的方法
2015/04/10 Javascript
js+css3制作时钟特效
2016/10/16 Javascript
Ajax基础知识详解
2017/02/17 Javascript
详解如何写出一个利于扩展的vue路由配置
2019/05/16 Javascript
JavaScript中继承原理与用法实例入门
2020/05/09 Javascript
JavaScript设计模式之策略模式实现原理详解
2020/05/29 Javascript
[02:26]2016国际邀请赛8月3日开战 中国军团出征西雅图
2016/08/02 DOTA
Python使用百度API上传文件到百度网盘代码分享
2014/11/08 Python
django2用iframe标签完成网页内嵌播放b站视频功能
2018/06/20 Python
对Python3中dict.keys()转换成list类型的方法详解
2019/02/03 Python
python cv2截取不规则区域图片实例
2019/12/21 Python
tensorflow 环境变量设置方式
2020/02/06 Python
python 在右键菜单中加入复制目标文件的有效存放路径(单斜杠或者双反斜杠)
2020/04/08 Python
Django返回HTML文件的实现方法
2020/09/17 Python
高二生物教学反思
2014/01/27 职场文书
《太阳》教学反思
2014/02/21 职场文书
工地标语大全
2014/06/18 职场文书
找工作求职信
2014/07/07 职场文书
企业党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
工作作风整顿个人剖析材料
2014/10/11 职场文书
教师群众路线教育实践活动学习笔记
2014/11/05 职场文书
《有余数的除法》教学反思
2016/02/22 职场文书
Pyhton爬虫知识之正则表达式详解
2022/04/01 Python
windows server 2016 域环境搭建的方法步骤(图文)
2022/06/25 Servers