html
<table id="pagingTable">
<thead>
<tr>
<td>
第一列
</td>
<td>
第二列
</td>
<td>
第三列
</td>
<td>
第四列
</td>
<td>
第五列
</td>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
css
<style>
.pageInit
{
padding: 5px 10px;
border: 1px solid #ff9600;
text-decoration: none;
color: #ff6500;
margin-left: 10px;
}
.pageSelected
{
padding: 5px 10px;
border: 1px solid #ff6500;
text-decoration: none;
color: #ff6500;
background: #ffbe94;
margin-left: 10px;
}
</style>
js
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript"> //调用js
$(function () {
simplePaging($('#pagingTable'), );
});
/**
* 要求：table的绘制需要规范，即table需要采用如下格式:
* <table>
* <thead>
* </thead>
* <tbody>
* </tbody>
* </table>
* 说明：本分页函数仅对tbody中的行进行分页显示
*
* @param {} table table对象
* @param {} pageSize 每页显示的行数
*
*/
function simplePaging(table, pageSize) {
var $selectedPage; //被选中的页数
var $table = $(table); //表格对象
var currentPage = ; //当前页默认值
var sumRows = $table.find('tbody tr').length; //总行数
var sumPages = Math.ceil(sumRows / pageSize); //总页数
//避免多次调用产生重复的页码
$table.next("div[tablePagingDiv]").remove();
if (sumPages > ) {
$table.bind('paging', function () {
//默认所有行都隐藏，然后根据分页显示
$table.find('tbody tr').hide().slice(currentPage * pageSize, (currentPage + ) * pageSize).show();
});
//页码div
var $pager = $('<div tablePagingDiv="" style="height:40px;line-height:40px;"></div>');
for (var pageIndex = ; pageIndex < sumPages; pageIndex++) { $('<a href="#"><span>' + (pageIndex + ) + '</span></a>').bind('click', { 'newPage': pageIndex }, function (event) {
currentPage = event.data['newPage'];
$selectedPage = $(this);
$(this).addClass('pageSelected').siblings().removeClass('pageSelected');
//为每一个要显示的页数上添加触发分页函数
$table.trigger('paging');
}).appendTo($pager);
$pager.append(" ");
}
//添加初始化css
$('a', $pager).addClass('pageInit');
$('a:first', $pager).addClass('pageSelected');
//添加鼠标hover效果
$('a', $pager).hover(function () {
$(this).addClass('pageSelected');
}, function () {
$(this).removeClass('pageSelected');
//被单击的页面的样式
if ($selectedPage == null) {
$('a:first', $pager).addClass('pageSelected');
}
else {
$selectedPage.addClass('pageSelected');
}
});
$pager.insertAfter($table);
//在table上触发paging事件
$table.trigger('paging');
}
}
</script>
源码文件：HTMLPage1.zip