有時候table的列數太長，不利於使用者查詢，所以利用JS做了一個table的分頁，以下為相關程式碼 一、JS代碼 複製程式碼 程式碼如下: <BR> var pageSize = 15; // //目前頁<BR> var lastPage ; //最後頁<BR> var direct=0; //總行數<BR> var page; //總 var end;<BR><BR> <BR> len =$("#mytable tr").length - 1; // 求這個表格的總行數，並剔除第一行介紹<BR> page=len % pageSize==0 ? len/pageSize : Math.floor(len/pageSize) 1 ("page=== " page);<br> document.getElementById("btn0").innerHTML= "當前" curPage "/" page " 頁 每頁"; // 顯示目前多少頁<br> 量<BR> document.getElementById("pageSize").value = pageSize;<BR><BR> $("#btn1").click(function firstPage(){ // 首頁<BR> ;<BR> direct = 0;<BR> displayPage();<br> });<br> $("#btn2").click(function frontPage(){ // 上一頁<BR> direct=- 1;<BR> displayPage();<br> });<br> $("#btn3").click(function nextPage(){ // 下一頁<br> direct=1;<br> displayPage( );<BR> });<BR> $("#btn4").click(function lastPage(){ // <BR> direct = 0;<BR> }) ;<BR> $("#btn5").click(function changePage(){ // getElementById("changePage").value * 1;<BR> if (!/^[ 1-9]d*$/.test(curPage)) {<BR> alert("請輸入正整數");<BR> return ;<BR> }<BR> if (curPage > page) {<BR> alert("超出數據頁面");<BR> return ;<BR> }<BR> direct = 0;<BR> displayPage();<BR> });<BR><BR> <BR> $(" #pageSizeSet").click(function setPageSize(){ // 設定每頁顯示多少筆記錄<br> 🎜> if (!/^[1-9]d*$/.test(pageSize)) {<br> return ;<BR> }<🎠 #mytable tr").length - 1;<BR> page=len % pageSize==0 ? curPage =1; //目前頁<BR> firstPage();<BR> });<BR> });<BR> });<BR> );<br><br> function displayPage(){<BR> direct=0;<BR> alert("已經是第一頁了" );<BR> return;<BR> direct=0;<BR> return ;<BR> }<BR><BR> // 修正當len=1時，curPage計算為0的bug<BR> if (len > pageSize) {<br> curPage = ((curPage direct len) % len);<br> } else {<br> }<br><BR> .innerHTML="目前" curPage "/" page " 頁 每頁"; // 顯示目前多少頁<BR><BR> end = begin 1* pageSize - 1; // 末期記錄號碼<BR><BR> <br> $("#mytable tr").hide(); // 首先，並設定這行為隱藏<br> $("#mytable tr").each(function(i){ // ((i>=begin && i<=end) }|| i==0 )//顯示begin<=x<=end的記錄<BR> 🎜> <br> }<br> 二、HTML代碼 複製程式碼 程式碼如下: 條 設定 首頁上一頁下一頁尾頁 轉到 頁 跳轉 ...剩餘的table碼 最後得到的例子效果如圖：
