jQuery datatable-设置列宽并换行 [英] jquery datatable - set column width and wrap text

问题描述

我们正在将jQuery数据表的Scroller插件用于虚拟滚动.但是，由于用户希望查看整个文本而不是被截断的文本，因此我们需要支持将文本包装在单元格内.我观察到默认情况下它不包装文本.有没有一种方法可以支持此功能?有任何可行的解决方法?

We are using the Scroller plugin for our jquery data table to allow virtual scrolling. However, we have requirement to support text wrapping inside a cell, as user would like to view the entire text instead of truncated one. I observed that it does not wrap the text by default. Is there a way to support this feature? Any possible workaround?

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

期望

在上表中，详细信息"列的宽度应始终为400px，该列中的文字应自动换行.

In the above table, the "Details" column should always have a width of 400px and the text in that column should wrap.

任何建议将不胜感激.

推荐答案

通过将列数据包装在div中并为div设置空白，宽度css属性来找到解决方案.

Found the solution by wrapping the column data in a div and setting the white-space, width css properties for the div.

提琴手:: 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;
}

这篇关于jQuery datatable-设置列宽并换行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！