在AJAX調用上使用固定標題的HTML表格

Question

我使用AJAX將HTML表格轉換爲指定的div id（使用溢出滾動CSS），它工作正常，但我需要滾動div上的固定標題，提到我的代碼如下

<style> 
    .wrapper{  
     width:auto; 
     overflow-y:scroll; 
     position:relative; 
     height: 200px;} 
</style> 

<script type="text/javascript"> 
    $(document).ready(function() { 
      $('#preloader').hide();   
      $('#preloader') 
        .ajaxStart(function(){ 
          $(this).show(); 
        }).ajaxStop(function(){ 
          $(this).hide(); 
        });                          
      $('#form form').submit(function(){ 
        $('#result').empty(); 
        $.get('my_leave_search.php', $(this).serialize(), function(data){             
          $('#result').html(data); 
        });      
        return false; 
      }); 
    }); 
    </script> 



<div class="mydiv"> 
<div id="form"> 
<form> 
</form> 
</div> 
<div class="wrapper" id="result"> 
</div> 

Answer 1

我曾經有同樣的問題，而最終寫了我自己的小功能來做到這一點。

基本上，我先建立表格，然後在新的div內克隆表格，然後刪除主體部分，然後從原始表格中刪除頭部部分，所以我現在有兩個表格。

我創建的div然後在Y軸上獲得滾動，因此總是有滾動條。

看看下面，看看這是否對你有幫助。您需要將表格（作爲jquery對象）傳遞給您想要固定標題的表格，然後將表格的高度傳遞給表格。你可能想調整這個，但這對我來說很好。

function scrolify(tblAsJQueryObject, height){ 
    // Make a scrollable table with fixed header 
    if(!height) {height=250} 
    var oTbl = tblAsJQueryObject; 
    oTbl.wrap(jq("<div/>"));    // wrap a div around the table 
    var oTblDiv = jq("<div/>"); 
    oTblDiv.css('height', height); 
    oTblDiv.css('overflow-y','scroll');    
    oTblDiv.css('overflow-x','hidden');    
    oTbl.width(oTbl.width()-20)    // remove 20px from width for scrollbars 
    oTbl.wrap(oTblDiv); 

    // save original width 
    oTbl.attr("data-item-original-width", oTbl.width()); 
    oTbl.find('thead tr td').each(function(){ 
     jq(this).attr("data-item-original-width",jq(this).width()); 
    }); 
    oTbl.find('tbody tr:eq(0) td').each(function(){ 
     jq(this).attr("data-item-original-width",jq(this).width()); 
    });     

    // clone the original table 
    var newTbl = oTbl.clone(); 
    oTbl.parent().parent().prepend(newTbl); 
    newTbl.wrap("<div/>"); 

    oTbl.find('thead tr').remove();   // remove table header from original table 
    newTbl.find('tbody').remove();  // remove table body from new table 
    newTbl.attr('id','') 

    // Change coumns widths from parten, only applies to first row 
    // of each table :(eq0) 
    newTbl.width(newTbl.attr('data-item-original-width')); 
    newTbl.find('thead tr td').each(function(){ 
     jq(this).width(jq(this).attr("data-item-original-width")); 
    });  
    oTbl.width(oTbl.attr('data-item-original-width'));  
    oTbl.find('tbody tr:eq(0) td').each(function(){ 
     jq(this).width(jq(this).attr("data-item-original-width")); 
    }) 

    // add in alternate row colours 
    oTbl.find('tbody tr:odd').each(function() { 
     jq(this).addClass('oddRow') 
     } 
    ) 
} 

對不起，剛纔編輯這是我使用的是使用$來我使用jQuery.noConflict從使用$來切換JQ jQuery的模板系統。

var jq=jQuery.noConflict();