Указание фиксированной ширины столбца в jQuery Datatables
Я пытаюсь указать фиксированную ширину для нескольких столбцов в jQuery datatable. Я попытался выполнить это с помощью определений столбцов, указанных в документация объекты DataTable, но столбец и заголовок столбца по-прежнему получают автоматический размер.
вот jsFiddle, с которым я работал:jsFiddle
JavaScript:
var table = $('#example2').DataTable({
"tabIndex": 8,
"dom": '<"fcstTableWrapper"t>lp',
"bFilter": false,
"bAutoWidth": false,
"data": [],
"columnDefs": [
{
"class": 'details-control',
"orderable": false,
"data": null,
"defaultContent": '',
"targets": 0
},
{
"targets": 1},
{
"targets": 2,
"width": "60px"},
{
"targets": 3,
"width": "1100px"},
{
"targets": 4},
{
"targets": "dlySlsFcstDay"},
{
"targets": "dlySlsFcstWkTtl",
"width": "60px"}
],
"order": [
[1, 'asc']
]
});
HTML-код:
<div class="forecastTableDiv">
<table id="example2" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th colspan="5"></th>
<th class="slsFiscalWk" colspan="8">201424</th>
<th class="slsFiscalWk" colspan="8">201425</th>
<th class="slsFiscalWk" colspan="8">201426</th>
<th class="slsFiscalWk" colspan="8">201427</th>
</tr>
<tr>
<!--<th></th>-->
<!--<th>Vendor</th>-->
<!--<th>Origin ID</th>-->
<!--<th>Destination</th>-->
<!--<th>Vendor Part Nbr</th>-->
<!--<th>SKU</th>-->
<!--<th>Mon</th>-->
<!--<th>Tue</th>-->
<!--<th>Wed</th>-->
<!--<th>Thu</th>-->
<!--<th>Fri</th>-->
<!--<th>Week Ttl</th>-->
<th></th>
<th>Vendor</th>
<th>Origin ID</th>
<th style="width: 200px">Vendor Part Nbr</th>
<th>SKU</th>
<!-- First week -->
<th class="dlySlsFcstDay" >Mon</th>
<th class="dlySlsFcstDay" >Tue</th>
<th class="dlySlsFcstDay" >Wed</th>
<th class="dlySlsFcstDay" >Thu</th>
<th class="dlySlsFcstDay" >Fri</th>
<th class="dlySlsFcstDay" >Sat</th>
<th class="dlySlsFcstDay" >Sun</th>
<th class="dlySlsFcstWkTtl" >Week Ttl</th>
<!-- Second week -->
<th class="dlySlsFcstDay" >Mon</th>
<th class="dlySlsFcstDay" >Tue</th>
<th class="dlySlsFcstDay" >Wed</th>
<th class="dlySlsFcstDay" >Thu</th>
<th class="dlySlsFcstDay" >Fri</th>
<th class="dlySlsFcstDay" >Sat</th>
<th class="dlySlsFcstDay" >Sun</th>
<th class="dlySlsFcstWkTtl" >Week Ttl</th>
<!-- Third week -->
<th class="dlySlsFcstDay" >Mon</th>
<th class="dlySlsFcstDay" >Tue</th>
<th class="dlySlsFcstDay" >Wed</th>
<th class="dlySlsFcstDay" >Thu</th>
<th class="dlySlsFcstDay" >Fri</th>
<th class="dlySlsFcstDay" >Sat</th>
<th class="dlySlsFcstDay" >Sun</th>
<th class="dlySlsFcstWkTtl" >Week Ttl</th>
<!-- Fourth and final week -->
<th class="dlySlsFcstDay" >Mon</th>
<th class="dlySlsFcstDay" >Tue</th>
<th class="dlySlsFcstDay" >Wed</th>
<th class="dlySlsFcstDay" >Thu</th>
<th class="dlySlsFcstDay" >Fri</th>
<th class="dlySlsFcstDay" >Sat</th>
<th class="dlySlsFcstDay" >Sun</th>
<th class="dlySlsFcstWkTtl" >Week Ttl</th>
</tr>
</thead>
<tfoot>
</table>
</div>
когда я проверяю живой код, я вижу, что ширина, которую я указываю в определении столбца, добавляется в столбец как атрибут стиля, но она не соответствует фактической ширине столбца.
3 ответов
Это не проблема DataTables. См.как определяются ширины столбцов. На основе этого алгоритма я вижу два возможных решения.
Решение 1
вычислите ширину таблицы и установите ее соответственно.
#example {
width: 3562px;
}
см. живой пример здесь:http://jsfiddle.net/cdog/jsf6cg6L/.
решение 2
установите минимальную ширину содержания (MCW) каждой клетки и позвольте агенту пользователя для определения ширины столбцов.
для этого добавьте классы в целевые столбцы, чтобы иметь возможность их стилизовать:
var table = $('#example').DataTable({
tabIndex: 8,
dom: '<"fcstTableWrapper"t>lp',
bFilter: false,
bAutoWidth: false,
data: [],
columnDefs: [{
class: 'details-control',
orderable: false,
data: null,
defaultContent: '',
targets: 0
}, {
targets: 1
}, {
class: 'col-2',
targets: 2
}, {
class: 'col-3',
targets: 3
}, {
targets: 4
}, {
targets: 'dlySlsFcstDay'
}, {
targets: 'dlySlsFcstWkTtl'
}],
order: [[1, 'asc']]
});
затем установите желаемое значение свойства минимальной ширины для каждого класса:
.col-2,
.dlySlsFcstWkTtl {
min-width: 60px;
}
.col-3 {
min-width: 1100px;
}
см. живой пример здесь:http://jsfiddle.net/cdog/hag7Lpm5/.
вот пример кода (исправлена ширина столбца для Таблица 4 столбцов):
- установить autoWidth: false;
- установите значения px в первые 3 столбца;
- важно: проверьте, если ширина таблицы немного больше, чем 3 столбца + окончательный;
-
изменить ширину таблицы и 4 колонки.
$('#example').DataTable({ //four column table autoWidth: false, //step 1 columnDefs: [ { width: '300px', targets: 0 }, //step 2, column 1 out of 4 { width: '300px', targets: 1 }, //step 2, column 2 out of 4 { width: '300px', targets: 2 } //step 2, column 3 out of 4 ] });
задать ширину таблицы , 4*300 пикселей:
#example { width: 1200px };
в результате вы увидите 1-е 3 столбца с шириной 300px, а окончательный будет гибким и около 150px (что требует дополнительной настройки).
последнее, но не менее: фиксированный размер столбца 300px не помешает вам в случае, когда ячейка содержит слишком длинное (> 300px без пробелов) слово. Так что вы должны иметь в виду, что все слова должны быть меньше фиксированной части вашей колонки.
на <table> тег или css class or css id добавьте следующий стиль:
`table{
margin: 0 auto;
width: 100%;
clear: both;
border-collapse: collapse;
table-layout: fixed;
word-wrap:break-word;
}`