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);
} );
})
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 +" <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);
}