jQuery Datatable - 设置列宽和换行文本。

Question

我们正在使用Scroller插件作为jQuery数据表的虚拟滚动，但我们有一个要求，支持单元格内文本换行，因为用户希望查看整个文本而不是被截断的部分。我注意到它默认情况下不会换行文本。是否有一种方法支持此功能？是否有任何可能的解决方法？ Fiddler https://jsfiddle.net/Vimalan/2koex0bt/1/ html Code:

<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的宽度，并且该列中的文本应自动换行。

非常感谢任何建议。

- JGV

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

（翻译：CSS）

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

- JGV

---

在看到你的答案之前，我对“render”一词毫不了解。非常有用！解决了我在处理列时遇到的很多其他问题。在我看来，这似乎是让它们按照你想要的方式运作最可靠的方法。 - Patrick Thorpe

应用这些后，我的搜索文本框从数据表中消失了，如何同时处理两者。 - Risheekant Vishwakarma

@Rishi，设置搜索：true - JGV

@VimalanJayaGanesh，这将为我提供一个全局筛选器，但在应用上述属性之前，我需要按列进行筛选，这意味着每个列中都有文本框。 - Risheekant Vishwakarma

@Rishi，上述代码没有包括列级筛选器。你是如何在你的代码中添加列级筛选器的？能否请你在Fiddler中分享你的代码？我可以看一下如何实现列以及显示列级筛选器。 - JGV

只是一个提醒，它不能防止HTML标签在数据中被删除。建议将数据包装在$.fn.dataTable.render.text().display(data)中。 - Liam Mitchell

Answer 2

不确定您是否已添加样式表，但请将table-layout设置为fixed并添加white-space。当前您正在使用white-space:no-wrap，这会否定您要做的事情。此外，我将所有td的max-width设置为一定值，因此只要出现溢出，就会发生这种情况。

在您的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;
}

- Keith

---

在jQuery DataTable中是否有任何API可用于处理此问题？如果有可能的解决方案，我会点赞。 - JGV

你想全部使用jQuery而不使用CSS吗？ - Keith

$('#example td').css('white-space','initial'); 看起来在滚动时自动换行不起作用。请在 Fiddler 中向下滚动到 ID 值大于 50... - JGV

是的，看起来在滚动超过38之后它会去掉任何CSS。不确定如何修复这个问题。 - Keith

没问题。我仍然把这个任务列在我的清单中，并正在探索选项... - JGV

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%;
   }

- Shahid Malik