<!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; } var tablehtml; 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>