datatables column properties

datatables column properties

本文关键字：properties column datatables      更新时间：2023-09-26

我使用的是DataTables表组件，其中一列有很长的数据行。目前，这些数据基本上是通过将列宽扩展到适合数据所需的宽度，从而添加水平滚动条来显示的。

我想限制列像这样扩展，并限制文本换行。

这就是当前代码看起来像的样子

var dt = $(document).ready(function() {
    var dt =$('#feedback-data-table').DataTable( {
        ajax: {
            url: "http://127.0.0.1:7101/Oats/rest/v1/testidmap?onlyData=true&limit=999",
            dataSrc: "items"
        },
        columns: [
            { title: "Test Name", data: "TestName" },
            { title: "User Activity Info (~ separated)", data: "Useractivityinfo"}
        ]
    } );
} );

请告知如何实现这一目标。像这样添加宽度："100px"是行不通的。

解决方案

您可以对包含长文本的列使用CSS规则word-break: break-all;，该列在任何字符之间都没有任何空格来分隔单词。

JavaScript

$(document).ready(function (){
    var table = $('#example').DataTable({
       columnDefs: [
          { targets: 5, className: "word-break-all" }
       ]
    });
});

CSS:

.word-break-all {
   word-break:break-all;
}

有关详细信息，请参见word-break。

演示

有关代码和演示，请参阅此jsFiddle。

您能使用以下CSS并查看吗？

table {
   table-layout:fixed;
}
th {
   word-rap: break-word
}
相关文章：