隨著Ajax的應(yīng)用越來(lái)越多，經(jīng)常需要在前臺(tái)去加載數(shù)據(jù)，這樣可以減少頁(yè)面加載的時(shí)間，同時(shí)也改善了用戶(hù)的體驗(yàn)性，所以結(jié)合實(shí)際的項(xiàng)目需要我寫(xiě)了一個(gè)javascript的分頁(yè)控件，用于綁定table，實(shí)現(xiàn)類(lèi)似datagrid分頁(yè)控件的功能。以下為調(diào)用Js分頁(yè)控件的代碼。

var rows;
var tab = document.getElementById("table1");//table對(duì)象
var _total=0;//數(shù)據(jù)總數(shù)
var pager;//分頁(yè)對(duì)象

function page_load(){
 pager = new stowayPager();
 pager.setPageIndex(1);//當(dāng)前索引頁(yè)
 pager.setPageSize(6);//設(shè)置分頁(yè)數(shù)
 initData();
 bindList(false);
}
function initData(){
 var data = .....;//data為Ajax返回的數(shù)據(jù),這里就不詳細(xì)說(shuō)明。
 rows = data;
 _total = rows.length;
 if(_total == 0){
  displayNotFind();
  return;
 }
 pager.setTotal(_total);//設(shè)置數(shù)據(jù)總數(shù)
}
function bindList(){
 displaybinding();//為了增加界面友好性而添加的提示
 var count = pager.getPageIndex() * pager.getPageSize();
 for(i=count-pager.getPageSize();i<count;i++){
  var tr = tab.insertRow(tab.rows.length);//新增一行
  var td_id = tr.insertCell(0);//定義ID列
  var td_name = tr.insertCell(1);//定義Name列
  var td_city = tr.insertCell(2);//定義City列
  td_id.innerText=rows[i]["ID"];
  td_name.innerText=rows[i]["Name"];
  td_city.innerText=rows[i]["City"];
  
 }
 document.getElementById("div_pager").innerHTML=pager.bindPager();//我們加入一個(gè)ID為div_pager的div,將生成的分頁(yè)代碼返回給div_pager
}

//當(dāng)用戶(hù)點(diǎn)擊分頁(yè)碼時(shí)會(huì)觸發(fā)pageChangedEvent方法，目前此方法只對(duì)頁(yè)面中含有一個(gè)Js分頁(yè)控件有效，如果想含多個(gè)分頁(yè)控件改動(dòng)起來(lái)也很簡(jiǎn)單。
function pageChangedEvent(i){
 pager.setPageIndex(i);//設(shè)置當(dāng)前頁(yè)
 bindList();
}
//此方法主要是清空數(shù)據(jù)。
function deleteRows()
{
 while(tab.rows.length>0){
  tab.deleteRow(0);
 }
}

function displaybinding(){
 deleteRows();
 var tr = tab.insertRow(0);
 var td = tr.insertCell(0);
 td.colSpan=3;//table有幾列則設(shè)置為幾列
 td.align='center';
 td.innerText='正在讀取數(shù)據(jù),請(qǐng)稍候...';
 document.getElementById("div_pager").innerHTML="";
}
function displayNotFind(){
 deleteRows();
 var tr = tab.insertRow(0);
 var td = tr.insertCell(0);
 td.align='center';
 td.colSpan=3;
 td.innerHTML='沒(méi)有任何記錄';
 document.getElementById("div_pager").innerHTML="";
}

調(diào)用起來(lái)還是挺容易的，接下來(lái)就是實(shí)現(xiàn)此功能的分頁(yè)js代碼：

/*************created by Stoway*************
  Date:2007/4/5
  Blog://blog.csdn.net/stoway
  Mail:stoway#163.com (請(qǐng)將#換成@)
********************end********************/
stowayPager=function(){
 var _pageIndex=1;
 var _total=0;
 var _pageSize=10;
 this.bindPager=function(){
  if(_total<=_pageSize) return "";
  var pageCount=parseInt(_total/_pageSize);
  if(_total%_pageSize>0){
   pageCount+=1;
  }
  var startIndex=1;
  var endIndex=10;
  if(pageCount>10 && _pageIndex>6){
   startIndex=_pageIndex-5;
   endIndex=startIndex+9;
  }
  if(endIndex>pageCount){
    endIndex=pageCount;
    startIndex=endIndex-9;
    if(startIndex < 1) startIndex=1;
  }

  var strTemp='';
  var str='';
  if(_pageIndex>1){
   strTemp='<a href="javascript:pager_PageChanged(1)">金喜正規(guī)買(mǎi)球</a>&nbsp;<a href="javascript:pager_PageChanged({0})">上一頁(yè)</a>&nbsp;';
   strTemp=strTemp.replace("{0}",parseInt(_pageIndex)-1);
   str+=strTemp;
  }
  for(i=startIndex;i<=endIndex;i++){
   if(_pageIndex==i){
    str+= + i + '&nbsp;';
   }
   else{
    strTemp='<a href="javascript:pager_PageChanged({0})">[{1}]</a>&nbsp;';
    str+=strTemp.replace("{0}",i).replace("{1}",i);
   }
  }
  if(_pageIndex<pageCount){
   strTemp='<a href="javascript:pager_PageChanged({0})">下一頁(yè)</a>&nbsp;<a href="javascript:pager_PageChanged({1})">末頁(yè)</a>';
   strTemp=strTemp.replace("{0}",parseInt(_pageIndex)+1);
   strTemp=strTemp.replace("{1}",pageCount);
   str+=strTemp;
  }
  return str;
 }
 this.setPageIndex=function(i){
  _pageIndex=i;
 }
 this.getPageIndex=function(){
  return _pageIndex;
 }
 this.setPageSize=function(i){
  _pageSize=i;
 }
 this.getPageSize=function(){
  return _pageSize;
 }
 this.setTotal=function(i){
  _total = i;
 }
 this.getTotal=function(){
  return _total;
 }
}
function pager_PageChanged(pageIndex){
 if(typeof(pageChangedEvent) != "undefined"){
  pageChangedEvent(pageIndex);
 }
}