datatable jquery - ширина заголовка таблиці не вирівняна з шириною тіла

Я використовую файли даних jQuery. При запуску програми ширина заголовка не узгоджується з шириною тіла. Але коли я натискаю на заголовок, він отримує вирівнювання з шириною тіла, але навіть тоді виникає деяке нерівне світло. Ця проблема виникає тільки в IE.

JSFiddle

Це виглядає, коли сторінка завантажується:

enter image description here

Після натискання заголовка:

enter image description here

Мій код для передачі даних:

$("#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 is my table id.
Could anyone help me with this? Thanks in advance.

38
Чи можете ви створити jsFiddle, щоб ми могли бачити і перевіряти проблему? jsfiddle.net
додано Автор cfs, джерело
Ви могли б макет таблиці з місцевими даними? використовуючи параметр aaData?
додано Автор cfs, джерело
Набагато легше було б працювати з вашим кодом, ніж здогадуватися з скріншотів.
додано Автор cfs, джерело
додано Автор Suresh Kamrushi, джерело
Я не можу створити jsfiddle. Є деякі БД, залежні в моєму коді.
додано Автор kishore, джерело
Я додав свій html в jsfiddle в іншому коментарі. Не могли б ви перевірити це?
додано Автор kishore, джерело
cfs: Чи можете ви здогадатися з екрану? Я також додав код даних
додано Автор kishore, джерело
Ось чому я додав скріншот, так що ви можете здогадатися, де він не працює.
додано Автор kishore, джерело

23 Відповіді

Я вирішив цю проблему, упакувавши таблицю "dataTable" з div з overflow: auto :

.dataTables_scroll
{
    overflow:auto;
}

і додавання цього JS після ініціалізації dataTable :

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

Не використовуйте sScrollX або sScrollY , видаліть їх і додайте обгортку div , яка робить те ж саме.

31
додано
Я боровся, щоб отримати його роботу з datsable sScrollY, але це просте рішення CSS зробив трюк.
додано Автор Jerry, джерело
потрібно додати і позицію: відносно, інакше мітки в заголовку залишаться фіксованими, не слідуючи прокручуванню обгортки.
додано Автор alexroat, джерело
Найпростіше рішення. Дякую!
додано Автор Stephen Lightcap, джерело
Ідеальна відповідь .. !! Зробіть його правильним. !! Спасибі Шар'єль
додано Автор Vishvanathsinh Solanki, джерело

ПРИЧИНА

Швидше за все, ваша таблиця спочатку прихована, що запобігає обчислення ширини стовпців jQuery DataTables.

РІШЕННЯ

  • If table is in the collapsible element, you need to adjust headers when collapsible element becomes visible.

    For example, for Bootstrap Collapse plugin:

    $('#myCollapsible').on('shown.bs.collapse', function() {
       $($.fn.dataTable.tables(true)).DataTable()
          .columns.adjust();
    });
    
  • If table is in the tab, you need to adjust headers when tab becomes visible.

    For example, for Bootstrap Tab plugin:

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

Код вище налаштовує ширину стовпців для всіх таблиць на сторінці. Див. стовпці (). Методи API для отримання додаткової інформації.

РОЗШИРЕННЯ ВІДПОВІДАЛЬНОГО, СКРОЛЕРНОГО АБО ФІКСУВАННЯ

If you're using РОЗШИРЕННЯ ВІДПОВІДАЛЬНОГО, СКРОЛЕРНОГО АБО ФІКСУВАННЯ, you need to use additional API methods to solve this problem.

ПОСИЛАННЯ

See

jQuery DataTables – Column width issues with Bootstrap tabs for РІШЕННЯs to the most common problems with columns in jQuery DataTables when table is initially hidden.

18
додано
Відмінна відповідь, +1
додано Автор NorCalKnockOut, джерело
Чудовий приклад дійсно відмінної відповіді. Дякую.
додано Автор Allen Cypher, джерело

Знайдено рішення:

До таблиці додано table-layout: fixed . І відкрив додаток в режимі IE.

16
додано
@JaxSwagger - Просто надішліть повідомлення, що "Ця сторінка використовує зламаний плагін, який працює тільки в IE"
додано Автор Hill, джерело
Ви маєте на увазі опцію додавання або додавання імені для класу attr?
додано Автор Liao San Kai, джерело
Щодо користувачів у Chrome, Firefox, Safari, Opera ...
додано Автор Shaggy, джерело

Жодне з вищезгаданих рішень не працювало для мене, але я врешті-решт знайшов рішення, яке зробив.

Моя версія цієї проблеми була викликана CSS-файлом сторонніх розробників, який встановив значення "box-sizing" на інше значення. Мені вдалося виправити проблему, не вдаючись до інших елементів із кодом нижче:

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

Сподіваюсь, це допомагає комусь!

4
додано
І все ж у мене проблеми з iceweasel (firefox debianized) ... прекрасно працює з хромом
додано Автор tonjo, джерело
$("#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) до кінця виклику даних. змінений код вище.

Обговорення проблеми з розміром стовпців

2
додано
Якщо це не виправити це ви випадково деякі навколишні CSS викликає проблему. Чи можна вимкнути ваш CSS і перевірити, чи функція прокручування і ширини стовпців функціонує так, як очікувалося.
додано Автор Mike Ramsey, джерело
Дякую. Але це не спрацювало
додано Автор kishore, джерело

переконайтеся, що ширина столу становить 100%

Потім "autoWidth": true

2
додано
Корисно надати точний код своєю відповіддю. Для javascript/css відповідей, JSFiddle цінується.
додано Автор Suever, джерело

Просто оберніть елемент тега таблиці в 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
1
додано
Я знаю. Infact Я залишив datatable у маленькому проекті у котрому я повинен утримати фіксовану голову плюс scrollable tbody. Мені довелося створити власну таблицю і спеціальний js
додано Автор alexroat, джерело
+ 1, як це працює, але не спокійно вирішує проблему, оскільки я втрачаю стовпець заголовка, прокручуючи його до нижньої частини таблиці.
додано Автор Sydwell, джерело

Я зафіксував, працював для мене.

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

Or

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

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

1
додано

Жоден з вищенаведених рішень працював для мене, тому я розміщу своє рішення: я завантажував таблицю в прихований div, а потім показував div після того, як таблиця була побудована. Коли я вперше показав/не показав div, а потім побудував таблицю, коли таблиця була видима, вона працювала.

Так DataTables не може розміру стовпців у прихованому DIV, ймовірно, тому, що він отримує ширину стовпців 0px на сервер, коли таблиця прихована.

1
додано

З посилання на відповідь від Майка Рамсі я врешті-решт виявив, що таблиця ініціалізувалася до завантаження DOM.

Щоб виправити це, я поставив функцію ініціалізації в наступному місці:

document.addEventListener('DOMContentLoaded', function() {
    InitTables();
}, false);
1
додано

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

JS:

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

CSS:

.tablaChildren {
    width: 97%;
}
0
додано

Я знаю, що це старе, але я просто зіткнувся з проблемою і не знайшов відмінного рішення. Отже, я вирішив використати деякі JS, щоб отримати висоту scrollBody порівняно з висотою таблиць. Якщо scrollBody менше, ніж таблиця, то я збільшую ширину таблиць на 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%",
    })
}
0
додано

На жаль, жодне з цих рішень не працювало для мене. Можливо, через різницю в ініціалізації наших таблиць ми маємо різні результати. Можливо, одне з цих рішень буде працювати для когось. У будь-якому випадку, хотілося б поділитися своїм рішенням, на всякий випадок, якщо хтось все ще переживає це питання. Це трохи хакіше, але це працює для мене, оскільки я не змінюю ширину таблиці пізніше.

Після завантаження сторінки і натискання на заголовок, щоб вона розширювалася і показувалася нормально, я перевіряю заголовок таблиці і записую ширину . У моєму випадку це, наприклад, 715px . Потім додайте цю ширину до css:

.dataTables_scrollHeadInner
{
  width: 715px !important;
}
0
додано

У мене була подібна проблема. Я б створив таблиці в розширюваних/розбірних панелях. До тих пір, поки таблиці були видимі, проблем не було. Але якщо ви згорнули панель, змінили розмір браузера, а потім розширилися, проблема була там. Я виправив це, помістивши в функцію кліку заголовка панелі, коли ця функція розширювала панель:

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

Див. це рішення . Він може бути вирішений за допомогою події прокручування вікна, яка випала тільки один раз.

0
додано

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

jQuery('#myTable').DataTable({
                            "fixedHeader":true,
                            "scrollY":"450px",
                            "scrollX":true,
                            "paging":   false,
                            "ordering": false,
                            "info":     false,
                            "searching": false,
                            "scrollCollapse": true
                            });
0
додано
Ця проблема почалася, коли я додав "scrollX": true
додано Автор Stephen Lightcap, джерело

Моє рішення було додано: ...

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

...

і це виглядає чудово.

0
додано

Відповідь 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);
} );
0
додано

$ ('. DataTables_sort_wrapper') trigger ("click");

0
додано
Будь ласка, використовуйте відступ 4-пробіл/табуляцію, щоб зробити код відформатований, як блок коду. Можливо, ви також повинні коментувати свій код, оскільки це не зовсім зрозуміло, як це пов'язано з проблемою, де її розмістити і т.д.
додано Автор YakovL, джерело

Деякі прості CSS на заголовках повинні зробити це за вас.

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

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

0
додано
Це ідентифікатори верхнього та нижнього колонтитулів, додані за допомогою назв даних. У мене були випадки, коли розтягнення цих місць може вирішити проблему, з якою ви стикаєтеся.
додано Автор chockleyc, джерело
Я намагався додати це. Але не пощастило
додано Автор kishore, джерело
Не могли б ви пояснити, що таке "#rates_info, #rates_paginate"
додано Автор kishore, джерело
jsfiddle.net/EjFtX це мій html
додано Автор kishore, джерело

Як сказав Gyrocode.com "Швидше за все ваша таблиця прихована, що не дозволяє jQuery DataTables обчислювати ширину стовпців".

Я мав цю проблему теж і вирішив її просто init dataTable після показу div

Наприклад

$('#my_div').show();
$('#my_table').DataTable();
0
додано

Використовуйте це: Замініть ваше модальне ім'я, очистіть дані і завантажте

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

});
0
додано

Проблема полягає в тому, що таблиця даних викликається до того, як таблиця даних буде намальована на 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);
0
додано