简单table分页
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
