檔案:
雲端硬碟/素材/pagebar/testzip
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="pagination.css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.pagination.js"></script>
<script type="text/javascript" src="members.js"></script>
<script type="text/javascript">
$(function () {
var initPagination = function() {
$("#pagination").pagination(60, {
num_edge_entries: 2,
//兩側頁碼數目
num_display_entries: 3,
//中間顯示的頁碼數目
current_page:0,
//目前頁, 預設是0
ellipse_text:"...",
//省略的頁碼用什麼表現, 預設是"..."
callback: pageselectCallback,
//回傳資料
items_per_page: 10,
//每頁呈現筆數
prev_show_always: true,
//是否顯示上一頁按鈕
next_show_always: true,
//是否顯示下一頁按鈕
prev_text: "prev",
//上一頁呈現文字
next_text: "next"
//下一頁呈現文字
});
};
$("#list").load("group_member.html", null, initPagination);
});
function pageselectCallback(page_index, jq) {
alert(page_index);
page_end = page_index + 10;
$("#list li").hide();
for ($i = page_index; $i < page_end; $i++) {
$("#list li").eq($i).show();
}
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="pagination" class="pagination"></div>
<div class="clear"></div>
<ul id="list"></ul>
</form>
</body>
</html>
標籤： javascript
