科讯商业版Ajax分页控件源码解析

Ajax分页控件源码解析

科讯SQL商业版中使用的Ajax控件与分页函数，其JavaScript代码实现具有较高的学习价值。

//ajax 控件

function PageAjax(){

var xhrObj=null;

if(window.XMLHttpRequest)

xhrObj=new XMLHttpRequest();

else if(window.ActiveXObject)

try{

xhrObj=new ActiveXObject("Microsoft.XMLHTTP");

catch(e1)

try{

xhrObj=new ActiveXObject("MSXML2.XMLHTTP");

catch(e2){

try{

xhrObj=new ActiveXObject("MSXML3.XMLHTTP");

catch(e3){

alert("创建Ajax失败："+e3)

else

alert("未能识别的浏览器");

return xhrObj;

function Page(curPage,labelid,classid,installdir,url,refreshtype,specialid)

this.labelid=labelid;

this.classid=classid;

this.url=url;

if (labelid.substring(0,5)=="{SQL_")

var slabelid=labelid.split('(')[0];

slabelid=slabelid.replace("{","");

this.c_obj="c_"+slabelid;

this.p_obj="p_"+slabelid;

else

this.c_obj="c_"+labelid;

this.p_obj="p_"+labelid;

this.installdir=installdir;

this.refreshtype=refreshtype;

this.specialid=specialid;

this.page=curPage;

loadData(1);

function loadData(p)

{ this.page=p;

var xhr=new PageAjax();

xhr.open("get",installdir+url+"?labelid="+escape(labelid)+"&classid="+classid+"&refreshtype="+refreshtype+"&specialid=" +specialid+"&curpage="+p,true);

xhr.onreadystatechange=function (){

if(xhr.readyState==1)

if (p==1)

eval('document.all.'+c_obj).innerHTML="<div align='center'><img src='"+installdir+"images/loading.gif'>正在连接服务器...</div>";

else if(xhr.readyState==2 || xhr.readyState==3)

if (p==1)

eval('document.all.'+c_obj).innerHTML="<div align='center'><img src='"+installdir+"images/loading.gif'>正在读取数据...</div>";

else if(xhr.readyState==4)

if (xhr.status==200)

var pagearr=xhr.responseText.split("{ks:page}")

var pageparamarr=pagearr[1].split("|");

count=pageparamarr[0];

perpagenum=pageparamarr[1];

pagecount=pageparamarr[2];

itemunit=pageparamarr[3];

itemname=pageparamarr[4];

pagestyle=pageparamarr[5];

getObject(c_obj).innerHTML=pagearr[0];

pagelist();

xhr.send(null);

function getObject(id)

if(document.getElementById)

return document.getElementById(id);

else if(document.all)

return document.all[id];

else if(document.layers)

return document.layers[id];

function pagelist()

var n=1;

var statushtml=null;

switch(parseInt(this.pagestyle))

case 1:

statushtml="共"+this.count+this.itemunit+" <a href=\"javascript:homePage(1);\" title=\"首页\">首页</a> <a href=\"javascript:previousPage()\" title=\"上一页\">上一页</a>&nbsp;<a href=\"javascript:nextPage()\" title=\"下一页\">下一页</a> <a href=\"javascript:lastPage();\" title=\"最后一页\">尾页</a> 页次:<font color=red>"+this.page+"</font>/"+this.pagecount+"页 "+this.perpagenum+this.itemunit+this.itemname+"/页";

break;

case 2:

statushtml="<a href='#'>"+this.pagecount+"页/"+this.count+this.itemunit+"</a> <a href=\"javascript:homePage(1);\" title=\"首页\"><font face=webdings>9</font></a> <a href=\"javascript:previousPage()\" title=\"上一页\"><font face=webdings>7</font></a>&nbsp;";

var startpage=1;

if (this.page==10)

startpage=2;

else if(this.page>10)

startpage=eval((parseInt(this.page/10)-1)*10+parseInt((this.page)%10)+2);

for(var i=startpage;i<=this.pagecount;i++){

if (i==this.page)

statushtml+="<a href=\"#\"><font color=\"#ff0000\">"+i+"</font></a>&nbsp;"

else

statushtml+="<a href=\"javascript:turn("+i+")\">"+i+"</a>&nbsp;"

n=n+1;

if (n>10) break;

statushtml+="<a href=\"javascript:nextPage()\" title=\"下一页\"><font face=webdings>8</font></a> <a href=\"javascript:lastPage();\" title=\"最后一页\"><font face=webdings>:</font></a>";

statushtml="<span class='kspage'>"+statushtml+"</span>";

break;

case 4:

statushtml="共"+this.pagecount+"页/"+this.count+this.itemunit+this.itemname+" <a href=\"javascript:homePage(1);\" title=\"首页\"><font face=webdings>9</font></a> <a href=\"javascript:previousPage()\" title=\"上一页\"><font face=webdings>7</font></a>&nbsp;";

for(var i=this.page;i<=this.pagecount;i++){

if (i==this.page)

statushtml+="<b><font color=\"#ff0000\">"+i+"</font></b>&nbsp;"

else

statushtml+="<a href=\"javascript:turn("+i+")\">["+i+"]</a>&nbsp;"

n=n+1;

if (n>10) break;

statushtml+="<a href=\"javascript:nextPage()\" title=\"下一页\"><font face=webdings>8</font></a> <a href=\"javascript:lastPage();\" title=\"最后一页\"><font face=webdings>:</font></a>";

break;

case 3:

statushtml="第<font color=#ff000>"+this.page+"</font>页 共"+this.pagecount+"页 <a href=\"javascript:homePage(1);\" title=\"首页\"><<</a> <a href=\"javascript:previousPage()\" title=\"上一页\"><</a>&nbsp;<a href=\"javascript:nextPage()\" title=\"下一页\">></a> <a href=\"javascript:lastPage();\" title=\"最后一页\">>></a> "+this.perpagenum+this.itemunit+this.itemname+"/页";

break;

statushtml+="&nbsp;第<select name=\"goto\" onchange=\"turn(parseInt(this.value));\">";

for(var i=1;i<=this.pagecount;i++){

if (i==this.page)

statushtml+="<option value='"+i+"' selected>"+i+"</option>";

else

statushtml+="<option value='"+i+"'>"+i+"</option>"

statushtml+="</select>页";

getObject(this.p_obj).innerHTML=statushtml;

function homePage()

if(this.page==1)

alert("已经是首页了！")

else

loadData(1);

function lastPage()

if(this.page==this.pagecount)

alert("已经是最后一页了！")

else

loadData(this.pagecount);

function previousPage()

if (this.page>1)

loadData(this.page-1);

else

alert("已经是第一页了");

function nextPage()

if(this.page<this.pagecount)

loadData(this.page+1);

else

alert("已经到最后一页了");

function turn(i)

loadData(i);