순수 js 페이징 코드(간결하고 실용적)_javascript 기술

코드 복사 코드는 다음과 같습니다.

//每页显示字数
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 PageNum[j]=PageNum[j-1]+PageSize;
PageTitle[j]="";
//alert(j);
sDrv1="
";
   sDrv2="
";
   sDrv3="
";
   sDrv4="
";
   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 {
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+"

";
  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]<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]<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+"9";
     if (Page<=1){temp=temp+"7";}else{temp=temp+"7";}
     if (PageCount>10){
      for(i=1;i<8;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<10){temp=temp+":";}else{temp=temp+":";}
    }
    else if(Page+4<=PageCount){
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 ''
   for (i=1;i< ;페이지 수 1 ;i )
   {
    if (Page==i)
    {
     temp=temp "
    }
    else{
     temp=temp "第 " i " 页";
    }
    if (PageTitle[i].length!=0)
    {
     temp=temp '：' PageTitle[i];
    }
    temp=temp "";
   }
   temp=temp "";
  }

  반납(임시);
 }

//默认页
text_pagination(startpage);

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

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

复主代码 代码如下:

< ;META http-equiv=Content-Type content="text/html; charset=gb2312">

          

border=0>
             
            
               

大家来试验分页哦~~ ~~[NextPage]我分~~~[NextPage]我再分[NextPage]分分分
]]>


< ;/기사>

                

• Bootstrap 목록 그룹 구성 요소에 대한 심층 분석
• JavaScript 함수 커링에 대한 자세한 설명
• JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)
• Angularjs는 WeChat UI(weui)를 통합합니다.
• JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술

공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！

회사 소개부인 성명Sitemap

© php.cn All rights reserved