html
<table id="pagingTable"> <thead> <tr> <td> 第一列 </td> <td> 第二列 </td> <td> 第三列 </td> <td> 第四列 </td> <td> 第五列 </td> </tr> </thead> <tbody> <tr> <td> 1 </td> <td> 1 </td> <td> 1 </td> <td> 1 </td> <td> 1 </td> </tr> <tr> <td> 2 </td> <td> 2 </td> <td> 2 </td> <td> 2 </td> <td> 2 </td> </tr> <tr> <td> 3 </td> <td> 3 </td> <td> 3 </td> <td> 3 </td> <td> 3 </td> </tr> <tr> <td> 4 </td> <td> 4 </td> <td> 4 </td> <td> 4 </td> <td> 4 </td> </tr> <tr> <td> 5 </td> <td> 5 </td> <td> 5 </td> <td> 5 </td> <td> 5 </td> </tr> <tr> <td> 6 </td> <td> 6 </td> <td> 6 </td> <td> 6 </td> <td> 6 </td> </tr> <tr> <td> 7 </td> <td> 7 </td> <td> 7 </td> <td> 7 </td> <td> 7 </td> </tr> <tr> <td> 8 </td> <td> 8 </td> <td> 8 </td> <td> 8 </td> <td> 8 </td> </tr> <tr> <td> 9 </td> <td> 9 </td> <td> 9 </td> <td> 9 </td> <td> 9 </td> </tr> <tr> <td> 11 </td> <td> 11 </td> <td> 11 </td> <td> 11 </td> <td> 11 </td> </tr> <tr> <td> 13 </td> <td> 13 </td> <td> 13 </td> <td> 13 </td> <td> 13 </td> </tr> <tr> <td> 23 </td> <td> 23 </td> <td> 23 </td> <td> 23 </td> <td> 23 </td> </tr> <tr> <td> 33 </td> <td> 33 </td> <td> 33 </td> <td> 33 </td> <td> 33 </td> </tr> <tr> <td> 43 </td> <td> 43 </td> <td> 43 </td> <td> 43 </td> <td> 43 </td> </tr> <tr> <td> 53 </td> <td> 53 </td> <td> 53 </td> <td> 53 </td> <td> 53 </td> </tr> <tr> <td> 63 </td> <td> 63 </td> <td> 63 </td> <td> 63 </td> <td> 63 </td> </tr> <tr> <td> 73 </td> <td> 73 </td> <td> 73 </td> <td> 73 </td> <td> 73 </td> </tr> <tr> <td> 83 </td> <td> 83 </td> <td> 83 </td> <td> 83 </td> <td> 83 </td> </tr> <tr> <td> 93 </td> <td> 93 </td> <td> 93 </td> <td> 93 </td> <td> 93 </td> </tr> <tr> <td> 113 </td> <td> 113 </td> <td> 113 </td> <td> 113 </td> <td> 113 </td> </tr> <tr> <td> 123 </td> <td> 123 </td> <td> 123 </td> <td> 123 </td> <td> 123 </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\'), 4); }); /** * 要求：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 = 0; //当前页默认值 var sumRows = $table.find(\'tbody tr\').length; //总行数 var sumPages = Math.ceil(sumRows / pageSize); //总页数 //避免多次调用产生重复的页码 $table.next("div[tablePagingDiv]").remove(); if (sumPages > 1) { $table.bind(\'paging\', function () { //默认所有行都隐藏，然后根据分页显示 $table.find(\'tbody tr\').hide().slice(currentPage * pageSize, (currentPage + 1) * pageSize).show(); }); //页码div var $pager = $(\'<div tablePagingDiv="" style="height:40px;line-height:40px;"></div>\'); for (var pageIndex = 0; pageIndex < sumPages; pageIndex++) { $(\'<a href="#"><span>\' + (pageIndex + 1) + \'</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