jQuery DataTables:제어 테이블의 폭

Question

문제를 제어의 폭 테이블을 사용하여 jQuery DataTables 플러그인입니다.테이블이 있어야 100%컨테이너의 폭을,하지만 그는 임의의 너비,오히려 보다 적은 컨테이너 폭입니다.

제안 감사

테이블의 선언은 다음과 같습니다

<table id="querytableDatasets" class="display" cellspacing="0"
cellpadding="3"     width="100%">

Javascript

jQuery('#tab-datasets').load('/cgi-bin/qryDatasets', '', function (){  
    jQuery('#querytableDatasets').dataTable({  
        "bPaginate": false,  
        "bInfo": false,  
        "bFilter": false  
    });  
});  `  

검사 HTML 에서 방화,당신이 볼(참고 추가 style="width:0px;")

<table id="querytableDatasets" class="display" cellspacing="0" 
cellpadding="3" width="100%" style="width: 0px;">

에서 찾는 방화범에서는 스타일이다.디스플레타 무시됩니다.볼 수 없는 곳이

element.style {  
  width:0;}    

-- dataTables.css (line 84
table.display { 
  margin:0 auto;  
  width:100%;  
}  

Answer 1

문제가 발생하기 때문에 dataTable 을 계산해야의 폭-그러나 내에서 사용하는 경우 탭이 표시되지 않을 할 수 없습니다,따라서 계산합 너비입니다.이 솔루션은 전화해'fnAdjustColumnSizing 때'탭에 표시됩니다.

Preamble

이 예는 방법을 보여 줍니다 DataTables 스크롤와 함께 사용할 수 있습니다 jQuery UI 탭(또는 실제로 다른 모든 방법에 의하여 테이블이 에 숨겨진(display:none)요소 때 초기화).는 이유 이 필요한 특별한 배려가 있는 경우 DataTables 가 초기 그리고 그것은 숨겨진된 요소,브라우저 없 모든 측정을 제공하기 DataTables,그리고 이 필요합니다 에 어긋나는 열의 경우 스크롤을 사용합니다.

을 얻는 방법이 전화 fnAdjustColumnSizing API 기능입니다.이 기능을 계산합니다 열 너비가 필요에 따라 현재 데이터한 다음 다시 그리는 테이블이 정확히 무엇이 필요한 경우 테이블이 볼 수 있는 첫 번째 시간입니다.이를 위해 우리가 사용하는'보기'방법을 제공합 jQuery UI 테이블이 있습니다.우리는지 확인하십시오 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 ] }
        ]
    } );
} );

보 이 더 많은 정보를 원하시면.

Answer 2

당신이 미세 조정하려는 두 변수의 초기화할 때 dataTables: bAutoWidth 고 aoColumns.sWidth

정 4 열의 폭 50px,100,120px 와 30 픽셀 하:

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 하기 전에 이를 어떻게 볼까 당신이 얻을.

Answer 3

만,나는 익숙하지 않는 플러그인,하지만 당신은 다시 설정한 스타일에 추가하 datatable?뭔가

$("#querydatatablesets").css("width","100%")

후에.dataTable 호?

Answer 4

jQuery('#querytableDatasets').dataTable({  
        "bAutoWidth": false
});

Answer 5

나는 수많은 문제를 열의 폭 datatables.마법의 수정 나를 위해 다음과 같은 줄을 포함할 수 있습니다

table-layout: fixed;

이 css 가와 전반적인 css 니다.예를 들어,당신이 선언 datatables 같은 다음과 같다:

LoadTable = $('#LoadTable').dataTable.....

그런 다음 마법 css 라인 것이 이동 클래스에서 Loadtable

#Loadtable {
margin: 0 auto;
clear: both;
width: 100%;
table-layout: fixed;

}

Answer 6

TokenMacGuys 솔루션이 최고의 작품 때문에 이것이 버그의 결과에 jQdataTable.무슨 일이 사용하는 경우$('#sometabe').dataTable().fnDestroy()테이블의 폭을 가져옵 설정 100px 대 100%.여기에 빠른 수정:

$('#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%");
        }

    });

Answer 7

설정 폭을 사용하여 명시적으로 sWidth 각 열고 bAutoWidth: false 에 dataTable 초기화 해결(유사)문제입니다.사랑이 넘치는 스택입니다.

Answer 8

당신은 떠나야에서는 적어도 하나의 필드의없이 고정된 분야,예를 들어:

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

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

변경할 수 있습니다,하지만 떠나 하나만으로 null,그래서 그것을 할 수 있습니다.을 넣는 경우 폭이 모든 작동하지 않습니다.희망 나는 누군가가 오늘!

Answer 9

추가 이 css 클래스를 당신의 페이지,그것을 문제를 해결하:

#<your_table_id> {
    width: inherit !important;
}

Answer 10

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

이 일을 미세 조정하는 전체적인 테이블의 폭입니다.감사@베드로 Drinnan!

Answer 11

로에 Datatable10.1,이것은 바로 사용할 수 있도록되어있다.그냥 넣어 폭 구성 요소 중 하나를 사용할 수 있는 테이블에서 HTML.즉width="100%",이를 재정의 모든 CSS 스타일에 의해 설정 DT.

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

Answer 12

없음의 솔루션을 여기서 나를 위해 일했습니다.도에 대한 예제 datatables 홈페이지 작동하지 않았다 따라서는 초기화 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);

});

Answer 13

그냥 내가 했을 정확하게 당신과 같은 문제가 있지만 난 그냥 적용 JQuery 하는 일반 테이블 없이 Ajax.어떤 이유로 파이어 폭스지 테이블을 확장한 후 공개합니다.내가 문제를 해결에 의해 퍼팅 테이블 내부에 DIV,그리고 적용 효과를 DIV 대신 합니다.

Answer 14

을 하고 있는 이에 준비 이벤트?

$(document).ready(function() { ... });

크기 조정 대부분에 크게 영향을 받되는 문서 할 수 있습니다.

Answer 15

누군가를 위해하는 데 문제가 조정이블/셀의 너비를 사용하여 고정 헤더그:

Datatables 에 의존하 thead 태그에 대한 열의 폭을 매개 변수입니다.이 때문입니다 정말 유일한 기본 html 의 가장으로 테이블의 안 html 얻 자동 생성됩니다.

그러나 무슨 일이 일부 세포 수보다 큰 폭 내부에 저장되 thead 세포입니다.

I.e.는 경우에 당신의 테이블에 많은 열을(폭이블)과 당신의 행 많은 양의 데이터를 호출하면"sWidth":을 변경하 td 셀 크기가 제대로 작동하지 않습니다 아이 때문에 행하는 자동으로 크기를 조정 td 의에 따라 오버플로 콘텐츠와 이 일 후에 테이블의 초기화되었고 전달하는 init params.

원래 thead"sWidth":매개 변수를 얻을 재지정(줄어들어)기 때문에 datatables 생각하는 테이블이 아직도 그것의 기본 폭%100-그것을 인정하지 않는 세포는 넘쳤다.

이를 해결하려면 나는 생각 오버플로우 폭을 차지 그 크기를 조정하여 테이블에 따라 후에 테이블의 초기화되면서 우리는 그것이 우리가 할 수 있습 init 우리의 고정 헤더에서는 동일한 시간:

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

Answer 16

create your fixedheader 내에 있는""성공의 ajax call,없을 것입 정렬 문제에 헤더와 행이 있습니다.

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

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

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

Answer 17

이 사람은 여전히 어려움을 겪고 있습니다.

지 않을 유지하는 테이블 내부에는 어떤 컨테이너입니다.테이블의 래퍼 컨테이너 테이블의 렌더링됩니다.내가 이것을 알고 잘못되었을 수 있는 곳에서 당신이 뭔가 다른 사람과 함께 표 그러나 당신은 항상 수 있는 추가 콘텐츠다.

나를 위해,이 문제가 발생한 경우 사이드 바 및 컨테이너로 실제로 오프셋을 사이드 바.

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

(추가 패널판-기본값)
과 당신의 클래스:

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

Answer 18

다른 유용한 링크에 대해 이 문제를 해결이 내 문제입니다.

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

Datatables 강제로 폭이블

Answer 19

실행으로 유사한 문제이 있을 경우 div 포장 테이블 주위에.

추가 위치:상대 fixed it for me.

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

Answer 20

나는 유사한 문제는 내용의 테이블보다 더 큰 표 헤더합니다.추가 div 테이블 주위에 설 x-오버플로 있는 것을 보인 이 문제로 정렬:

Answer 21

해야 하는 모든 다른 매개 변수하기 전에 bAutoWidth&aoColumns 올바르게 입력합니다.어떤 잘못 매개 변수기 전에 이 기능이 있습니다.

Answer 22

나는 이와 유사한 문제점을 발견하는 텍스트에서 열을 파괴하지 않고 이용하 css 문제를 해결 코드

th,td{
max-width:120px !important;
word-wrap: break-word
}

Answer 23

이것은 나의 방법으로 하고 있다.

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

Answer 24

내가 만나는 같은 문제를 오늘입니다.

내가 사용하는 까다로운 방법을 해결합니다.

내 코드는 아래와 같습니다.

$('#tabs').tabs({
    activate: function (event, ui) {
       //redraw the table when the tab is clicked
       $('#tbl-Name').DataTable().draw();
    }
});

Answer 25

이 잘 작동합니다.

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