jQuery DataTables 不使用 JSON 数据保留多个空格答案

【问题标题】：jQuery DataTables does not preserve multiple whitespaces using JSON datajQuery DataTables 不使用 JSON 数据保留多个空格
【发布时间】：2015-02-13 16:18:33
【问题描述】：

我在我的项目中使用 jQuery DataTables。我正在使用 ajax 以 JSON 格式获取数据并使用它初始化数据表，但如果数据列包含 ABC XYZ 的值（注意 ABC 和 XYZ 之间有 2 个空格），渲染输出中不会保留多个空格。

JSP 代码

<table id="marketViewStatusDT" class="display" style="cellspacing:0;width:100%;background-color: #ffffff;" >
    <thead>
        <tr>
            <th style="width:12%;height:30px;" class="aleft">UTI</th>
            <th style="width:5%;height:30px;" class="aleft">Source&nbsp;&nbsp;</th>                         
        </tr>
    </thead>
</table>

JS 代码

marketViewStatusDT = $("#marketViewStatusDT").DataTable( {
    "sDom": '<"H"l<"toolbar">p>t<"F"ip>',
    "bDestroy":true,
    "bProcessing" : true,
    "bServerSide" : true,
    "bLenthChange" : false,
    "bJQueryUI" : false,
    "lengthMenu": [[20, 50, 100], [20, 50, 100]],
    "bSort" : true,
    "bFilter": false,
    "bPaginate": true,
    "bSearchable": true,
    "pagingType": "full",
    "scrollY": calcDataTableHeight(),
    "scrollX": true,
        "sAjaxSource" : "fetchData.html",
        "aoColumns": [
            { "mData": "uti",},
            { "mData": "source",}           
        ],
});

【问题讨论】：

标签： jquery datatables

【解决方案1】：

使用此 CSS sn-p，您可以指示浏览器在 id 属性为 marketViewStatusDT 的 table 标记中保留空格：

#marketViewStatusDT{
    white-space:pre; 
}

如果您希望包装仍然有效：

#marketViewStatusDT{
    white-space:pre-wrap; 
}

【讨论】：

【解决方案2】：

在 JQuery DataTables 中，<td> 必须允许空格。默认情况下未启用。因此，对于指定的 td 列，您可以编写 createdRow 以允许特定列的空格，如下例所示

数据表 JQuery：

$(document).ready(function() {
    $('#example').DataTable( {
        "createdRow": function ( row, data, index ) {
            $('td', row).eq(1).addClass('whitespace');
        }
    } );
} );

CSS：

td.whitespace {
    white-space: pre;
}

【讨论】：

【解决方案3】：

HTML 总是以 1 个空格呈现 1 个或多个空格。如果您需要更多，请使用&nbsp;

【讨论】：