在Web開發(fā)中,分頁功能是非常常見的。通常情況下,我們需要使用jQuery來生成頁面的頁碼,實現(xiàn)分頁功能。今天,我們就來介紹一下使用jQuery來實現(xiàn)分頁功能。
$(document).ready(function(){ var rowsShown = 10; //每頁顯示的行數(shù) var rowsTotal = $('#myTable tbody tr').length; //總行數(shù) var numPages = rowsTotal/rowsShown; //總頁數(shù) for(i=0;i'+pageNum+''); //生成頁碼鏈接 } $('#myTable tbody tr').hide(); //隱藏表格所有行 $('#myTable tbody tr').slice(0, rowsShown).show(); //顯示第一頁數(shù)據(jù) $('#pagination a:first').addClass('active'); //默認第一頁鏈接為選中狀態(tài) $('#pagination a').bind('click', function(){ $('#pagination a').removeClass('active'); //移除所有鏈接的選中狀態(tài) $(this).addClass('active'); //為當前鏈接添加選中狀態(tài) var currPage = $(this).attr('rel'); //獲取當前頁碼 var startItem = currPage * rowsShown; //計算起始行數(shù) var endItem = startItem + rowsShown; //計算結(jié)束行數(shù) $('#myTable tbody tr').hide(); //隱藏所有表格行 $('#myTable tbody tr').slice(startItem, endItem).show(); //顯示當前頁碼的數(shù)據(jù) return false; }); });
以上是一個簡單的分頁實例代碼。我們首先定義了每頁要顯示的行數(shù)和總行數(shù),然后通過計算得到總頁數(shù)。接著使用一個循環(huán)生成鏈接,將鏈接追加至一個名為“pagination”的div中。接著,我們隱藏了表格中的所有數(shù)據(jù),然后顯示第一頁數(shù)據(jù),并對第一頁鏈接設置選中狀態(tài)。最后,為每個鏈接綁定了一個點擊事件,點擊后根據(jù)當前頁碼計算要顯示的數(shù)據(jù),并將當前鏈接的選中狀態(tài)設置為選中。
通過上述代碼,我們可以輕松地實現(xiàn)分頁功能。并且,通過加入樣式,我們可以將頁碼樣式設置得更加友好和美觀。如果您的網(wǎng)站中需要分頁功能,jQuery分頁功能是一個不錯的選擇。