jQuery DataTables does not preserve multiple whitespaces using JSON data

Question

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 Code

<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

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; 
}

Answer 2

In JQuery DataTables you have to allow white spaces for <td>. Its not enabled by default. Therefore, for specified td column you can write createdRow for allow white spaces for specific column as following example

Datatable JQuery:

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

CSS:

td.whitespace {
    white-space: pre;
}

Answer 3

HTML always renders 1 or more spaces a 1 space. use   if you need more then one