最近由於項目的需要，做了一個基於JQuery的表格分頁插件封裝，部分源碼來源百度，經由自己封裝完成。
下面是具體代碼和說明，僅供參考。第一步可以先將我的HTML，CSS，JS這三部分的代碼創建好后先運行看看，下圖是文件目錄展示。
html
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery表格分頁</title> <link rel="stylesheet" href="css/Pagebar_PC.css"> </head> <body> <input type='hidden' id='current' /> <input type='hidden' id='show' /> <table id="y1"> <tr> <th>標題1</th> <th>標題2</th> <th>標題3</th> <th>標題4</th> <th>標題5</th> </tr> <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>11</td> <td>12</td> <td>13</td> <td>14</td> <td>15</td> </tr> <tr> <td>11</td> <td>12</td> <td>13</td> <td>14</td> <td>15</td> </tr> <tr> <td>11</td> <td>12</td> <td>13</td> <td>14</td> <td>15</td> </tr> <tr> <td>11</td> <td>12</td> <td>13</td> <td>14</td> <td>15</td> </tr> <tr> <td>11</td> <td>12</td> <td>13</td> <td>14</td> <td>15</td> </tr> <tr> <td>21</td> <td>22</td> <td>23</td> <td>24</td> <td>25</td> </tr> <tr> <td>21</td> <td>22</td> <td>23</td> <td>24</td> <td>25</td> </tr> <tr> <td>21</td> <td>22</td> <td>23</td> <td>24</td> <td>25</td> </tr> <tr> <td>21</td> <td>22</td> <td>23</td> <td>24</td> <td>25</td> </tr> <tr> <td>21</td> <td>22</td> <td>23</td> <td>24</td> <td>25</td> </tr> <tr> <td>31</td> <td>32</td> <td>33</td> <td>34</td> <td>35</td> </tr> <tr> <td>31</td> <td>32</td> <td>33</td> <td>34</td> <td>35</td> </tr> <tr> <td>31</td> <td>32</td> <td>33</td> <td>34</td> <td>35</td> </tr> <tr> <td>31</td> <td>32</td> <td>33</td> <td>34</td> <td>35</td> </tr> <tr> <td>31</td> <td>32</td> <td>33</td> <td>34</td> <td>35</td> </tr> <tr> <td>41</td> <td>42</td> <td>43</td> <td>44</td> <td>45</td> </tr> <tr> <td>41</td> <td>42</td> <td>43</td> <td>44</td> <td>45</td> </tr> <tr> <td>41</td> <td>42</td> <td>43</td> <td>44</td> <td>45</td> </tr> <tr> <td>41</td> <td>42</td> <td>43</td> <td>44</td> <td>45</td> </tr> <tr> <td>41</td> <td>42</td> <td>43</td> <td>44</td> <td>45</td> </tr> <tr> <td>51</td> <td>52</td> <td>53</td> <td>54</td> <td>55</td> </tr> <tr> <td>51</td> <td>52</td> <td>53</td> <td>54</td> <td>55</td> </tr> <tr> <td>51</td> <td>52</td> <td>53</td> <td>54</td> <td>55</td> </tr> <tr> <td>51</td> <td>52</td> <td>53</td> <td>54</td> <td>55</td> </tr> <tr> <td>51</td> <td>52</td> <td>53</td> <td>54</td> <td>55</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> </table> <div id='page_nav_y1'></div> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/Pagebar_PC.js"></script> <script type="text/javascript"> $(function(){ //page(table的ID,隱藏域ID1(存儲當前頁的頁數),隱藏域ID2(存儲一頁顯示的數量),分頁組件ID,A標簽默認類(類名自定義),選擇時的類(設置活動時的樣式類),一頁顯示的個數,table的含有th的tr數量) page('#y1','#current','#show','#page_nav_y1','.y1_page','active_page',10,1); }); </script> </body> </html>
CSS
body,table,tr,th,td,div{ margin:0; padding:0; } table,tr,th,td{ border-collapse: collapse; } body{ padding:10px; } #y1 tr{display: none;} th,td{ width: 150px; height: 30px; line-height: 30px; text-align: center; border:1px solid blue; } th:nth-of-type(1){background-color: red;} th:nth-of-type(2){background-color: green;} th:nth-of-type(3){background-color: yellow;} th:nth-of-type(4){background-color: pink;} th:nth-of-type(5){background-color: yellowgreen;} #page_nav_y1{ display: inline-block; margin-top: 8px; } #page_nav_y1 a{ float: left; width:45px; height: 45px; line-height: 45px; text-align: center; border:1px solid gray; margin:2px; color:black; text-decoration:none; border-radius: 3px; } #page_nav_y1 a.disable{ color:red; border:1px solid red; cursor: not-allowed; } .active_page{ background:darkblue; color:white !important; } #page_nav_y1 a.prev_link, #page_nav_y1 a.next_link{ width:70px; }
js
//上一頁 function prev(obj1,obj2,obj3,obj5,obj6,pageNum,tabNum){ new_page = parseInt($(obj2).val()) - 1; if($('.'+obj6).prev(obj5).length==true){//判斷是否存在前一個兄弟元素 goto_page(obj1,obj2,obj3,obj5,obj6,new_page,pageNum,tabNum); if(pageNum == 2){//當頁碼只有兩頁時 op1('.next_link');//下一頁恢復 op2('.prev_link');//上一頁禁用 }else{ if(new_page > 0){ op1('.next_link');//下一頁恢復 }else{ op2('.prev_link');//上一頁禁用 } } } } //下一頁 function next(obj1,obj2,obj3,obj5,obj6,pageNum,tabNum){ new_page = parseInt($(obj2).val()) + 1; if($('.'+obj6).next(obj5).length==true){//判斷是否存在后一個兄弟元素 goto_page(obj1,obj2,obj3,obj5,obj6,new_page,pageNum,tabNum); if(pageNum == 2){//當頁碼只有兩頁時 op1('.prev_link');//上一頁恢復 op2('.next_link');//下一頁禁用 }else{ if(new_page < pageNum - 1){ op1('.prev_link');//上一頁恢復 }else{ op2('.next_link');//下一頁禁用 } } } } //跳轉某一頁 function goto_page(obj1,obj2,obj3,obj5,obj6,page_num,pageNum,tabNum){ var showNum = parseInt($(obj3).val());//獲取一頁顯示tr數量 start_from = page_num * showNum + tabNum;//計算開始位置 end_on = start_from + showNum;//計算結束位置 $(obj1).children().children().hide().slice(start_from, end_on).show(); //表頭（標題）默認顯示 for(var i=0;i<tabNum;i++){ $(obj1).children().children().eq(i).show(); } //切換活動頁碼 $(obj5 + '[cur_pageNum=' + page_num +']').addClass(obj6).siblings('.'+obj6).removeClass(obj6); //存儲當前頁碼 $(obj2).val(page_num); //當跳轉頁面到第一頁 => '上一頁' 失效,當跳轉頁面到最后一頁 => '下一頁' 失效 if( page_num == 0){ op1('.next_link');//下一頁恢復 op2('.prev_link');//上一頁禁用 }else if(page_num == pageNum - 1){ op1('.prev_link');//上一頁恢復 op2('.next_link');//下一頁禁用 }else{//如果跳轉頁面不是第一頁或者最后一頁那么 '上一頁' 和 '下一頁' 恢復使用 op1('.prev_link');//上一頁恢復 op1('.next_link');//下一頁恢復 } } //分頁頁面的實現 function page(obj1,obj2,obj3,obj4,obj5,obj6,showNum,tabNum){ //獲取table表格中tr var tr = $(obj1).children().children(); //獲取除了表頭（標題）以外tr的總數量 var allNum = tr.size()- tabNum; //計算頁碼數 var pageNum = Math.ceil(allNum/showNum); //隱藏域默認值 $(obj2).val(0);//初始化為0 $(obj3).val(showNum);//存儲一頁中顯示tr的數量 //上一頁 var pageNav = '<a class="prev_link disable" disabled="true" datahref="javascript:prev(''+ obj1 +'',''+ obj2 +'',''+ obj3 +'',''+ obj5 +'',''+ obj6 +'','+ pageNum + ','+ tabNum +');">上一頁</a>'; var curPage = 0; //提取顯示頁A標簽定義的類名--除去輸入時. var page_link = obj5.split('.')[1]; //循環頁碼 while(pageNum > curPage){ pageNav += '<a class="'+ page_link +'" href="javascript:goto_page(''+ obj1 +'',''+ obj2 +'',''+ obj3 +'',''+ obj5 +'',''+ obj6 +'',' + curPage + ','+ pageNum + ',' + tabNum +')" cur_pageNum="' + curPage +'">'+ (curPage + 1) +'</a>'; curPage++; } //判斷頁碼是否不為一頁，如果不為一頁那么下一頁的按鈕為可用，否則下一頁按鈕為不可用。 if(pageNum > 1){ pageNav += '<a class="next_link" href="javascript:next(''+ obj1 +'',''+ obj2 +'',''+ obj3 +'',''+ obj5 +'',''+ obj6 +'','+ pageNum + ',' + tabNum +');">下一頁</a>'; }else{ pageNav += '<a class="next_link disable" disabled="true" datahref="javascript:next(''+ obj1 +'',''+ obj2 +'',''+ obj3 +'',''+ obj5 +'',''+ obj6 +'','+ pageNum + ',' + tabNum +');">下一頁</a>'; } $(obj4).html(pageNav); //為第一頁添加活動類 $(obj5+':first').addClass(obj6); //隱藏該對象下面的所有子元素並讓表頭顯示 tr.slice(0, showNum + tabNum).show(); } /*恢復可點擊*/ function op1(obj){ $(obj).removeClass('disable');//除去不可用類 $(obj).removeAttr('disabled');//除去不可用屬性 $(obj).attr('href',$(obj).attr("datahref"));//將頁碼鏈接恢復 $(obj).removeAttr('datahref');//除去備份鏈接 } /*使點擊效果失效*/ function op2(obj){ $(obj).addClass('disable');//添加不可用類 $(obj).attr('disabled', 'true');//添加不可用屬性 $(obj).attr('datahref',$(obj).attr("href"));//將頁碼鏈接備份到備份鏈接 $(obj).removeAttr('href');//除去頁碼鏈接 }
JS代碼於2017-04-17 16:53:09 有更新，原先的基礎上添加了跳轉頁'上一頁'和'下一頁'的效果處理。
好了，到了這里如果你完成了創建並且運行可以看到效果如下圖所示（如果你想自己研究源碼，那么下面就可以先不看了--代碼邏輯分析）。
下面開始解釋代碼的運行邏輯。
先看到HTML中下面代碼（利用隱藏域存儲值）
<input type='hidden' id='current' /> /*存儲當前頁碼的值*/
<input type='hidden' id='show' /> /*存儲頁面顯示的行數*/
接下來可以看到
<script type="text/javascript">
$(function(){
//page(table的ID,隱藏域ID1(存儲當前頁的頁數),隱藏域ID2(存儲一頁顯示的數量),分頁組件ID,A標簽默認類(類名自定義),選擇時的類(設置活動時的樣式類),一頁顯示的 個數,table的含有th的tr數量)
page('#y1','#current','#show','#page_nav_y1','.y1_page','active_page',10,1);
});
</script>
上面參數我都做了相關的注釋，如果沒能看懂，歡迎提問。
如需轉載，請表明來源http://www.cnblogs.com/webBlog-gqs/p/6715109.html --博客園小鐵達子，謝謝合作！