Jquery datatable -设置列宽度和换行文本

jquery datatable - set column width and wrap text

本文关键字：换行 文本 置列宽 datatable Jquery      更新时间：2023-09-26

我们正在为jquery数据表使用滚动插件来允许虚拟滚动。但是，我们需要在单元格内支持文本换行，因为用户希望查看整个文本而不是截断的文本。我注意到它默认情况下不换行文本。是否有办法支持这个特性?有什么可行的解决方法吗?

提琴手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，并且该列中的文本应该是换行的。

通过将列数据包装在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;
}

不确定是否添加了样式表，但将表格布局设置为fixed并添加空白。目前，您正在使用空白:不换行，这否定了您正在尝试做的事情。此外，我设置了一个最大宽度为所有的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;
}

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%;
   }
相关文章：