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>

?

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();});//頁碼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>

?

源碼文件：HTMLPage1.zip

轉載于:https://www.cnblogs.com/xuguanghui/p/5068866.html

總結

以上是生活随笔為你收集整理的简单table分页的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。