0

0

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

php中文网

php中文网

发布时间:2016-05-16 17:17:30

|

1438人浏览过

|

来源于php中文网

原创

复制代码 代码如下:

//每页显示字数
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)    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   PageNum[j]=PageNum[j-1]+PageSize;
   PageTitle[j]="";
   //alert(j);
   sDrv1="
";
   sDrv2="
";
   sDrv3="
";
   sDrv4="
";
   sDrvL=sDrv1.length;
   for(k=PageNum[j];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  {
   PageNum.length=j;
   PageCount=j
  }
  if (PageCount>1&&sFlag>1&&PageCount  {
   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]

  PageCount=j-1;
 }

 function text_pagination(Page){
  var Output,Byte;

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

  Output="";
  Output=Output+"

";
  Output=Output+"";
  Output=Output+"";
  Output=Output+"";

  //头部功能导航条
  Output=Output+"

";

   //正文查找

   Output=Output+"

";

   Output=Output+"";
   //}

   //显示方式三
   //页码选择列表
   //Output=Output+"

";

  Output=Output+"

B2S商城系统
B2S商城系统

B2S商城系统B2S商城系统是由佳弗网络工作室凭借专业的技术、丰富的电子商务经验在第一时刻为最流行的分享式购物(或体验式购物)推出的开源程序。开发采用PHP+MYSQL数据库,独立编译模板、代码简洁、自由修改、安全高效、数据缓存等技术的应用,使其能在大浏览量的环境下快速稳定运行,切实节约网站成本,提升形象。注意:如果安装后页面打开出现找不到数据库等错误,请删除admin下的runtime文件夹和a

下载
";
  Output=Output+"";
  Output=Output+"";
  Output=Output+"";
  Output=Output+"
 ";
   Output=Output+" ";
   Output=Output+"
";

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

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

";
   //Output=Output+Article_PageNav(0,Page);
   //Output=Output+"
";

  //显示正文
  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+"

";
  Output=Output+Article_PageNav(TopShowStyle,Page);
  Output=Output+"
";

  Output=Output+"
";
  Output=Output+tempText;
  Output=Output+"
";
  Output=Output+"
";

  Output=Output+"

";
  Output=Output+Article_PageNav(DownShowStyle,Page);
  Output=Output+"
";

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

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

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

  h="";
  f="
";
  keyset=new Array();
  key=document.all.keys.value;
  if (key==""){
   alert("请输入关键字!");
   return;
  }
  else{
  keyset[0]=tempText.indexOf(key,0);
   if (keyset[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     keyset[i]=tempText.indexOf(key,keyset[i-1]+key.length);
     if(keyset[i]     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     temp=temp+"9";
     if (Page7";}else{temp=temp+"7";}
     if (PageCount>10){
      for(i=1;i       if (i==Page){
        temp=temp+""+i+" ";
       }else{
        temp=temp+""+i+""+" ";
       }
      }
     temp=temp+" ...";
     }
     else{
      for(i=1;i       if (i==Page){
        temp=temp+""+i+" ";
       }
       else{
        temp=temp+""+i+""+" ";
       }
      }
     }

     if (Page==PageCount){temp=temp+"8";}else{temp=temp+"8";}
     if(PageCount:";}else{temp=temp+":";}
    }
    else if(Page+4    temp=temp+"9";
    temp=temp+"7";
     if (PageCount>10){
      temp=temp+"..";
      for(i=Page-4;i       if (i==Page){
        temp=temp+""+i+" ";
       }
       else{
       temp=temp+""+i+""+" ";
       }
      }
      temp=temp+" ..";
     }
     else{
      for(i=1;i       if (i==Page){
        temp=temp+""+i+" ";
       }
       else{
       temp=temp+""+i+""+" ";
       }
      }
     }

     if (Page==PageCount){temp=temp+"8";}else{temp=temp+"8";}
     temp=temp+":";

    }
    else{
     temp=temp+"9";
     temp=temp+"7";
     temp=temp+".."

     for(i=Page-2;i      if (i==Page){
       temp=temp+""+i+" ";
      }
      else{
       temp=temp+""+i+""+" ";
      }
     }

     if (Page==PageCount){temp=temp+"8";}else{temp=temp+"8";}
     temp=temp+":";
    }
   }
   else{
    temp=temp+"1 ";
   }

   temp=temp+" 显示全部"
  }
  else if (ShowStyle==1)
  //标准样式
  {
   if(TotalByte>PageSize){if(Page!=0){if(Page!=1){temp=temp+"[上一页]  ";}}}
   for (i=1;i   {
    if (Page==i)
    {
     temp=temp+"["+i+"]  ";
    }
    else{
     temp=temp+"["+i+"]  ";
    }
   }
   temp=temp+"";
   if(TotalByte>PageSize){if(Page!=0){if(Page!=PageCount){temp=temp+"[下一页]";}}}

   temp=temp+" 显示全部"
  }
  else if (ShowStyle==2)
  //下拉菜单样式
  {
   temp=temp+'";
  }

  return (temp);
 }

//默认页
text_pagination(startpage);


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

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

复制代码 代码如下:

js分页


           

border=0>
             
             
               





澶у

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

js

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
1688阿里巴巴货源平台入口与批发采购指南
1688阿里巴巴货源平台入口与批发采购指南

本专题整理了1688阿里巴巴批发进货平台的最新入口地址与在线采购指南,帮助用户快速找到官方网站入口,了解如何进行批发采购、货源选择以及厂家直销等功能,提升采购效率与平台使用体验。

21

2026.02.06

快手网页版入口与电脑端使用指南 快手官方短视频观看入口
快手网页版入口与电脑端使用指南 快手官方短视频观看入口

本专题汇总了快手网页版的最新入口地址和电脑版使用方法,详细提供快手官网直接访问链接、网页端操作教程,以及如何无需下载安装直接观看短视频的方式,帮助用户轻松浏览和观看快手短视频内容。

0

2026.02.06

C# 多线程与异步编程
C# 多线程与异步编程

本专题深入讲解 C# 中多线程与异步编程的核心概念与实战技巧,包括线程池管理、Task 类的使用、async/await 异步编程模式、并发控制与线程同步、死锁与竞态条件的解决方案。通过实际项目,帮助开发者掌握 如何在 C# 中构建高并发、低延迟的异步系统,提升应用性能和响应速度。

0

2026.02.06

Python 微服务架构与 FastAPI 框架
Python 微服务架构与 FastAPI 框架

本专题系统讲解 Python 微服务架构设计与 FastAPI 框架应用,涵盖 FastAPI 的快速开发、路由与依赖注入、数据模型验证、API 文档自动生成、OAuth2 与 JWT 身份验证、异步支持、部署与扩展等。通过实际案例,帮助学习者掌握 使用 FastAPI 构建高效、可扩展的微服务应用,提高服务响应速度与系统可维护性。

3

2026.02.06

JavaScript 异步编程与事件驱动架构
JavaScript 异步编程与事件驱动架构

本专题深入讲解 JavaScript 异步编程与事件驱动架构,涵盖 Promise、async/await、事件循环机制、回调函数、任务队列与微任务队列、以及如何设计高效的异步应用架构。通过多个实际示例,帮助开发者掌握 如何处理复杂异步操作,并利用事件驱动设计模式构建高效、响应式应用。

2

2026.02.06

java连接字符串方法汇总
java连接字符串方法汇总

本专题整合了java连接字符串教程合集,阅读专题下面的文章了解更多详细操作。

24

2026.02.05

java中fail含义
java中fail含义

本专题整合了java中fail的含义、作用相关内容,阅读专题下面的文章了解更多详细内容。

28

2026.02.05

控制反转和依赖注入区别
控制反转和依赖注入区别

本专题整合了控制反转和依赖注入区别、解释、实现方法相关内容。阅读专题下面的文章了解更多详细教程。

19

2026.02.05

钉钉脑图插图教程合集
钉钉脑图插图教程合集

本专题整合了钉钉脑图怎么插入图片、钉钉脑图怎么用相关教程,阅读专题下面的文章了解更多详细内容。

53

2026.02.05

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

相关下载

更多

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WEB前端教程【HTML5+CSS3+JS】
WEB前端教程【HTML5+CSS3+JS】

共101课时 | 8.9万人学习

JS进阶与BootStrap学习
JS进阶与BootStrap学习

共39课时 | 3.3万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号