]]>
<head>
<script src="pageSystem.js"></script>
<script>
var psys;
window.onload = function() {
psys = new PageSystem(1120, "pageDiv", 10, showMsg); //总记录数, 分页pȝ容器Q每l?0?回调
psys.init();
}
function showMsg(currentPage, pageSize) {
//回调Ҏ(gu)自定义，两个参数Q第一个ؓ(f)当前，W二个ؓ(f)每页记录?br /> /****************currentPage和pageSizeh数据更新列表,最好用ajax技?*****************/
alert("h数据要的相应参数>> currentPage: "+ currentPage + " pageSize: " + pageSize);
}
/*****如果要更新分늳l请如下操作******/
//psys.update(count); //@count 录L
function updatePageSys() {
psys.update(150); //@count 录L
}
</script>
<style>
#pageDiv{
font-size:13px;
}
</style>
</head>
<body>
<div id="pageDiv">
</div>
<br/><br/>
<a href="#" onclick="updatePageSys();"/>更新分页pȝ</a>
</body>
</html>
2、pageSystem.js
function PageSystem(count, divID, grountCount, callBack) {
this.totolCount = count; //总记录数
this.initMaxPage = grountCount? grountCount: 5; //昄|Q如 1 2 3 4 5
this.pageSize = 10; //每页记录?br /> this.currentMax = 0; //当前昄的最大页? ?1 2 3 4 5; 5为最大页?br /> this.currentMin = 0; //当前昄的最页? ?11 12 13 14 15; 11为最页?br /> this.homePage = 0; //首页
this.endPage = 0; //未页
this.currentPage = 0; //当前?br /> this.currentActiveSpan; //当前zda容器
this.pageDivObj = document.getElementById(divID); //分页pȝ容器
this.pages = 0; //总页敎ͼ计算得到
//this._url = _url; //提交URL
this.callBack = callBack; //回调
var that = this; //指针的引?br />
this.init = function() {
this.pages = parseInt(this.totolCount / this.pageSize); //获得d有几?br /> this.pages = this.totolCount % this.pageSize == 0? this.pages: this.pages+1;
this.createHomePage();
this.createPrePage();
var n = 1;
while(n <= this.pages) {
if(n > this.initMaxPage){
break; //到达最大显C数
}
var _span = document.createElement("SPAN");
_span.style.cssText = "margin-left:10px";
if(n == 1) { //初始化时W一ؓ(f)zd?br /> _span.innerText = n;
this.currentActiveSpan = _span;
}else{
var _a = document.createElement("A");
_a.href = "#";
_a.onclick = this.reView;
_a.innerText = n;
_span.appendChild(_a);
}
this.pageDivObj.appendChild(_span);
n++;
}
if(this.pages != 0) {
this.currentMax = n - 1; //当前l最大页?1 2 3 4 5gؓ(f)5
this.currentMin = 1; //当前最页?1 2 3 4 5 gؓ(f)1
this.homePage = 1; //首页
this.endPage = this.pages; //未页
this.currentPage = 1; //当前?br /> }
//alert(this.currentMax);
//alert(this.currentMin);
this.createNextPage();
this.createEndPage();
};
this.query = function() {
var curPage = that.currentPage; //当前?br /> var pageSize = that.pageSize;
if(that.callBack) that.callBack(curPage, pageSize);
};
this.reView = function() {
//重新渲染UI
that.reViewActivePage();
that.query();
};
this.reViewActivePage = function() {
//重新渲染当前视?br /> var actA = event.srcElement; //当前被点ȝ a对象
var ap = actA.parentNode; //获得当前a容器span对象
//q原当前视?br /> var _a = document.createElement("A");
_a.href = "#";
_a.onclick = this.reView;
_a.innerText = that.currentActiveSpan.innerText;
that.currentActiveSpan.innerText = "";
that.currentActiveSpan.appendChild(_a);
//渲染新的当前视?br /> that.currentActiveSpan = ap; //切换当前zd容?br /> var curPage = parseInt(actA.innerText);
that.currentActiveSpan.removeChild(actA);
that.currentActiveSpan.innerText = curPage;
this.currentPage = curPage; //更改当前늠
if(!that.toNextGroup()) that.toPreGroup();
};
this.toNextGroup = function() {
//重新渲染昄下一l?1 2 3 4 5 --> 5 6 7 8 9
if(that.currentPage == that.currentMax) {//点击的页码ؓ(f)当前l最大页码，当go 下一l?br /> if(that.currentPage != that.endPage) { //如果点了(jin)未页当然不会(x)再有下一l啦Q?br /> that.pageDivObj.innerHTML = ""; //@1
var pageCode = parseInt(that.currentPage) + 1; //昄늠
var n = 2; //当前zd不重创
this.createHomePage();
this.createPrePage();
that.currentActiveSpan.innerText = that.currentPage;
that.pageDivObj.appendChild(that.currentActiveSpan); //当前活动页回放,L(fng)@1
while(pageCode <= that.pages) {
if(n > that.initMaxPage){
break; //到达最大显C数
}
var _span = document.createElement("SPAN");
_span.style.cssText = "margin-left:10px";
var _a = document.createElement("A");
_a.href = "#";
_a.onclick = that.reView;
_a.innerText = pageCode;
_span.appendChild(_a);
that.pageDivObj.appendChild(_span);
pageCode++;
n++;
}
that.currentMax = pageCode - 1;
that.currentMin = that.currentPage;
// alert("currentMax: " + that.currentMax);
// alert("currentMin: " + that.currentMin);
this.createNextPage();
that.createEndPage();
return true;
}//end if
}//end if
return false;
};
this.toPreGroup = function() { //
//重新渲染昄上一l?5 6 7 8 9 -->1 2 3 4 5
if(that.currentPage == that.currentMin) { //点了(jin)l中最页?br /> if(that.currentPage != 1) {
that.pageDivObj.innerHTML = ""; //@2
var pageCode = parseInt(that.currentPage) - (that.initMaxPage -1); //昄늠
var n = 2; //当前zd不重创
this.createHomePage();
this.createPrePage();
while(true) {
if(n > that.initMaxPage){
break; //到达最大显C数
}
var _span = document.createElement("SPAN");
_span.style.cssText = "margin-left:10px";
var _a = document.createElement("A");
_a.href = "#";
_a.onclick = that.reView;
_a.innerText = pageCode++;
_span.appendChild(_a);
that.pageDivObj.appendChild(_span);
n++;
}
that.currentMax = that.currentPage;
that.currentMin = pageCode - (that.initMaxPage -1);
//alert("currentMax: " + that.currentMax);
// alert("currentMin" + that.currentMin);
that.currentActiveSpan.innerText = that.currentPage;
that.pageDivObj.appendChild(that.currentActiveSpan); //当前活动页回放,L(fng)@2
that.createNextPage();
that.createEndPage();
}//end if
}//end if
};
this.toHomePage = function(){
//d首页
if(that.pages == 0) return;
if(that.currentPage != 1) {//切组
that.pageDivObj.innerHTML = "";
that.init();
}//end if
that.currentPage = 1;
that.currentMin = 1;
that.currentMax = that.initMaxPage;
that.query();
};
this.toEndPage = function() {
//d未页
if(that.pages == 0 ||that.currentPage == that.pages) return;
if(true) {//切组条g修改Q此条g作废,临时设ؓ(f)true
that.pageDivObj.innerHTML = "";
that.createHomePage();
that.createPrePage();
var pageCode = 1;
var n = 1;
while(pageCode <= that.pages) {
if(n > that.initMaxPage-1){
n = 1;
}
n++;
pageCode++;
}
pageCode = that.pages - (n-2);
for(var j = 1; j < n; j++) {
var _span = document.createElement("SPAN");
_span.style.cssText = "margin-left:10px";
if(pageCode == that.pages) { //初始化时W一ؓ(f)zd?br /> _span.innerText = pageCode;
that.currentActiveSpan = _span;
}else{
var _a = document.createElement("A");
_a.href = "#";
_a.onclick = that.reView;
_a.innerText = pageCode;
_span.appendChild(_a);
pageCode++;
}
that.pageDivObj.appendChild(_span);
}
that.createNextPage();
that.createEndPage();
}//end if
that.currentPage = that.pages;
that.currentMin = that.pages - (n-2);
that.currentMax = that.pages;
// alert("currentMin: " + that.currentMin);
//alert("currentMax: " + that.currentMax);
// alert("pages: " + that.pages);
that.query();
};
this.next = function() {
//下一?br /> };
this.pre = function() {
//上一?br /> };
this.update = function(count) {
//更新分页pȝ
this.totolCount = count;
that.pageDivObj.innerHTML = "";
this.init();
};
this.createPrePage = function() {
return;
var _span = document.createElement("SPAN");
_span.style.cssText = "margin-left:16px";
var _a = document.createElement("A");
_a.href = "#";
_a.onclick = this.pre;
_a.innerText = "上一?;
_span.appendChild(_a);
this.pageDivObj.appendChild(_span);
};
this.createNextPage = function() {
return;
var _span = document.createElement("SPAN");
_span.style.cssText = "margin-left:16px";
var _a = document.createElement("A");
_a.href = "#";
_a.onclick = this.next;
_a.innerText = "下一?;
_span.appendChild(_a);
this.pageDivObj.appendChild(_span);
};
this.createHomePage = function() {
var homeSpan = document.createElement("SPAN");
var _a = document.createElement("A");
_a.href = "#";
_a.onclick = this.toHomePage;
_a.innerText = "首页";
homeSpan.appendChild(_a);
this.pageDivObj.appendChild(homeSpan);
};
this.createEndPage = function() {
var _span = document.createElement("SPAN");
_span.style.cssText = "margin-left:16px";
var _a = document.createElement("A");
_a.href = "#";
_a.onclick = this.toEndPage;
_a.innerText = "未页(" + this.pages +")";
_span.appendChild(_a);
this.pageDivObj.appendChild(_span);
}
}
3、效果图
如需转蝲Q请注明原文出处Q谢谢合作?/span>
]]>
<html>
<head>
<title>试面</title>
<style>
.list {
border-top:1 solid #8A2BE2;
border-left:1 solid #8A2BE2;
border-right:1 solid #8A2BE2;
}
.list td {
border-bottom: 1 solid #8A2BE2;
}
</style>
<script>
function $(el) {
return document.getElementById(el);
}
function showWin(param) {
window.showModalDialog("dailog.htm", param, "dialogWidth:" +param.width +"px;dialogHeight:"+param.height+"px;center:yes;help:no;scroll:no;status:no;resizable:no");
}
function TB(tbid) {
this.tb = typeof(tbid) == "string"? $(tbid): tbid;
this.getValue = function(rowIndex, cellIndex){
var trs = this.tb.rows[rowIndex];
var _td = trs.cells[cellIndex];
return _td.innerText;
}
this.setValue = function(rowIndex, cellIndex, value) {
var _tr = this.tb.rows[rowIndex];
var _td = _tr.cells[cellIndex];
_td.innerText = value;
}
/********获取行烦(ch)?*******/
this.findRowIndex = function(eventSrc) {
var _tr = eventSrc; //eventSrc事g?必须在TD里获事g源是TD或TR本n
while(_tr.tagName != "TR") {
_tr = _tr.parentNode;
}
var trs = this.tb.rows;
for(var i = 0; i < trs.length; i++){
if(_tr == trs[i]) return i;
}
}
}
function edit() {
var tb = new TB("data");
rIndex = tb.findRowIndex(event.srcElement);
$("updateRowIndex").value = rIndex;
$("userName").value = tb.getValue(rIndex, 1); //获得姓名
$("sex").value = tb.getValue(rIndex, 2); //获得性别
$("age").value = tb.getValue(rIndex, 3); //获得q龄
showWin({title:"修改用户信息", width:390, height:230, _div:"openWin",parent:window});
}
function saveAndUpdateView(){
var updateRowIndex = $("updateRowIndex").value;
var tb = new TB($f("data")); //$f()在dailog.html定义,获到的table是父H口中的table
tb.setValue(updateRowIndex, 1, $("userName").value);
tb.setValue(updateRowIndex, 2, $("sex").value);
tb.setValue(updateRowIndex, 3, $("age").value);
close();
}
</script>
</head>
<body>
<p style="margin-top:60px">
<center>
<table id="data" class="list" width="460px">
<tr>
<td>~号</td>
<td>用户?lt;/td>
<td>性别</td>
<td>q龄</td>
<td>操作</td>
</tr>
<tr>
<td>1</td>
<td>李永?lt;/td>
<td>?lt;/td>
<td>27</td>
<td><span style="background:#FAEBD7;cursor:hand" onclick="edit();"> 修改 </span></td>
</tr>
<tr>
<td>2</td>
<td>林兄</td>
<td>?lt;/td>
<td>27</td>
<td><span style="background:#FAEBD7;cursor:hand" onclick="edit();"> 修改 </span></td>
</tr>
<tr>
<td>3</td>
<td>叶兄</td>
<td>?lt;/td>
<td>23</td>
<td><span style="background:#FAEBD7;cursor:hand" onclick="edit();"> 修改 </span></td>
</tr>
</table>
</center>
</p>
<!---弹出H口昄的内?--->
<div id="openWin" style="display:none;">
<form>
<fieldSet>
<legend>修改用户</legend>
<table>
<tr>
<td>用户?lt;/td><td><input type="text" id="userName"/></td>
</tr>
<tr>
<td>性别</td><td><input type="text" id="sex"/></td>
</tr>
<tr>
<td>q龄</td><td><input type="text" id="age"/></td>
</tr>
</table>
</fieldSet>
<input type="hidden" id="updateRowIndex"/>
</form>
<span style="background:#FAEBD7;cursor:hand" onclick="saveAndUpdateView();"> 修改 </span>
</div>
</body>
</html>
2、dailog.html H口原型
<html>
<head>
<script>
var param = window.dialogArguments; //传过来的模式对话框窗口参?br /> document.title = param.title; //H口标题,必须在窗口创建前实现s
/********父H口的js加蝲q来********/
var scripts = param.parent.document.scripts;
var _head = document.getElementsByTagName("head")[0];
for(var n = 0; n < scripts.length; n++) {
if(scripts[n].src) {
var _script = newEl("script");
_script.src = scripts[n].src;
bind(_head, _script);
}else{//加蝲直接在html文档中写的script
var _script = newEl("script");
_script.text = scripts[n].text;
bind(_head, _script);
}
}
/*******Ҏ(gu)ID获得父窗口的元素*********/
function $f(el) {
return param.parent.document.getElementById(el);
}
/***********创徏一个HTML元素*******/
function newEl(tagName) {
return document.createElement(tagName);
}
/***********q加元素***************/
function bind(ower, child) {
ower.appendChild(child);
}
/*******在浏览器完成对象的装载后立即触发*********/
window.onload = function() {
var winDiv;
if(typeof(param._div) == "string") {
winDiv = param.parent.document.getElementById(param._div); //父窗口window对象,因ؓ(f)param._div对象在父H口
}else{//直接传对象过?br /> winDiv = param._div;
}
$("mainDiv").innerHTML = winDiv.innerHTML; //DIV内容在弹出窗口中渲染
}
</script>
</head>
<body>
<center>
<div id="mainDiv" style="margin-top:20px;width:90%"></div>
</center>
</body>
</html>
如需转蝲Q请注明原文出处Q谢谢合作?/span>
]]>
<!--你的js代码-->
</script>
值得注意的是Qjs代码必须?lt;frameset>之前插入才有效?br /> 另一U是js代码写在一个以 .js为后~的js文g里，用以下方法引入到HMTL档供使用
<script src="你要引入?js文g的\? type="text/javascript"></script>
q两U实现的例子如下Q?br /> <html>
<head>
<title>js exmaple</title>
<!--直接在HMTL文档中写js代码-->
<script>
function sayHello() {
alert("hello");
}
</script>
<!--?js文g中加?->
<script src="myjs/util.js"></script>
</head>
<body>
</body>
</html>
2、变量声?br /> javascript中用 var关键字声明一个变量，如：(x)var userName;׃javascript使用的是q型，所以声明时不需要指定具体类型，在运行时?x)根据所赋的值检查其数据cd。比如声?var v; 在运行中如果出现v = 123;那么变量v指数值类型，如果q行中出现的是v = "123"Qv 为字W串cd?br /> 3、函数声明，介绍两种型式
一、function sayHello(who) { //who为参?br /> alert("say hello to: " + who);
}
二、var sayHello = function(who) {
alert("say hello to: " + who);
}
说明Q第二种声明方式是将函数的指针赋l一个变量，调用如下QsayHello("whoOne");和第一U声明方式调用一栗D个第二种声明方式有用的应用，如，在js代码中，l一个铵钮的onclick事g注册一个方法可以如下声明：(x) var btn = document.createElement("button");
btn.onclick= function() {
//d当点?yn)L铵钮时想执行的js代码
}
4、事件响?br /> 声明?jin)的函数可以在js代码里被调用Q也可以用于响应事g。如Q?br /> <html>
<head>
<title>js exmaple</title>
<!--直接在HMTL文档中写js代码-->
<script>
function sayHello() {
alert("hello");
}
</script>
</head>
<body>
<!--响应button中的onclick事gQ单MӞ(j),调用sayHello()Ҏ(gu)-->
<button onclick="sayHello()">点击调用sayHello()Ҏ(gu)来响?lt;/button>
</body>
</html>
q行例子Q点击铵钮后q行l果如下Q?br />
备注Q这是一很单的javascript相关知识文章Q适合对javascript完全没概늚初学者参考， 有误之处Q请指正讨论?br />
]]>