简单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>

View Code

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>

　　<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();});//页码divvar $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>