jquery 數據表 - 設置列寬和換行文本

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的white-space，width 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

不確定是否添加樣式表，但將表格布局設置為固定並添加到空白區域。 目前你正在使用白色空間：無包裝，否定了你正在嘗試做的事情。 另外，我為你的所有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%;
   }