Question

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

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

期望

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

任何建议都将不胜感激。

Answer 1

通过将列数据包装在div中并设置div的white-space，width css属性来找到解决方案。

<强>的Fiddler： 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

不确定是否添加样式表，但将表格布局设置为固定并添加到空白区域。目前你正在使用白色空间：无包装，否定了你正在尝试做的事情。另外，我为你的所有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%;
   }

jquery datatable - 设置列宽和换行文本

3 个答案: