1 <table border="1"> 2 ????????????<thead> ????????????????<!--加个thead方便过滤表头，不要将其隐藏--> 3 ???????????????<tr> 4 ???????????????????<th>表头1</th> 5 ???????????????????<th>表头2</th> 6 ???????????????</tr> ????????????????7 ????????????</thead> 8 ????????????<tbody id="data"> ??????<!--加个id方便获取表格主体的行进行显示和隐藏--> 9 ???????????????<tr>10 ???????????????????<td>1</td>11 ???????????????????<td>1</td>12 ???????????????</tr>13 ???????????????<tr>14 ???????????????????<td>2</td>15 ???????????????????<td>2</td>16 ???????????????</tr>17 ???????????????<tr>18 ???????????????????<td>3</td>19 ???????????????????<td>3</td>20 ???????????????</tr>21 ???????????????<tr>22 ???????????????????<td>4</td>23 ???????????????????<td>4</td>24 ???????????????</tr>25 ???????????????<tr>26 ???????????????????<td>5</td>27 ???????????????????<td>5</td>28 ???????????????</tr>29 ???????????????<tr>30 ???????????????????<td>6</td>31 ???????????????????<td>6</td>32 ???????????????</tr>33 ???????????????<tr>34 ???????????????????<td>7</td>35 ???????????????????<td>7</td>36 ???????????????</tr>37 ???????????????<tr>38 ???????????????????<td>8</td>39 ???????????????????<td>8</td>40 ???????????????</tr>41 ???????????????</tbody>42 ????????</table>43 ????????<div id="nav"></div> ?????<!--此处为显示页码-->

 1 //分页在页面加载完成时执行 2 $(document).ready(function() { 3 ????var rowsShown=3; ????????????????????????????//每页显示的行 4 ????var rowsTotal=$(‘#data tr‘).length; ?????????//获取总共的行 5 ????var numPages=Math.ceil(rowsTotal/rowsShown); //计算出有多少页 6 ?????7 ????//显示页码，将页面加入#nav内 8 ????for(var i=0;i<numPages;i++){ 9 ????????var pageNum=i+1;10 ????????$(‘#nav‘).append(‘<a href="#" rel="‘+i+‘">‘+pageNum+‘</a>&nbsp;‘);11 ????}12 ????13 ????/* 初次分页操作14 ?????* 先将全部行隐藏15 ?????* 再显示第一页应该显示的行数(本示例为3)16 ?????* 为第一个页码加一个值为active的class属性，方便加样式17 ?????* */18 ????$(‘#data tr‘).hide();19 ????$(‘#data tr‘).slice(0,rowsShown).show();20 ????$(‘#nav a:first‘).addClass(‘active‘);21 ????22 ????//页码点击事件23 ????$(‘#nav a‘).bind(‘click‘,function(){24 ????????$(‘#nav a‘).removeClass(‘active‘); ???//移除所有页码的active类25 ????????$(this).addClass(‘active‘); ??????????//为当前页码加入active类26 ????????var currPage=$(this).attr(‘rel‘); ????//取出页码上的值27 ????????var startItem=currPage*rowsShown; ????//行数的开始=页码*每页显示的行28 ????????var endItem=startItem+rowsShown; ?????//行数的结束=开始+每页显示的行29 ????????$(‘#data tr‘).hide(); ????????????????//全部行都隐藏30 ????????31 ????????//显示从开始到结束的行32 ????????$(‘#data tr‘).slice(startItem,endItem).css(‘display‘,‘table-row‘);33 ????});34 });

1 .active{2 ????padding: 0px;3 ????border: 1px solid black;4 ????background-color: gray;5 ????}