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" }               
            ]
    } );

期待

在上表中，“详细信息”列的宽度应始终为 400 像素，并且该列中的文本应换行。

任何建议将不胜感激。

Answer 1

通过将列数据包装在 div 中并设置 div 的空白、宽度 css 属性找到了解决方案。

提琴手：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

不确定是否添加样式表，但将表格布局设置为固定并添加空白。目前您正在使用 white-space: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;
}

Answer 3

JS代码：

           'columnDefs': [{
                render: function (data, type, full, meta) {
                    let instaText = (data != null && data.length > 25) ? data.substr(0, 25) : data == null?"":data;
                    return '<div class="text-overflow" title='+'"'+ data +'"' +'>' + instaText + '</div>';
                },
                targets: [27]
            }],

CSS：

   {
     overflow: hidden;
     text-overflow: ellipsis;
     max-width: 80%;
   }