2014-11-11 2 views
0

Это JavascriptDatatables aoColumns и bAutoWidth не работают?

$('#example').dataTable({"sPaginationType": "full_numbers", 
     "bAutoWidth": false, 
     "aoColumns": [ 
      { "width": "50%" }, 
      { "width": "100px" }, 
      { "width": "100px" }, 
      { "width": "50px" }, 
      { "width": "100px" } 
     ]}); 

Вместе с этой таблицей

<table cellpadding="0" cellspacing="0" border="0" class="" id="example"> 
<thead> 
<tr> 
    <th>Rendering engine</th> 
    <th>Browser</th> 
    <th>Platform(s)</th> 
    <th>Engine version</th> 
    <th>CSS grade</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td>Trident</td> 
    <td>Internet 
     Explorer 4.0</td> 
    <td>Win 95+</td> 
    <td> 4</td> 
    <td>X</td> 
</tr> 
<tr> 
    <td>Trident</td> 
    <td>Internet 
     Explorer 5.0</td> 
    <td>Win 95+</td> 
    <td>5</td> 
    <td>C</td> 
</tr> 
<tr> 
    <td>Trident</td> 
    <td>Internet 
     Explorer 5.5</td> 
    <td>Win 95+</td> 
    <td>5.5</td> 
    <td>A</td> 
</tr> 
<tr> 
    <td>Trident</td> 
    <td>Internet 
     Explorer 6</td> 
    <td>Win 98+</td> 
    <td>6</td> 
    <td>A</td> 
</tr> 
<tr> 
    <td>Trident</td> 
    <td>Internet Explorer 7</td> 
    <td>Win XP SP2+</td> 
    <td>7</td> 
    <td>A</td> 
</tr> 
</tbody> 
</table> 

заканчивает тем, что не таблица фиксированного размера.

Прежде всего, я не хочу, чтобы он был на 100% шириной, а во-вторых, положив px или% в js-части, не имеет никакого эффекта.

Я что-то пропускаю?

See here in this fiddle about the datatables auto column width problem

ответ

3

Прежде всего, я бы настоятельно рекомендуем вам обновить до 1.10.x ->http://www.datatables.net/download/ или, по крайней мере, последняя версия 1.9 серии, 1.9.4.

Затем да - при использовании 1.9.0, как и вы, (все версии 1.9.x), столбцы width имеют sWidth. Таким образом, вместо:

$('#example').dataTable({ 
    "sPaginationType": "full_numbers", 
    "bAutoWidth": false, 
    "aoColumns": [ 
     { "sWidth": "50%" }, 
     { "sWidth": "100px" }, 
     { "sWidth": "100px" }, 
     { "sWidth": "50px" }, 
     { "sWidth": "100px" } 
    ] 
}); 

Чтобы справиться с требованием «Я не хочу, чтобы ширина 100%» необходимо указать ширину для таблицы, или по крайней мере max-width. В противном случае данные datatables предполагают, что таблица должна быть 100% в ширину и, следовательно, расширять столбец на все, что осталось. Так что если вы хотите, чтобы таблица будет 700px, в качестве примера:

#example { 
    width: 700px; 
} 

вашей скрипки раздвоенного ->http://jsfiddle.net/9n5vrbnz/

Если вы хотите полностью фиксированную ширину , то есть, таблица и вводят элементы управления, такие как окно поиска и разбиение на страницы, которые должны храниться в пределах определенной ширины, вы можете создать стиль обертки. Он всегда называется <table id>_wrapper:

#example_wrapper { 
    width: 700px; 
} 

себе скрипку ->http://jsfiddle.net/1rce0d4k/

+0

@Toskan, да с курса это хак. Сегодня есть dataTables 1.10.x, который предоставляет API, чтобы эти хаки не были более важными - http://www.datatables.net/ – davidkonrad

Смежные вопросы