標籤：.sh 顯示 meta ref har 連結 src function 自訂
功能描述：
（1）設定起始頁位置和每頁的大小；
（2）綁定自訂的分頁事件，在事件中隱藏當前頁不需要顯示的行；
（3）為表格添加頁連結；
（4）綁定連結的單擊事件，在事件中觸發表格分頁事件。
：
實現代碼：
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script> <style media="screen"> table { border-collapse: collapse; border-color: rgba(205, 193, 222, 0.84); } </style></head><body> <table border="1"> <thead> <tr> <th> 編號 </th> <th> 語言 </th> <th> 課時 </th> </tr> </thead> <tbody> <tr> <td>c001</td> <td>c#</td> <td>80</td> </tr> <tr> <td>c002</td> <td>Java</td> <td>70</td> </tr> <tr> <td>c003</td> <td>PHP</td> <td>60</td> </tr> <tr> <td>c004</td> <td>Perl</td> <td>50</td> </tr> </tbody> </table> <script> $(document).ready(function() { var $table = $(‘table‘); var currentPage = 0; //當前頁索引 var pageSize = 2; //每頁行數（不包括表頭） $table.bind(‘paging‘,function(){ //綁定分頁事件 //隱藏所有的行，取出當前頁的行顯示 $table.find(‘tbody tr‘).hide().slice(currentPage*pageSize,(currentPage + 1)*pageSize).show(); }); var sumRows = $table.find(‘tbody tr‘).length; //記錄總行數 var sumPages = Math.ceil(sumRows/pageSize);//總頁數 var $pager = $("<div class=‘page‘></div>");//分頁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"]; $table.trigger(‘paging‘); }).appendTo($pager); $pager.append(" "); } $pager.insertAfter($table); //分頁 $table.trigger(‘paging‘); //觸發分頁事件 }); </script> </body></html>
【Demo】jQuery 設定簡單的分頁
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
