• 静态新闻分页的js解决方案


    今天看一个新闻网站,看到它的分页用的是JS读取内容字符串(这里用的XML节点内容)后处理,分页按自定义字数分,而且可以点击显示全部(即不分页方式浏览)
    查看了它的源代码后提出了这个基本方法,感觉很好,粗略说一下前台调用方法及注意的地方:

    <div id="article"><!--正文正文内容显示区域(必须保留,后台js程序用到这个id)--></div>
    <xml id="xmlArticle">
    <Article>
    <Info>
    <Content>
    <![CDATA[
    <FONT face=Verdana
    ><FONT face=Verdana>这里是新闻内容。(这里的xml的id,content节点后台也都用到,保留 )</FONT> ]]>
    </Content>
    </Info>
    </Article>
    </xml>
    <script type="text/javascript">
    //每页显示字数
    PageSize=800;
    //分页模式
    flag=1;
    </script>
    <!--正文分页Js-->
    <script type="text/javascript" src="cutarticle.js"></script>
    <script type="text/javascript">
    text_pagination(
    1);
    </script>

    cutarticle.js

        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>";


    //页码显示方式一
    //第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+='&nbsp;';
    //
    }

    //显示方式二
    //下拉菜单选择
    //if (PageCount>0)
    //{
    // Output=Output+Article_PageNav(2,Page);
    // Output=Output+"&nbsp;</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 id=world>";
    Output=Output+tempText;
    Output=Output+"</div>";
    Output=Output+"<br>";

    Output=Output+"<div align=center>";
    Output=Output+Article_PageNav(2,Page);
    Output=Output+"</div>";

    document.getElementById('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>&nbsp;&nbsp;";}}}
    for (i=1;i<PageCount+1 ;i++ )
    {
    if (Page==i)
    {
    temp=temp+"<font color=800000>["+i+"]</font>&nbsp;&nbsp;";
    }
    else{
    temp=temp+"<a href='#top' onclick=javascript:text_pagination("+i+")><font color=3366cc>["+i+"]</font></a>&nbsp;&nbsp;";
    }
    }
    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:3366cc'>第 "+i+" 页"

    }
    else{
    temp=temp+"<option value='"+i+"' style='color:3366cc'>第 "+i+" 页";
    }
    if (PageTitle[i].length!=0)
    {
    temp=temp+':'+PageTitle[i];
    }
    temp=temp+"</option>";
    }
    temp=temp+"</select>";
    }
    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>&nbsp;&nbsp;";}}}
    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>"

    return (temp);
    }



  • 相关阅读:
    Solr服务在Linux上的搭建详细教程
    Linux服务器上安装JDK小白教程
    request和response中文乱码问题后台处理办法
    Redis的五种数据类型及方法
    Java类装载器ClassLoader
    Git快速入门和常用命令
    redis在Linux上的部署和jedis简单使用
    Linux常用基础命令
    JDK1.7中HashMap底层实现原理
    微信电脑版无法显示图片无法下载文件
  • 原文地址:https://www.cnblogs.com/Fooo/p/2369636.html
Copyright © 2020-2023  润新知