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 в 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%;  
}  

Answer 1

Проблема вызвана тем, что dataTable должен вычислять свою ширину - но при использовании внутри вкладки он не виден, поэтому не может рассчитать ширину. Решение состоит в том, чтобы вызвать 'fnAdjustColumnSizing', когда отображается вкладка.

Преамбула

Этот пример показывает, как DataTables с прокруткой могут использоваться вместе с вкладками пользовательского интерфейса jQuery (или любым другим способом, с помощью которого таблица в скрытом (display: none) элементе при его инициализации). Причина это требует особого рассмотрения, когда 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 ] }
        ]
    } );
} );

См. это для получения дополнительной информации.

Answer 2

Вы захотите настроить две переменные при инициализации таблиц данных: bAutoWidth и aoColumns.sWidth

Предполагая, что у вас есть 4 столбца шириной 50px, 100, 120px и 30px, вы должны сделать:

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, прежде чем пытаться это увидеть, насколько близко вы подходите.

Answer 3

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

Answer 4

Хорошо, я не знаком с этим плагином, но не могли бы вы сбросить стиль после добавления данных? Что-то вроде

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

после вызова .dataTable?

Answer 5

У меня были многочисленные проблемы с шириной столбцов таблиц данных. Магическое исправление для меня включало в себя строку

table-layout: fixed;

этот css соответствует общему css таблицы. Например, если вы объявили таблицы данных, как показано ниже:

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

Вы должны оставить хотя бы одно поле без фиксированного поля, например:

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

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

Вы можете изменить все, но оставить только один как ноль, чтобы он мог растягиваться. Если вы поместите ширину на ВСЕ, это не будет работать. Надеюсь, я помог кому-то сегодня!

Answer 8

Установка ширины явно с использованием sWidth для каждого столбца И bAutoWidth: false в dataTable инициализации решила мою (аналогичную) проблему. Люблю переполненный стек.

Answer 9

Добавьте этот класс CSS на свою страницу, это решит проблему:

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

Answer 10

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

Это отлично работало, чтобы отрегулировать всю ширину стола. Спасибо, Питер Дриннан!