[jquery] 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을 검사하면 다음이 표시됩니다 (추가 된 style = “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%;
}
답변
이 문제는 dataTable이 너비를 계산해야하기 때문에 발생하지만 탭 내에서 사용하면 표시되지 않으므로 너비를 계산할 수 없습니다. 해결책은 탭이 표시 될 때 ‘fnAdjustColumnSizing’을 호출하는 것입니다.
전문
이 예제는 스크롤이있는 DataTables를 jQuery UI 탭 (또는 실제로 테이블이 초기화 될 때 숨겨진 (display : none) 요소에있는 다른 방법)과 함께 사용되는 방법을 보여줍니다. 특별한 고려가 필요한 이유는 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 ] }
]
} );
} );
자세한 정보는 이것을 참조하십시오 .
답변
당신은 당신이 dataTables을 초기화 할 때 두 개의 변수를 조정할 할 것이다 : 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' }
]
});
dataTables 초기화에 대한 자세한 정보는 http://datatables.net/usage 에서 찾을 수 있습니다.
이 widhts 설정과 적용중인 CSS 간의 상호 작용을 확인하십시오. 이를 시도하기 전에 기존 CSS에 주석을 추가하여 얼마나 가까이 있는지 확인할 수 있습니다.
답변
jQuery('#querytableDatasets').dataTable({
"bAutoWidth": false
});
답변
글쎄, 나는 그 플러그인에 익숙하지 않지만 데이터 테이블을 추가 한 후 스타일을 재설정 할 수 있습니까? 같은 것
$("#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;
}
답변
TokenMacGuys 솔루션은 jQdataTable의 버그로 인해 가장 잘 작동합니다. $ ( ‘# 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%");
}
});
답변
이 CSS 클래스를 페이지에 추가하면 문제가 해결됩니다.
#<your_table_id> {
width: inherit !important;
}