纯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 相关文章推荐
javascript 基础篇3 类,回调函数,内置对象,事件处理
Mar 14 Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
Aug 09 Javascript
jquery 表格的增行删行实现思路
Mar 21 Javascript
jquery 动态创建元素的方式介绍及应用
Apr 21 Javascript
js实现异步循环实现代码
Feb 16 Javascript
第二篇Bootstrap起步
Jun 21 Javascript
第一次接触神奇的Bootstrap
Oct 14 Javascript
实例分析编写vue组件方法
Feb 12 Javascript
JS浮点数运算结果不精确的Bug解决
Aug 01 Javascript
vue $set 给数据赋值的实例
Nov 09 Javascript
解决新建一个vue项目过程中遇到的问题
Oct 22 Javascript
JS Object构造函数之Object.freeze
Apr 28 Javascript
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
提示Trying to clone an uncloneable object of class Imagic的解决
2011/10/27 PHP
php导出csv数据在浏览器中输出提供下载或保存到文件的示例
2014/04/24 PHP
php解决抢购秒杀抽奖等大流量并发入库导致的库存负数的问题
2014/06/19 PHP
php中smarty模板条件判断用法实例
2015/06/11 PHP
PHP实现自动发送邮件功能代码(qq 邮箱)
2017/08/18 PHP
phpStudy 2016 使用教程详解(支持PHP7)
2017/10/18 PHP
js DataSet数据源处理代码
2010/03/29 Javascript
js显示文本框提示文字的方法
2015/05/07 Javascript
浅谈时钟的生成(js手写简洁代码)
2016/08/20 Javascript
详解node nvm进行node多版本管理
2017/10/21 Javascript
vue项目优化之通过keep-alive数据缓存的方法
2017/12/11 Javascript
NVM安装nodejs的方法实用步骤
2019/01/16 NodeJs
利用JS代码自动删除稿件的普通弹幕功能
2019/09/20 Javascript
详解Python的Django框架中Manager方法的使用
2015/07/21 Python
Python代码解决RenderView窗口not found问题
2016/08/28 Python
解决python3在anaconda下安装caffe失败的问题
2017/06/15 Python
Python基础之getpass模块详细介绍
2017/08/10 Python
不同版本中Python matplotlib.pyplot.draw()界面绘制异常问题的解决
2017/09/24 Python
python设置值及NaN值处理方法
2018/07/03 Python
PyQt5根据控件Id获取控件对象的方法
2019/06/25 Python
python tkinter canvas使用实例
2019/11/04 Python
Python numpy多维数组实现原理详解
2020/03/10 Python
jupyter notebook 多行输出实例
2020/04/09 Python
浅谈Python中的模块
2020/06/10 Python
浅谈Python爬虫原理与数据抓取
2020/07/21 Python
Linux安装Python3如何和系统自带的Python2并存
2020/07/23 Python
Theo + George官方网站:都柏林时尚品牌
2019/04/08 全球购物
美国家居装饰网上商店:Lulu & Georgia
2019/09/14 全球购物
JSP&Servlet技术面试题
2015/05/21 面试题
药学专业学生的自我评价分享
2014/02/06 职场文书
计生工作先进事迹
2014/08/15 职场文书
乡镇群众路线专项整治方案
2014/11/03 职场文书
会计入职心得体会
2016/01/22 职场文书
个人道歉信大全
2019/04/11 职场文书
Centos环境下Postgresql 安装配置及环境变量配置技巧
2021/05/18 PostgreSQL
windows11选中自动复制怎么开启? Win11自动复制所选内容的方法
2022/07/23 数码科技