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 10.1, это прямо. Просто поместите атрибут ширины вашей таблицы в HTML. то есть width = "100%", это переопределит все стили CSS, установленные DT.

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

Answer 2

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

});

Answer 3

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

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

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

Answer 4

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

Answer 5

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

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

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

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

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

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

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

Answer 6

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

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

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

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

Answer 7

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

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

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

Answer 8

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

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

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

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

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

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

Answer 9

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

Я использовал хитрый способ ее решения.

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

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

Answer 10

Я столкнулся с подобной проблемой, когда div обернул вокруг стола.

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

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