分頁功能實現

1.客戶端  jquery
顯示數據的表格ID:infotableid ,此處對查詢結果轉換成JSON格式,一次將 查詢結果全部查出，但顯示的時候分頁顯示
  
  //查詢的結果集合
  var attendanceInfoArray ;
  //記錄總數
  var recordcounts=0;
  var totalcount =0;
  //頁數
  var pate_count=0;

 // 使用JQUERY綁定按鈕
 $(document).ready(function(){
   $('#serchetbn').click(function()
   {
   var starttime = $('#startDateid').val();   //開始時間
   var endtime = $('#theDateid').val();      //結束時間
   var departf = z.getSelectedValue();       //部門
   var departs = z2.getSelectedValue();      //下一級單位
   var departt = z3.getSelectedValue();      //組級單位

   //使用AJAX根據上邊的查詢條件查詢
   $.ajax({
    type:"POST",
    url:"empAttendanceInfo.html?method=attendanceRecords",
    data:"startDate="+starttime+"&endDate="+endtime+"&fdepartment="+departf+"&sdepartment="+departs+"&tdepartment="+departt,
    success: function(data){
     if(data=="N")
    {
    //顯示提示信息 
    $("#msg").html("<font color='#FF0000' size='+2'>There is no any information depands on this condition!</font>");? 
    }
    else
    {
     //轉換JSON數據格式
     attendanceInfoArray = eval(data);

     var empmounts = 0;  //總共出勤
     var offtimeexception = 0 //下班異常人數
     //清空表格數據
     $("#infotableid").html("");
     
     //追加表頭數據
     var talblehead ='<thead><tr><th width="5%" align="center">序號</th><th width="8%" align="center">工號</th><th width="8%" align="center">姓名</th><th width="10%" align="center">班次</th><th width="10%" align="center">考勤日期</th><th width="10%" align="center">上班時間</th><th width="10%">就餐時間</th><th width="10%">就餐時間</th><th width="10%">就餐時間</th><th width="10%">就餐時間</th><th width="10%">下班時間</th></tr></thead>';
     $("#infotableid").append(talblehead);
     
     //默認開始時15條
     //翻頁功能,1.計算總記錄數
     
     recordcounts = attendanceInfoArray.length;
     totalcount = attendanceInfoArray.length;
     if(recordcounts>15)
     {
      recordcounts = 15;
     }
     
     
     if(recordcounts>0)
     {
      var trstyle ="onMouseOver=this.className='td_mouseover' onMouseOut=this.className=''";
      for( i=0;i<recordcounts;i++)
      {
       //每行有不同的背景顏色
       var vbgcolor="#F2F2F2";

       empmounts= empmounts+1;
       
       if(i%2==0)
       {
        vbgcolor = "#F2F2F2";
       }
       else
       {
        vbgcolor = "#FFFFFF";
       }
       // 判斷是否是異常
       if(attendanceInfoArray[i].offTime==null || attendanceInfoArray[i].offTime=="null" ||attendanceInfoArray[i].onTime==null ||attendanceInfoArray[i].onTime=="null")
       {
        offtimeexception=offtimeexception+1;
       }

       //每一行表格數據
       var appendinfo = '<tr  height="35" '+trstyle+'  bgcolor='+vbgcolor+'><td>'+(i+1)+'</td><td>'+attendanceInfoArray[i].empNo+'</td><td>'+attendanceInfoArray[i].empName+'</td><td>'+attendanceInfoArray[i].scheduleName+'</td><td>'+attendanceInfoArray[i].attendanceDate+'</td><td>'+getTimeFromDatetime(attendanceInfoArray[i].onTime)+'</td><td>'+getTimeFromDatetime(attendanceInfoArray[i].onTime1)+'</td><td>'+getTimeFromDatetime(attendanceInfoArray[i].offTime1)+'</td><td>'+getTimeFromDatetime(attendanceInfoArray[i].onTime2)+'</td><td>'+getTimeFromDatetime(attendanceInfoArray[i].offTime2)+'</td><td>'+getTimeFromDatetime(attendanceInfoArray[i].offTime)+'</td></tr>';
       
       //追加記錄
       $("#infotableid").append(appendinfo);
      }
      //追加分頁記錄
      //每頁顯示15條記錄，計算頁數
      if(totalcount>15)
      {
       if(totalcount%15==0)
       pate_count =  totalcount/15;
       else
       pate_count = totalcount/15+1;
      }
      
      var pagecontent = "";
      for(pagei=1;pagei<pate_count;pagei++)
      {
       
       if(pagei==1){
        pagecontent ="<img src='../images/newa.gif' width='22' height='9' />"; 
       //由于這是剛從數據庫里面查詢處理，默認第一頁被選中:紅色字體，無下劃線,
       pagecontent =pagecontent +"&nbsp;&nbsp;<a href='#' onClick='shownextpagerecord(1)'><font color='#FF5F55' style='border:thick;' size='+1'>"+pagei+"</font></a>&nbsp;&nbsp;"
       }
       else
       {
        
    //onClick='shownextpagerecord(page)下邊定義的分頁顯示方法
    pagecontent =pagecontent + "&nbsp;&nbsp;<a href='#' onClick='shownextpagerecord("+pagei+")' style='text-decoration:underline'><font >"+pagei+"</font></a>&nbsp;&nbsp;"
       }
      }
      //追加
      $("#infotableid").append("<tr height='35' ><td colspan=11 align='left'  valign='middle'>"+pagecontent+"</td></tr>");
     } 
     //清空記錄
     $("#resulttableid").html('');
     
     
    }
    
    },
    error:function(data){
      //顯示查詢結果提示框
     $("#msg").html("<font color='#FF0000' size='+2'>successful！</font>");? 
    
    }
      })
   $("#msg").ajaxStart(function(){$("#msg").html("<font color='#FF0000' size='+2'>loading..</font>");$("#infotableid").html("");});  
   //提示框消失
   setTimeout( function() {
     $("#msg").html('');
   }, 3000);
   
   
   
     
   } );
 })

function shownextpagerecord(page)
{ 
  //每頁記錄開始下標
  var pagestartindex=(page-1)*15;
  //每頁記錄結束下標
  var pageendindex=(page+1)*15;
  if(page==1)
  {
  pageendindex=15; 
  }
  else
  {
  if(pageendindex>totalcount)
  {
   pageendindex = totalcount;
  }
  }

  //顯示
  var trstyle ="onMouseOver=this.className='td_mouseover' onMouseOut=this.className=''";
  //清空表格數據
  $("#infotableid").html("");
  //追加表頭數據
  var talblehead ='<thead><tr><th width="5%" align="center">序號</th><th width="8%" align="center">工號</th><th width="8%" align="center">姓名</th><th width="10%" align="center">班次</th><th width="10%" align="center">考勤日期</th><th width="10%" align="center">上班時間</th><th width="10%">就餐時間</th><th width="10%">就餐時間</th><th width="10%">就餐時間</th><th width="10%">就餐時間</th><th width="10%">下班時間</th></tr></thead>';
  $("#infotableid").append(talblehead);
  //下頁內容
  for( i=pagestartindex;i<pageendindex;i++)
  {
   var vbgcolor="#F2F2F2";
   if(i%2==0)
   {
    vbgcolor = "#F2F2F2";
   }
   else
   {
    vbgcolor = "#FFFFFF";
   }
   // 判斷是否是異常
   if(attendanceInfoArray[i].offTime==null || attendanceInfoArray[i].offTime=="null" ||attendanceInfoArray[i].onTime==null ||attendanceInfoArray[i].onTime=="null")
   {
    offtimeexception=offtimeexception+1;
   }
   var appendinfo = '<tr  height="35" '+trstyle+'  bgcolor='+vbgcolor+'><td>'+(i+1)+'</td><td>'+attendanceInfoArray[i].empNo+'</td><td>'+attendanceInfoArray[i].empName+'</td><td>'+attendanceInfoArray[i].scheduleName+'</td><td>'+attendanceInfoArray[i].attendanceDate+'</td><td>'+getTimeFromDatetime(attendanceInfoArray[i].onTime)+'</td><td>'+getTimeFromDatetime(attendanceInfoArray[i].onTime1)+'</td><td>'+getTimeFromDatetime(attendanceInfoArray[i].offTime1)+'</td><td>'+getTimeFromDatetime(attendanceInfoArray[i].onTime2)+'</td><td>'+getTimeFromDatetime(attendanceInfoArray[i].offTime2)+'</td><td>'+getTimeFromDatetime(attendanceInfoArray[i].offTime)+'</td></tr>';
   
   //追加記錄
   $("#infotableid").append(appendinfo);
  }
  //追加分頁記錄
  //每頁顯示15條記錄，計算頁數
   if(totalcount>15)
   {
    if(totalcount%15==0)
    pate_count =  totalcount/15;
    else
    pate_count = totalcount/15+1;
   }
   
   var pagecontent = "";
   for(pagei=1;pagei<pate_count;pagei++)
   {
    var fontstyle ="";
    var fontcolors ="";
    var astyle="";
    if(pagei == page)
    {
     fontstyle=" style='border:thick' size='+1'";
     fontcolors = " color='#FF5F55'";
     astyle="";
    }
    else
    {
     astyle="style='text-decoration:underline'";
    }
    if(pagei==1){
     pagecontent ="<img src='../images/newa.gif' width='22' height='9' />"; 
    pagecontent =pagecontent +"&nbsp;&nbsp;<a href='#' onClick='shownextpagerecord(1)' "+astyle+" ><font "+fontstyle+fontcolors+">"+pagei+"</font></a>&nbsp;&nbsp;"
    }
    else
    {
     pagecontent =pagecontent + "&nbsp;&nbsp;<a href='#' onClick='shownextpagerecord("+pagei+")' "+astyle+"><font "+fontstyle+fontcolors+" >"+pagei+"</font></a>&nbsp;&nbsp;"
    }
   }
   
   //追加
   $("#infotableid").append("<tr height='35' ><td colspan=11 align='left'  valign='middle'>"+pagecontent+"</td></tr>");
  
 }

2.在服務器端設置分頁,Hibernate + Spring +Jquery ，infotableid為現實內容表格ID，后臺查詢數據轉換成JSON數據格式
 //firstRow :其實記錄的行號 rownumber  ,maxRow:每次顯示的記錄數
 public List<HrAttendanceInfo> getOtherEmpAttendanceInfoBetweenDays(
   long mainLandFlag, Date startDateTime, Date endDateTime,int firstRow,int maxRow)
   throws Exception {
  String hql ="from com.ccc.hr.model.HrAttendanceInfo attendanceinfo where attendanceinfo.commEmployeeInfo.mainlandFlag>? " +
  " and  attendanceinfo.attendanceDate >=? and  attendanceinfo.attendanceDate <=? ";
  Query query = hrAttendanceInfoDao.createQuery(hql, new Object[]{mainLandFlag,startDateTime,endDateTime});
   query.setFirstResult(firstRow);
         query.setMaxResults(maxRow);
  
  return  query.list();
 }
   $(document).ready(function(){
   $('#serchetbn').click(function()
   {
     //默認從第一頁開始顯示
     shownextpagerecord(1);
   } );
 })
 
 function shownextpagerecord(page)
 {
   var firstrow = (page-1)*5;
   var starttime = $('#startDateid').val();
   var endtime = $('#theDateid').val();
   $.ajax({
    type:"POST",
    url:"empAttendanceInfo.html?method=getoutworkedinfo",
    data:"startDate="+starttime+"&endDate="+endtime+"&firstRow="+firstrow,
    success: function(data){
     var pagecount =0;
    var totalmark=0;
   
     if(data=="N")
    {
     $("#msg").html("<font color='#FF0000' size='+2'>There is no any information depands on this condition!</font>");? 
    }
    else
    {
     var temparray=data.split("@");
     if(temparray.length>2)
     {
      attendanceInfoArray = eval(temparray[0]);
      pagecount = temparray[1];
      totalmark = temparray[2];
     }
     
     var empmounts = 0;  //總共出勤
     var offtimeexception = 0 //下班異常人數

   
     //清空表格數據
     $("#infotableid").html("");
     
     //追加表頭數據
     var talblehead ='<thead><tr><th width="5%" align="center">序號</th><th width="8%" align="center">事業處</th><th width="8%" align="center">工號</th><th width="10%" align="center">姓名</th><th width="10%" align="center">部門</th><th width="10%" align="center">出勤廠區</th><th width="10%">上班時間</th><th width="10%">下班時間</th><th width="10%">備注</th><th width="10%">考勤詳情</th></tr></thead>';
     $("#infotableid").append(talblehead);
     

     
     if(attendanceInfoArray.length>0)
     {
      var trstyle ="onMouseOver=this.className='td_mouseover' onMouseOut=this.className=''";
      for( i=0;i<attendanceInfoArray.length;i++)
      {
       
       var vbgcolor="#F2F2F2";
       empmounts= empmounts+1;
       if(i%2==0)
       {
        vbgcolor = "#F2F2F2";
       }
       else
       {
        vbgcolor = "#FFFFFF";
       }
   
       // 判斷是否是異常
       if(attendanceInfoArray[i].offTime==null || attendanceInfoArray[i].offTime=="null" ||attendanceInfoArray[i].onTime==null ||attendanceInfoArray[i].onTime=="null")
       {
        offtimeexception=offtimeexception+1;
       }
       var appendinfo = '<tr  height="35" '+trstyle+'  bgcolor='+vbgcolor+'><td>'+(firstrow+1)+'</td><td>'+attendanceInfoArray[i].empNo+'</td><td>'+attendanceInfoArray[i].empNo+'</td><td>'+attendanceInfoArray[i].empName+'</td><td>CCC</td><td>LH</td><td>'+attendanceInfoArray[i].onTime+'</td><td>'+attendanceInfoArray[i].offTime+'</td><td>備注</td><td>查看</td></tr>';
      
       //追加記錄
       $("#infotableid").append(appendinfo);
       firstrow = firstrow+1;
      }
      //追加分頁記錄
      var pagecontent = "";
      for(pagei=1;pagei<pagecount;pagei++)
      {
       var fontstyle ="";
       var fontcolors ="";
       var astyle ="";
       if(pagei == page)
       {
        //設置分頁鏈接的樣式
        fontstyle=" style='border:thick' size='+1'";
        fontcolors = " color='#FF5F55'";
        astyle="";
       }
       else
       {
        astyle="style='text-decoration:underline'";
       }
       if(pagei==1){
        pagecontent ="<img src='../images/newa.gif' width='22' height='9' />"; 
       pagecontent =pagecontent +"&nbsp;&nbsp;<a href='#' onClick='shownextpagerecord(1)'"+astyle+" ><font "+fontstyle+fontcolors+">"+pagei+"</font></a>&nbsp;&nbsp;"
       }
       else
       {
        pagecontent =pagecontent + "&nbsp;&nbsp;<a href='#' onClick='shownextpagerecord("+pagei+")' "+astyle+"><font "+fontstyle+fontcolors+" >"+pagei+"</font></a>&nbsp;&nbsp;"
       }
      }
      //追加
      $("#infotableid").append("<tr height='35' ><td colspan=11 align='left'  valign='middle'>"+pagecontent+"</td></tr>");
     } 
     
    }
    
    },
    error:function(data){
      
     $("#msg").html("<font color='#FF0000' size='+2'>successful！</font>");? 
    
    }
      })
   $("#msg").ajaxStart(function(){$("#msg").html("<font color='#FF0000' size='+2'>loading..</font>");$("#infotableid").html("");});  
   //提示框消失
   setTimeout( function() {
     $("#msg").html('');
   }, 3000);
 
 }