再2的基础上，添加分页功能
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
//显示数组
function arrayFunction(num) {
var ArrList = new Array();
ArrList[0] = { id: "001", name: "张三", style: "待阅", state: "未办" };
ArrList[1] = { id: "002", name: "李四", style: "已阅", state: "已办" };
ArrList[2] = { id: "003", name: "王五", style: "待阅", state: "已办" };
ArrList[3] = { id: "004", name: "黑六", style: "已阅", state: "办结" };
ArrList[4] = { id: "005", name: "朱七", style: "待阅", state: "未办" };
ArrList[5] = { id: "006", name: "程八", style: "待阅", state: "已办" };
ArrList[6] = { id: "007", name: "朱九", style: "待阅", state: "未办" };
ArrList[7] = { id: "008", name: "周十", style: "已阅", state: "已办" };
ArrList[8] = { id: "009", name: "吴十一", style: "待阅", state: "未办" };
ArrList[9] = { id: "010", name: "郑十二", style: "待阅", state: "办结" };
ArrList[10] = { id: "011", name: "冯十三", style: "待阅", state: "已办" };
ArrList[11] = { id: "012", name: "陈十四", style: "已阅", state: "办结" };
return ArrList[num];
}
function showTable() {
var ArrList = new Array(12);
//第几行
var n = 0;
ArrList[0] = { id: "001", name: "张三", style: "待阅", state: "未办" };
ArrList[1] = { id: "002", name: "李四", style: "已阅", state: "已办" };
ArrList[2] = { id: "003", name: "王五", style: "待阅", state: "已办" };
ArrList[3] = { id: "004", name: "黑六", style: "已阅", state: "办结" };
ArrList[4] = { id: "005", name: "朱七", style: "待阅", state: "未办" };
ArrList[5] = { id: "006", name: "程八", style: "待阅", state: "已办" };
ArrList[6] = { id: "007", name: "朱九", style: "待阅", state: "未办" };
ArrList[7] = { id: "008", name: "周十", style: "已阅", state: "已办" };
ArrList[8] = { id: "009", name: "吴十一", style: "待阅", state: "未办" };
ArrList[9] = { id: "010", name: "郑十二", style: "待阅", state: "办结" };
ArrList[10] = { id: "011", name: "冯十三", style: "待阅", state: "已办" };
ArrList[11] = { id: "012", name: "陈十四", style: "已阅", state: "办结" };
document.write("<table id=\"table\" border=\"1\" style =\"width:500px; margin:auto; text-align:left\">");
document.write("<tr> <td>Id</td>
<td>Name</td><td>Style</td><td>State</td><td>Operate</td> </tr>");
//循环输出
for (var i in ArrList) {
//输出行
document.write("<tr>");
var obj = ArrList[i];
for (var j in obj) {
document.write("<td>");
document.write(obj[j]);
document.write("</td>");
}
document.write("<td>");
document.write("<button onclick=\"show("+ n +")\">");
document.write("查看");
document.write("</button>");
document.write("</td>");
document.write("</tr>");
n++;
}
document.write("</table>");
}
//查看子窗口
function show(num) {
openWindow = window.open("", "_blank", "toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=400, height=200");
openWindow.document.writeln('<html>');
openWindow.document.writeln('<title>显示</title>');
openWindow.document.writeln('<body>');
openWindow.document.writeln('<center>');
openWindow.document.writeln('<table border="1" width="200" >');
openWindow.document.writeln('<tr>');
openWindow.document.writeln('<td>');
openWindow.document.writeln('id');
openWindow.document.writeln('</td>');
openWindow.document.writeln('<td>');
openWindow.document.writeln(arrayFunction(num).id);
openWindow.document.writeln('</td>');
openWindow.document.writeln('</tr>');
openWindow.document.writeln('<tr>');
openWindow.document.writeln('<td>');
openWindow.document.writeln('name');
openWindow.document.writeln('</td>');
openWindow.document.writeln('<td>');
openWindow.document.writeln(arrayFunction(num).name);
openWindow.document.writeln('</td>');
openWindow.document.writeln('</tr>');
openWindow.document.writeln('<tr>');
openWindow.document.writeln('<td>');
openWindow.document.writeln('style');
openWindow.document.writeln('</td>');
openWindow.document.writeln('<td>');
openWindow.document.writeln(arrayFunction(num).style);
openWindow.document.writeln('</td>');
openWindow.document.writeln('</tr>');
openWindow.document.writeln('<tr>');
openWindow.document.writeln('<td>');
openWindow.document.writeln('state');
openWindow.document.writeln('</td>');
openWindow.document.writeln('<td>');
openWindow.document.writeln(arrayFunction(num).state);
openWindow.document.writeln('</td>');
openWindow.document.writeln('</tr>');
openWindow.document.writeln('</table>');
openWindow.document.writeln('<input type="button" value="确定" onclick=window.close()>');
openWindow.document.writeln('<input type="button" value="取消" onclick=window.close()>');
openWindow.document.writeln('</center>');
openWindow.document.writeln('</body>');
openWindow.document.writeln('</html>');
openWindow.document.close();
}
</script>
</head>
<body>
<script>
showTable();
</script>
<div style ="text-align:center">
<span id="spanFirst">第一页</span>
<span id="spanPre">上一页</span>
<span id="spanNext">下一页</span>
<span id="spanLast">最后一页</span>
第<span id="spanPageNum"></span>页/共<span id="spanTotalPage"></span>页
</div>
</body>
</html>
<script>
var theTable = document.getElementById("table");
var totalPage = document.getElementById("spanTotalPage");
var pageNum = document.getElementById("spanPageNum");
var spanPre = document.getElementById("spanPre");
var spanNext = document.getElementById("spanNext");
var spanFirst = document.getElementById("spanFirst");
var spanLast = document.getElementById("spanLast");
var numberRowsInTable = theTable.rows.length;
var pageSize = 5;
var page = 1;
//下一页
function next() {
hideTable();
currentRow = pageSize * page;
maxRow = currentRow + pageSize;
if (maxRow > numberRowsInTable) maxRow = numberRowsInTable;
for (var i = currentRow; i < maxRow; i++) {
theTable.rows[i].style.display = '';
}
page++;
if (maxRow == numberRowsInTable) { nextText(); lastText(); }
showPage();
preLink();
firstLink();
}
//上一页
function pre() {
hideTable();
page--;
currentRow = pageSize * page;
maxRow = currentRow - pageSize;
if (currentRow > numberRowsInTable) currentRow = numberRowsInTable;
for (var i = maxRow; i < currentRow; i++) {
theTable.rows[i].style.display = '';
}
if (maxRow == 0) { preText(); firstText(); }
showPage();
nextLink();
lastLink();
}
//第一页
function first() {
hideTable();
page = 1;
for (var i = 0; i < pageSize; i++) {
theTable.rows[i].style.display = '';
}
showPage();
preText();
nextLink();
lastLink();
}
//最后一页
function last() {
hideTable();
page = pageCount();
currentRow = pageSize * (page - 1);
for (var i = currentRow; i < numberRowsInTable; i++) {
theTable.rows[i].style.display = '';
}
showPage();
preLink();
nextText();
firstLink();
}
function hideTable() {
for (var i = 0; i < numberRowsInTable; i++) {
theTable.rows[i].style.display = 'none';
}
}
function showPage() {
pageNum.innerHTML = page;
}
//总共页数
function pageCount() {
var count = 0;
if (numberRowsInTable % pageSize != 0) count = 1;
return parseInt(numberRowsInTable / pageSize) + count;
}
//显示链接
function preLink() { spanPre.innerHTML = "<a href='javascript:pre();'>上一页</a>"; }
function preText() { spanPre.innerHTML = "上一页"; }
function nextLink() { spanNext.innerHTML = "<a href='javascript:next();'>下一页</a>"; }
function nextText() { spanNext.innerHTML = "下一页"; }
function firstLink() { spanFirst.innerHTML = "<a href='javascript:first();'>第一页</a>"; }
function firstText() { spanFirst.innerHTML = "第一页"; }
function lastLink() { spanLast.innerHTML = "<a href='javascript:last();'>最后一页</a>"; }
function lastText() { spanLast.innerHTML = "最后一页"; }
//隐藏表格
function hide() {
for (var i = pageSize; i < numberRowsInTable; i++) {
theTable.rows[i].style.display = 'none';
}
totalPage.innerHTML = pageCount();
pageNum.innerHTML = '1';
nextLink();
lastLink();
}
hide();
</script>