<script type="text/javascript">
//上一頁
function previous(){
//當前頁-1
new_page = parseInt($('#current_page').val()) - 1;
go_to_page(new_page);
}
//下一頁
function next(){
//當前頁+1
new_page = parseInt($('#current_page').val()) + 1;
go_to_page(new_page);
}
//跳轉某一頁
function go_to_page(page_num){
$('.page_link[longdesc=' + page_num +']').parent().addClass('active').siblings('.active').removeClass('active');
//獲取隱藏域中頁數大?。宽摱嗌贄l數據）
var show_per_page = parseInt($('#show_per_page').val());
//得到元素從哪里開始的片數（點擊頁 * 頁大?。┤琰c擊第5頁，5條/頁。則開始為25
start_from = page_num * show_per_page;
//得到結束片的元素數量，如果開始為25，5條/頁，則結束為30
end_on = start_from + show_per_page;
//隱藏所有子div元素的內容,顯示具體片數據，如顯示25~30
$('#datas').children().css('display', 'none').slice(start_from, end_on).css('display', 'inline-block');
//每頁顯示的數目
var show_per_page = 10;
//獲取總數據的數量
var number_of_items = $('#topics').children().size();
//計算頁數
var number_of_pages = Math.ceil(number_of_items/show_per_page);
//在頁數區(qū)域內則做頁偏移
if( (page_num >= 2) && (page_num <= (number_of_pages - 3)) ){
//生成分頁->上一頁
var page_info = '<li><a class="previous_link" href="javascript:previous();">&laquo;</a></li>';
var p = page_num;
var i = page_num - 2;
var j = page_num + 2;
//生成分頁->前2頁
while(page_num > i){
page_info += '<li><a class="page_link" href="javascript:go_to_page(' + i +')" longdesc="' + i +'">'+ (i + 1) +'</a></li>';
i++;
}
//生成分頁->當前頁
page_info += '<li><a class="page_link" href="javascript:go_to_page(' + page_num +')" longdesc="' + page_num +'">'+ (page_num + 1) +'</a></li>';
//生成分頁->后2頁
while(p < j){
if(p == number_of_pages){
break;
}
page_info += '<li><a class="page_link" href="javascript:go_to_page(' + (p + 1) +')" longdesc="' + (p + 1) +'">'+ (p + 2) +'</a></li>';
p++;
}
//生成分頁->下一頁
page_info += '<li><a class="next_link" href="javascript:next();">&raquo;</a></li>';
//加載分頁
$('.pagination').html(page_info);
$('.page_link[longdesc=' + page_num +']').parent().addClass('active').siblings('.active').removeClass('active');
}
else{ //否則不偏移
//激活某一頁，使得顯示某一頁
$('.page_link[longdesc=' + page_num +']').parent().addClass('active').siblings('.active').removeClass('active');
}
//更新隱藏域中當前頁
$('#current_page').val(page_num);
}
$(function(){
//每頁顯示的數目
var show_per_page = 10;
//獲取話題數據的數量
var number_of_items = $('#datas').children().size();
//計算頁數
var number_of_pages = Math.ceil(number_of_items/show_per_page);
//設置隱藏域默認值
$('#current_page').val(0);
$('#show_per_page').val(show_per_page);
//生成分頁->上一頁
var page_info = '<li><a class="previous_link" href="javascript:previous();">&laquo;</a></li>';
var current_link = 0;
//生成分頁->頁數
while(number_of_pages > current_link){
if(current_link == 5){
break;
}
page_info += '<li><a class="page_link" href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'">'+ (current_link + 1) +'</a></li>';
current_link++;
}
//生成分頁->下一頁
page_info += '<li><a class="next_link" href="javascript:next();">&raquo;</a></li>';
//加載分頁
$('.pagination').html(page_info);
//生成分頁->左側總數
$("#data-total-page").html(show_per_page+"條/頁，共"+number_of_pages+"頁")
//激活第一頁，使得顯示第一頁
$('#data-pagination li').eq(1).addClass('active');
//隱藏該對象下面的所有子元素
$('#datas').children().css('display', 'none');
//顯示第n（show_per_page）元素
$('#datas').children().slice(0, show_per_page).css('display', 'inline-block');
});
</script>

HTML

<!-- 數據 -->
<div id="datas">
<?php
foreach($data as $v)
{
echo '<div class="data">
<div class="data-info">
<div class="data-name">' + $v['name'] + '</div>
<div class="data-blog">' + $v['blog'] + '</div>
</div>
</div>
';
}
?>
</div>
<!-- 分頁 -->
<input type="hidden" id="current_page" value="0">
<input type="hidden" id="show_per_page" value="0">
<div id="data-page-info">
<div id="data-total-page"></div>
<div id="data-pagination">
<ul class="pagination"></ul>
</div>
</div>

效果如下