jquery 数据表 - 设置列宽和换行文本 [英] 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" }               
            ]
    } );

期待

在上表中，详细信息"列的宽度应始终为 400 像素，并且该列中的文本应换行.

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 数据表 - 设置列宽和换行文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！