jquery 實現分頁
阿新 • • 發佈：2020-08-17
<!DOCTYPE html> <html lang="zh"> <head> <title>jQuery資料分頁顯示Demo</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--//匯入jQuery包--> </head> <body> <table id="table"> </table> <div class=""></div> <span id="info"> </span> </body> </html> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.js" type="text/javascript"></script> <!--//<script src="jquery/jquery.number.js" type="text/javascript"></script>--> <script> var a = new Array("1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12","13","14","15","16",'17'); //每頁資料量 var mypage = 4; //整除頁數 var pagenumber = parseInt(a.length / mypage); //餘數，不能整除的情況 var remainder; if(a.length%mypage==0){ remainder=0; }else{ remainder=1; } vartablehtml; var spanhtml; var tag = 1; $(document).ready(function () { for (var i = (tag - 1) * mypage; i < tag * mypage; i++) { if(a[i]==null){ tablehtml += "<tr>" + "<td>" + "<br>" + "</td>" + "</tr>"; }else{ tablehtml += "<tr>" + "<td>" + a[i] + "</td>" + "</tr>"; } }; $('#table').html(""); $('#table').html(tablehtml); spanhtml = "<span>共" + (pagenumber+remainder) + "頁|第" + tag + "頁</span>"; for (var i = 1; i <= (pagenumber+remainder); i++) { spanhtml += "<a href='#' onclick='gotonetxt(" + i + ")'>" + i + "</a>"; }; $('#info').html(""); $('#info').html(spanhtml); }); function gotonetxt(tag) { tablehtml = ""; spanhtml = ""; for (var i = (tag - 1) * mypage; i < tag * mypage; i++) { if(a[i]==null){ tablehtml += "<tr>" + "<td>" + "<br>" + "</td>" + "</tr>"; }else{ tablehtml += "<tr>" + "<td>" + a[i] + "</td>" + "</tr>"; } }; $('#table').html(""); $('#table').html(tablehtml); spanhtml = "<span>共" + (pagenumber+remainder) + "頁|第" + tag + "頁</span>"; for (var i = 1; i <= pagenumber+remainder; i++) { spanhtml += "<a href='#' onclick='gotonetxt(" + i + ")'>" + i + "</a>"; }; $('#info').html(""); $('#info').html(spanhtml); }; </script>