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, вы видите это (обратите внимание на добавленный style = "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 (или даже с любым другим методом, при котором таблица находится в скрытом (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 ] }
        ]
    } );
} );

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

При инициализации таблиц данных вы захотите настроить две переменные: 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

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

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

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

$("#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 (), ширина таблицы будет установлена ​​на 100 пикселей вместо 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"}]
});

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

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

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

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

См. Это http://www.datatables.net/examples/basic_init/f flexible_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 (функция () {...});

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

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

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

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

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

Исходная thead "sWidth": параметры переопределяются (сокращаются), потому что datatables считает, что ваша таблица все еще имеет ширину по умолчанию% 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>

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

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

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

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

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