Таблицы данных jQuery:ширина контрольного стола
-
03-07-2019 - |
Вопрос
У меня проблема с управлением шириной таблицы с помощью плагина 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:0 пикселей;")
<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", когда появится вкладка.
Преамбула
В этом примере показано, как таблицы данных с прокруткой можно использовать вместе с вкладками пользовательского интерфейса jQuery (или любым другим методом, при котором таблица находится в скрытом элементе (display: none) при ее инициализации).Причина это требует особого рассмотрения, заключается в том, что когда DataTables инициализирован и находится в скрытом элементе, у браузера нет каких-либо измерений, с помощью которых можно выдавать DataTables, и для этого потребуется в случае несоосности столбцов при включенной прокрутке.
Способ обойти это - вызвать функцию fnAdjustColumnSizing API .Эта функция рассчитает ширину столбцов, которая необходима, на основе текущих данных, а затем перерисует таблицу - это именно то, что нужно, когда таблица становится видимой в первый раз.Для этого мы используем метод 'show', предоставляемый таблицами пользовательского интерфейса jQuery.Мы проверяем, была ли создана таблица данных или нет (обратите внимание на дополнительный селектор для 'div.dataTables_scrollBody', он добавляется при инициализации таблицы данных).Если таблица была инициализирована, мы изменим ее размер.Оптимизации могут быть добавлены, чтобы изменить размер только первый показ таблицы.
Код инициализации
$(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
Следите за взаимодействием между этим параметром ширины и 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(), ширина таблицы будет установлена в 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%");
}
});
Установка ширины явно с использованием sWidth
для каждого столбца И bAutoWidth: false
в dataTable
инициализация решила мою (аналогичную) проблему.Обожаю переполненную стопку.
Вы должны оставить хотя бы одно поле без фиксированного поля, например:
$('.data-table').dataTable ({
"bAutoWidth": false,
"aoColumns" : [
null,
null,
null,
null,
{"sWidth": "20px"},
{ "sWidth": "20px"}]
});
Вы можете изменить все, но оставить только одно значение null, чтобы оно могло растянуться.Если вы нанесете ширину на ВСЕ, это не сработает.Надеюсь, я кому-нибудь помог сегодня!
Добавьте этот css-класс на свою страницу, это устранит проблему:
#<your_table_id> {
width: inherit !important;
}
"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
Ни одно из приведенных здесь решений не сработало для меня.Даже пример на домашняя страница таблиц данных не сработало, следовательно, из-за инициализации 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.
Вы делаете это в событии ready?
$(document).ready(function() { ... });
Размер, скорее всего, будет зависеть от полной загрузки документа.
Для тех, у кого возникли проблемы с настройкой ширины таблицы / ячейки с помощью плагина fixed header:
Datatables использует теги ad для определения параметров ширины столбца.Это связано с тем, что это действительно единственный собственный html-код, поскольку большая часть внутреннего html-кода таблицы генерируется автоматически.
Однако происходит то, что некоторая часть вашей ячейки может быть больше ширины, хранящейся внутри ячеек thead.
То есть.если в вашей таблице много столбцов (широкая таблица), а в ваших строках много данных, то вызовите "sWidth".:изменение размера ячейки td не будет работать должным образом, потому что дочерние строки автоматически изменяют размер td на основе содержимого переполнения, и это происходит после таблица была инициализирована и ей были переданы параметры инициализации.
Оригинальная песня "sWidth":параметры переопределяются (сжимаются), потому что datatables считает, что ваша таблица по-прежнему имеет ширину по умолчанию %100 - она не распознает, что некоторые ячейки переполнены.
Чтобы исправить это, я вычислил ширину переполнения и учел ее, соответствующим образом изменив размер таблицы после таблица инициализирована - пока мы этим занимаемся, мы можем одновременно инициализировать наш фиксированный заголовок:
$(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');
(Я добавил панель panel-по умолчанию)
И твой класс :
.mycontainer{background-color:white;padding:5px;}
найдите другую полезную ссылку об этой проблеме, и она решила мою проблему.
<table width="100%">
<tr>
<td width="20%"> Left TD <td>
<td width="80%"> Datatable </td>
</tr>
</table>
Я столкнулся с аналогичной проблемой, когда обернул 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%;
}