用javascript實現的分頁控制項

  隨著Ajax的應用越來越多，經常需要在前台去載入資料，這樣可以減少頁面載入的時間，同時也改善了使用者的體驗性，所以結合實際的項目需要我寫了一個javascript的分頁控制項，用於綁定table，實作類別似datagrid分頁控制項的功能。以下為調用Js分頁控制項的代碼。

var rows;
var tab = document.getElementById("table1");//table對象
var
_total=0;//資料總數
var pager;//分頁對象

function page_load(){
 pager = new
stowayPager();
 pager.setPageIndex(1);//當前索引頁
 pager.setPageSize(6);//設定分頁數
 initData();
 bindList(false);
}
function
initData(){
 var data = .....;//data為Ajax返回的資料,這裡就不詳細說明。
 rows =
data;
 _total = rows.length;
 if(_total ==
0){
  displayNotFind();
  return;
 }
 pager.setTotal(_total);//設定資料總數
}
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();//我們加入一個ID為div_pager的div,將產生的分頁代碼返回給div_pager
}

//當使用者點擊分頁碼時會觸發pageChangedEvent方法，目前此方法只對頁面中含有一個Js分頁控制項有效，如果想含多個分頁控制項改動起來也很簡單。
function
pageChangedEvent(i){
 pager.setPageIndex(i);//設定當前頁
 bindList();
}
//此方法主要是清空資料。
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有幾列則設定為幾列
 td.align='center';
 td.innerText='正在讀取資料,請稍候...';
 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='沒有任何記錄';
 document.getElementById("div_pager").innerHTML="";
}

 

調用起來還是挺容易的，接下來就是實現此功能的分頁js代碼：

/*************created by
Stoway*************
  Date:2007/4/5
  Blog:http://blog.csdn.net/stoway
  Mail:stoway#163.com
(請將#換成@)
********************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)">首頁</a>&nbsp;<a
href="javascript:pager_PageChanged({0})">上一頁</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})">下一頁</a>&nbsp;<a
href="javascript:pager_PageChanged({1})">末頁</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);
 }
}

 原文連結：http://blog.csdn.net/stoway/archive/2007/04/06/1553745.aspx

該控制項目前是js指令碼實現，改天用jquery重寫一下。