jQuery Pagination 實際執行畫面

大量資料資料想要呈現給使用者的時候，沒辦法全部的資訊都一次顯示所以只能用分頁的方式，但是分頁又非常的浪費網路資源所以這一個套件就誕生了，要換頁時他只需要換掉頁面本身的元件位置，並不用整頁都更新過後才能使用。

使用方法：
首先載入必要的檔案
//使用Google ajax API 直接連結 jQuery 1.7.2的min版本
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
//jQuery Pagination 的主程式碼
<script type="text/javascript" src="../lib/jquery_pagination/jquery.pagination.js"></script>


頁數的CSS設計
.pagination {
            font-size: 80%;
}
.pagination a {
    text-decoration: none;
border: solid 1px #AAE;
color: #15B;
}
.pagination a, .pagination span {
    display: block;
    float: left;
    padding: 0.3em 0.5em;
    margin-right: 5px;
margin-bottom: 5px;
}
.pagination .current {
    background: #26B;
    color: #fff;
border: solid 1px #AAE;
}
.pagination .current.prev, .pagination .current.next{
color:#999;
border-color:#999;
background:#fff;
}

再來是HTML的排列方式
<div id="Pagination" class="pagination"></div>
<br style="clear:both;" />
<h3>內容將會在以下更新</h3>
<dl id="Searchresult">
  <dt>內容</dt>
</dl>


最後是 JavaScript 的程式啟動
var memebers = [
    ['Fred G. Aandahl', '1951-1953', 'North Dakota', 'Republican', '1897-1966'],
    ['Watkins Moorman Abbitt', '1948-1973', 'Virginia', 'Democratic', '1908-1998']];
function pageselectCallback(page_index, jq){
//本範例以一個陣列檔案 members 做為資料
//如需AJAX方式請自行使用 $.ajax 方法取得資料
var items_per_page = $('#items_per_page').val();
var max_elem = Math.min((page_index+1) * items_per_page, members.length);
var newcontent = '';
for(var i=page_index*items_per_page;i<max_elem;i++)
{
newcontent += '<dt>' + members[i][0] + '</dt>';
newcontent += '<dd class="state">' + members[i][2] + '</dd>';
newcontent += '<dd class="party">' + members[i][3] + '</dd>';
}
$('#Searchresult').html(newcontent);
return false;
}
function getOptionsFromForm(){
var opt = {
 callback: pageselectCallback,//點下後觸發此事件
 items_per_page:5,            //每頁資料筆數
 num_display_entries:10,      //中間最多顯示幾頁
 num:2,                       //前後多出幾頁顯示
 prev_text:'prev',            //前一頁顯示的文字
 next_text:'next'             //後一頁顯示的文字
};
var htmlspecialchars ={ "&":"&amp;", "<":"&lt;", ">":"&gt;", '"':"&quot;"}
$.each(htmlspecialchars, function(k,v){
opt.prev_text = opt.prev_text.replace(k,v);
opt.next_text = opt.next_text.replace(k,v);
})
return opt;
}
$(function(){//jQuery 啟動時執行
var optInit = getOptionsFromForm();
$("#Pagination").pagination(members.length, optInit);
});


作者網站：http://d-scribe.de/webtools/jquery-pagination/demo/demo_options.htm
檔案大小：4.97 KB
檔案下載：http://d-scribe.de/webtools/jquery-pagination/lib/jquery_pagination/jquery.pagination.js
檔案備份：下載