2016-06-21 171 views
1

如果值太长,我的数据表的列看起来更宽。jquery datatables换行不起作用

enter image description here

我有以下thisthis。 和设置宽度:

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 } 
    ] 

但在我的数据表没有改变。

+0

这意味着你的单词没有空格。这就是为什么会发生。 – xAqweRx

+1

单词有空格时,单词换行正在工作。 –

+1

请发布您的完整数据表初始化代码 – Yuri

回答

2

我会做这个

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

演示 - >http://jsfiddle.net/qh63k1sg/

这意味着autoWidth被设置为false,你给列一个固定的宽度(如演示和OP所描述的他与aoColumns/columns)。

+0

是的正确我设置'autowidth:false'。 – nunu

1

现在,我可以告诉你,显示数据的最佳方法是修改你的输出。

这意味着:

  1. 如果你创建的sql query基准响应 - >您应该优化 它和你的quesry添加一个空格。
  2. 如果你在模板中做准备 - >在templete部分上准备数据,例如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(", "); 
} 
0

您可以用CSS解决这个问题。

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

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