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

复制代码代码如下:

//每页显示字数
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
  { www.jbxue.com
   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 οnchange='key=this.value' size=12> <input type=button name=search value='查找正文' οnclick='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{ www.jbxue.com
     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{ www.jbxue.com
     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' οnclick=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' οnclick=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' οnclick=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 οnchange="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>

posted on 2013-12-22 07:54 snowfly123 阅读(...) 评论(...) 编辑 收藏

转载于:https://www.cnblogs.com/linuxnotes/p/3485761.html

纯js分页代码(简洁实用)相关推荐

  1. html中table表格分页,纯JS实现表格分页

    思路: 1.讲表格内容存入一个变量 2.通过点击按钮从表格中调取数据 3.讲调取的数据填入表格中 表格分页 html,body { margin:0; height:100%; } .barcon { ...

  2. js分页实现，前端实现。

    主要是借鉴了网上一个例子,自己重新加了样式,添加了跳转,修改了一些小地方,用于和大家一起分享,前端分页的技巧,表格的数据是我已经写好了,其实大家也可以前端渲染表格然后再分页,都是可以的. 其实分页最关 ...

  3. 纯html折叠文字代码,不用JS，教你只用纯HTML做出几个实用网页效果

    不用JS,教你只用纯HTML做出几个实用网页效果 在我们以往看到的页面效果中,很多效果是需要JS搭配使用的,而今天在本文中,我将介绍如何使用纯HTML打造属于自己的实用效果. 1. 折叠手风琴 使用D ...

  4. 纯JS前端分页方法（JS分页）

    1.JS分页函数:开发过程中,分页功能一般是后台提供接口,前端只要传page(当前页码)和pageSize(每页最大显示条数)及对应的其他查询条件,就可以返回所需分页显示的数据. 但是有时也需要前端本 ...

  5. KingPager，自己做的分页控件，纯JS，支持所有语言

    效果图如下: 简介: 1.JQuery分页控件,纯JS,支持任何语言 2.全部样式可通过CSS自定义(默认的就很好看) 3.非常灵活,1行代码即可实现分页 调用示例: <html xmlns=& ...

  6. php 图片预览原理,JavaScript_纯JS实现的批量图片预览加载功能，1.实现原理直接见代码,需要一 - phpStudy...

    纯JS实现的批量图片预览加载功能 1.实现原理直接见代码,需要一张转圈的小图片,需要预览的所有图片默认的位置全是这张小图片,滚轮滚到原图需要出现的位置时候,预览加载替换小图片.实现效果 复制代码 代码 ...

  7. php 右下脚弹窗,纯js的右下角弹窗实例代码

    下面小编就为大家带来一篇纯js的右下角弹窗实例代码.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 这个弹窗是如下图的效果: 打开网页的时候,这个弹窗会淡入,之后点击右上 ...

  8. html背景边框特效代码,纯JS实现动态边框特效

    HtmlCssJs ^-^正常的边框 ^-^更慢的边框 ^-^更快的边框 ^-^图片边框 ^-^更细的边框 附赠的圆形 body { flex-wrap:wrap; flex:1 } .flex { ...

  9. 纯JS单页面赛车游戏代码分享

    分享一个以前写的小游戏,纯js游戏,代码很简单.欢迎大家来喷呦! 效果图: 代码展示://直接复制到html文件即可 支持IE9+版本 <!DOCTYPE html> <html&g ...

最新文章

  1. 098~100：ORM迁移
  2. 十大python开发软件-5款开发安全、高质量代码的优秀Python工具
  3. android启动白屏的分析,Android 启动白屏，跳转黑屏以及冷启动优化
  4. Oracle 9i安装后，配置和启动企业管理器的详细过程
  5. 关联关系、依赖关系总结
  6. Mysql数据库使用及其问题合集一
  7. 程序员必须知道的15件事（转）
  8. Flink报错：java.io.IOException: Insufficient number of network buffers
  9. 2018暑假第二周总结（7.16-7.22）
  10. VCL组件DevExpress VCL v21.2 - PDF Viewer、图像列表编辑器升级
  11. python余弦函数_Python cos() 函数
  12. js两时间相减获得天数
  13. 在电脑上如何录制游戏
  14. Spring JDBC 批量操作 数据
  15. 设备维护管理的内容是什么？这四点你必须知道
  16. 请评价一下中国的东北大学计算机水平如何
  17. 2018华为网赛复赛感想
  18. Python对excel操作——分类汇总278张Excel表中的数据
  19. 输入一个整数能否被7整除
  20. matlab fft 画出幅值,画包络谱和幅值谱matlab函数示例代码

热门文章

  1. LeetCode8. 字符串转换整数 (atoi)
  2. c语言单向循环链表实现增删,C语言单向非循环链表增删查改实现
  3. osx10.15.5降级成10.3.3
  4. 05NumPy--5.2创建NumPy数组
  5. Fantom已开始网络升级，大约需2个小时
  6. Plasm金丝雀网络Shiden Network即将启动
  7. SAP License：SAP项目上线的时间选择
  8. SAP License：”事后借记”与第三方外币支付处理
  9. 盈利模型的内容都有哪些?
  10. 《如何搭建小微企业风控模型》第十一节 逻辑回归与评分卡 节选