<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我的分頁</title>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">
$( function(){
var pageArray = [];
var liCount = $('li').length; // 獲取獲取記錄條數
var PageSize = 10; // 設置每頁，你准備顯示幾條
var PageCount = Math.ceil(liCount/PageSize);//計算出總共頁數
var currentPage = 1; // 設置當前頁
var i=0;
for(i=1; i<=PageCount; i++){
$('<a href="#" pageNum="'+i+'" >第'+i+'頁</a>').appendTo('#pageIt'); // 顯示分頁按鈕
}
var $li = $('li');
$li.each( function(){
pageArray.push( this);
});
for(i=0;i<10;i++){
$('#pagingList').append(pageArray[i]);
}
function showPage(whichPage){
$('#pagingList').html('');
for(i = (whichPage-1)*10; i < 10*whichPage ; i++){
$('#pagingList').append(pageArray[i]);
}
}
var a;
$('a').click( function(){
a = $( this).attr('pagenum');
showPage(a);
})
debugger;
});
</script>
</head>
<body>
<div id="pageIt" ></div>
<div id="pagingList"></div>
<br /><br /><br /><br /><br />
<ul id="list" >
<li class="mm">美女A</li>
<li class="gg">帥哥A</li>
<li class="mm">美女B</li>
<li class="gg">帥哥B</li>
<li class="mm">美女C</li>
<li class="gg">帥哥C</li>
<li class="mm">美女D</li>
<li class="gg">帥哥D</li>
<li class="mm">美女E</li>
<li class="gg">帥哥E</li>
<li class="mm">美女F</li>
<li class="gg">帥哥F</li>
<li class="mm">美女G</li>
<li class="gg">帥哥G</li>
<li class="mm">美女H</li>
<li class="gg">帥哥H</li>
<li class="mm">美女A</li>
<li class="gg">帥哥A</li>
<li class="mm">美女B</li>
<li class="gg">帥哥B</li>
<li class="mm">美女C</li>
<li class="gg">帥哥C</li>
<li class="mm">美女D</li>
<li class="gg">帥哥D</li>
<li class="mm">美女E</li>
<li class="gg">帥哥E</li>
<li class="mm">美女F</li>
<li class="gg">帥哥F</li>
<li class="mm">美女G</li>
<li class="gg">帥哥G</li>
<li class="mm">美女H</li>
<li class="gg">帥哥H</li>
<li class="mm">美女A</li>
<li class="gg">帥哥A</li>
<li class="mm">美女B</li>
<li class="gg">帥哥B</li>
<li class="mm">美女C</li>
<li class="gg">帥哥C</li>
<li class="mm">美女D</li>
<li class="gg">帥哥D</li>
<li class="mm">美女E</li>
<li class="gg">帥哥E</li>
<li class="mm">美女F</li>
<li class="gg">帥哥F</li>
<li class="mm">美女G</li>
<li class="gg">帥哥G</li>
<li class="mm">美女H</li>
<li class="gg">帥哥H</li>
<li class="mm">美女A</li>
<li class="gg">帥哥A</li>
<li class="mm">美女B</li>
<li class="gg">帥哥B</li>
<li class="mm">美女C</li>
<li class="gg">帥哥C</li>
<li class="mm">美女D</li>
<li class="gg">帥哥D</li>
<li class="mm">美女E</li>
<li class="gg">帥哥E</li>
<li class="mm">美女F</li>
<li class="gg">帥哥F</li>
<li class="gg">帥哥G</li>
<li class="gg">帥哥H</li>
<li class="gg">帥哥G</li>
</ul>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我的分頁</title>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">
$( function(){
var pageArray = [];
var liCount = $('li').length; // 獲取獲取記錄條數
var PageSize = 10; // 設置每頁，你准備顯示幾條
var PageCount = Math.ceil(liCount/PageSize);//計算出總共頁數
var currentPage = 1; // 設置當前頁
var i=0;
for(i=1; i<=PageCount; i++){
$('<a href="#" pageNum="'+i+'" >第'+i+'頁</a>').appendTo('#pageIt'); // 顯示分頁按鈕
}
var $li = $('li');
$li.each( function(){
pageArray.push( this);
});
for(i=0;i<10;i++){
$('#pagingList').append(pageArray[i]);
}
function showPage(whichPage){
$('#pagingList').html('');
for(i = (whichPage-1)*10; i < 10*whichPage ; i++){
$('#pagingList').append(pageArray[i]);
}
}
var a;
$('a').click( function(){
a = $( this).attr('pagenum');
showPage(a);
})
debugger;
});
</script>
</head>
<body>
<div id="pageIt" ></div>
<div id="pagingList"></div>
<br /><br /><br /><br /><br />
<ul id="list" >
<li class="mm">美女A</li>
<li class="gg">帥哥A</li>
<li class="mm">美女B</li>
<li class="gg">帥哥B</li>
<li class="mm">美女C</li>
<li class="gg">帥哥C</li>
<li class="mm">美女D</li>
<li class="gg">帥哥D</li>
<li class="mm">美女E</li>
<li class="gg">帥哥E</li>
<li class="mm">美女F</li>
<li class="gg">帥哥F</li>
<li class="mm">美女G</li>
<li class="gg">帥哥G</li>
<li class="mm">美女H</li>
<li class="gg">帥哥H</li>
<li class="mm">美女A</li>
<li class="gg">帥哥A</li>
<li class="mm">美女B</li>
<li class="gg">帥哥B</li>
<li class="mm">美女C</li>
<li class="gg">帥哥C</li>
<li class="mm">美女D</li>
<li class="gg">帥哥D</li>
<li class="mm">美女E</li>
<li class="gg">帥哥E</li>
<li class="mm">美女F</li>
<li class="gg">帥哥F</li>
<li class="mm">美女G</li>
<li class="gg">帥哥G</li>
<li class="mm">美女H</li>
<li class="gg">帥哥H</li>
<li class="mm">美女A</li>
<li class="gg">帥哥A</li>
<li class="mm">美女B</li>
<li class="gg">帥哥B</li>
<li class="mm">美女C</li>
<li class="gg">帥哥C</li>
<li class="mm">美女D</li>
<li class="gg">帥哥D</li>
<li class="mm">美女E</li>
<li class="gg">帥哥E</li>
<li class="mm">美女F</li>
<li class="gg">帥哥F</li>
<li class="mm">美女G</li>
<li class="gg">帥哥G</li>
<li class="mm">美女H</li>
<li class="gg">帥哥H</li>
<li class="mm">美女A</li>
<li class="gg">帥哥A</li>
<li class="mm">美女B</li>
<li class="gg">帥哥B</li>
<li class="mm">美女C</li>
<li class="gg">帥哥C</li>
<li class="mm">美女D</li>
<li class="gg">帥哥D</li>
<li class="mm">美女E</li>
<li class="gg">帥哥E</li>
<li class="mm">美女F</li>
<li class="gg">帥哥F</li>
<li class="gg">帥哥G</li>
<li class="gg">帥哥H</li>
<li class="gg">帥哥G</li>
</ul>
</body>
</html>