JQuery Таблицы данных: ширина таблицы управления

У меня проблема с управлением шириной таблицы с помощью плагина 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%;  
}

ОТВЕТЫ

Ответ 1

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

Преамбула

В этом примере показано, как использовать таблицы данных с прокруткой с вкладками пользовательского интерфейса jQuery (или любым другим способом, посредством которого таблица в скрытом (display: none) элементе, когда он инициализирован). Причина это требует особого рассмотрения, заключается в том, что когда DataTables инициализирован и находится в скрытом элементе, браузер не имеет любые измерения, с помощью которых можно предоставить DataTables, и это потребует при смещении столбцов при включении прокрутки.

Метод обойти это - вызвать API-интерфейс fnAdjustColumnSize функция. Эта функция будет вычислять ширину столбцов, которые необходимо на основе текущих данных, а затем перерисовать таблицу, которая точно, что необходимо, когда таблица становится видимой для первого время. Для этого мы используем метод show, предоставляемый таблицами jQuery UI. Мы проверяем, был ли создан 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 ] }
        ]
    } );
} );

Подробнее см. .

Ответ 2

Вы захотите настроить две переменные при инициализации dataTables: 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' }
        ]  
    });

Более подробную информацию об инициализации dataTables можно найти на http://datatables.net/usage

Следите за взаимодействием между этим параметром widhts и применяемым CSS. Вы можете прокомментировать свой существующий CSS, прежде чем пытаться это увидеть, насколько вы близки.

Ответ 3

Ну, я не знаком с этим плагином, но мог ли вы reset стиль после добавления datatable? Что-то вроде

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

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

Ответ 4

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

Ответ 5

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

table-layout: fixed;

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

LoadTable = $('#LoadTable').dataTable.....

тогда магическая строка css пойдет в класс Loadtable

#Loadtable {
margin: 0 auto;
clear: both;
width: 100%;
table-layout: fixed;

}

Ответ 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%");
        }

    });

Ответ 7

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

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

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

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

Ответ 8

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

Ответ 9

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

Это работало отлично, чтобы настроить ширину всей таблицы. Спасибо @Peter Drinnan!

Ответ 10

Как и в Datatable 10.1, это прямолинейно. Просто поместите атрибут width в таблицу в HTML. то есть width = "100%", это переопределит все стили CSS, установленные DT.

Смотрите http://www.datatables.net/examples/basic_init/flexible_width.html

Ответ 11

Ни одно из решений здесь не работало. Даже пример на главной странице datatables не работал с инициализацией datatable в опции 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);

});

Ответ 12

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

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

Ответ 13

Вы делаете это в готовом мероприятии?

$(document).ready(function() { ... });

Размер, скорее всего, будет зависеть от полностью загруженного документа.

Ответ 14

Просто сказать, что у меня была такая же проблема, как и вы, хотя я просто применил JQuery к обычной таблице без Ajax. По какой-то причине Firefox не раскрывает таблицу после ее раскрытия. Я исправил проблему, поставив таблицу внутри DIV и применив эффекты к DIV.

Ответ 15

Для тех, у кого есть проблемы с настройкой ширины таблицы/ячейки с помощью плагина с фиксированным заголовком:

Datatables использует теги adad для параметров ширины столбца. Это потому, что его действительно единственный собственный html, поскольку большая часть внутреннего html таблицы создается автоматически.

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

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

Исходный thead "sWidth": параметры становятся переопределенными (сокращенными), потому что datatables считает, что ваша таблица по-прежнему имеет ширину по умолчанию% 100 - она ​​не распознает, что некоторые ячейки переполнены.

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

$(document).ready(function() {
  $('table').css('width', '120%');
  new FixedHeader(dTable, {
        "offsetTop": 40,
      });
});

Ответ 16

создайте свой фиксированный заголовок внутри "успеха" вашего вызова ajax, у вас не будет проблемы с выравниванием в заголовке и строках.

success: function (result) {
              /* Your code goes here */

    var table = $(SampleTablename).DataTable();

        new $.fn.dataTable.FixedHeader(table);
}

Ответ 17

Надеюсь, это поможет кому-то, кто все еще борется.

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

Для меня эта проблема возникает, если у вас есть боковая панель и контейнер, который фактически является смещением к этой боковой панели.

$(YourTableName+'_wrapper').addClass('mycontainer');

(я добавил панель панели по умолчанию)
И ваш класс:

.mycontainer{background-color:white;padding:5px;}

Ответ 18

найдите еще одну полезную ссылку об этой проблеме, и она решила мою проблему.

<table width="100%">
<tr>
    <td width="20%"> Left TD <td>
    <td width="80%"> Datatable </td>
</tr>
</table>

Таблица ширины синтаксиса Datatables

Ответ 19

У меня возникла аналогичная проблема, когда у меня был div, обернутый вокруг таблицы.

Добавление позиции: относительная фиксированная для меня.


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

Ответ 20

У меня была аналогичная проблема, когда содержимое таблицы было больше, чем верхний и нижний колонтитулы таблицы. Добавление div вокруг таблицы и настройка x-overflow, похоже, отсортировали эту проблему:

      

Ответ 21

Убедитесь, что все остальные параметры до того, как bAutoWidth и aoColumns введены правильно. Любой неправильный параметр до этого нарушит эту функциональность.

Ответ 22

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

th,td{
max-width:120px !important;
word-wrap: break-word
}

Ответ 23

Это мой способ сделать это.

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

Ответ 24

Я встречаюсь с той же проблемой сегодня.

Я использовал сложный способ решить эту проблему.

Мой код, как показано ниже.

$('#tabs').tabs({
    activate: function (event, ui) {
       //redraw the table when the tab is clicked
       $('#tbl-Name').DataTable().draw();
    }
});

Ответ 25

Это отлично работает.

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