基於客戶端的分頁導航

　　思路用純JS的方法只能通過判斷當前頁面的文件名然後算出上下頁地址首頁和尾頁需要在腳本中配置好最後生成導航代碼用數據綁定的方法則要簡單得多設定dataPageSize然後用 firstPage() previousPage() nextPage() 和 lastPage() 方法翻頁

　　代碼示例

　　 純JS的翻頁導航的依據是文件名 pagejs腳本文件代碼

　　Numberprototypeadd = function(){    //對數字類型的擴展主要用於實現當數字小於一定位數時在前面補直到倍數達到為止
 return (new Array(len)join()+this)slice(len)  //返回字符串new Array(len)join()得到len個相連的然後和數字相加再從得到的字符串右邊起向左截取len位
 }
 Stringprototypemlink = function(n){    //對字符類型的擴展主要用於根據文件名中的數字生成鏈接
 return thislink(prefix+nadd()+suffix)    //返回一個以字符串為鏈接文字prefix+nadd()+subffix為鏈接地址的HTML代碼
 } var prefix = page       //文件名前綴
 var suffix =        //文件名後綴
 var first =         //第一頁的文件名中的數字
 var last =         //最後一頁的文件名中的數字
 var len =          //文件名中的數字的位數從以上四個變量中可知文件名為和這種形式
 var cur_page = locationhrefmatch(new RegExp(prefix+(\\d+)+suffixi))[]|      //從當前頁面地址中查找匹配的數字
 var previous = cur_page      //上一頁的文件名中的數字為當前頁的減
 var next = cur_page+      //下一頁的文件名中的數字為當前頁的加
 if(cur_page == first) previous = first    //如果當前頁為首頁則上一頁的鏈接為首頁
 if(cur_page == last) next = last     //如果當前頁為尾頁則下一頁的鏈接為尾頁
 navbarinnerHTML = [首頁mlink(first)上一頁mlink(previous)下一頁mlink(next)尾頁mlink(last)]join( )   //在 id 為 navbar 的對象中生成導航鏈接

　　然後在各頁中用<div id=navbar></div><script src=pagejs></script>調用

　　對表格進行數據綁定然後用對象的翻頁方法實現

　　 <xml id=<fp class='fp-gup6p'></fp>oXML<fp class='fp-dzc9d'></fp>> <forums> <forum> <name>[FLASH技術交流]</name> <moderator ><![CDATA[版主<fp class='fp-uvet9'></fp>贏點兒 chenye_<fp class='fp-5xe1s'></fp><fp class='fp-s8pmf'></fp><fp class='fp-p1kmk'></fp><fp class='fp-uqdj4'></fp> holybozo ]]></moderator> <description ><![CDATA[新手請盡管提問<fp class='fp-xqqrm'></fp>老手盡管來切磋<fp class='fp-xqqrm'></fp>讓學習和幫助都成為一種樂趣<fp class='fp-vwbre'></fp>]]> </description> </forum> <forum> <name>[Action Script討論區]</name> <moderator ><![CDATA[版主<fp class='fp-an6zc'></fp>hnyashiro crazydevil horidream]]></moderator> <description ><![CDATA[Action Script應用<fp class='fp-v32jr'></fp>包含flash MX討論]]> </description> </forum> <forum> <name>[Macromedia Studio MX <fp class='fp-4lp15'></fp><fp class='fp-94r6c'></fp><fp class='fp-94r6c'></fp><fp class='fp-r8hhr'></fp>討論學習區]</name> <moderator ><![CDATA[版主<fp class='fp-cbv67'></fp>AOL kissall 我佛山人]]></moderator> <description ><![CDATA[交流學習Macromedia Studio MX <fp class='fp-fb9ep'></fp><fp class='fp-94r6c'></fp><fp class='fp-l6zjj'></fp><fp class='fp-r8hhr'></fp>心得與經驗<fp class='fp-qk0el'></fp>歡迎提供系統教程和資料翻譯<fp class='fp-xfzp3'></fp>新]]> </description> </forum> <forum> <name>[Flash動畫技術區]</name> <moderator ><![CDATA[版主<fp class='fp-n1fjq'></fp>歪馬秀 拾荒 林℃]]></moderator> <description ><![CDATA[中級動畫愛好者進級技術版塊<fp class='fp-ye7ts'></fp>在這裡我們討論怎樣制作動畫造型<fp class='fp-84i1n'></fp>動作<fp class='fp-ye7ts'></fp>背景等制作技術<fp class='fp-xfzp3'></fp> ]]> </description> </forum> <forum> <name>[Flash游戲技術區]</name> <moderator ><![CDATA[版主<fp class='fp-uvet9'></fp>AOL windson<fp class='fp-fb9ep'></fp><fp class='fp-l6zjj'></fp><fp class='fp-94r6c'></fp><fp class='fp-4lp15'></fp>]]></moderator> <description ><![CDATA[這裡只討論Flash游戲技術<fp class='fp-agf7z'></fp> ]]> </description> </forum> <forum> <name>[圖形處理與視覺傳達]</name> <moderator ><![CDATA[版主<fp class='fp-n1fjq'></fp>顏志 保镖豆豆 wxb_snowwolf 風過無痕]]></moderator> <description ><![CDATA[一切創作的基礎來源於圖形處理的基本功<fp class='fp-xqqrm'></fp>Flash也不例外<fp class='fp-5gxwo'></fp>喜歡這個的朋友不妨在這裡交流<fp class='fp-v72tx'></fp>探討<fp class='fp-5gxwo'></fp>]]> </description> </forum> <forum> <name>[手繪藝術與角色設計]</name> <moderator ><![CDATA[版主<fp class='fp-an6zc'></fp>顏志 绯水]]></moderator> <description ><![CDATA[手繪藝術與角色設計]]> </description> </forum> <forum> <name>[Flash資源共享]</name> <moderator ><![CDATA[版主<fp class='fp-cbv67'></fp>kissall 木頭 CRAZYNO<fp class='fp-y3fr9'></fp>]]></moderator> <description ><![CDATA[Flash相關資源和軟件的交流<fp class='fp-p8bex'></fp>]]> </description> </forum> <forum> <name>[Flash <fp class='fp-19kr4'></fp>d 技術專版]</name> <moderator ><![CDATA[版主<fp class='fp-an6zc'></fp>白雪飄揚]]></moderator> <description ><![CDATA[討論怎樣讓flash裡面的物體三維運動起來]]> </description> </forum> <forum> <name>[網頁設計與編程]</name> <moderator ><![CDATA[版主<fp class='fp-uvet9'></fp>海光 我佛山人 erik<fp class='fp-12tzr'></fp><fp class='fp-64dyu'></fp><fp class='fp-545u5'></fp>]]></moderator> <description ><![CDATA[我們討論所有和網頁設計有關的東西]]> </description> </forum> <forum> <name>[精品WEB<fp class='fp-mpfck'></fp>SITE]</name> <moderator ><![CDATA[版主<fp class='fp-n1fjq'></fp>梵天 chenglei<fp class='fp-r8hhr'></fp>u]]></moderator> <description ><![CDATA[精品WEB<fp class='fp-ldqbw'></fp>SITE和FLASH動畫的展示專版]]> </description> </forum> <forum> <name>[閃吧電腦學校]</name> <moderator ><![CDATA[版主<fp class='fp-an6zc'></fp>Xray 藍<fp class='fp-kpa9q'></fp>蝸牛]]></moderator> <description ><![CDATA[計算機的世界<fp class='fp-v32jr'></fp>由你我來探討<fp class='fp-zrwuf'></fp>你遇到的各類問題<fp class='fp-v32jr'></fp>我們會幫助你<fp class='fp-5gxwo'></fp>（軟硬兼施＋網絡）]]> </description> </forum> </forums> </xml> <style> table{border<fp class='fp-ldqbw'></fp>collapse: collapse;width:<fp class='fp-64dyu'></fp><fp class='fp-iidek'></fp><fp class='fp-l6zjj'></fp>px;font:normal <fp class='fp-12tzr'></fp><fp class='fp-4lp15'></fp>px Tahoma;background:#EEEEEE} button{border:<fp class='fp-5xe1s'></fp>px solid #<fp class='fp-64dyu'></fp><fp class='fp-uqdj4'></fp><fp class='fp-uqdj4'></fp><fp class='fp-eb190'></fp><fp class='fp-u8up9'></fp><fp class='fp-uqdj4'></fp>;background:#EEEEEE} </style> <center> <table bordercolor=<fp class='fp-kuajw'></fp>#<fp class='fp-19kr4'></fp><fp class='fp-hi59v'></fp><fp class='fp-hi59v'></fp><fp class='fp-wrimx'></fp><fp class='fp-qp1oq'></fp><fp class='fp-qp1oq'></fp><fp class='fp-oowlw'></fp> border=<fp class='fp-dzc9d'></fp><fp class='fp-5xe1s'></fp><fp class='fp-oowlw'></fp> cellspacing=<fp class='fp-kuajw'></fp><fp class='fp-mdygk'></fp><fp class='fp-oowlw'></fp> cellpadding=<fp class='fp-kuajw'></fp><fp class='fp-hi59v'></fp><fp class='fp-oowlw'></fp> datasrc=<fp class='fp-kuajw'></fp>#oXML<fp class='fp-kuajw'></fp> dataPageSize=<fp class='fp-oowlw'></fp><fp class='fp-bnf31'></fp><fp class='fp-dzc9d'></fp> id=<fp class='fp-dzc9d'></fp>dTable<fp class='fp-oowlw'></fp>> <tr> <td width=<fp class='fp-gup6p'></fp><fp class='fp-fb9ep'></fp><fp class='fp-tw5ol'></fp>%<fp class='fp-dzc9d'></fp> rowspan=<fp class='fp-oowlw'></fp><fp class='fp-vetma'></fp><fp class='fp-dzc9d'></fp> align=<fp class='fp-oowlw'></fp>center<fp class='fp-oowlw'></fp> valign=<fp class='fp-oowlw'></fp>top<fp class='fp-kuajw'></fp>><span datafld=<fp class='fp-dzc9d'></fp>name<fp class='fp-dzc9d'></fp> /></td> <td width=<fp class='fp-kuajw'></fp><fp class='fp-w2aog'></fp><fp class='fp-rk8j9'></fp>%<fp class='fp-dzc9d'></fp> height=<fp class='fp-gup6p'></fp><fp class='fp-4lp15'></fp><fp class='fp-l6zjj'></fp><fp class='fp-kuajw'></fp>><span datafld=<fp class='fp-kuajw'></fp>moderator<fp class='fp-gup6p'></fp> /></td> </tr> <tr> <td><span datafld=<fp class='fp-gup6p'></fp>description<fp class='fp-gup6p'></fp> /></td> </tr> </table> <table border=<fp class='fp-oowlw'></fp><fp class='fp-iidek'></fp><fp class='fp-gup6p'></fp> cellspacing=<fp class='fp-oowlw'></fp><fp class='fp-94r6c'></fp><fp class='fp-oowlw'></fp> cellpadding=<fp class='fp-gup6p'></fp><fp class='fp-hi59v'></fp><fp class='fp-oowlw'></fp> > <tr> <td align=<fp class='fp-oowlw'></fp>right<fp class='fp-kuajw'></fp> colspan=<fp class='fp-dzc9d'></fp><fp class='fp-4lp15'></fp><fp class='fp-oowlw'></fp>><button onClick=<fp class='fp-oowlw'></fp>dTable<fp class='fp-agf7z'></fp>firstPage()<fp class='fp-gup6p'></fp>>首頁</button><button onClick=<fp class='fp-kuajw'></fp>dTable<fp class='fp-xfzp3'></fp>previousPage()<fp class='fp-dzc9d'></fp>>上一頁</button><button onClick=<fp class='fp-dzc9d'></fp>dTable<fp class='fp-kpa9q'></fp>nextPage()<fp class='fp-gup6p'></fp>>下一頁</button><button onClick=<fp class='fp-kuajw'></fp>dTable<fp class='fp-p8bex'></fp>lastPage()<fp class='fp-dzc9d'></fp>>尾頁</button></td> </tr> </table>

　　    [Ctrl+A 全部選擇 提示你可先修改部分代碼再按運行]

　　注意必須設置表格的dataPageSize屬性並且數據源跟 XML 對象的 id 相對應翻頁時的對象必須跟綁定數據的表格對象相對應

　　提示
　　dataPageSize 設置或獲取綁定到數據源的表格中顯示的記錄數
　　dataSrc 設置或獲取用於數據綁定的數據源
　　dataFld 設置或獲取由 dataSrc 屬性指定的綁定到指定對象的給定數據源的字段
　　firstPage 顯示綁定表格的數據集的第一頁記錄
　　previousPage 顯示綁定表格的數據集的上一頁記錄
　　nextPage 顯示綁定表格的數據集的下一頁記錄
　　lastPage 顯示綁定表格的數據集的最後一頁記錄
　　技巧如果每次只顯示一條記錄還可以用記錄集移動的方法

　　<xml id=oXML>
 <forums>  <forum>
  <name>[FLASH技術交流]</name>
  <moderator ><![CDATA[版主贏點兒  chenye_ holybozo  ]]></moderator>
  <description ><![CDATA[新手請盡管提問老手盡管來切磋讓學習和幫助都成為一種樂趣]]> </description>
  </forum>  <forum>
  <name>[Action Script討論區]</name>
  <moderator ><![CDATA[版主hnyashiro crazydevil horidream]]></moderator>
  <description ><![CDATA[Action Script應用包含flash MX討論]]> </description>
  </forum>  <forum>
  <name>[Macromedia Studio MX 討論學習區]</name>
  <moderator ><![CDATA[版主AOL kissall 我佛山人]]></moderator>
  <description ><![CDATA[交流學習Macromedia Studio MX 心得與經驗歡迎提供系統教程和資料翻譯新]]> </description>
  </forum>  <forum>
  <name>[Flash動畫技術區]</name>
  <moderator ><![CDATA[版主歪馬秀 拾荒 林℃]]></moderator>
  <description ><![CDATA[中級動畫愛好者進級技術版塊在這裡我們討論怎樣制作動畫造型動作背景等制作技術 ]]> </description>
  </forum>  <forum>
  <name>[Flash游戲技術區]</name>
  <moderator ><![CDATA[版主AOL windson]]></moderator>
  <description ><![CDATA[這裡只討論Flash游戲技術 ]]> </description>
  </forum>  <forum>
  <name>[圖形處理與視覺傳達]</name>
  <moderator ><![CDATA[版主顏志 保镖豆豆 wxb_snowwolf 風過無痕]]></moderator>
  <description ><![CDATA[一切創作的基礎來源於圖形處理的基本功Flash也不例外喜歡這個的朋友不妨在這裡交流探討]]> </description>
  </forum>  <forum>
  <name>[手繪藝術與角色設計]</name>
  <moderator ><![CDATA[版主顏志 绯水]]></moderator>
  <description ><![CDATA[手繪藝術與角色設計]]> </description>
  </forum>  <forum>
  <name>[Flash資源共享]</name>
  <moderator ><![CDATA[版主kissall 木頭 CRAZYNO]]></moderator>
  <description ><![CDATA[Flash相關資源和軟件的交流]]> </description>
  </forum>  <forum>
  <name>[Flash d 技術專版]</name>
  <moderator ><![CDATA[版主白雪飄揚]]></moderator>
  <description ><![CDATA[討論怎樣讓flash裡面的物體三維運動起來]]> </description>
  </forum>  <forum>
  <name>[網頁設計與編程]</name>
  <moderator ><![CDATA[版主海光 我佛山人 erik]]></moderator>
  <description ><![CDATA[我們討論所有和網頁設計有關的東西]]> </description>
  </forum>  <forum>
  <name>[精品WEBSITE]</name>
  <moderator ><![CDATA[版主梵天 chengleiu]]></moderator>
  <description ><![CDATA[精品WEBSITE和FLASH動畫的展示專版]]> </description>
  </forum>  <forum>
  <name>[閃吧電腦學校]</name>
  <moderator ><![CDATA[版主Xray 藍蝸牛]]></moderator>
  <description ><![CDATA[計算機的世界由你我來探討你遇到的各類問題我們會幫助你（軟硬兼施＋網絡）]]> </description>
  </forum> </forums>
 </xml>
 <style>
 table{bordercollapse: collapse;width:px;font:normal px Tahoma;background:#EEEEEE}
 button{border:px solid #;background:#EEEEEE}
 </style>
 <center>
 <table bordercolor=# border= cellspacing=
 cellpadding=>
        <tr>
            <td width=% rowspan= align=center valign=top><span datasrc=#oXML datafld=name /></td>
            <td width=% height=><span datasrc=#oXML datafld=moderator /></td>
        </tr>
        <tr>
            <td><span datasrc=#oXML datafld=description /></td>
        </tr>
 </table>
 <table border= cellspacing=
 cellpadding= >
        <tr>
            <td align=right colspan=><button onClick=oXMLrecordsetmovefirst()>首頁</button><button onClick=oXMLrecordsetmoveprevious();if(oXMLrecordsetbof)oXMLrecordsetmovenext()>上一頁</button><button onClick=oXMLrecordsetmovenext();if(oXMLrecordseteof)oXMLrecordsetmoveprevious()>下一頁</button><button onClick=oXMLrecordsetmovelast()>尾頁</button></td>
        </tr>
 </table>

From:http://tw.wingwit.com/Article/program/Java/Javascript/201311/25260.html