jQuery DataTables: ширина керуючої таблиці

У мене проблема з контролем ширини таблиці за допомогою плагіна 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 у Firebug, ви бачите це (зверніть увагу на доданий стиль = "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 (або взагалі будь-яким іншим методом, завдяки якому таблиця знаходиться в прихованому (відображення: жодному) елементі при її ініціалізації). Причина цього потребує особливого врахування в тому, що коли DataTables ініціалізується і він знаходиться в прихованому елементі, у браузері немає жодних вимірів, за допомогою яких можна надати DataTables, і це вимагатиме невідповідності стовпців при включенні прокрутки.

Метод обійти це - викликати функцію API fnAdjustColumnSizing. Ця функція буде обчислювати ширину стовпців, необхідну на основі поточних даних, а потім перемальовувати таблицю - саме це потрібно, коли таблиця стає видимою вперше. Для цього ми використовуємо метод 'show', наданий таблицями інтерфейсу jQuery. Ми перевіряємо, чи створено 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 ] }
        ]
    } );
} );

Дивіться це для отримання додаткової інформації.

Ви хочете налаштувати дві змінні під час ініціалізації данихTables: bAutoWidthіaoColumns.sWidth

Припустимо, що у вас є 4 стовпчики шириною 50 пікселів, 100, 120 пікселів і 30 пікс.

jQuery('#querytableDatasets').dataTable({  
        "bPaginate": false,  
        "bInfo": false,  
        "bFilter": false,
        "bAutoWidth": false,
        "aoColumns" : [
            { sWidth: '50px' },
            { sWidth: '100px' },
            { sWidth: '120px' },
            { sWidth: '30px' }
        ]  
    }); 

Більше інформації про ініціалізацію таблиць даних можна знайти на веб- сайті http://datatables.net/usage

Слідкуйте за взаємодією між цим налаштуванням віджетів та 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 (), ширина таблиці встановлюється 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%");
        }

    });

Додайте цей клас 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"}]
});

Ви можете змінити все, але залишити лише один як нульовий, щоб воно могло розтягнутися. Якщо встановити ширину на ВСІ, це не спрацює. Сподіваюся, я сьогодні комусь допоміг!

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

Це добре працювало, щоб регулювати всю ширину столу. Дякую @Peter Drinnan!

Як і в Datatable 10.1, це прямо вперед. Просто введіть атрибут width в вашу таблицю в HTML. тобто ширина = "100%", це замінить усі стилі CSS, встановлені DT.

Дивіться це http://www.datatables.net/examples/basic_init/f prilagod_width.html

Жодне з рішень тут не працювало для мене. Навіть приклад на домашній сторінці даних не працював, отже, ініціалізація даних у варіанті show.

Я знайшов рішення проблеми. Трюк полягає у використанні опції активації для вкладок та виклику 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);

});

Скажу лише, що у мене була та сама проблема, що і у вас, хоча я просто застосував JQuery до звичайної таблиці без будь-якого Ajax. Чомусь Firefox не розгортає таблицю після її розкриття. Я вирішив проблему, поставивши таблицю всередині DIV і застосувавши ефекти до DIV.

Ви робите це на готовому заході?

$ (документ) .ready (функція () {...});

Розмір, швидше за все, залежатиме від завантаження документа повністю.

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

Дані даних покладаються на теги thead для параметрів ширини стовпців. Це тому, що справді єдиний власний html, оскільки більшість внутрішніх html-таблиць автоматично генерується.

Однак те, що трапляється, частина вашої клітини може бути більшою за ширину, що зберігається всередині комірок Thead.

Тобто, якщо у вашій таблиці є багато стовпців (широка таблиця), а у ваших рядках є багато даних, то виклик "sWidth": змінити розмір комірки td не буде належним чином, оскільки дочірні рядки автоматично змінюють розмір td на основі переповнення змісту, і це відбувається після ініціалізації таблиці та передачі її параметри init.

Оригінальна теда "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>

Таблиця ширини сили даних

Я зіткнувся з подібною проблемою, коли навколо столу обгорнув діву.

Додавання позиції: відносна виправлена ​​для мене.

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

У мене була подібна проблема, коли вміст таблиці був більшим, ніж заголовок та нижній колонтитул таблиці. Додавання значка навколо столу та налаштування 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%;
}