DataTables 고정 헤더가 와이드 테이블의 열과 잘못 정렬 됨
문제
를 사용하는 경우 sScrollX, sScrollXInner및 / 또는 sScrollY그 내부의 콘텐츠를 스크롤과 고정 헤더 테이블을 달성하기 위해, 테이블의 헤더는 크롬과 IE의 바디의 나머지와 어긋나 간다. 반면에 Firefox는 완벽하게 표시합니다.
버전 1.9.4를 사용하면 너비가 변동하는 데이터가 많고 작은 열과 동일한 열에 결합 된 매우 길거나 줄 바꿈 할 수없는 단어가있는 경우에만이 문제가 발생합니다. 또한 문제의 테이블은 상당히 넓어야합니다.
이러한 모든 요소가이 바이올린 에서 설명됩니다 .
산출
크롬:
IE :
Firefox
제안 솔루션
이러한 솔루션은 이전에 제안되었지만 내 구현에 영향 을 미치지 않았습니다 . 이러한 제안 중 일부로 인해 다른 코드가이 효과에 기여하지 않도록하기 위해 깔끔한 일반 바닐라 데모를 설정했습니다.
- 내 모든 CSS 끄기 / 제거
setTimeout( function () { oTable.fnAdjustColumnSizing(); }, 10 );- 전화
oTable.fnFilter( "x",0 )하고oTable.fnFilter( "",0 )그 순서대로 "sScrollXInner": "100%"- 모든 폭을 없애다
잘못 정렬 된 헤더에 대해 찾은 유일한 해결책은 sScrollX및 을 제거하는 sScrollY것이었지만 고정 헤더 / 내부 콘텐츠 스크롤 기능을 잃어 버리기 때문에 해결책으로 간주 할 수 없습니다. 슬프게도 임시 해킹이 아니라 수정이 아닙니다!
노트
최신 바이올린으로 편집 / 재생하려면 .
나는 링크를 사용하여 바이올린의 개정 역사에서 볼 수있는 다양한 조합을 시도했습니다 http://jsfiddle.net/pratik136/etL73/#REV#.1 <= #REV# <= 12
역사
StackO
이 질문은 이전에 질문되었습니다. jQuery Datatables Header Misaligned With Vertical Scrolling
이지만 중요한 차이점은 해당 질문의 OP가 모든 CSS가 제거되면 문제를 해결할 수 있다고 언급했으며 제 경우에는 사실이 아닙니다. 몇 가지 순열을 시도했기 때문에 질문을 다시 게시 할 가치가 있다고 생각했습니다.
외부이
문제는 DataTables 포럼에서도 신고되었습니다.
- http://datatables.net/forums/discussion/7395/sscrolly-and-sscrollx-broken/p1
- http://datatables.net/forums/discussion/7778/vertical-scrolling-messes-up-column-header-alignment#Item_1
- http://datatables.net/forums/discussion/3835/width-columns-problem-in-chrome-safari/p1
- 내 버그 보고서 : http://datatables.net/forums/discussion/12491/datatables-header-alignment-issue-refresh#Item_1
이 문제는 나를 미치게 만들었다! 여러분의 의견을 남겨주세요!
편집 : "고정 헤더"가 있는 최신 Fiddle 보기 :
바이올린 .
해결책 중 하나는 DataTables 플러그인이 대신 수행하도록하는 대신 직접 스크롤을 구현하는 것입니다.
나는 당신의 예를 가지고 sScrollX 옵션을 주석 처리했습니다. 이 옵션이 없으면 DataTables 플러그인은 테이블을있는 그대로 컨테이너 div에 넣습니다. 이 테이블은 화면 밖으로 확장되므로 필요한 너비와 오버플로 속성 집합을 사용하여 div에 넣을 수 있도록 수정합니다. 이것이 마지막 jQuery 문이하는 일입니다. 기존 테이블을 300px 너비의 div로 래핑합니다. 랩핑 div의 너비를 전혀 설정할 필요가 없을 것입니다 (이 예에서는 300px). 클리핑 효과를 쉽게 볼 수 있도록 여기에 있습니다. 그리고 그 인라인 스타일을 클래스로 바꾸는 것을 잊지 마십시오.
$(document).ready(function() {
var stdTable1 = $(".standard-grid1").dataTable({
"iDisplayLength": -1,
"bPaginate": true,
"iCookieDuration": 60,
"bStateSave": false,
"bAutoWidth": false,
//true
"bScrollAutoCss": true,
"bProcessing": true,
"bRetrieve": true,
"bJQueryUI": true,
//"sDom": 't',
"sDom": '<"H"CTrf>t<"F"lip>',
"aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]],
//"sScrollY": "500px",
//"sScrollX": "100%",
"sScrollXInner": "110%",
"fnInitComplete": function() {
this.css("visibility", "visible");
}
});
var tableId = 'PeopleIndexTable';
$('<div style="width: 300px; overflow: auto"></div>').append($('#' + tableId)).insertAfter($('#' + tableId + '_wrapper div').first())});
다음은 고정 헤더 테이블을 얻는 방법입니다. 귀하의 목적에 충분한 지 모르겠습니다. 변경 사항은 다음과 같습니다.
- "sScrollXInner"대신 "bScrollCollapse"사용
- 테이블을 감싸기 위해 fieldset을 사용하지 마십시오.
- "div.box"css 클래스 추가
내 로컬 컴퓨터에서 완전히 작동하는 것 같지만 Fiddle을 사용하여 완전히 작동하지 않습니다. Fiddle은 어떤 방식 으로든 플러그인 CSS를 위반 한 CSS 파일 (normalize.css)을 추가 한 것 같습니다 (Fiddle에서도 CSS 명확한 규칙을 추가하여 완전히 작동 할 수 있지만 지금 더 자세히 조사 할 시간이 없음).
내 작업 코드 스 니펫은 다음과 같습니다. 이것이 도움이되기를 바랍니다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
<script type='text/javascript' src="http://datatables.net/release-datatables/media/js/jquery.dataTables.min.js"></script>
<style type='text/css'>
div.box {
height: 100px;
padding: 10px;
overflow: auto;
border: 1px solid #8080FF;
background-color: #E5E5FF;
}
.standard-grid1, .standard-grid1 td, .standard-grid1 th {
border: solid black thin;
}
</style>
<script type='text/javascript'>
$(window).load(function(){
$(document).ready(function() {
var stdTable1 = $(".standard-grid1").dataTable({
"iDisplayLength": -1,
"bPaginate": true,
"iCookieDuration": 60,
"bStateSave": false,
"bAutoWidth": false,
//true
"bScrollAutoCss": true,
"bProcessing": true,
"bRetrieve": true,
"bJQueryUI": true,
"sDom": '<"H"CTrf>t<"F"lip>',
"aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]],
"sScrollX": "100%",
//"sScrollXInner": "110%",
"bScrollCollapse": true,
"fnInitComplete": function() {
this.css("visibility", "visible");
}
});
});
});
</script>
</head>
<body>
<div>
<table class="standard-grid1 full-width content-scrollable" id="PeopleIndexTable">
<thead>
<!-- put your table header HTML here -->
</thead>
<tbody>
<!-- put your table body HTML here -->
</tbody>
</table>
</div>
</body>
</html>
IE9에서 동일한 문제가 발생합니다.
HTML을 페이지에 쓰기 전에 RegExp를 사용하여 모든 공백을 제거합니다.
var Tables=$('##table_ID').html();
var expr = new RegExp('>[ \t\r\n\v\f]*<', 'g');
Tables= Tables.replace(expr, '><');
$('##table_ID').html(Tables);
oTable = $('##table_ID').dataTable( {
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bSort": true,
"bInfo": true,
"bAutoWidth": false,
"sScrollY": ($(window).height() - 320),
"sScrollX": "100%",
"iDisplayLength":-1,
"sDom": 'rt<"bottom"i flp>'
} );
이 두 줄을 추가하면이 문제가 해결되었습니다.
"responsive": true,
"bAutoWidth": true
이제 반응 형 플러그인을 사용할 수 있습니다 : https://datatables.net/extensions/responsive/ . 그러나 내 경험상 여전히 몇 가지 버그가 있음을 발견했습니다. 지금까지 찾은 최고의 솔루션입니다.
아래 코드가 작동했습니다. IE 9.0 이상에서 문제를 수정했습니다. 도움이 되었기를 바랍니다
var oTable = $('#tblList').dataTable({
"sScrollY": "320px",
"bScrollCollapse": true,
});
setTimeout(function(){
oTable.fnAdjustColumnSizing();
},10);
나는 같은 문제가 있었고이 코드가 그것을 해결합니다. 이 기사에서이 솔루션을 얻었지만 작동하는 간격의 시간을 조정해야했습니다.
setTimeout(function(){
oTable.fnAdjustColumnSizing();
},50);
빈 문자열로 DataTable을 초기화 한 후 DataTable 검색 기능을 트리거합니다. 자동으로의 정렬 불량 조정됩니다 thead과를 tbody.
$( document ).ready(function()
{
$('#monitor_data_voyage').DataTable( {
scrollY:150,
bSort:false,
bPaginate:false,
sScrollX: "100%",
scrollX: true,
} );
setTimeout( function(){
$('#monitor_data_voyage').DataTable().search( '' ).draw();
}, 10 );
});
부트 스트랩 사용자의 경우이 문제가 해결되었습니다.
$($.fn.dataTable.tables(true)).DataTable()
.columns.adjust()
.fixedColumns().relayout();
여기에서 기사보기
이것을 시도하면 다음 코드가 내 문제를 해결했습니다.
table.dataTable tbody th,table.dataTable tbody td
{
white-space: nowrap;
}
자세한 내용은 여기를 참조하십시오 .
추가 table-layout: fixed테이블의 스타일 (CSS 또는 스타일 속성)에.
브라우저는 크기 제약을 해결하기 위해 사용자 지정 알고리즘 적용을 중지합니다.
고정 테이블 레이아웃에서 열 너비를 처리하는 방법에 대한 정보를 웹에서 검색하십시오 ( 여기 및 여기에 간단한 SO 질문 2 개가 있습니다 ).
분명히 단점은 열의 너비가 내용에 맞지 않는다는 것입니다.
[편집] 내 대답은 FixedHeader 플러그인을 사용할 때 효과가 있었지만 데이터 테이블 포럼의 게시물은 sScrollX옵션을 사용할 때 다른 문제가 발생한다는 것을 나타내는 것 같습니다 .
sScrollX가 설정된 경우 bAutoWidth 및 sWidth가 무시 됨 (v1.7.5)
이 문제를 해결할 방법을 찾아 보겠습니다.
이미 플래그가 지정된 답변이 있다는 것을 알고 있지만 위의 내용이 작동하지 않는 유사한 문제가있는 사람에게는 해당됩니다. 부트 스트랩 테마와 함께 사용하고 있습니다.
dataTables.fixedHeader.js 파일에서 변경할 수있는 줄이 있습니다. 함수의 기본 레이아웃은 다음과 같습니다.
_matchWidths: function (from, to) {
var get = function (name) {
return $(name, from)
.map(function () {
return $(this).width();
}).toArray();
};
var set = function (name, toWidths) {
$(name, to).each(function (i) {
$(this).css({
width: toWidths[i],
minWidth: toWidths[i]
});
});
};
var thWidths = get('th');
var tdWidths = get('td');
set('th', thWidths);
set('td', tdWidths);
},
변경
return $(this).width();
...에
return $(this).outerWidth();
outerWidth ()는 최신 버전의 jquery를 사용하는 경우 jquery.dimensions.js에 포함 된 함수입니다. 즉. jquery-3.1.1.js
위의 함수가하는 일은 원래 테이블의 일을 매핑 한 다음 "복제 된"테이블 (고정 헤더)에 적용하는 것입니다. 제 경우에는 정렬이 잘못되었을 때 항상 약 5px에서 8px 정도 떨어져있었습니다. 대부분의 경우 최선의 해결책은 아니지만 테이블 선언별로 지정하지 않고도 솔루션의 다른 모든 테이블에 대한 솔루션을 제공합니다. 지금까지 Chrome에서만 테스트되었지만 모든 브라우저에서 판정 솔루션을 제공해야합니다.
scrollY를 사용하려면 다음을 사용하십시오.
$ ( '. DataTables_sort_wrapper'). trigger ( "click");
I fixed the same issue in my application by adding below code in the css -
.dataTables_scrollHeadInner
{
width: 640px !important;
}
I have fixed the column issue bu using below concept
$(".panel-title a").click(function(){
setTimeout( function(){
$('#tblSValidationFilerGrid').DataTable().search( '' ).draw();
}, 10 );
})
I use this for Automatic column hiding as per column data, in that case, sometimes its break table structure. i solve that problem with this $($.fn.dataTable.tables(true)).DataTable().columns.adjust(); and this function $('#datatableId').on('draw.dt', function () { }); call after tabledata load.
$('#datatableId').on('draw.dt', function () {
$($.fn.dataTable.tables(true)).DataTable().columns.adjust();
})
After trying everything I could, I just added "autoWidth": true and it worked for me.
Faced the same issue recently and was still searching for the solution when I tried something on my css, check if adding to your cells (th and td)
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
-sizing: content-box;
will resolve this issue; for me, I was using some html/css framework that was adding a the value border-box in every element.
Instead using sScrollX,sScrollY use separate div style
.scrollStyle
{
height:200px;overflow-x:auto;overflow-y:scroll;
}
Add below after datatable call in script
jQuery('.dataTable').wrap('<div class="scrollStyle" />');
Its working perfectly after many tries.
I had this very same problem and seen a lot of complicated answers that never seemed to work. I did solve it by simply overriding the CSS (site.css) on the following and it fixed it in Chrome, IE, and Firefox:
table.display td {
padding: 0px 5px;
}
/* this is needed for IE and Firefox if using horizontal scroll*/
table{
max-width: none;
min-height: 0%;
}
This overrides the CSS in datatable.jui.css
I just figured out a way to fix the alignment issue. Changing the width of div containing the static header will fix its alignment. The optimal width I found is 98%. Please refer to the code.
The auto generated div:
<div class="dataTables_scrollHead" style="overflow: hidden; position: relative; border: 0px none; width: 100%;">
Width here is 100%, change it to 98% on initializing and reloading the data table.
jQuery('#dashboard').dataTable({
"sEcho": "1",
"aaSorting": [[aasortvalue, 'desc']],
"bServerSide": true,
"sAjaxSource": "NF.do?method=loadData&Table=dashboardReport",
"bProcessing": true,
"sPaginationType": "full_numbers",
"sDom": "lrtip", // Add 'f' to add back in filtering
"bJQueryUI": false,
"sScrollX": "100%",
"sScrollY": "450px",
"iDisplayLength": '<%=recordCount%>',
"bScrollCollapse": true,
"bScrollAutoCss": true,
"fnInitComplete": function () {
jQuery('.dataTables_scrollHead').css('width', '98%'); //changing the width
},
"fnDrawCallback": function () {
jQuery('.dataTables_scrollHead').css('width', '98%');//changing the width
}
});
이 시도
이것은 나를 위해 작동합니다 ... 내 솔루션에 대한 CSS를 추가했으며 작동합니다 ... {border-collapse : separate;}를 제외하고 datatable CSS에서 아무것도 변경하지 않았지만
.dataTables_scrollHeadInner { /*for positioning header when scrolling is applied*/
padding:0% ! important
}
'development' 카테고리의 다른 글
| R + 빛나는 어떤 망치? (0) | 2021.01.08 |
|---|---|
| Eclipse가 문서 맨 아래를 스크롤하도록하려면 어떻게해야합니까? (0) | 2021.01.08 |
| PHP가 배열 키에 문자열을 사용하도록하려면 어떻게해야합니까? (0) | 2021.01.08 |
| Youtube 삽입 : 프레임에 액세스하려는 안전하지 않은 JavaScript 시도 (0) | 2021.01.08 |
| 초기 거부 후 getUserMedia ()로 권한을 다시 요청합니다. (0) | 2021.01.08 |