Question

我在我的项目中使用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 CODE

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

Answer 1

使用此CSS代码段，您可以指示浏览器使用id属性/proc/<PID>/fd保留表标记中的空格：

marketViewStatusDT

如果你想要包装仍然有效：

#marketViewStatusDT{
    white-space:pre; 
}

Answer 2

HTML始终将1个或多个空格渲染为1个空格。如果您需要多个

，请使用 

Answer 3

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

Datatable JQuery：

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

CSS：

td.whitespace {
    white-space: pre;
}

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

3 个答案: