纯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 flash下fromCharCode和charCodeAt方法使用说明
Jan 12 Javascript
获取当前网页document.url location.href区别总结
May 10 Javascript
在父页面调用子页面的JS方法
Sep 29 Javascript
YUI模块开发原理详解
Nov 18 Javascript
JavaScript代码编写中各种各样的坑和填坑方法
Jun 06 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
Oct 14 Javascript
5种处理js跨域问题方法汇总
Dec 04 Javascript
jQuery EasyUI Tab 选项卡问题小结
Aug 16 Javascript
Angular的$http的ajax的请求操作(推荐)
Jan 10 Javascript
Vue常用指令V-model用法
Mar 08 Javascript
详解Vue 事件修饰符capture 的使用
Dec 29 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
Oct 26 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
用PHP4访问Oracle815
2006/10/09 PHP
php记录日志的实现代码
2011/08/08 PHP
简单的php文件上传(实例)
2013/10/27 PHP
php一个解析字符串排列数组的方法
2015/05/12 PHP
php is_writable判断文件是否可写实例代码
2016/10/13 PHP
PHP 7.1中AES加解密方法mcrypt_module_open()的替换方案
2017/10/17 PHP
Ext JS 4官方文档之三 -- 类体系概述与实践
2012/12/16 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
2015/09/17 Javascript
jQuery检查元素存在性(推荐)
2016/09/17 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
2017/02/15 Javascript
javascript实现数据双向绑定的三种方式小结
2017/03/09 Javascript
JavaScript函数的4种调用方法实例分析
2019/03/05 Javascript
webpack-mvc 传统多页面组件化开发详解
2019/05/07 Javascript
使用layer模态框给新页面传值的方法
2019/09/27 Javascript
[01:12:08]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.24
2019/09/10 DOTA
朴素贝叶斯算法的python实现方法
2014/11/18 Python
Linux下用Python脚本监控目录变化代码分享
2015/05/21 Python
python 图像平移和旋转的实例
2019/01/10 Python
python创建属于自己的单词词库 便于背单词
2019/07/30 Python
python 利用turtle库绘制笑脸和哭脸的例子
2019/11/23 Python
opencv之为图像添加边界的方法示例
2019/12/26 Python
HTML5离线缓存Manifest是什么
2016/03/09 HTML / CSS
canvas画布实现手写签名效果的示例代码
2019/04/23 HTML / CSS
AmazeUI 缩略图的实现示例
2020/08/18 HTML / CSS
PHP如何调用MYSQL存储过程
2014/05/30 面试题
新闻专业个人自我评价
2013/09/21 职场文书
美术教师自我鉴定
2014/02/12 职场文书
学习决心书范文
2014/03/11 职场文书
超市周年庆活动方案
2014/08/16 职场文书
检察院对照“四风”认真查找问题落实整改措施
2014/09/26 职场文书
防震减灾主题班会
2015/08/14 职场文书
python实现三阶魔方还原的示例代码
2021/04/28 Python
java解析XML详解
2021/07/09 Java/Android
CSS3 Tab动画实例之背景切换动态效果
2021/08/23 HTML / CSS
vue-cli3.x配置全局的scss的时候报错问题及解决
2022/04/30 Vue.js
vue3 自定义图片放大器效果的示例代码
2022/07/23 Vue.js