Pure js paging code of simplicity and utility
- 2020-03-26 23:04:15
- OfStack
//Number of words per page
PageSize=5000;
//Paging mode
flag=2;//1: automatic paging by word count 2: paging by [NextPage]
//The default page
startpage = 1;
//Navigation display style 0: general 1: direct 3: drop down
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{
//Manual pages
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>";
//Header function navigation bar
Output=Output+"<tr>";
//The text to find the
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=' Look for the body ' onclick='searchkey();' style='width:60'>";
Output=Output+"</td>";
Output=Output+"<td align=right bgcolor=#f0faff>";
//Page number display mode one
//Page x: paging title
if (Page==0 || PageCount==0){
Output=Output+" The current is: <font color=red> The full display </font>" ;
}
else{
if(TotalByte>PageSize){Byte=PageNum[Page]-PageNum[Page-1]}else{Byte=TotalByte};
Output=Output+" The first <font color=red>"+Page+"</font> page ";
if (PageTitle[Page]!="")
{
Output=Output+" : <font color=800000>"+PageTitle[Page]+"</font>";
}
Output+=' ';
}
//Display mode 2
//Select from the drop-down menu
//if (PageCount>0)
//{
// Output=Output+Article_PageNav(2,Page);
// Output=Output+" </td>";
//}
//Display mode 3
//Page number selection list
//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>";
//According to the body
if(Page==0) {
//No paging
tempText=Text;
}
else{
// paging
if (flag==1)
//Automatic paging
{
tempText=Text.substring(PageNum[Page-1],PageNum[Page]);
}
else{
//Manual pages
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]);
}
}
}
//Arrangement of the content
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(){
//The text to find the function
h="<font class=keyworld>";
f="</font>";
keyset=new Array();
key=document.all.keys.value;
if (key==""){
alert(" Please enter the keyword! ");
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){
//Pagination displays the function
//Parameters are call style, 0= simple style, 1= standard style
var temp="";
if (ShowStyle==0)
//Simple style
{
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)> Reveal all </a>"
}
else if (ShowStyle==1)
//Standard style
{
if(TotalByte>PageSize){if(Page!=0){if(Page!=1){temp=temp+"<a href='#top' onclick=javascript:text_pagination("+(Page-1)+")><font color=3366cc>[ The previous page ]</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>[ The next page ]</font></a>";}}}
temp=temp+" <a href=javascript:text_pagination(0)><font color=3366cc> Reveal all </font></a>"
}
else if (ShowStyle==2)
//Drop-down menu style
{
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'> The first "+i+" page "
}
else{
temp=temp+"<option value='"+i+"'> The first "+i+" page ";
}
if (PageTitle[i].length!=0)
{
temp=temp+' : '+PageTitle[i];
}
temp=temp+"</option>";
}
temp=temp+"</select>";
}
return (temp);
}
//The default page
text_pagination(startpage);
-- the end of the page js code --
-- HTML page, call paging js----
<HTML><HEAD><TITLE>js paging </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[
Let's try paging ~~~~~[NextPage] My points ~~~[NextPage] I'll point [NextPage] Component points
]]>
</Content>
</Info>
</Article>
</xml>
<!-- The body of the page Js-->
<SCRIPT language=Javascript
src="attachments/month_0607/j200674214834.js"></SCRIPT>
</TD></TD></TR></TBODY></TABLE></TD></TR>
</TBODY></TABLE>