datatable jquery-테이블 헤더 너비가 본문 너비와 정렬되지 않음
jQuery 데이터 테이블을 사용하고 있습니다. 응용 프로그램을 실행할 때 헤더 너비가 본문 너비와 정렬되지 않습니다. 하지만 머리글을 클릭하면 몸통 너비에 맞춰 지지만 그래도 약간의 오차가 있습니다. 이 문제는 IE에서만 발생합니다.
페이지가로드 될 때의 모습입니다.
헤더를 클릭 한 후 :
내 데이터 테이블 코드 :
$("#rates").dataTable({
"bPaginate": false,
"sScrollY": "250px",
"bAutoWidth": false,
"bScrollCollapse": true,
"bLengthChange": false,
"bFilter": false,
"sDom": '<"top">rt<"bottom"flp><"clear">',
"aoColumns": [{
"bSortable": false
},
null,
null,
null,
null
]
});
rates내 테이블 ID입니다.
누구든지 이것으로 나를 도울 수 있습니까? 미리 감사드립니다.
원인
대부분의 경우 테이블이 처음에 숨겨져 jQuery DataTables가 열 너비를 계산하지 못합니다.
해결책
테이블이 접을 수있는 요소에있는 경우 접을 수있는 요소가 표시 될 때 헤더를 조정해야합니다.
예를 들어, Bootstrap Collapse 플러그인의 경우 :
$('#myCollapsible').on('shown.bs.collapse', function () { $($.fn.dataTable.tables(true)).DataTable() .columns.adjust(); });테이블이 탭에있는 경우 탭이 표시 될 때 헤더를 조정해야합니다.
예를 들어 부트 스트랩 탭 플러그인의 경우 :
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e){ $($.fn.dataTable.tables(true)).DataTable() .columns.adjust(); });
위의 코드는 페이지의 모든 테이블에 대한 열 너비를 조정합니다. 자세한 내용은 columns().adjust()API 메서드를 참조하세요.
반응 형, 스크롤러 또는 고정 열 확장
Responsive, Scroller 또는 FixedColumns 확장을 사용하는 경우 추가 API 메서드를 사용하여이 문제를 해결해야합니다.
당신이 응답 확장자를 사용하는 경우 호출 할 필요가
responsive.recalc()API 방법을 추가 하는columns().adjust()API 방법. 반응 형 확장 – 잘못된 중단 점 예제를 참조하십시오 .Scroller 확장을 사용하는 경우
scroller.measure()API 메서드 대신 API 메서드 를 호출해야합니다columns().adjust(). 스크롤러 확장 – 잘못된 열 너비 또는 누락 된 데이터 예제를 참조하십시오 .당신이 FixedColumns 확장자를 사용하는 경우 호출 할 필요가
fixedColumns().relayout()API 방법을 추가 하는columns().adjust()API 방법. FixedColumns 확장 – 잘못된 열 너비 예제를 참조하십시오 .
연결
테이블이 처음에 숨겨 졌을 때 jQuery DataTables의 열과 관련된 가장 일반적인 문제에 대한 솔루션 은 jQuery DataTables – Bootstrap 탭의 열 너비 문제를 참조하십시오 .
"dataTable"테이블을 다음 div과 overflow:auto같이 래핑하여이 문제를 해결했습니다 .
.dataTables_scroll
{
overflow:auto;
}
dataTable초기화 후이 JS를 추가합니다 .
jQuery('.dataTable').wrap('<div class="dataTables_scroll" />');
사용하지 마십시오 sScrollX또는 sScrollY그들을 제거하고 추가 div같은 일을 래퍼 자신을.
해결책을 찾았습니다.
table-layout:fixed테이블에 추가되었습니다 . 그리고 IE 모드에서 응용 프로그램을 열었습니다.
내가 고쳤습니다. Work for me.
var table = $('#example').DataTable();
$('#container').css( 'display', 'block' );
table.columns.adjust().draw();
또는
var table = $('#example').DataTable();
table.columns.adjust().draw();
참조 : https://datatables.net/reference/api/columns.adjust ()
위의 솔루션 중 어느 것도 저에게 효과가 없었지만 결국 해결책을 찾았습니다.
이 문제의 내 버전은 'box-sizing'을 다른 값으로 설정하는 타사 CSS 파일로 인해 발생했습니다. 아래 코드를 사용하여 다른 요소에 영향을주지 않고 문제를 해결할 수있었습니다.
$table.closest(".dataTables_wrapper").find("*").css("box-sizing","content-box").css("-moz-box-sizing","content-box");
이것이 누군가를 돕기를 바랍니다!
$("#rates").dataTable({
"bPaginate": false,
"sScrollY": "250px",
"bAutoWidth": false,
"bScrollCollapse": true,
"bLengthChange": false,
"bFilter": false,
"sDom": '<"top">rt<"bottom"flp><"clear">',
"aoColumns": [{
"bSortable": false
},
null,
null,
null,
null
]}).fnAdjustColumnSizing( false );
데이터 테이블 호출이 끝날 때까지 fnAdjustColumSizing (false)을 호출 해보십시오. 위의 수정 된 코드.
테이블 너비가 100 %인지 확인
그런 다음 "autoWidth": true
Mike Ramsey의 답변을 연결하여 결국 DOM이로드되기 전에 테이블이 초기화되고 있음을 발견했습니다.
이 문제를 해결하기 위해 다음 위치에 초기화 함수를 배치했습니다.
document.addEventListener('DOMContentLoaded', function() {
InitTables();
}, false);
위의 솔루션 중 어느 것도 저에게 효과가 없었으므로 솔루션을 게시하겠습니다. 숨겨진 div에 테이블을로드 한 다음 테이블이 빌드 된 후 div를 표시했습니다. 먼저 div를 표시 / 숨기기 해제 한 다음 테이블이 보이는 동안 테이블을 만들었을 때 작동했습니다.
따라서 DataTables는 숨겨진 div의 열 크기를 조정할 수 없습니다. 테이블이 숨겨 졌을 때 백엔드에서 열 너비가 0px이기 때문일 수 있습니다.
오버플로 자동 및 상대적 위치를 사용하여 div의 테이블 태그 요소를 간단히 래핑합니다. Chrome 및 IE8에서 작동합니다. 데이터를 다시로드 한 후에도 테이블 크기를 고정하기 위해 높이 400px를 추가했습니다.
table = $('<table cellpadding="0" cellspacing="0" border="0" class="display" id="datat"></table>').appendTo('#candidati').dataTable({
//"sScrollY": "400px",//NO MORE REQUIRED - SEE wrap BELOW
//"sScrollX": "100%",//NO MORE REQUIRED - SEE wrap BELOW
//"bScrollCollapse": true,//NO MORE REQUIRED - SEE wrap BELOW
//"bScrollAutoCss": true,//NO MORE REQUIRED - SEE wrap BELOW
"sAjaxSource": "datass.php",
"aoColumns": colf,
"bJQueryUI": true,
"sPaginationType": "two_button",
"bProcessing": true,
"bJQueryUI":true,
"bPaginate": true,
"table-layout": "fixed",
"fnServerData": function(sSource, aoData, fnCallback, oSettings) {
aoData.push({"name": "filters", "value": $.toJSON(getSearchFilters())});//inserisce i filtri
oSettings.jqXHR = $.ajax({
"dataType": 'JSON',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
});
},
"fnRowCallback": function(nRow, aData, iDisplayIndex) {
$(nRow).click(function() {
$(".row_selected").removeClass("row_selected");
$(this).addClass("row_selected");
//mostra il detaglio
showDetail(aData.CandidateID);
});
},
"fnDrawCallback": function(oSettings) {
},
"aaSorting": [[1, 'asc']]
}).wrap("<div style='position:relative;overflow:auto;height:400px;'/>"); //correzione per il disallineamento dello header
Gyrocode.com은 "대부분 테이블이 처음에 숨겨져 jQuery DataTables가 열 너비를 계산하지 못하도록합니다."라고 말했습니다.
나도이 문제가 있었고 div를 표시 한 후 dataTable을 초기화하여 해결했습니다.
예를 들면
$('#my_div').show();
$('#my_table').DataTable();
문제는 데이터 테이블이 DOM에 그려지기 전에 데이터 테이블이 호출된다는 것입니다. 데이터 테이블을 호출하기 전에 설정된 시간 초과를 사용하십시오.
setTimeout(function(){
var table = $('#exampleSummary').removeAttr('width').DataTable( {
scrollY: "300px",
scrollX: true,
scrollCollapse: true,
paging: true,
columnDefs: [
{ width: 200, targets: 0 }
],
fixedColumns: false
} );
}, 100);
헤더의 간단한 CSS가이 작업을 수행합니다.
#rates_info, #rates_paginate
{
float: left;
width: 100%;
text-align: center;
}
내가 당신의 html을 보지 못했지만 그것을 시도하기 때문에 이것이 그대로 작동 할 것이라고 약속 할 수는 없습니다. 그렇지 않으면 html을 게시 할 수 있으며 업데이트 할 것입니다.
이 솔루션을 참조하십시오 . 창 스크롤 이벤트가 한 번만 발생하면 해결할 수 있습니다.
나는 같은 문제에 직면했다. dataTable에 대한 scrollX : true 속성을 추가했는데 제대로 작동했습니다. 데이터 테이블의 CSS를 변경할 필요가 없습니다.
jQuery('#myTable').DataTable({
"fixedHeader":true,
"scrollY":"450px",
"scrollX":true,
"paging": false,
"ordering": false,
"info": false,
"searching": false,
"scrollCollapse": true
});
I know this is old, but I just ran into the problem and didn't find a great solution. So, I decided on using some js to get the scrollBody's height, as compared to the tables height. If the scrollBody is smaller than the table, then I increase the tables width by 15px to account for the scrollbar. I set this up on resize event too, so that it works when my container changes sizes:
const tableHeight = $('#' + this.options.id).height();
const scrollBodyHeight = $('#' + this.options.id).closest('.dataTables_scrollBody').height();
if (tableHeight > scrollBodyHeight) {
$('#' + this.options.id).closest('.dataTables_scrollBody').css({
width: "calc(100% + 15px)",
})
} else {
$('#' + this.options.id).closest('.dataTables_scrollBody').css({
width: "100%",
})
}
$('.DataTables_sort_wrapper').trigger("click");
Unfortunately, none of those solutions worked for me. Perhaps, due to the difference in the initialization of our tables, we have different results. It might be possible, that one of those solutions would work for someone. Anyways, wanted to share my solution, just in case someone is still troubled with this issue. It is a bit hackish, though, but it works for me, since I don't change the width of the table later.
After I load the page and click on the header, so that it expands and shows normally, I inspect the table header and record the width of the .dataTables_scrollHeadInner div. In my case it is 715px, for example. Then add that width to css:
.dataTables_scrollHeadInner
{
width: 715px !important;
}
My solution was add this: ...
initComplete () {
this.api (). columns (). header (). each ((el, i) => {
$ (el) .attr ('style', 'min-width: 160px;')
});
},
...
and it look fine.
Gyrocode.com answer to problem was totally correct but his solution will not work in all cases. A more general approach is to add the following outside your document.ready function:
$(document).on( 'init.dt', function ( e, settings ) {
var api = new $.fn.dataTable.Api( settings );
window.setTimeout(function () {
api.table().columns.adjust().draw();
},1);
} );
Add fixed width for container table
JS:
otableCorreo = $("#indexTablaEnvios").DataTable({
"fnInitComplete": function (oSettings, json) {
$(otableCorreo.table().container()).addClass("tablaChildren");
},
});
CSS:
.tablaChildren {
width: 97%;
}
I had a similar issue. I would create tables in expandable/collapsible panels. As long as the tables were visible, no problem. But if you collapsed a panel, resized the browser, and then expanded, the problem was there. I fixed it by placing the following in the click function for the panel header, whenever this function expanded the panel:
// recalculate column widths, because they aren't recalculated when the table is hidden'
$('.homeTable').DataTable()
.columns.adjust()
.responsive.recalc();
Use this: Replace your modal name, clear your datatable and load
$('#modalCandidateAssessmentDetail').on('shown.bs.modal', function (e) {
});
add to your script in page :
$( window ).resize(function() {
var table = $('#tableId').DataTable();
$('#container').css( 'display', 'block' );
table.columns.adjust().draw();
});
do not need to come up with various crutches, table header width not aligned with body, because due to the fact that the table did not have enough time to fill in the data for this, do setTimeout
setTimeout(function() {
//your datatable code
}, 1000);
다음 명령 사용
$('#rates').DataTable({
"scrollX": true,
"sScrollXInner": "100%",
});
'IT Share you' 카테고리의 다른 글
| US-ASCII에서 UTF-8 (iconv)로 강제 인코딩 (0) | 2021.01.10 |
|---|---|
| 이미 인스턴스화 된 객체에 속성을 추가 할 수있는 이유는 무엇입니까? (0) | 2021.01.10 |
| Bash 자동화를 위해 명령 줄에서 Postgres 용 사용자를 만드는 방법 (0) | 2021.01.10 |
| CertPathValidatorException : 인증서 경로에 대한 신뢰 앵커를 찾을 수 없음-Retrofit Android (0) | 2021.01.10 |
| Swift에서 증가 된 값으로 배열을 만드는 방법은 무엇입니까? (0) | 2021.01.10 |