jQuery DataTables: ширина контрольной таблицы


98

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

К вашему сведению, я только что столкнулся с проблемой, когда столбец неправильно настраивался в IE8. Виновником было изображение, для которого max-widthзадано свойство. Очевидно, IE8 не слишком любит это свойство и игнорирует его по отношению к таблицам данных, хотя размер изображения на экране был соответствующим. Измените его, чтобы widthустранить проблему.
Джон Бубриски

Ответы:


61

Проблема вызвана тем, что 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 ] }
        ]
    } );
} );

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


1
У меня также есть такая же проблема с @John McC, однако я применил свой datatable к модальному, я использую bootstrap, и я застрял с этой проблемой ... вы знаете, как реализовать его, используя модальный bootstrap вместо вкладок ?. .i действительно нужна твоя помощь
cfz

рекомендую использовать window.resize, посмотрите пример legacy.datatables.net/ref#fnAdjustColumnSizing
KingRider

"aoColumnDefs": [{"sWidth": "10%", "aTargets": [-1]}]. Я исправил свою проблему, просто добавь это, спасибо.
Mina chen

55

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


ммм. вы говорите, что это результат того, что bAutoWidth: true делает не очень разумный выбор ширины столбца.
Джон Мак,

Я так думаю. Мои таблицы колеблются, если данные непоследовательны по длине. Вот почему я ввел параметры aoColumns и bAutoWidth.
artlung

1
прекрасный. полностью исправил мою проблему.
Laguna

Замечательно @Laguna! Мне нравится слышать, что такие старые ответы продолжают быть полезными.
artlung

1
"bAutoWidth": false работает. Но просто вопрос. Это хорошая практика или нет, если я добавляю информацию о ширине в свои теги <th>?
finnTheHumin

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

2
Для меня это был правильный ответ. Я использую boostrap .table-responseive. С установкой кода datatable это собственная ширина, это мешает.
mac10688

Пришел сюда, чтобы опубликовать свое решение этой глупой проблемы, связанной с удалением свойства ширины в событии изменения вкладки, но, похоже, это исправило его. Спасибо. +1
Тофер

У меня есть 3 вкладки и таблицы данных на первых двух вкладках, таблица на второй вкладке не была полной шириной. это устранило мою проблему. спасибо
Майк Волмар

47

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

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

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


1
Я обнаружил, что это также лучшее решение, потому что в моем случае ширина таблицы также была установлена ​​на 100 пикселей, когда любой из столбцов был сделан невидимым - см. Здесь: datatables.net/forums/discussion/3417/…
mydoghasworms 02

Это решение, которое сработало для меня. он дает более точный контроль над css таблицы данных по сравнению с oTable.fnAdjustColumnSizing (); решение, упомянутое ранее.
Виджей Румао, 09

11

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

table-layout: fixed;

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

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

тогда волшебная строка css войдет в класс Loadtable

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

}


2
Это помогает, но теперь все мои столбцы странного размера. Я ожидал, что столбцы с наибольшим количеством данных будут иметь наибольшую процентную ширину.
cjbarth

7

Решение 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%");
        }

    });

6

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

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

1
У меня была отдельная проблема, с которой я боролся последние 30 минут - эта строка кода исправила ее - поэтому я просто хотел сказать спасибо за этот случайный комментарий.
user1274820 06

1
Именно поэтому я даю дополнительные ответы
Бахадир Тасдемир

5

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


5

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

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

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

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


1
Это было для меня, я установил для всех столбцов 1 пиксель. Если оставить один, он волшебным образом сработает. Спасибо!
demoncodemonkey

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

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


Мне не удалось заставить таблицу правильно заполнить родительский контейнер. Пытался настроить css таблицы и ее оболочки на ширину: 100%; без заметной разницы. Как только я попробовал вышеупомянутый метод, он творит чудеса, однако я не указал на оболочку, вместо этого мне пришлось указать на саму таблицу. Но большое спасибо Нилани !!
Logic1


3

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

});

2

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


2

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

$ (документ) .ready (функция () {...});

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


взгляните на код выше - это происходит в обратном вызове из загрузки ajax контейнера div # tab-datasets. Таблица #querytableDatasets предоставляется / cgi-bin / qryDatasets
Джон Мак,

Я понимаю это, я не уверен, когда это произойдет. Глядя на исходный код плагина, казалось, что единственный раз, когда он мог установить ширину 0px, - это когда он не мог определить правильную таблицу offSetWidth, и я решил, что это связано с слишком ранним запуском.
Mufaka 04

хм. Я предположил, что обратный вызов из загрузки ajax вызывается после загрузки таблицы #querytableDatasets. вы думаете, что это может быть не так?
Джон Мак,

Кстати, чтобы ответить на ваш вопрос о том, когда это запускается, это в ответ на то, что пользователь нажимает кнопку
Джон Мак,

Хм, не уверен, что смогу добавить что-нибудь еще. Если это нажатие кнопки, документ полностью загружен, и нет причин помещать это в событие готовности. Вы можете поиграть с шириной контейнера таблицы или попытаться заставить их (плагин DataTables) работать вне вашего текущего макета.
Mufaka 05

1

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

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

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

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

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

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

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

1

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

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

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

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

1

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

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

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

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

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

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


0

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

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


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

0

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


0

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


0

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

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

0

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

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

0

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

Я решил ее хитрым способом.

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

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

0

Проверьте и это решение. это легко решило мою проблему ширины столбца 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();
} );

См. Документацию: вкладки "Прокрутка" и "Загрузка".


-1

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

#report_container {
   float: right;
   position: relative;
   width: 100%;
}
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.