jQuery DataTables不会使用JSON数据保留多个空格 [英] jQuery DataTables does not preserve multiple whitespaces using JSON data

问题描述

我在我的项目中使用jQuery DataTables.我正在使用ajax提取数据作为JSON并使用它初始化数据表，但是如果数据列包含的值为 ABC XYZ (请注意ABC和XYZ之间有2个空格)，则在呈现的输出中不会保留多个空格.

I am using jQuery DataTables in my project. I am fetching data as JSON using ajax and initializing datatable using that, but if data column contains value as ABC XYZ (Note there are 2 spaces between ABC and XYZ) multiple whitespaces are not preserved in rendered output.

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

推荐答案

使用此CSS代码段，您指示浏览器在表标签中保留ID属性为 marketViewStatusDT 的空格:

Using this CSS snippet you instruct the browser to preserve whitespaces within the table tag with id attribute marketViewStatusDT:

#marketViewStatusDT{
    white-space:pre; 
}

如果您希望换行仍然有效:

If you want wrapping to still work:

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

这篇关于jQuery DataTables不会使用JSON数据保留多个空格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！