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

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

小提琴手

html代码：

<table id="example" class="display" cellspacing="0" width="100%"></table>

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

js代码：

<table id="example" class="display" cellspacing="0" width="100%"></table>

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

var detailsSample=“DataTables及其扩展是非常可配置的库，它们对HTML表的增强功能的几乎每个方面都可以定制。可以启用、禁用或定制功能，以满足您对表实现的确切需求。”
var dataList=[]；
对于（var i=1；i不确定是否添加样式表，但将表布局设置为“固定”，并在空白处添加。当前您使用的是空白：无换行，这会否定您尝试执行的操作。此外，我还为所有td设置了最大宽度，因此每当出现溢出时都会发生这种情况

将其添加到jQUery的末尾


如果您只想使用api，请执行此操作（添加CSS以更改样式）

如果要使用CSS，请执行以下操作：

table {
  table-layout:fixed;
}
table td {
  word-wrap: break-word;
  max-width: 400px;
}
#example td {
  white-space:inherit;
}

通过将列数据包装到div中并设置div的空格、宽度和css属性，找到了解决方案

小提琴手：

<table id="example" class="display" cellspacing="0" width="100%"></table>

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

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

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

jquery datatable中是否有任何api可用于处理此问题？+1从我这里获得一个可能的解决方案。因此，您希望在jquery中完成这一切，而不使用css？$（“#示例td”）.css（'white-space'，'initial'））；在滚动过程中，似乎word wrap不起作用。在fiddler中，请滚动到ID值50以上…是的，滚动超过38时，看起来会去掉任何CSS。不知道如何修复。没问题。我的列表中仍有此任务，正在探索选项…我不知道“渲染”直到我看到你的答案。非常有用！解决了我在列中遇到的许多其他问题。在我看来，这是让它们以你想要的方式运行的最可靠的方法。应用这些后，我的搜索文本框从dataTable中消失，如何处理这两个问题。@Rishi，设置搜索：true@VimalanJayaGanesh，这将给我一个全球文件但在应用上述属性之前，我有基于列的过滤器，这意味着每个属性中都有文本框column@Rishi，上面的代码不包括列级筛选器。您如何在代码中添加列级筛选器？能否在fiddler中共享您的代码？我可以看看如何实现列级筛选器以及如何显示列级筛选器.