jquery datatable - 设置列宽和包装文本

Question

我们正在使用我们的jQuery数据表的Scroller插件来允许虚拟滚动。但是，我们有要求支持文本包装在单元格内，因为用户希望查看整个文本而不是截断文本。我发现它默认不包装文本。有没有办法支持这个功能？任何可能的解决方法？

提琴手 https://jsfiddle.net/Vimalan/2koex0bt/1/

HTML代码：

<table id="example" class="display" cellspacing="0" width="100%"></table> 

JS代码：

var detailsSample = "DataTables and its extensions are extremely configurable libraries and almost every aspect of the enhancements they make to HTML tables can be customised. Features can be enabled, disabled or customised to meet your exact needs for your table implementations." 
var dataList = []; 

for (var i=1; i<=500; i++) 
{ 
    var dataRow = {}; 

    dataRow.ID = i; 
    dataRow.FirstName = "First Name " + i; 
    dataRow.LastName = "Last Name " + i; 

    if (i%5 ==0) 
    { 
     dataRow.Details = detailsSample; 
    } 
    else 
    { 
     dataRow.Details = "Large text "+i; 
    } 
    dataRow.Country = "Country Name"; 

    dataList.push(dataRow); 
} 

$('#example').DataTable({ 
       data:      dataList, 
     deferRender: true, 
     scrollX:    true, 
     scrollY:  200, 
     scrollCollapse: true, 
     scroller:  true, 
     searching:   false, 
     paging:     true, 
     info:     false, 
     columns: [ 
       { title: "ID", data: "ID" }, 
       { title: "First Name", data: "FirstName" }, 
       { title: "Change Summary", data: "LastName"}, 
       { title: "Details", data: "Details", "width": "400px" }, 
       { title: "Country", data: "Country" }    
      ] 
    }); 

期望

在上表中，“Details”列的宽度始终应该为400px，并且该列中的文本应该换行。

任何建议将不胜感激。

Answer 1

发现在一个div包装列数据和设置的空白，宽度CSS属性的DIV的解决方案。

提琴手：https://jsfiddle.net/Vimalan/2koex0bt/6/

JS

$('#example').DataTable({ 
     data:   dataList, 
     deferRender: true, 
     scrollX:  true, 
     scrollY:  200, 
     scrollCollapse: true, 
     scroller:  true, 
     searching:  false, 
     paging:   true, 
     info:   false, 
     columns: [ 
       { title: "ID", data: "ID" }, 
       { title: "First Name", data: "FirstName" }, 
       { title: "Change Summary", data: "LastName"}, 
       { title: "Details", data: "Details" }, 
       { title: "Country", data: "Country" }    
      ], 
      columnDefs: [ 
       { 
        render: function (data, type, full, meta) { 
         return "<div class='text-wrap width-200'>" + data + "</div>"; 
        }, 
        targets: 3 
       } 
      ] 
    }); 

CSS

.text-wrap{ 
    white-space:normal; 
} 
.width-200{ 
    width:200px; 
} 

Answer 2

不确定是否添加样式表，但将表格布局设置为固定并添加到空格中。目前您正在使用空格：no-wrap会否定您尝试执行的操作。另外，我为所有td设置了最大宽度，所以每当发生溢出时都会发生这种情况。

在您的jQuery

https://jsfiddle.net/2koex0bt/5/

$(document).ready(function(){ 
    $('#example').DataTable(); 
    $('#example td').css('white-space','initial'); 
}); 

结束。如果你只想使用API​​，这样做（加入了CSS改变造型）添加这一点。

如果你想用CSS来做到这一点，做到这一点：

table { 
    table-layout:fixed; 
} 
table td { 
    word-wrap: break-word; 
    max-width: 400px; 
} 
#example td { 
    white-space:inherit; 
}