datable jquery - 표 머리글 너비가 본문 너비와 정렬되지 않음

datable jquery - 표 머리글 너비가 본문 너비와 정렬되지 않음

저는 jQuery 데이터 테이블을 사용하고 있습니다.응용프로그램을 실행할 때 헤더 너비가 본문 너비와 정렬되지 않습니다.하지만 제가 헤더를 클릭했을 때, 그것은 몸의 너비에 맞춰지고 있지만, 심지어 약간의 정렬 오류가 있습니다.이 문제는 IE에서만 발생합니다.

제이에스아이들

페이지가 로드될 때 다음과 같이 표시됩니다.

머리글 클릭 후:

내 데이터 테이블 코드:

$("#rates").dataTable({
    "bPaginate": false,
    "sScrollY": "250px",
    "bAutoWidth": false,
    "bScrollCollapse": true,
    "bLengthChange": false,
    "bFilter": false,
    "sDom": '<"top">rt<"bottom"flp><"clear">',
    "aoColumns": [{
            "bSortable": false
        },
        null,
        null,
        null,
        null
    ]
});

rates내 테이블 아이디야.
이것 좀 도와주실 분 있나요?

원인

jQuery DataTables에서 열 너비를 계산할 수 없도록 테이블이 처음에 숨겨져 있을 가능성이 높습니다.

솔루션

• 테이블이 접이식 요소에 있는 경우 접이식 요소가 표시될 때 헤더를 조정해야 합니다.

  예를 들어 Bootstrap 축소 플러그인의 경우:

  $('#myCollapsible').on('shown.bs.collapse', function () {
     $($.fn.dataTable.tables(true)).DataTable()
        .columns.adjust();
  });
  

• 탭에 표가 있는 경우, 탭이 표시될 때 헤더를 조정해야 합니다.

  예를 들어 Bootstrap Tab 플러그인의 경우:

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

위의 코드는 페이지의 모든 테이블에 대한 열 너비를 조정합니다.자세한 내용은 API 메서드를 참조하십시오.

응답식, 스크롤러 또는 고정 기둥 확장

Response, Scroller 또는 FixedColumns 확장을 사용하는 경우 이 문제를 해결하기 위해 추가 API 방법을 사용해야 합니다.

• Response 확장을 사용하는 경우 API 메서드 외에 API 메서드를 호출해야 합니다.응답 확장 – 잘못된 중단점 예제를 참조하십시오.

• Scroller 확장을 사용하는 경우 API 메서드 대신 API 메서드를 호출해야 합니다.스크롤러 확장 – 잘못된 열 너비 또는 결측 데이터 예제를 참조하십시오.

• FixedColumns 확장을 사용하는 경우 API 메서드 외에 API 메서드도 호출해야 합니다.고정 열 확장 – 잘못된 열 너비 예제를 참조하십시오.

링크

테이블을 처음 숨길 때 jQuery DataTables의 열과 관련된 가장 일반적인 문제에 대한 해결책은 jQuery DataTables – Bootstrap 탭의 열 너비 문제를 참조하십시오.

는 "을 "dataTable"로 포장하여 이 했습니다.div와 함께overflow:auto:

.dataTables_scroll
{
    overflow:auto;
}

이 를 그를고당이 JS추다 합니다.dataTable초기화:

jQuery('.dataTable').wrap('<div class="dataTables_scroll" />');

사용하지 sScrollX또는sScrollY해당 항목을 제거하고 추가합니다.div같은 일을 하는 자신을 포장합니다.

솔루션 발견:

된 된가 추가됨table-layout:fixed.그리고 IE 모드에서 애플리케이션을 열었습니다.

다음 명령을 사용

$('#rates').DataTable({
        "scrollX": true,
        "sScrollXInner": "100%",
    });

내가 고쳤어, 날 위해 일해요.

var table = $('#example').DataTable();
$('#container').css( 'display', 'block' );
table.columns.adjust().draw();

또는

var table = $('#example').DataTable();
table.columns.adjust().draw();

참조: https://datatables.net/reference/api/columns.adjust()

ScrollX 또는 scrollY 매개변수를 사용하여 DataTables에서 스크롤을 활성화하면 전체 테이블이 두 개 또는 세 개의 개별 HTML 테이블 요소(헤더, 본문 및 선택적으로 바닥글)로 분할됩니다.이 작업은 데이터 테이블의 다른 섹션을 브라우저 간 방식으로 스크롤하는 기능을 제공하기 위해 수행됩니다.

저의 경우 콘텐츠가 오른쪽으로 스크롤되기 때문에 가로 스크롤 막대가 필요했습니다.따라서 "scrollX" 매개 변수를 추가하면 더 많은 열이 있는 일부 페이지에서 이 문제가 발생했습니다.

아래 코드에서는 "overflow as auto" 스타일로 div를 데이터 테이블에 감습니다.dataTable 실행이 완료되면 div를 추가해야 합니다.이 작업은 다음과 같이 수행할 수 있습니다.

$('#DataTableID').DataTable({
  //"scrollX": true,            
  "initComplete": function (settings, json) {  
    $("#DataTableID").wrap("<div style='overflow:auto; width:100%;position:relative;'></div>");            
  },
});

스크롤 X, 스크롤 Y, 스크롤 Xinner 또는 sScroll Xinner 옵션을 사용하는 경우 제거합니다.그들은 문제를 일으킬 수 있습니다.

출처: http://sforsuresh.in/datatables-header-body-not-aligned

Gyrocode.com 이 말했듯이, "처음에는 테이블이 숨겨져 있기 때문에 jQuery DataTables가 열 너비를 계산할 수 없습니다."

저도 이 문제가 있었는데 div를 보여준 후 dataTable을 입력하여 해결했습니다.

예를들면

$('#my_div').show();
$('#my_table').DataTable();

문제는 데이터 테이블이 DOM에 그려지기 전에 데이터 테이블이 호출된다는 것입니다. 데이터 테이블을 호출하기 전에 시간 초과 설정을 사용하십시오.

setTimeout(function(){ 
    var table = $('#exampleSummary').removeAttr('width').DataTable( {
        scrollY:        "300px",
        scrollX:        true,
        scrollCollapse: true,
        paging:         true,
        columnDefs: [
            { width: 200, targets: 0 }
        ],
        fixedColumns: false
    } );
}, 100);

다양한 목발, 테이블 헤더 폭이 본문과 정렬되지 않은 경우, 테이블에 데이터를 채울 시간이 충분하지 않기 때문에 setTimeout을 수행할 필요가 없습니다.

   setTimeout(function() {
     //your datatable code 
  }, 1000);

이 코드는 헤더를 본문과 정렬합니다.data-table-basic제가 준 데이터 테이블의 id입니다.

<style>    
    #data-table-basic_wrapper .dataTable, #data-table-basic_wrapper .dataTables_scrollHeadInner {
        width: 100% !important;
    }
</style>

위의 어떤 해결책도 저에게 효과가 없었지만 결국 효과가 있는 해결책을 찾았습니다.

이 문제의 제 버전은 '박스 크기'를 다른 값으로 설정한 타사 CSS 파일로 인해 발생했습니다.아래 코드로 다른 요소에 영향을 주지 않고 문제를 해결할 수 있었습니다.

    $table.closest(".dataTables_wrapper").find("*").css("box-sizing","content-box").css("-moz-box-sizing","content-box");

이것이 누군가에게 도움이 되기를 바랍니다!

테이블 너비가 100%인지 확인합니다.

그러면 "autoWidth":true

많은 시간이 지난 후에, 저는 방금 이사를 갔습니다.options그리고 그것은 잘 작동합니다.

$("#rates").dataTable({
"bPaginate": false,
"sScrollY": "250px",
"bAutoWidth": false,
"bScrollCollapse": true,
"bLengthChange": false,
"bFilter": false,
"sDom": '<"top">rt<"bottom"flp><"clear">',
"aoColumns": [{
        "bSortable": false
    },
    null,
    null,
    null,
    null
]}).fnAdjustColumnSizing( false );

fnAdjustColumSizing(false)을 위의 수정 코드 데이터 테이블 호출 끝으로 호출해 보십시오.

Column sizing 이슈에 대한 논의

이 대답에서

var table = $('#example').DataTable();
table.columns.adjust().draw();

로.

setTimeout(function () {
        var table = $('#example').DataTable();
        table.columns.adjust().draw();
    }, 3000);

일하기 위해!!!!

위의 솔루션 중 저에게 적합한 솔루션이 없습니다. 제 솔루션을 게시하겠습니다.저는 테이블을 숨겨진 디브에 로드하고 테이블이 만들어진 후 디브를 보여주고 있었습니다.제가 먼저 디브를 보여/숨겼다가 테이블이 보이는 상태에서 테이블을 만들었을 때 효과가 있었습니다.

따라서 테이블이 숨겨져 있을 때 백엔드에서 0px의 열 너비를 얻기 때문에 숨겨진 div에서 열 크기를 조정할 수 없습니다.

테이블 태그 요소를 오버플로 자동 및 위치 상대적인 div로 간단히 래핑합니다.크롬과 IE8에서 작동할 것입니다.데이터를 다시 로드한 후에도 테이블 크기를 고정하기 위해 높이 400px를 추가했습니다.

table = $('<table cellpadding="0" cellspacing="0" border="0" class="display" id="datat"></table>').appendTo('#candidati').dataTable({
        //"sScrollY": "400px",//NO MORE REQUIRED - SEE wrap BELOW
        //"sScrollX": "100%",//NO MORE REQUIRED - SEE wrap BELOW
        //"bScrollCollapse": true,//NO MORE REQUIRED - SEE wrap BELOW
        //"bScrollAutoCss": true,//NO MORE REQUIRED - SEE wrap BELOW
        "sAjaxSource": "datass.php",
        "aoColumns": colf,
        "bJQueryUI": true,
        "sPaginationType": "two_button",
        "bProcessing": true,
        "bJQueryUI":true,
        "bPaginate": true,
        "table-layout": "fixed",
        "fnServerData": function(sSource, aoData, fnCallback, oSettings) {
            aoData.push({"name": "filters", "value": $.toJSON(getSearchFilters())});//inserisce i filtri
            oSettings.jqXHR = $.ajax({
                "dataType": 'JSON',
                "type": "POST",
                "url": sSource,
                "data": aoData,
                "success": fnCallback
            });
        },
        "fnRowCallback": function(nRow, aData, iDisplayIndex) {
            $(nRow).click(function() {
                $(".row_selected").removeClass("row_selected");
                $(this).addClass("row_selected");
                //mostra il detaglio
                showDetail(aData.CandidateID);
            });
        },
        "fnDrawCallback": function(oSettings) {

        },
        "aaSorting": [[1, 'asc']]
}).wrap("<div style='position:relative;overflow:auto;height:400px;'/>"); //correzione per il disallineamento dello header

사용: 모달 이름을 바꾸고 데이터 테이블을 지우고 로드합니다.

$('#modalCandidateAssessmentDetail').on('shown.bs.modal', function (e) {

});

이것은 간단한 CSS 솔루션입니다.

.dataTables_scroll {
    overflow:auto;
    display:inline-block
}

부트스트랩 테이블이 먼저 렌더링되면 그리기 이벤트를 사용한 다음 column.adjust():

table.on( 'draw', function () {
    table.columns.adjust();
} );

jquery 데이터 테이블이 이미 렌더링된 경우 그리기 이벤트가 실행됩니다.

columns.adjust()열 크기를 조정합니다.

Mike Ramsey의 답변을 링크한 결과 DOM이 로드되기 전에 테이블이 초기화되고 있다는 것을 알게 되었습니다.

이 문제를 해결하기 위해 다음 위치에 초기화 기능을 배치했습니다.

document.addEventListener('DOMContentLoaded', function() {
    InitTables();
}, false);

이 솔루션을 참조하십시오.윈도우 스크롤 이벤트를 한 번만 실행하면 해결할 수 있습니다.

저도 같은 문제에 직면해 있었습니다.데이터 테이블에 스크롤 X: true 속성을 추가했는데 작동했습니다.데이터 테이블에 대한 CSS를 변경할 필요가 없습니다.

jQuery('#myTable').DataTable({
                            "fixedHeader":true,
                            "scrollY":"450px",
                            "scrollX":true,
                            "paging":   false,
                            "ordering": false,
                            "info":     false,
                            "searching": false,
                            "scrollCollapse": true
                            });

이것이 오래된 것이라는 것을 알지만, 저는 그저 문제에 부딪혔을 뿐 좋은 해결책을 찾지 못했습니다.그래서 테이블 높이와 비교하여 스크롤 바디의 높이를 얻기 위해 몇 가지 js를 사용하기로 결정했습니다.스크롤 본문이 테이블보다 작으면 스크롤 막대를 고려하여 테이블 너비를 15px 늘립니다.컨테이너 크기가 변경될 때 작동하도록 크기 조정 이벤트에도 설정했습니다.

const tableHeight = $('#' + this.options.id).height();
const scrollBodyHeight = $('#' + this.options.id).closest('.dataTables_scrollBody').height();

if (tableHeight > scrollBodyHeight) {
    $('#' + this.options.id).closest('.dataTables_scrollBody').css({
        width: "calc(100% + 15px)",
    })
} else {
    $('#' + this.options.id).closest('.dataTables_scrollBody').css({
        width: "100%",
    })
}

$(.DataTables_sort_wrapper'). 트리거("클릭");

불행하게도, 그 어떤 해결책도 저에게 효과가 없었습니다.아마도 테이블 초기화 차이로 인해 결과가 다를 수 있습니다.그 해결책 중 하나가 누군가에게 효과가 있을 수도 있습니다.어쨌든, 누군가가 이 문제로 여전히 어려움을 겪고 있을 때를 대비해 제 해결책을 공유하고 싶었습니다.조금 촌스럽지만 나중에 테이블 폭을 바꾸지 않기 때문에 저에게는 효과가 있습니다.

정상적으로 되도록 한 후 헤더의 합니다..dataTables_scrollHeadInner내에는 야. 내 경우에는 그렇습니다.715px를 들면 를들면예면.그런 다음 해당 너비를 CSS에 추가합니다.

.dataTables_scrollHeadInner
{
  width: 715px !important;
}

제 해결책은 다음과 같습니다.

initComplete () {
      this.api (). columns (). header (). each ((el, i) => {
          $ (el) .attr ('style', 'min-width: 160px;')
      });
},

...

그리고 괜찮아 보입니다.

Gyrocode.com 의 문제에 대한 대답은 전적으로 옳았지만 그의 해결책은 모든 경우에 효과가 없을 것입니다.더 일반적인 접근 방식은 다음을 document.ready 함수 외부에 추가하는 것입니다.

$(document).on( 'init.dt', function ( e, settings ) {
    var api = new $.fn.dataTable.Api( settings );
    window.setTimeout(function () {
            api.table().columns.adjust().draw();
        },1);
} );

컨테이너 테이블에 대한 고정 너비 추가

JS:

otableCorreo = $("#indexTablaEnvios").DataTable({                
    "fnInitComplete": function (oSettings, json) {
        $(otableCorreo.table().container()).addClass("tablaChildren");
    },
});

CSS:

.tablaChildren {
    width: 97%;
}

저도 비슷한 문제가 있었습니다.확장/축소 가능한 패널로 테이블을 만듭니다.테이블이 보이는 한 문제 없습니다.그러나 패널을 접고 브라우저의 크기를 조정한 다음 확장하면 문제가 발생했습니다.이 기능이 패널을 확장할 때마다 패널 헤더에 대한 클릭 기능에 다음을 배치하여 수정했습니다.

            // recalculate column widths, because they aren't recalculated when the table is hidden'
            $('.homeTable').DataTable()
                .columns.adjust()
                .responsive.recalc();

언급URL : https://stackoverflow.com/questions/17237812/datatable-jquery-table-header-width-not-aligned-with-body-width