javascript分页的实现

<%@page contentType="text/html;charset=GBK"%>
<%@taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>
<%@taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<script language=javascript
	src="<%=request.getContextPath()%>/js/systemAdmin.js" charset="UTF-8"></script>
<script type="text/javascript" src="js/prototype.js"></script>
<table width="950" height="68%" border="0" align="center" cellpadding="0"
		cellspacing="0">
  <tr>
    <td width="15" background="images/lineleft_bk_1.jpg"> </td>
    <td align="center" valign="top" bgcolor="#FFFFFF">
	
	<table border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" class="kuang01">
      <tr>
        <td align="center" valign="top">
		
		<table width="100%" border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td width="16%" height="30" align="center" background="images/mainbg.jpg" class="font2">商户名称</td>
              <td width="20%"  align="center" background="images/mainbg.jpg" class="font2">帐户类型</td>
              <td width="17%" align="center" background="images/mainbg.jpg" class="font2">发生前余额(元)</td>
              <td width="17%" align="center" background="images/mainbg.jpg" class="font2">操作类型</td>
              <td width="10%" align="center" background="images/mainbg.jpg" class="font2">发生金额(元)</td>
              <td width="20%" align="center" background="images/mainbg.jpg" class="font2">发生时间</td>
            </tr>
            <tr><td colspan="6">
               <table id="v_details" width="100%" border="0" cellpadding="0"  cellspacing="0">
	    		<logic:present name="pageSupport" scope="request">
					<logic:iterate id="vad" property="items" name="pageSupport" indexId="number">
						 <tr id="${number}">
			              <td width="16%" align="center" height="24"> ${vad.cust_name }  </td>
						  <td width="20%" align="center"> ${vad.acc_type } </td>
						  <td width="17%" align="center"> ${vad.before_money } </td>
						  <td width="17%" align="center"> ${vad.oper_type } </td>
						  <td width="10%" align="center"> ${vad.oper_money } </td>
						  <td width="20%" align="center"> ${vad.oper_date }  </td>
						 </tr>
					</logic:iterate>
				</logic:present>
			  </table>
			</td></tr>
        </table>
        
		</td>
      </tr>
      
      <tr>
      	<td>
      	  <table align="center" width="100%" cellspacing="0" border="0" cellpadding="0" class="font5">
			<tr>
				<td align="center" class="pagebottom" height="40" class="font3" bgcolor="FFF0DE">
					 
					<html:select name="pageSupport" property="pageSize" styleId="pageSize" onchange="processPage()">
						<html:option value='10'>10</html:option>
						<html:option value='20'>20</html:option>
					</html:select>
					  
					
					<span class="font2">第 <em id="currentPage">${pageSupport.currPage }</em> 页||
					共 <em id="totalPages">${pageSupport.totalPages}</em> 页||共 ${pageSupport.totalCount }条数据 </span>
					    
					
						<input type="button" id="first" value="首页" class="sbttn"
							onClick="processFirstPage()" >

						<input type="button" id="previous" value="上一页" class="sbttn"
							onClick="processPreviousPage()" disabled="disabled">

						<input type="button" id="next" value="下一页" class="sbttn"
							onClick="processNextPage()">

						<input type="button" id="end" value="末页" class="sbttn"
							onClick="processEndPage()">
				</td>
			</tr>
		  </table>
      	</td>
      </tr>
      
    </table></td>
    <td width="8" background="images/lineright_bk_1.jpg"> </td>
  </tr>
</table> 
<script language="javascript">
	var pageSize = ${pageSupport.pageSize};
	var totalCount = ${pageSupport.totalCount};
    var totalPages = ${pageSupport.totalPages};
    var currentPageIndex = 1;
    showPages();
    
function processFirstPage(){
	currentPageIndex =  1;
	showPages();
	//checkPagesDisabled();
}

function checkPagesDisabled(){
 
	  if(currentPageIndex != 1){
	     $("first").disabled = "";
	     $("previous").disabled = "";
	  }else{
	     $("first").disabled = "disabled";
	     $("previous").disabled = "disabled";
	  }

	  if(currentPageIndex != totalPages){
	     $("next").disabled = "";
	     $("end").disabled = "";
	  }else{
	  	 $("next").disabled = "disabled";
	  	 $("end").disabled = "disabled";
	  }
}

function processPreviousPage(){
	currentPageIndex = currentPageIndex - 1;
	showPages();
}

function processNextPage(){
	 currentPageIndex = currentPageIndex + 1;
	 showPages();
}
    
function processEndPage(){
   currentPageIndex = totalPages;
   showPages();
}

function processPage() {
    var pageIndex = $("pageSize").value;

  	totalPages = Math.floor(totalCount/pageIndex) + (totalCount%pageIndex==0 ? 0:1);
  	pageSize = pageIndex;
  	currentPageIndex = 1;
  	
  	showPages();
 }

 function showPages(){
   
   var startIndex = (currentPageIndex - 1) * pageSize;
   var endIndex = currentPageIndex * pageSize;
   //判断是否为火狐浏览器
   var ff = !(document.all) ;

   var table = $("v_details");
   for(i=0;i< totalCount; i++){
   	  //隐藏行,IE与火狐均可用
  	  table.rows[i].style.display="none";
	  
	  if( i < endIndex && i >= startIndex){
	  if(ff){
	  		//火狐兼容显示行
	    	table.rows[i].style.display="table-row";
	    }else{
	    	//IE兼容显示行
	    	table.rows[i].style.display="block";
	    }
	  }
   }

   $("currentPage").innerHTML = currentPageIndex;
   $("totalPages").innerHTML = totalPages;
   checkPagesDisabled();  	 
 }
  </script>