jQuery DataTables: 제어 테이블 너비
jQuery DataTables 플러그인을 사용하여 테이블의 폭을 조절하는 데 문제가 있습니다.표는 컨테이너 폭의 100%가 되어야 하지만 결국 컨테이너 폭보다 작은 임의의 폭이 됩니다.
제안 감사했습니다.
테이블 선언은 다음과 같습니다.
<table id="querytableDatasets" class="display" cellspacing="0"
cellpadding="3" width="100%">
자바스크립트는
jQuery('#tab-datasets').load('/cgi-bin/qryDatasets', '', function (){
jQuery('#querytableDatasets').dataTable({
"bPaginate": false,
"bInfo": false,
"bFilter": false
});
}); `
Firebug에서 HTML을 검사하면 다음과 같은 내용이 나타납니다(추가된 스타일="width: 0px;)
<table id="querytableDatasets" class="display" cellspacing="0"
cellpadding="3" width="100%" style="width: 0px;">
Firebug에서 스타일을 살펴보니 table.display 스타일이 무시되었습니다.이게 어디서 오는지 알 수 없습니다.
element.style {
width:0;}
-- dataTables.css (line 84
table.display {
margin:0 auto;
width:100%;
}
jQuery('#querytableDatasets').dataTable({
"bAutoWidth": false
});
이 문제는 dataTable이 너비를 계산해야 하지만 탭 안에서 사용하면 보이지 않으므로 너비를 계산할 수 없기 때문에 발생합니다.해결책은 탭이 나타나면 'fnAdjustColumnSizing'을 호출하는 것입니다.
프리앰블
이 예에서는 스크롤링이 있는 데이터 테이블을 jQuery UI 탭과 함께 사용할 수 있는 방법을 보여 줍니다(또는 테이블이 초기화될 때 숨겨진(display:none) 요소에 있는 다른 모든 방법).DataTables가 초기화되고 숨겨진 요소에 있을 때 브라우저에 DataTables를 제공할 측정값이 없기 때문에 특별히 고려해야 합니다. 스크롤이 활성화된 경우 DataTables가 초기화되고 숨겨진 요소에 있을 때 브라우저에서 DataTables를 제공할 측정값이 없기 때문입니다.
이를 극복하기 위한 방법은 fnAdjustColumnSizing API 함수를 호출하는 것입니다.이 함수는 현재 데이터를 기반으로 필요한 열 너비를 계산한 다음 테이블을 다시 그립니다. 이는 테이블이 처음으로 보일 때 정확히 필요한 것입니다.이를 위해 jQuery UI 테이블에서 제공하는 'show' 메서드를 사용합니다.DataTable이 생성되었는지 여부를 확인합니다('div.dataTables_scrollBody'의 추가 셀렉터에 유의하십시오. 이는 DataTable이 초기화될 때 추가됩니다.테이블 초기화가 완료된 경우 크기를 다시 조정합니다.최적화는 표의 첫 번째 표시의 크기만 조정하기 위해 추가될 수 있습니다.
초기화코드
$(document).ready(function() {
$("#tabs").tabs( {
"show": function(event, ui) {
var oTable = $('div.dataTables_scrollBody>table.display', ui.panel).dataTable();
if ( oTable.length > 0 ) {
oTable.fnAdjustColumnSizing();
}
}
} );
$('table.display').dataTable( {
"sScrollY": "200px",
"bScrollCollapse": true,
"bPaginate": false,
"bJQueryUI": true,
"aoColumnDefs": [
{ "sWidth": "10%", "aTargets": [ -1 ] }
]
} );
} );
자세한 내용은 이 항목을 참조하십시오.
dataTable의 변수를 조정해야 합니다.bAutoWidth그리고.aoColumns.sWidth
폭이 50px, 100, 120px 및 30px인 4개의 열이 있다고 가정하면 다음과 같은 작업을 수행할 수 있습니다.
jQuery('#querytableDatasets').dataTable({
"bPaginate": false,
"bInfo": false,
"bFilter": false,
"bAutoWidth": false,
"aoColumns" : [
{ sWidth: '50px' },
{ sWidth: '100px' },
{ sWidth: '120px' },
{ sWidth: '30px' }
]
});
dataTable의 초기화에 대한 자세한 정보는 http://datatables.net/usage 에서 확인할 수 있습니다.
이 너비 설정과 적용 중인 CSS 사이의 상호 작용을 확인합니다.이것을 시도하기 전에 기존 CSS에 댓글을 달면 얼마나 가까워지는지 확인할 수 있습니다.
글쎄요, 제가 그 플러그인을 잘 모르는데 혹시 데이터 테이블 추가 후에 스타일을 다시 설정해주실 수 있나요?뭐 이런 거.
$("#querydatatablesets").css("width","100%")
.dataTable 통화 후에?
저는 데이터 테이블의 열 너비와 관련하여 여러 가지 문제가 있었습니다.나에게 마법의 해결책은 그 라인을 포함하고 있었습니다.
table-layout: fixed;
이 css는 표의 전체 css와 일치합니다.예를 들어 다음과 같은 데이터 테이블을 선언한 경우:
LoadTable = $('#LoadTable').dataTable.....
그러면 마법 css 라인은 Loadtable 클래스에 들어갈 것입니다.
#Loadtable {
margin: 0 auto;
clear: both;
width: 100%;
table-layout: fixed;
}
이것은 jQdataTable의 버그의 결과이기 때문에 TokenMacGuys 솔루션이 가장 잘 작동합니다.$('#sometabe').dataTable().fnDestroy()를 사용하면 테이블 너비가 100%가 아닌 100px로 설정됩니다.간단한 해결 방법은 다음과 같습니다.
$('#credentials-table').dataTable({
"bJQueryUI": false,
"bAutoWidth": false,
"bDestroy": true,
"bPaginate": false,
"bFilter": false,
"bInfo": false,
"aoColumns": [
{ "sWidth": "140px" },
{ "sWidth": "300px" },
{ "sWidth": "50px" }
],
"fnInitComplete": function() {
$("#credentials-table").css("width","100%");
}
});
다음과 같이 필드를 고정하지 않고 하나 이상 남겨 두어야 합니다.
$('.data-table').dataTable ({
"bAutoWidth": false,
"aoColumns" : [
null,
null,
null,
null,
{"sWidth": "20px"},
{ "sWidth": "20px"}]
});
모두 변경할 수 있지만 늘일 수 있도록 하나만 null로 남겨 둡니다.폭을 모두 맞추면 작동하지 않습니다.오늘 내가 누군가를 도와줬기를!
데이터 10.1과 같이, 이는 간단합니다.HTML의 테이블에 width 속성을 넣기만 하면 됩니다. 즉, width="100%". 이것은 DT에 의해 설정된 모든 CSS 스타일을 재정의됩니다.
이 http://www.datatables.net/examples/basic_init/flexible_width.html 보기
이 CSS 클래스를 페이지에 추가하면 문제가 해결됩니다.
#<your_table_id> {
width: inherit !important;
}
을 으로 하는 을 사용하여 폭 명시적으로 설정sWidth에 대하여에해각d ANDbAutoWidth: false인에dataTable초기화는 나의 (비슷한) 문제를 해결했습니다.넘치는 스택을 사랑합니다.
"fnInitComplete": function() {
$("#datatables4_wrapper").css("width","60%");
}
이것은 전체 테이블 폭을 조절하는데 잘 작동했습니다.감사합니다 @피터 드린넌!
여기에 있는 어떤 해결책도 저에게 효과가 없었습니다.show option에서 datables의 초기화를 위해서는 datables 홈페이지의 예제조차 작동하지 않았습니다.
그 문제에 대한 해결책을 찾았습니다.탭에 대해 활성화 옵션을 사용하고 보이는 테이블에서 fnAdjustColumnSizing()을 호출하는 방법이 있습니다.
$(function () {
// INIT TABS WITH DATATABLES
$("#TabsId").tabs({
activate: function (event, ui) {
var oTable = $('div.dataTables_scrollBody>table:visible', ui.panel).dataTable();
if (oTable.length > 0) {
oTable.fnAdjustColumnSizing();
}
}
});
// INIT DATATABLES
// options for datatables
var optDataTables = {
"sScrollY": "200px",
"bScrollCollapse": true,
"bPaginate": false,
"bJQueryUI": true,
"aoColumnDefs": [
{ "sWidth": "10%", "aTargets": [-1] }
]
};
// initialize data table
$('table').dataTable(optDataTables);
});
나도 당신과 똑같은 문제를 겪었다고 말씀드리지만, 나는 그저 아약스가 없는 일반 테이블에 JQuery를 적용했을 뿐입니다.어떤 이유에서인지 Firefox는 테이블을 공개한 후에도 테이블을 확장하지 않습니다.테이블을 DIV 안에 넣고 대신 DIV에 효과를 적용하여 문제를 해결했습니다.
준비된 이벤트에서 하시는 건가요?
$($)의ready(함수 {...});
크기 조정은 문서가 완전히 로드되었는지에 따라 달라질 가능성이 높습니다.
이 솔루션도 확인해 보세요.이것은 내 DataTable 열 너비 문제를 쉽게 해결했습니다.
JQuery DataTable 1.10.20 소개columns.adjust()부트스트랩 토글 탭 문제를 해결하는 방법
$('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
$.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
} );
스크롤 및 부트스트랩 탭은 문서를 참조하시기 바랍니다.
고정 헤더 플러그인을 사용하여 테이블/셀 너비를 조정하는 데 문제가 있는 모든 사용자:
데이터 테이블은 열 너비 매개변수에 대한 광고 태그를 사용합니다.이는 테이블 내부 html의 대부분이 자동 생성되기 때문에 실제로 유일한 네이티브 html이기 때문입니다.
그러나 일부 셀은 광고 셀 내부에 저장된 너비보다 클 수 있습니다.
즉, 테이블에 열(와이드 테이블)이 많고 행에 데이터가 많은 경우 "sWidth"를 호출합니다. 하위 행은 오버플로 내용에 따라 자동으로 td 크기를 조정하고 테이블의 초기화 및 초기화 매개 변수를 통과한 후에 발생하기 때문에 td 셀 크기를 변경하는 것은 제대로 작동하지 않습니다.
원래 광고 "sWidth"(sWidth): 데이터 테이블에서 테이블의 기본 너비가 %100이라고 생각하기 때문에 매개 변수가 재정의(축소)됩니다. 이는 일부 셀이 오버플로되었다는 것을 인식하지 못합니다.
이 문제를 해결하기 위해 오버플로 폭을 계산하고 테이블 초기화 후 테이블 크기를 조정하여 설명했습니다. 이 과정에서 고정 헤더를 동시에 입력할 수 있습니다.
$(document).ready(function() {
$('table').css('width', '120%');
new FixedHeader(dTable, {
"offsetTop": 40,
});
});
아약스 호출의 "성공" 안에 고정 헤더를 작성하면 헤더와 행의 정렬 문제가 발생하지 않습니다.
success: function (result) {
/* Your code goes here */
var table = $(SampleTablename).DataTable();
new $.fn.dataTable.FixedHeader(table);
}
이것이 아직도 힘든 사람에게 도움이 되길 바랍니다.
테이블을 어떤 용기 안에도 두지 마세요.테이블이 렌더링 된 후 테이블의 포장지를 용기로 만드십시오.테이블과 함께 다른 내용이 있는 곳에서는 이 내용이 무효일 수 있지만 언제든지 해당 내용을 다시 추가할 수 있습니다.
저는 사이드바와 해당 사이드바에 대한 오프셋인 컨테이너가 있을 경우 이 문제가 발생합니다.
$(YourTableName+'_wrapper').addClass('mycontainer');
(패널 패널을 추가했습니다-기본값
반 :고의은:은의d:고sr :
.mycontainer{background-color:white;padding:5px;}
이 문제에 대한 또 다른 유용한 링크를 찾아서 제 문제를 해결했습니다.
<table width="100%">
<tr>
<td width="20%"> Left TD <td>
<td width="80%"> Datatable </td>
</tr>
</table>
디브를 테이블에 둘렀을 때 비슷한 문제에 부딪혔습니다.
포지션 추가 : 상대적으로 고쳤습니다.
#report_container {
float: right;
position: relative;
width: 100%;
}테이블의 내용물이 테이블 머리글과 바닥글보다 더 큰 비슷한 문제가 있었습니다.테이블에 div를 추가하고 x-overflow를 설정하면 이 문제가 해결된 것 같습니다.
bAutoWidth & aoColumns 이전의 다른 모든 파라미터가 올바르게 입력되었는지 확인합니다.이전에 잘못된 매개 변수가 있으면 이 기능이 중단됩니다.
저도 비슷한 문제가 있었는데 열에 있는 텍스트가 깨지지 않는다는 것을 발견했고 이 css 코드를 사용하면 문제가 해결되었습니다.
th,td{
max-width:120px !important;
word-wrap: break-word
}
이것이 제 방식입니다.
$('#table_1').DataTable({
processing: true,
serverSide: true,
ajax: 'customer/data',
columns: [
{ data: 'id', name: 'id' , width: '50px', class: 'text-right' },
{ data: 'name', name: 'name' width: '50px', class: 'text-right' }
]
});
저는 오늘도 같은 문제를 만납니다.
나는 그것을 풀기 위해 까다로운 방법을 사용했습니다.
나의 코드는 아래와 같습니다.
$('#tabs').tabs({
activate: function (event, ui) {
//redraw the table when the tab is clicked
$('#tbl-Name').DataTable().draw();
}
});
이 정도면 잘 됩니다.
#report_container {
float: right;
position: relative;
width: 100%;
}
언급URL : https://stackoverflow.com/questions/604933/jquery-datatables-control-table-width
'programing' 카테고리의 다른 글
| 다중 라인 플렉스박스 레이아웃에서 줄 바꿈을 지정하는 방법은? (0) | 2023.09.09 |
|---|---|
| 컴파일러가 reloc을 최적화하는 것이 허용됩니까? (0) | 2023.09.09 |
| 루트 권한 없이 ansible을 통해 MariaDB를 설치하고 구성할 수 있습니까? (0) | 2023.09.09 |
| Android Studio SDK 위치 (0) | 2023.09.09 |
| 브라우저 탐지 (0) | 2023.09.09 |