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

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

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

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

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

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

после .объект DataTable называть?

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

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

table-layout: fixed;

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

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 на dataTable инициализация решила мою (аналогичную) проблему. Люблю переполненную стопку.

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

это отлично работало для регулировки всей ширины таблицы. Спасибо @Peter Drinnan!

Как на 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%;
}