用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);
 }
}