利用jQuery給表格新增分頁效果
阿新 • • 發佈:2019-01-07
1. 新建一個Table,新增十行資料
<table cellspacing="0"> <thead> <tr> <th>編號</th> <th>姓名</th> <th>性別</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>張飛</td> <td>男</td> </tr> <tr> <td>2</td> <td>劉備</td> <td>男</td> </tr> <tr> <td>3</td> <td>關羽</td> <td>男</td> </tr> <tr> <td>4</td> <td>妲己</td> <td>女</td> </tr> <tr> <td>5</td> <td>后羿</td> <td>男</td> </tr> <tr> <td>6</td> <td>大喬</td> <td>女</td> </tr> <tr> <td>7</td> <td>露娜</td> <td>女</td> </tr> <tr> <td>8</td> <td>E.Z</td> <td>男</td> </tr> <tr> <td>9</td> <td>琴女</td> <td>女</td> </tr> <tr> <td>10</td> <td>貂蟬</td> <td>女</td> </tr> </tbody> </table>
2. 引入jQuery 及script程式碼
3. 另外,附上表格和底部分頁碼的css樣式<script src="jquery-1.11.1.js"></script> <script> $(function(){ var $table = $('table'); var currentPage = 0;//當前頁預設值為0 var pageSize = 3;//每一頁顯示的數目 $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,放入a標籤,顯示底部分頁碼 for(var pageIndex = 0 ; pageIndex<sumPages ; pageIndex++){ $('<a href="#" id="pageStyle" onclick="changCss(this)"><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"); //預設第一頁的a標籤效果 var $pagess = $('#pageStyle'); $pagess[0].style.backgroundColor="#006B00"; $pagess[0].style.color="#ffffff"; }); //a連結點選變色,再點其他回覆原色 function changCss(obj){ var arr = document.getElementsByTagName("a"); for(var i=0;i<arr.length;i++){ if(obj==arr[i]){ //當前頁樣式 obj.style.backgroundColor="#006B00"; obj.style.color="#ffffff"; } else { arr[i].style.color=""; arr[i].style.backgroundColor=""; } } } </script>
<style> table{ width:600px; text-align:center; } table tr th,td{ height:30px; line-height:30px; border:1px solid #ccc; } #pageStyle{ display:inline-block; width:32px; height:32px; border:1px solid #CCC; line-height:32px; text-align:center; color:#999; margin-top:20px; text-decoration:none; } #pageStyle:hover{ background-color:#CCC; } #pageStyle .active{ background-color:#0CF; color:#ffffff; } </style>
4.好了,開啟瀏覽器試試
點選頁碼可翻頁,成功!