分頁功能實現

ioio

浏览: 141971 次
性别:
来自: 深圳

最近访客更多访客>>

yanghui_123

ltj_007

julyflame

wdne63956

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

program

jQuery Ajax json HTML Spring

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 +"  <a href='#' onClick='shownextpagerecord(1)'><font color='#FF5F55' style='border:thick;' size='+1'>"+pagei+"</font></a>  "
       }
       else
       {

    //onClick='shownextpagerecord(page)下邊定義的分頁顯示方法
    pagecontent =pagecontent + "  <a href='#' onClick='shownextpagerecord("+pagei+")' style='text-decoration:underline'><font >"+pagei+"</font></a>  "
       }
      }
      //追加
      $("#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);




   } );
})

  //顯示
  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 +"  <a href='#' onClick='shownextpagerecord(1)' "+astyle+" ><font "+fontstyle+fontcolors+">"+pagei+"</font></a>  "
    }
    else
    {
     pagecontent =pagecontent + "  <a href='#' onClick='shownextpagerecord("+pagei+")' "+astyle+"><font "+fontstyle+fontcolors+" >"+pagei+"</font></a>  "
    }
   }

   //追加
   $("#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 +"  <a href='#' onClick='shownextpagerecord(1)'"+astyle+" ><font "+fontstyle+fontcolors+">"+pagei+"</font></a>  "
       }
       else
       {
        pagecontent =pagecontent + "  <a href='#' onClick='shownextpagerecord("+pagei+")' "+astyle+"><font "+fontstyle+fontcolors+" >"+pagei+"</font></a>  "
       }
      }
      //追加
      $("#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);

}

分享到：

jbpm example | 將JAVA數據類型轉換Json對象是日期類的處理

2009-06-10 14:57
浏览 894
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论