jquery 데이터 테이블의 고정 헤더

Question

jquery 데이터 테이블에 고정 헤더를 설정할 수있는 다른 방법이 있습니까 ??

:

내가 고정 된 헤더를 사용하려고

은 고정 된 헤더 2 스크롤 datatables :(

사람이 여기

내 스크립트입니까 ?? 것을 해결하는 방법을 알고 수행을 지원되지 않는다는이 경고 것

<script type="text/javascript" charset="utf-8"> 
$(document).ready(function() { 
    var oTable = $('#tabel_daftar_all').dataTable({ 
     "bJQueryUI": true, 
     "bPaginate": false, 
     //"iDisplayLength": 5, 
     //"aLengthMenu": [[5, 25, 50, -1], [5, 25, 50, "All"]], 
     //"iDisplayStart": 5, 
     //"sPaginationType": "full_numbers", 
     "sScrollX": "100%", 
     //"sScrollXInner": "150%", 
     "bScrollCollapse": true, 
     "bFilter": false 
    });  
    new FixedColumns(oTable, { 
     "iLeftColumns": 4, 
     "iLeftWidth": 350 
    }); 

    //new FixedHeader(oTable); 
    //$('#tabel_daftar_all').dataTable().rowGrouping(); 
}); 
</script> 

Answer 1

현재 FixedHeader는 스크롤 기능이 지원되지 않습니다. 기능을 추가하는 것이 완벽 할 것이라고 확신하지만 아직까지는 스크롤 할 수 없었습니다! Y 스크롤을 사용 가능하게 할 수 없습니까? ? 스크롤링 기능은 비슷하지만 많은 효과를 얻을 수 있습니다. 전체 페이지 스크롤보다는 내부 요소 (이미 X 스크롤).

Answer 2

라인

"sScrollX": "100%", 

를 제거하고 fixedheader 다음 페이지 헤더에 "FixedHeader.min.js"를 추가하십시오 jQuery를 데이터 테이블에서 수정 된 헤더를 구현하기위한

Answer 3

작업 페이지에 다음 코드를 추가합니다 :

var oFH = new FixedHeader(oTable); 
$('#tablename thead th:eq(0)').html('First column'); 
oFH.fnUpdate(); 

희망이 도움이 될 것입니다.

Answer 4

First import the FixedHeader.js file 
<script type="text/javascript" charset="utf-8" src="RELATIVE_PATH/fixedHeader.js"> 
</script> 

And then add following code to you html/ftl file 
<script type="text/javascript"> 
     $(document).ready(function() { 
    var table = $('#employeeDetails').DataTable(); 
    new $.fn.dataTable.FixedHeader(table); 
}); 
     </script> 

..............Hope, This works fine. 

Answer 5

저는 scrollX, fixedColumn 및 fixedHeader가 필요한 유스 케이스가 있습니다. 나는 해결책을 찾을 수 없었다. 또한 Datatables에 따라 fixedHeader와 fixedColumn은 함께 호환되지 않습니다. 나는 커스텀 JS와 CSS를 사용하여이 문제를 해결했다.

$(document).off("scroll"); 
    var posFromTop = $('.dataTables_scrollHead').offset().top; //Initial position on page 
    var navHeight = $('nav').height() // Height of navbar (offset for sticky header) 
    var firstColOffsetAdjustment = 0 - $('.dataTables_scroll').find('thead tr').height(); 
    var initialMargin = $('.DTFC_LeftWrapper').css('margin-top') 
    var initialTableWidth = $('.dataTables_scrollBody').width(); 
    $(document).on("scroll", function(e){ 
     if(($(window).scrollTop()+navHeight-25) >= posFromTop){ 
      $('.dataTables_scrollHead').addClass('sticky-thead'); 
      $('.dataTables_scrollHead').css('width', initialTableWidth+'px'); 
      $('.DTFC_LeftWrapper').css('margin-top', firstColOffsetAdjustment+"px"); 
     }else{ 
      $('.dataTables_scrollHead').removeClass('sticky-thead'); 
      $('.DTFC_LeftWrapper').css('margin-top', initialMargin); 
     } 
    }) 


.sticky-thead{ 
     position: fixed !important; 
     top: 64px; 
     z-index: 1000; 
} 

이것은 나를 위해 일했습니다. 희망이 도움 :