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

Question

У меня проблема с управлением шириной таблицы с помощью плагина 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, вы видите это (обратите внимание на добавленную стиль = "ширина : 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%; 
} 

Answer 1

Проблема вызвана тем, что DataTable должен вычислить его ширину - но при использовании внутри вкладки, он не виден, следовательно, не может рассчитать ширину. Решение заключается в вызове «fnAdjustColumnSizing», когда отображается вкладка.

преамбула

В этом примере показано, как DataTables с прокруткой могут быть использованы вместе с помощью вкладок JQuery UI (или действительно любой другой способ, в котором таблица находится в скрытой (дисплей : элемент, когда ни один) он инициализируется). Причина, почему требует особого рассмотрения, заключается в том, что когда DataTables имеет значение , и он находится в скрытом элементе, браузер не имеет любых измерений, с помощью которых можно предоставить DataTables, и это потребует в смещении столбцов при прокрутке включен.

Метод, чтобы обойти это, вызвать функцию fnAdjustColumnSize API . Эта функция рассчитает ширину столбцов, которая составляет , необходимую на основе текущих данных, а затем перерисует таблицу - это именно то, что необходимо, когда таблица становится видимой для первого времени. Для этого мы используем метод show, предоставляемый таблицами jQuery UI. Мы проверяем, был ли создан 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 ] } 
     ] 
    }); 
}); 

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

Answer 2

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

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

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

Answer 3

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

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

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

Answer 4

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

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

Answer 5

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

Answer 6

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

Answer 7

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

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

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

Answer 8

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

Answer 9

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

Answer 10

Убедитесь, что все другие параметрами перед bAutoWidth & aoColumns являются правильно entered.Any неправильный параметр, прежде чем сломается этой функциональностью.

Answer 11

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

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

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

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

Answer 12

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

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

Answer 13

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

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

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

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

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

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

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

Answer 14

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

table-layout: fixed; 

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

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

то магия CSS линия будет идти в классе Loadtable

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

}

Answer 15

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

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

Answer 16

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

    }); 

Answer 17

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

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

Answer 18

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

}); 

Answer 19

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

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

Answer 20

создать fixedheader внутри «успеха» вашего АЯКС вызова, вы не будете иметь никаких проблем выравнивания в заголовке и строках.

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

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

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

Answer 21

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

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

Answer 22

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

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

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

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

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

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

Answer 23

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

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

Answer 24

найти другую полезную ссылку об этой проблеме, и она решила мою проблему.

<table width="100%"> 
<tr> 
    <td width="20%"> Left TD <td> 
    <td width="80%"> Datatable </td> 
</tr> 
</table> 

Datatables force width table

Answer 25

я встретиться с той же проблемой сегодня.

Я использовал сложный способ решить эту проблему.

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

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