Datatable jquery - ширина заголовка таблицы не согласована с шириной тела

Ответ 1

Найдено решение:

Добавлен table-layout:fixed в таблицу. И открыл приложение в режиме IE.

Ответ 2

ПРИЧИНА

Скорее всего, ваша таблица изначально скрыта, что не позволяет jQuery DataTables вычислять ширину столбцов.

РЕШЕНИЕ

• Если таблица находится в сворачиваемом элементе, вам нужно настроить заголовки, когда сворачиваемый элемент станет видимым.

  Например, для плагина Bootstrap Collapse:

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

Код выше регулирует ширину столбцов для всех таблиц на странице. См. columns().adjust() методы API для получения дополнительной информации.

ОТВЕТСТВЕННЫЕ, РАСПРОСТРАНЕНИЯ ИЛИ ФИКСИРОВАННЫЕ КОЛОННЫ

Если вы используете расширения Responsive, Scroller или FixedColumns, вам нужно использовать дополнительные методы API для решения этой проблемы.

• Если вы используете гибкое расширение, вам нужно вызвать responsive.recalc() метод API в дополнение к columns().adjust() API-методу. См. Отзывчивое расширение - пример неверных точек останова.

• Если вы используете расширение Scroller, вам нужно вызвать scroller.measure() метод API вместо columns().adjust() метод API. См. Расширение скроллера - пример неправильной ширины столбца или отсутствующих данных.

• Если вы используете расширение FixedColumns, вам нужно вызвать fixedColumns().relayout() метод API в дополнение к columns().adjust() метод API. См. расширение FixedColumns - пример неправильной ширины столбца.

ССЫЛКИ

Смотрите jQuery DataTables - Проблемы с шириной столбцов на вкладках Bootstrap, чтобы найти решения наиболее распространенных проблем со столбцами в jQuery DataTables, когда таблица изначально скрыта.

Ответ 3

Я решил эту проблему, обернув таблицу "dataTable" с помощью div с помощью overflow:auto:

.dataTables_scroll
{
    overflow:auto;
}

и добавив этот JS после инициализации dataTable:

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

Не используйте sScrollX или sScrollY, удалите их и добавьте обертку div самостоятельно, что делает то же самое.

Ответ 4

Я исправил, работа для меня.

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()

Ответ 5

Ни одно из вышеперечисленных решений не работало для меня, но в итоге я нашел решение.

Моя версия этой проблемы была вызвана сторонним файлом CSS, который устанавливает "размер окна" в другое значение. Я смог исправить проблему без использования других элементов с помощью кода ниже:

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

Надеюсь, это поможет кому-то!

Ответ 6

$("#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) до конца вашего вызова данных. модифицированный код выше.

Обсуждение вопроса о размерах столбцов

Ответ 7

убедитесь, что ширина таблицы 100%

Затем "autoWidth": true

Ответ 8

Просто добавьте элемент тега таблицы таблицы в div с автоматическим переполнением и позицией. Он будет работать в Chrome и IE8. Я добавил высоту 400 пикселей, чтобы сохранить размер таблицы даже после перезагрузки данных.

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

Ответ 9

От ссылки ответа от Майка Рэмси я в конце концов обнаружил, что таблица была инициализирована до загрузки DOM.

Чтобы исправить это, я поместил функцию инициализации в следующую папку:

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

Ответ 10

Ни один из вышеперечисленных решений не работал у меня, поэтому я опубликую свое решение: я загружал таблицу в скрытый div, а затем показывал div после того, как таблица была построена. Когда я показал/деактивировал div сначала, а затем построил таблицу, пока таблица была видна, она сработала.

Таким образом, DataTables не может сортировать столбцы в скрытом div, вероятно, потому что он получает ширину столбца 0px на бэкэнд, когда таблица скрыта.

Ответ 11

Как сказал Gyrocode.com: "Скорее всего, ваша таблица изначально скрыта, что не позволяет jQuery DataTables вычислять ширину столбцов".

У меня тоже была эта проблема, и я решил ее, просто инициировав dataTable после показа div

Например,

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

Ответ 12

проблема заключается в том, что таблица данных вызывается до того, как таблица данных отрисована в 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);

Ответ 13

Некоторые простые css в заголовках должны сделать это за вас.

#rates_info, #rates_paginate
{
    float: left;
    width: 100%;
    text-align: center;
}

Нельзя обещать, что это сработает так же, как и потому, что я не видел ваш html, но попробую его, а если нет, вы можете опубликовать свой html, и я его обновлю.

Ответ 14

См. это решение. Он может быть разрешен только с помощью события прокрутки окна.

Ответ 15

Я столкнулся с той же проблемой. Я добавил свойство scrollX: true для dataTable, и оно сработало. Нет необходимости изменять CSS для datatable

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

Ответ 16

Я знаю, что это старо, но я просто столкнулся с проблемой и не нашел отличного решения. Итак, я решил использовать некоторые js для получения высоты scrollBody по сравнению с высотой таблиц. Если scrollBody меньше, чем таблица, то я увеличиваю ширину таблиц на 15 пикселей для учета полосы прокрутки. Я также установил это для события изменения размера, чтобы он работал, когда мой контейнер меняет размеры:

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%",
    })
}

Ответ 17

$( 'DataTables_sort_wrapper') триггер ("click").

Ответ 18

К сожалению, ни один из этих решений не работал у меня. Возможно, из-за различий в инициализации наших таблиц мы имеем разные результаты. Возможно, что одно из этих решений будет работать для кого-то. В любом случае, я хотел бы поделиться своим решением, на всякий случай, если кто-то все еще обеспокоен этой проблемой. Это немного хакерское, но это работает для меня, так как я не изменяю ширину таблицы позже.

После того, как я загружаю страницу и нажимаю на заголовок, чтобы он расширялся и показывался нормально, я проверяю заголовок таблицы и записываю ширину div .dataTables_scrollHeadInner. В моем случае это, например, 715px. Затем добавьте эту ширину в css:

.dataTables_scrollHeadInner
{
  width: 715px !important;
}

Ответ 19

Мое решение добавило: ...

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

...

и он выглядит нормально.

Ответ 20

Ответ на проблему 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);
} );

Ответ 21

Добавить фиксированную ширину для таблицы контейнера

JS:

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

CSS

.tablaChildren {
    width: 97%;
}

Ответ 22

У меня была похожая проблема. Я бы создал таблицы в расширяемых/разборных панелях. Пока таблицы были видны, никаких проблем. Но если вы свернули панель, изменили размеры браузера, а затем развернули, проблема была там. Я исправил это, поместив в функцию щелчка заголовка панели следующее, когда эта функция расширяла панель:

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

Ответ 23

Используйте это: замените ваше модальное имя, очистите ваш datatable и загрузите

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

});

Ответ 24

добавить к вашему сценарию на странице:

$( window ).resize(function() {
    var table = $('#tableId').DataTable();
    $('#container').css( 'display', 'block' );
    table.columns.adjust().draw();
});

Ответ 25

не нужно придумывать разные костыли, ширина заголовка таблицы не совпадает с телом, потому что из-за того, что у таблицы не было достаточно времени для заполнения данных для этого, делайте setTimeout

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

Ответ 26

Используйте эти команды

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