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

sWidth각 열에 대해 명시 적으로 너비를 설정 bAutoWidth: false하고 dataTable초기화 에서 내 (비슷한) 문제를 해결했습니다. 넘쳐나는 스택을 좋아하십시오.

고정 필드없이 하나 이상의 필드를 남겨야합니다. 예를 들면 다음과 같습니다.

$('.data-table').dataTable ({

 "bAutoWidth": false,
 "aoColumns" : [
    null,
    null,
    null,                    
    null,
    {"sWidth": "20px"},
    { "sWidth": "20px"}]
});

모두 변경할 수 있지만 하나만 null로 남겨두면 늘어날 수 있습니다. ALL에 너비를 넣으면 작동하지 않습니다. 오늘 누군가를 도왔기를 바랍니다!

"fnInitComplete": function() {
    $("#datatables4_wrapper").css("width","60%");
 }

이것은 전체 테이블 너비를 조정하는 데 잘 작동했습니다. 감사합니다 @ Peter Drinnan!

Datatable 10.1에서와 같이 이것은 간단합니다. HTML로 테이블에 width 속성을 넣으십시오. 즉, width = "100 %"이면 DT에서 설정 한 모든 CSS 스타일을 재정의합니다.

참조이 http://www.datatables.net/examples/basic_init/flexible_width.html

여기에 나온 해결책 중 어느 것도 나를 위해 일하지 않았습니다. datatables 홈페이지 의 예제조차도 show 옵션의 datatable 초기화에 작동하지 않았습니다.

문제에 대한 해결책을 찾았습니다. 트릭은 탭에 활성화 옵션 을 사용 하고 보이는 테이블에서 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);

});

Ajax가없는 일반 테이블에 JQuery를 적용했지만 당신과 똑같은 문제가 있었다고 말하면됩니다. 어떤 이유로 Firefox는 표를 공개 한 후에도 표를 확장하지 않습니다. 테이블을 DIV 안에 넣고 대신 DIV에 효과를 적용하여 문제를 해결했습니다.

준비된 이벤트에서 이것을하고 있습니까?

$ (문서) .ready (function () {...});

크기는 완전히로드되는 문서에 따라 달라집니다.

고정 헤더 플러그인을 사용하여 테이블 / 셀 너비를 조정하는 데 문제가있는 사람 :

Datatables는 열 너비 매개 변수에 대해 thead 태그를 사용합니다. 이는 대부분의 테이블 내부 html이 자동 생성되기 때문에 실제로 유일한 기본 html이기 때문입니다.

그러나 어떤 일이 발생하면 일부 셀이 thead 셀 내부에 저장된 너비보다 클 수 있습니다.

즉, 테이블에 많은 열 (넓은 테이블)이 있고 행에 많은 데이터가있는 경우 "sWidth"를 호출합니다. 하위 행이 오버플로에 따라 td의 크기를 자동으로 조정하므로 td 셀 크기를 변경하는 것은 제대로 작동하지 않습니다. 이는 테이블이 초기화되고 init 매개 변수를 전달한 후에 발생합니다 .

원래 thead "sWidth": 데이터 테이블이 테이블의 기본 너비가 % 100이라고 생각하기 때문에 매개 변수가 재정의 (축소)됩니다. 일부 셀이 오버플로 된 것을 인식하지 못합니다.

이 문제를 해결하기 위해 오버플로 너비를 파악 하고 테이블이 초기화 된 후 그에 따라 테이블 크기를 조정하여이를 설명했습니다 . 이때 고정 헤더를 동시에 초기화 할 수 있습니다.

$(document).ready(function() {
  $('table').css('width', '120%');
  new FixedHeader(dTable, {
        "offsetTop": 40,
      });
});

ajax 호출의 "성공"내에 고정 헤더를 만들면 헤더와 행에 정렬 문제가 없습니다.

success: function (result) {
              /* Your code goes here */

    var table = $(SampleTablename).DataTable();

        new $.fn.dataTable.FixedHeader(table);
}        

이것이 여전히 어려움을 겪고있는 사람에게 도움이되기를 바랍니다.

테이블을 용기 안에 보관하지 마십시오. 테이블이 렌더링 된 후 테이블의 래퍼를 컨테이너로 만듭니다. 테이블과 함께 다른 것이있는 곳에서는 이것이 유효하지 않을 수 있지만 언제든지 해당 내용을 다시 추가 할 수 있다는 것을 알고 있습니다.

나를 위해,이 문제는 사이드 바와 실제로 그 사이드 바에 대한 오프셋 인 컨테이너가있는 경우 발생합니다.

$(YourTableName+'_wrapper').addClass('mycontainer');

(패널 패널 기본값을 추가했습니다)
그리고 귀하의 클래스 :

.mycontainer{background-color:white;padding:5px;}

이 문제에 대한 다른 유용한 링크를 찾아 내 문제를 해결했습니다.

<table width="100%">
<tr>
    <td width="20%"> Left TD <td>
    <td width="80%"> Datatable </td>
</tr>
</table>

Datatables 힘 너비 테이블

테이블 주위에 div를 감쌀 때 비슷한 문제가 발생했습니다.

위치 추가 : 상대가 나를 위해 수정했습니다.

#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();
    }
});

이 솔루션도 확인하십시오. 이것은 내 DataTable 열 너비 문제를 쉽게 해결했습니다.

JQuery DataTables 1.10.20은 columns.adjust()Bootstrap 토글 탭 문제를 수정하는 방법을 소개합니다.

 $('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
    $.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
} );

문서를 참조하십시오 : 스크롤링 및 부트 스트랩 탭

이것은 잘 작동합니다.

#report_container {
   float: right;
   position: relative;
   width: 100%;
}