jQuery DataTables: ширина таблицы управления

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

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

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

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

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

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

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%");
        }

    });

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

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

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

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

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

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

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

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

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

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

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

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

});

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

вы делаете это в готовом событие?

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

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

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

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

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

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

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

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

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

создайте свой fixedheader внутри "успеха" вашего вызова 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();
    }
});

Это прекрасно работает.

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