<!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>
