jquery datatables word wrap не работает

Question

Столбец datatable выглядит шире, если значение слишком велико.

я следующее this и this. и настройки ширины:

aTable = $("#printdata").dataTable({ 
    "bAutoWidth" : false, 
    "bRetrieve" : true, 
    "scrollY": 200, 
    "scrollX": true, 
    "deferRender": true, 
    "scroller": { 
      loadingIndicator: true 
      }, 
    "bServerSide": true, 
    "bProcessing": true, 
    "sAjaxSource": 'show2ndsampling.php', 
    "fnServerData": function (sSource,aoData,fnCallback){ 
      $.ajax({ 
        "dataType":'json', 
        "type":'POST', 
        "url":sSource, 
        "data":aoData, 
        "success":function(json){ 
          fnCallback(json); 
          } 
        }); 
      }, 
    "order" : [[1,"desc"]], 
    "aoColumns" : [ 
    /*serial*/{ "width": "30%", target : 3 } 
    ] 

Но нет никаких изменений в моей DataTable.

Answer 1

Я хотел бы сделать это

table.dataTable tbody td { 
    word-break: break-word; 
    vertical-align: top; 
} 

демо ->http://jsfiddle.net/qh63k1sg/

Это подразумевает, что autoWidth устанавливается в ложь, и вы дали столбцы фиксированную ширину (как в демо и как ОП описал, что он делает с aoColumns/columns).

Answer 2

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

Это означает:

1. если вы создаете ответ на базе sql query -> вы должны оптимизировать его и добавить пробел в вашем quesry.
2. Если вы делаете это в шаблоне -> подготовьте данные о храмовой части, например, на PHP
3. Если вы делаете это на передней части, сделайте это в режиме JS.

PHP путь:

$result = array(/* your result */); 
foreach($result as &$answer){ 
    $answer = implode(", ", explode(",", $answer)); 
} 

JS путь:

var result = [/* your result */]; 
for(var index = 0; index < result.length; i++){ 
    result[index] = result[index].split(",").join(", "); 
} 

Answer 3

Вы можете исправить это с помощью CSS.

table /* give class of table*/ 
{ 
    table-layout: fixed; 
} 

table td 
{ 
    word-wrap:break-word; 
    overflow: hidden; 
}