function Pagination(title, resultSet, pageIndex, pageSize, recordCount) {
this.title = title;
this.resultSet = resultSet;
this.pageIndex = 1;
this.pageSize = 10;
this.pages = 0;
var $ = this;
var panel = document.createElement("DIV");
var footer = {
visible:false
};
var header = {
visible:false
};
var dataPanel = {
$:null,
visible:false
};
var emptyPanel = {
$:null,
visible:false
};
var pagePanel = {
$:null,
pager:document.createElement("SPAN"),
firstPage:document.createElement("INPUT"),
lastPage:document.createElement("INPUT"),
previousPage:document.createElement("INPUT"),
forwardPage:document.createElement("INPUT"),
visible:false
};
var commandPanel = {
$:null,
commands:[],
visible:false
};
this.getPanel = function() {
return panel;
};
this.getDataPanel = function() {
return dataPanel;
};
this.getEmptyPanel = function() {
return emptyPanel;
};
this.getCommandPanel = function() {
return commandPanel;
};
this.getFooter = function() {
return footer;
}
dataPanel.init = function() {
var table = document.createElement("TABLE");
table.border = "1";
table.width = "100%";
table.borderColor = "lightblue";
table.style.borderCollapse = "collapse";
table.className = "coll_tab";
var thead = table.createTHead();
var h = thead.insertRow();
for(var i = 0; i < $.title.length; i++) {
var th = document.createElement("TH");
th.innerHTML = $.title[i];
h.appendChild(th);
}
this.$ = table;
this.setVisible(false);
}
dataPanel.fillData = function(resultSet, pageIndex, pageSize, recordCount) {
$.pages = 0;
$.resultSet = resultSet;
$.pageIndex = pageIndex;
$.pageSize = pageSize;
if (!resultSet instanceof Array) {
removeDataRows(this.$.rows.length - 1, 1);
alert("數據源類型不匹配，需要Array類型！");
pagePanel.setVisible(false);
emptyPanel.setVisible(true);
commandPanel.setVisible(false);
} else if (resultSet.length <= 0) {
pagePanel.setVisible(false);
emptyPanel.setVisible(true);
commandPanel.setVisible(false);
this.removeDataRows(0, this.$.rows.length - 1);
this.setVisible(true);
} else {
$.pages = Math.ceil(recordCount / pageSize);
for (var i = 0; i < $.resultSet.length; i++) {
var tr = this.$.tBodies[0].rows(i) ? this.$.tBodies[0].rows(i) : this.$.tBodies[0].insertRow();
for (var j = 0; j < $.title.length; j++) {
var td = tr.cells(j) ? tr.cells(j) : tr.insertCell();
td.align = "center";
td.innerHTML = $.resultSet[i][j];
}
}
this.removeDataRows($.resultSet.length, this.$.tBodies[0].rows.length - 1);
this.setVisible(true);
commandPanel.setVisible(true);
emptyPanel.setVisible(false);
pagePanel.setPager("第" + $.pageIndex + "頁/***" + $.pages + "頁 [" + resultSet.length + "/" + recordCount + "]");
pagePanel.setVisible(recordCount > $.pageSize);
}
}
dataPanel.removeDataRows = function(startIndex, endIndex) {
for (var i = endIndex; i >= startIndex; i--) {
if (dataPanel.$.tBodies[0].rows(i)) this.$.tBodies[0].deleteRow(i);
}
};
dataPanel.setVisible = function(visible) {
this.$.style.display = visible ? "block" : "none";
}
footer.fillData = function(resultSet) {
if (resultSet.length && resultSet.length <= 0) return;
$.showFooter(true);
var tfoot = dataPanel.$.tFoot;
for (var i = 0; i < resultSet.length; i++) {
var tr = tfoot.rows(i) ? tfoot.rows(i) : tfoot.insertRow();
for (var j = 0; j < $.title.length; j++) {
var td = tr.cells(j) ? tr.cells(j) : tr.insertCell();
td.align = "center";
td.innerHTML = resultSet[i][j];
}
}
for (var i = dataPanel.$.tFoot.rows.length - 1; i >= resultSet.length; i--) {
dataPanel.$.tFoot.deleteRow(i);
}
}
pagePanel.init = function() {
var div = document.createElement("DIV");
div.className = "pager";
this.firstPage.value = "第壹頁";
this.previousPage.value = "上壹頁";
this.forwardPage.value = "下壹頁";
this.lastPage.value = "最後頁";
this.firstPage.type = this.lastPage.type = this.previousPage.type = this.forwardPage.type = "button";
this.firstPage.className = this.lastPage.className = this.previousPage.className = this.forwardPage.className = "button";
this.firstPage.style.margin = this.previousPage.style.margin = this.forwardPage.style.margin = this.lastPage.style.margin = "0 2px";
div.appendChild(this.pager);
div.appendChild(this.firstPage);
div.appendChild(this.lastPage);
div.appendChild(this.previousPage);
div.appendChild(this.forwardPage);
this.$ = div;
this.setVisible(this.visible);
}
pagePanel.setPager = function(pager) {
this.pager.innerHTML = pager;
if ($.pages > 1) {
if ($.pageIndex == 1) {
this.firstPage.disabled = this.previousPage.disabled = true;
this.lastPage.disabled = this.forwardPage.disabled = false;
} else if ($.pageIndex > 1 && $.pageIndex < $.pages) {
this.firstPage.disabled = this.previousPage.disabled = this.lastPage.disabled = this.forwardPage.disabled = false;
} else {
this.firstPage.disabled = this.previousPage.disabled = false;
this.lastPage.disabled = this.forwardPage.disabled = true;
}
} else {
this.firstPage.disabled = this.previousPage.disabled = this.lastPage.disabled = this.forwardPage.disabled = true;
}
}
pagePanel.setVisible = function(visible) {
this.$.style.display = visible ? "block" : "none";
}
emptyPanel.init = function() {
var div = document.createElement("DIV");
div.className = "empty";
div.style.display = "none";
div.innerHTML = '<font color="red">暫無數據...</font>';
this.$ = div;
this.setVisible(this.visible);
}
emptyPanel.setVisible = function(visible) {
this.$.style.display = visible ? "block" : "none";
}
emptyPanel.reset = function(emptyPanel) {
this.$.innerHTML = "";
this.$.appendChild(emptyPanel);
}
commandPanel.init = function() {
var div = document.createElement("DIV");
div.style.textAlign = "center";
div.style.padding = "5px";
this.$ = div;
this.setVisible(this.visible);
}
commandPanel.addCommand = function(command, cmdText, handler) {
var btnOldCmd = null;
for (var i = 0; i < this.commands.length; i++) {
if (this.commands[i].cmd == command) {
btnOldCmd = this.commands[i];
break;
}
}
var btnCmd = document.createElement("INPUT");
btnCmd.cmd = command;
btnCmd.type = "button";
btnCmd.value = cmdText;
btnCmd.className = "rectbutton";
this.commands[i] = btnCmd;
if (btnOldCmd) {
if (btnOldCmd.handler) {
btnOldCmd.detachEvent("onclick", btnOldCmd.handler);
}
btnOldCmd.replaceNode(btnCmd);
} else {
this.$.appendChild(btnCmd);
}
btnCmd.attachEvent("onclick", handler);
btnCmd.handler = handler;
}
commandPanel.setVisible = function(visible) {
this.$.style.display = visible ? "block" : "none";
}
this.attachPaginationEvent = function(property, eventType, handler) {
if (pagePanel[property].handler) {
pagePanel[property].detachEvent(eventType, pagePanel[property].handler);
}
pagePanel[property].attachEvent(eventType, handler);
pagePanel[property].handler = handler;
}
this.showFooter = function(visible) {
if (visible) {
if (!dataPanel.$.tFoot) dataPanel.$.createTFoot();
} else {
if (dataPanel.$.tFoot) dataPanel.$.deleteTFoot();
}
}
this.setRowProperty = function(rowIndex, properties) {
var targetRow = dataPanel.$.tBodies[0].rows(rowIndex);
for (var prop in properties) {
targetRow.setAttribute(prop, properties[prop]);
}
}
this.attachRowEvent = function(rowIndex, eventType, eventHandler) {
var targetRow = dataPanel.$.tBodies[0].rows(rowIndex);
if (targetRow.handler) {
targetRow[eventType] = null;
}
targetRow.handler = eventHandler;
targetRow[eventType] = eventHandler;
}
this.attachCellEvent = function(rowIndex, cellIndex, eventType, eventHandler) {
var targetCell = dataPanel.$.tBodies[0].rows(rowIndex).cells(cellIndex);
if (targetCell.handler) {
targetCell[eventType] = null;
}
targetCell.handler = eventHandler;
targetCell[eventType] = eventHandler;
}
this.setCellProperty = function(rowIndex, cellIndex, property) {
var cell = dataPanel.$.cells(rowIndex, cellIndex);
for (var prop in property) {
cell[prop] = property[prop];
}
}
this.setCellStyle = function(rowIndex, cellIndex, style) {
var cell = dataPanel.$.cells(rowIndex, cellIndex);
for (var prop in style) {
cell.style[prop] = style[prop];
}
}
this.init = function() {
dataPanel.init();
pagePanel.init();
emptyPanel.init();
commandPanel.init();
panel.appendChild(dataPanel.$);
panel.appendChild(pagePanel.$);
panel.appendChild(emptyPanel.$);
panel.appendChild(commandPanel.$);
if (resultSet && resultSet.length) dataPanel.fillData(resultSet, pageIndex, pageSize, recordCount);
}();
}
HTML頁面
------------------------------------------------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>分頁</title>
<script type="text/javascript" src="Pagination.js"></script>
<script type="text/javascript">
// 輔助
function $(name) {
return document.getElementsByName(name)[0];
}
function $id(id) {
return document.getElementById(id);
}
function $name(name) {
return document.getElementsByName(name);
}
String.prototype.isEmpty = function() {
return new RegExp(/^\s*$/g).test(this);
};
String.prototype.empty = function() {
return new RegExp(/^\s*$/g).test(this);
};
String.prototype.trim = function() {
return this.replace(new RegExp(/^(\s*)(\S*)(\s*)$/g), "$2");
};
// 分頁
var pageIndex = 1; //第幾頁
window.onload = toPagination;
// 該方法中為從數據庫中獲得需要數據
function toPagination(){
$id("content").innerHTML="";
var title = []; // 標題
var resultSet = []; // 內容
var pageSize = 2; // 每頁顯示數
var recordCount = 8; // 總記錄條數
resultSet.push([1,'劉德華','女','<a href="#">打死他</a>']);
resultSet.push([2,'李宇春','？','<a href="#">打死他</a>']);
var title = ['id', '名稱', '性別', '操作'];
toPaginationShow(title, resultSet, pageIndex, pageSize, recordCount);
}
// 由於是在靜態頁面服務傳值，
// 所以 this.pageIndex = 1;
// pageIndex = 1;
// toPagination();
function toPaginationShow(title, resultSet, pageIndex, pageSize, recordCount){
var pagination = new Pagination(title, resultSet, pageIndex, pageSize, recordCount);
pagination.setCellStyle(0, 0, {width:'50%'});
pagination.attachPaginationEvent("firstPage", "onclick", function(){
pageIndex = 1;
this.pageIndex = 1;
toPagination();
});
pagination.attachPaginationEvent("previousPage", "onclick", function(){
pageIndex = (pageIndex - 1 < 1 ? 1 : pageIndex - 1);
this.pageIndex = (pageIndex - 1 < 1 ? 1 : pageIndex - 1);
toPagination();
});
pagination.attachPaginationEvent("forwardPage", "onclick", function(){
pageIndex = (pageIndex + 1 > pagination.pages ? pagination.pages : pageIndex + 1);
this.pageIndex = (pageIndex + 1 > pagination.pages ? pagination.pages : pageIndex + 1);
toPagination();
});
pagination.attachPaginationEvent("lastPage", "onclick", function(){
pageIndex = pagination.pages;
this.pageIndex = pagination.pages;
toPagination();
});
$id("content").appendChild(pagination.getPanel());
}
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>