實戰數據綁定：基于客戶端的分頁導航

下一頁 1 2 3 

　　  

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

　　代碼示例：

　　1. 純JS的，翻頁導航的依據是文件名 page.js腳本文件代碼

Number.prototype.add0 = function(){ //對數字類型的擴展，主要用于實現當數字小于一定位數時在前面補0，直到倍數達到為止
return (new Array(len).join("0")+this).slice(-len) //返回字符串，new Array(len).join("0")得到len個相連的"0"，然后和數字相加，再從得到的字符串右邊起向左截取len位
}
String.prototype.mlink = function(n){ //對字符類型的擴展，主要用于根據文件名中的數字生成鏈接
return this.link(prefix+n.add0()+suffix) //返回一個以字符串為鏈接文字，prefix+n.add0()+subffix為鏈接地址的HTML代碼
}
var prefix = "page" //文件名前綴
var suffix = ".htm" //文件名后綴
var first = 1 //第一頁的文件名中的數字
var last = 23 //最后一頁的文件名中的數字
var len = 2 //文件名中的數字的位數，從以上四個變量中可知文件名為"page01.htm"和"page23.htm"這種形式
var cur_page = location.href.match(new RegExp(prefix+"(\\d+)"+suffix,"i"))[1]|0 //從當前頁面地址中查找匹配的數字
var previous = cur_page-1 //上一頁的文件名中的數字為當前頁的減1
var next = cur_page+1 //下一頁的文件名中的數字為當前頁的加1
if(cur_page == first) previous = first //如果當前頁為首頁，則上一頁的鏈接為首頁
if(cur_page == last) next = last //如果當前頁為尾頁，則下一頁的鏈接為尾頁
navbar.innerHTML = ["首頁".mlink(first),"上一頁".mlink(previous),"下一頁".mlink(next),"尾頁".mlink(last)].join(" ") //在 id 為 navbar 的對象中生成導航鏈接


　　然后在各頁中用<div id="navbar"></div><script src="page.js"></script>調用

原文轉自：http://www.kjueaiud.com