사용자 정의 스크롤로 데이터 테이블 고정 된 헤더 구체화

Question

고정 헤더 기능을 구현 한 응용 프로그램에서 구체화 데이터 테이블을 사용하고 있습니다. 이것은 기본 페이지 스크롤 막대에 대해 잘 작동합니다.

Fixed Header with default scroll bar

HTML 코드 :

<div id="tblContainer" class="material-table z-depth-3 hoverable"> 
    <table id="myTable" class="highlight"></table> 
</div> 

JS 코드 :

$(document).ready(function(){ 
var data2 = { 
    "results": [{"Name":"test1", "Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"}, 
    {"Name":"test1", "Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"}, 
    {"Name":"test 1", 
"Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"}, 
    {"Name":"test 1","Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"}, 
    {"Name":"test 1","Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"}, 
    {"Name":"test 1","Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"}, 
    {"Name":"test 1","Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"}, 
    {"Name":"test 1","Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"}, 
    {"Name":"test 1","Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"} 
    ] 
}; 

$('#myTable').dataTable({ 
     data: data2.results, 
     "order": [], 
     "bSort": false, 
     "bInfo": false, 
     "paging": false, 
     "searching": false, 
     columns: [ 
      { data: 'Name', title: "Name" }, 
      { data: 'Amount', title: "Amount" }, 
      { data: 'Profit', title: "Profit" }, 
      { data: 'Loss', title: "Loss" }, 
      { data: 'Age', title: "Age" }, 
      { data: 'Address', title: "Address"}, 
      { data: 'Loss', title: "Loss" }, 
      { data: 'Age', title: "Age" }, 
      { data: 'Address', title: "Address"} 
     ], 
     "columnDefs": [ 
      { "width": "200px", "targets": [0] }, 
      { "width": "100px", "targets": [1] }, 
      { "width": "100px", "targets": [2] }, 
      { "width": "100px", "targets": [3,6] }, 
      { "width": "100px", "targets": [4,7] }, 
      { "width": "200px", "targets": [5,8] } 
     ], 
     "fixedHeader": { 
      header: true 
     } 
    }); 
}); 

하지만 테이블의 폭을 설정하고 고정 된 헤더를 수단 스크롤 사용자 정의 사용할 때 변경되지 않는다 스크롤을 기반으로합니다. 위의 코드에서

Fixed Header with custom scroll bar

는,이처럼 내 HTML 부분을 변경하고이 CSS를 추가했습니다. 그러나 고정 헤더가 작동하지 않습니다.

HTML 코드 :

<div class="row"> 
    <div class="col s8 m5"> 
    <div id="tblContainer" class="material-table z-depth-3 hoverable"> 
    <table id="myTable" class="highlight"></table> 
    </div> 
    </div> 
</div> 

CSS 코드 :

#myTable_wrapper { 
    overflow-x:auto; 
} 

여기 내 두 예 JSFiddle 붙어있다. 어떻게 구체화 데이터 테이블에서 사용자 정의 scoll 막대에 대한 고정 헤더를 달성하기 위해?

Answer 1

분명히 datatables의 고정 헤더는 scoll-x를 전혀 지원하지 않습니다. 한두 가지 나방을 시도했지만 해결책을 찾지 못했습니다. 주제 읽기 here

그러나 내 페이지 디자인을 변경하여이 문제를 해결할 수있었습니다. 고정 헤더를 사용하지 않았습니다. 그러나 div의 상단에 내 테이블을 놓으십시오. 즉, 검색 상자 나 페이지 매김 또는 테이블 상단에있는 아무 것도 없음을 의미합니다. 첫 번째 JSFiddle 예제와 같습니다.

그 후, 나는 scrollY까지 높이를주고 내 머리글은 고정되었다. 내가 말하고 싶은 건;

는

"fixedHeader": { 
      header: true 
     } 

제거하고 대신이 줄을 넣어 얻을.

"ScrollX": true, 
"scrollCollapse": true, 
"sScrollY": 400 

당신처럼 높이 동적으로 만들 수

또한 JSFiddle에서이 작업을 시도해보십시오

"sScrollY": calcDataTableHeight(), 

그리고 기능

var calcDataTableHeight = function() { 
h = $('#wrapper').height() - 150; 
return h; 
}; 

당신이 재생할 수 있습니다

그 숫자들 그것을 시작하기 전에 함수를 선언하는 것을 잊지 마십시오.