Question

高手进~~~求一段JavaScript分页代码~~能动态控制

在html中能传入三个参数，如（当前页，页面条数，总页数）
这三个参数因为会可能变化，所以，必须要动态传入，也就是说，他们是个变量。由后台数据库控制

js代码必须和html代码分开， 在html中应用js页面的代码，
js里面装着分页的方法。必须有个方法接口~~

能满足我的要求，测试后还将追加100分 谢谢了~~~有疑问可以留言
网上乱找的不要~~

Answer 1

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

Answer 2

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Javascript分页</title>
<script type="text/javascript">
var page=1;
var pagesize=2;//每页显示数量
var picnum=9;//图片总数量
var pagenum;
var showpage='';
var showpage1='';
function showpic(no) {
page=no;
pagenum=picnum/pagesize;
if (picnum%pagesize>0) pagenum=parseInt(picnum/pagesize)+1;
document.getElementById("img").innerHTML='';
for (i=1;i<=picnum;i++){
if(i > (page-1)*pagesize && i<=page*pagesize){
document.getElementById("img").innerHTML+='<img src='+i+'.jpg>';
}
}
if (page>1){
showpage='<a href="javascript:showpic(1);">首页</a> <a href="javascript:showpic('+(page-1)+');">上一页</a>'
}else{
showpage='';
}
if (page<pagenum){
showpage1=' <a href="javascript:showpic('+(page+1)+');">下一页</a> <a href="javascript:showpic('+pagenum+');">尾页</a> '
}else{
showpage1='';
}
document.getElementById("pages").innerHTML='页次：'+page+'/<font color=red>'+pagenum+'</font> 共：<font color=red>'+picnum+'</font> 条 '+showpage+showpage1;
}
window.onload=function(){
showpic(1);
}
</script>
</head>

<body>
<div id="img"></div>
<div id="pages"></div>
</body>
</html>

Answer 3

<!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>
<title>中国站长天空-网页特效-综合特效-静态代码的分页效果</title>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
tr{display:none}
</style>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<table id="mydiv">
<tr><td>01</td></tr>
<tr><td>02</td></tr>
<tr><td>03</td></tr>
<tr><td>04</td></tr>
<tr><td>05</td></tr>
<tr><td>06</td></tr>
<tr><td>07</td></tr>
<tr><td>08</td></tr>
<tr><td>09</td></tr>
<tr><td>10</td></tr>
<tr><td>11</td></tr>
<tr><td>12</td></tr>
<tr><td>13</td></tr>
<tr><td>14</td></tr>
<tr><td>15</td></tr>
<tr><td>16</td></tr>
<tr><td>17</td></tr>
<tr><td>18</td></tr>
<tr><td>19</td></tr>
<tr><td>20</td></tr>
<tr><td>21</td></tr>
</table>
<div id="changpage"></div>
<script language="javascript">
var obj,j;
var page=0;
var nowPage=0;//当前页
var listNum=5;//每页显示<ul>数
var PagesLen;//总页数
var PageNum=4;//分页链接接数(5个)
onload=function(){
obj=document.getElementById("mydiv").getElementsByTagName("tr");
j=obj.length
PagesLen=Math.ceil(j/listNum);
upPage(0)
}
function upPage(p){
nowPage=p
//内容变换
for (var i=0;i<j;i++){
obj[i].style.display="none"
}
for (var i=p*listNum;i<(p+1)*listNum;i++){
if(obj[i])obj[i].style.display="block"
}
//分页链接变换
strS='<a href="###" onclick="upPage(0)">首页</a> '
var PageNum_2=PageNum%2==0?Math.ceil(PageNum/2)+1:Math.ceil(PageNum/2)
var PageNum_3=PageNum%2==0?Math.ceil(PageNum/2):Math.ceil(PageNum/2)+1
var strC="",startPage,endPage;
if (PageNum>=PagesLen) {startPage=0;endPage=PagesLen-1}
else if (nowPage<PageNum_2){startPage=0;endPage=PagesLen-1>PageNum?PageNum:PagesLen-1}//首页
else {startPage=nowPage+PageNum_3>=PagesLen?PagesLen-PageNum-1: nowPage-PageNum_2+1;var t=startPage+PageNum;endPage=t>PagesLen?PagesLen-1:t}
for (var i=startPage;i<=endPage;i++){
if (i==nowPage)strC+='<a href="###" style="color:red;font-weight:700;" onclick="upPage('+i+')">'+(i+1)+'</a> '
else strC+='<a href="###" onclick="upPage('+i+')">'+(i+1)+'</a> '
}
strE=' <a href="###" onclick="upPage('+(PagesLen-1)+')">尾页</a> '
strE2=nowPage+1+"/"+PagesLen+"页"+" 共"+j+"条"

document.getElementById("changpage").innerHTML=strS+strC+strE+strE2
}
</script>
</body>
</html>

Answer 4

下面这个还不错 我基本都是用这个 非常方面

<script>
var a = document.getElementsByTagName("div");
var i=0,j;//i为显示开始坐标 j为结束坐标
function aa(){
if(i==3)return;
if (i ==11 ) {
i =9;

}
else {
i = i - 6;
}
bb();

}
function bb(){
for (var x = 0; x < a.length; x++)
a[x].style.display = "none";
if (parseInt(a.length % 3) < 3 && i > a.length - 3) {
for (var x = a.length - 1; x > a.length - 2 - 3 + a.length % 3; x--)
a[x].style.display = "block";
i = i + a.length % 3 + 1;
}
else {

for (var x = i; x < a.length; x++) {
if ((x + 1) % 3 == 0) {
j = x;
break; } } for (var x = i; x < j + 1; x++)
a[x].style.display = "block";
i = j + 1;
}

}
bb();
</script>

<body>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<div>内容1</div>
<div>内容2</div>
<div>内容3</div>
<div>内容4</div>
<div>内容5</div>
<div>内容6</div>
<div>内容7</div>
<div>内容8</div>
<div>内容9</div>
<div>内容10</div>
<div>内容11</div>
<div>内容12</div>
<div>内容13</div>
<div>内容14</div>
<input type=button value=上一页 onclick=aa()>
<input type=button value=下一页 onclick=bb()>
</body>

Answer 5

按照 gua331921839 提供的
加上下面这个函数
<script>
//获得地址，参数的方法
var request = {
QueryString : function(val)
{
var uri = window.location.search;
var re = new RegExp("" +val+ "=([^&?]*)", "ig");
return ((uri.match(re))?(uri.match(re)[0].substr(val.length+1)):null);
}
}
</script>

你的要求效果就出来了，剩下的就自己组合一下吧