[jquery] jQuery DataTables : 제어 테이블 너비

Program / 글쓴이

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;
}