`
ioio
  • 浏览: 142417 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

分頁功能實現

阅读更多

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

分享到:
评论

相关推荐

    分页功能实现

    ### 分页功能实现详解 在IT领域,尤其是Web开发中,分页是一项常见的技术,用于处理大量数据的展示,以提升用户体验和系统性能。本文将深入解析“分页功能实现”这一主题,从代码示例出发,理解其背后的逻辑与原理...

    js分页功能实现

    **标题解析:**“js分页功能实现”指的是在网页应用中使用JavaScript来实现数据的分页展示。分页是用户界面中常见的功能,用于将大量数据分成小块,逐页加载,提高用户体验并减轻服务器压力。 **描述分析:**虽然...

    公共分页功能实现

    "公共分页功能实现"这个标题表明我们将讨论一个可复用的分页解决方案,这通常涉及到后端数据处理和前端页面展示的协同工作。 1. **Oracle数据库连接**: Oracle是一种流行的关系型数据库管理系统,用于存储和管理...

    ssm项目案例 以及easyui分页功能实现

    SSM项目案例以及EasyUI分页功能实现是一个典型的Java Web开发中的应用场景,主要涉及Spring、Spring MVC和MyBatis三个核心框架,以及EasyUI作为前端展示的组件库。以下是关于这些技术的详细说明: **Spring**:...

    【ASP.NET编程知识】asp.net分页功能实现.docx

    ASP.NET分页功能实现 本文主要介绍了ASP.NET中实现分页功能的方法,使用的是AspNetPage.dll组件,通过添加该组件到工具箱中,可以像其他控件一样拖拽使用。下面是相关的知识点: 1. ASP.NET分页控件 在ASP.NET中...

    实现分页功能page.php

    实现分页功能,实现首页,下一页,上一页,末页的功能

    分页功能实现java

    在Java Web开发中,实现分页功能通常涉及前端页面(JSP)和后端代码(Java)的协同工作。而这里提到的Eclipse、Struts、Hibernate则是Java开发中常用的工具和框架,分别用于集成开发环境、MVC模式的Web层框架和对象...

    MyBatis分页功能实现

    在这个例子中,我们关注的是MyBatis如何实现分页功能,特别是在一个集成了Spring的环境中。分页在大数据量的查询中至关重要,因为它允许用户逐步加载和处理结果,提高应用程序的性能和用户体验。 首先,我们需要...

    jsp简单分页功能实现

    本文将深入探讨如何使用Java Server Pages (JSP) 实现一个简单的分页功能。首先,我们理解一下分页的基本概念:分页是将大量数据分成若干个页面显示,每个页面包含一部分数据,用户可以通过点击页码或导航按钮来切换...

    Java List分页功能实现代码实例

    Java List分页功能实现代码实例 Java List分页功能实现代码实例是指在Java编程语言中实现List集合的分页功能,即将一个较大的List集合分割成多个小的List集合,以便于在界面上进行数据展示和处理。在实际开发中,...

    VS.NET 2005 Winform应用程序数据库DataGridView分页功能实现

    VS.NET 2005 Winform应用程序数据库DataGridView分页功能实现. 里面包含实现的相应的实现代码,以及在winform中实现DataGridView的分页功能。 要的分多,使用的是C#,所以希望大家看清楚,别下下来也没有什么用...

    ASP长文章分页功能实现方法 手动 自动两种

    本文将详细介绍如何在ASP中实现手动和自动两种长文章分页功能。 **手动分页** 手动分页主要是通过编程逻辑来控制每一页显示的内容数量。以下是一个简单的步骤: 1. **计算总页数**:首先,你需要获取文章的总字数...

    ssh框架实现的分页功能

    综上所述,SSH框架下的分页功能实现涉及多个层次的配合,从接收用户请求到展示分页数据,需要理解并熟练掌握每个组件的作用。通过这个示例,初学者可以了解到SSH框架在实际项目中的应用,以及如何结合前端技术实现...

    c# datagridview分页功能实现 源码

    为解决这一问题,我们可以实现`DataGridView`的分页功能。本教程将通过源码分析,讲解如何利用`DataGridView`、`BindingNavigator`和`BindingSource`控件实现分页显示。 首先,我们需要了解`DataGridView`、`...

    JSP分页功能的实现

    以上就是JSP实现分页功能的基本步骤,虽然描述简单,但在实际项目中,可能还需要考虑更多细节,如错误处理、样式美化、动态加载等。理解了这个过程,你可以根据项目的具体需求进行调整和扩展,打造更加高效、易用的...

    小脚本分页 分页功能实现 分页

    本篇文章将详细讲解如何使用小脚本来实现分页功能,特别是基于JSP(JavaServer Pages)的技术实现。首先,我们需要理解分页的基本原理。 分页的核心在于计算每一页的数据量和当前页的索引,然后根据这些信息从...

    c#中实现分页效果

    利用集合实现分页技术,把数据库里的数据储存在集合中,对集合实现分页

Global site tag (gtag.js) - Google Analytics