DataTables服务器端处理返回数据但不显示在表上

Question

我在数据表和codeigniter服务器端处理方面遇到了一些问题......

我正在使用codeigniter：
https://github.com/IgnitedDatatables/Ignited-Datatables/

我的代码：

<section class="theader-red"><p>Messages</p></section>
<table cellpadding="0" cellspacing="0" border="0" class="table-white" id="messages">
    <thead class="theader">
        <tr>
            <th width="30%"><p class="fix">From</p></th>
            <th>Subject</th>
            <th width="200">Date</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="3" class="dataTables_empty">Loading messages...</td>
        </tr>
    </tbody>
    <tfooter>
</table>

<script type="text/javascript">
fnServerObjectToArray = function ( aElements ){
    return function ( sSource, aoData, fnCallback ) {
        var csrf = {"name": "'.$this->security->get_csrf_token_name().'", "value":"'.$this->security->get_csrf_hash().'"};
        aoData.push(csrf);
        $.ajax( {
            "dataType": "json",
            "type": "POST",
            "url": sSource,
            "data": aoData,
            "success": function (json) {
                var a = [];
                for ( var i=0, iLen=json.aaData.length ; i<iLen ; i++ ) {
                    var inner = [];
                    for ( var j=0, jLen=aElements.length ; j<jLen ; j++ ) {
                        inner.push( json.aaData[i][aElements[j]] );
                    }
                    a.push( inner );
                }
                json.aaData = a;
                fnCallback(json);
            }
        } );
    }
}

$(document).ready(function() {
    $("#messages").dataTable({
        "sPaginationType": "full_numbers",
        "bLengthChange": false,
        "bFilter": false,
        "bInfo": true,
        "aoColumns": [
            {"mData": "message_from", sDefaultContent: "n/a"},
            {"mData": "message_subject", sDefaultContent: "n/a"},
            {"mData": "message_date", sDefaultContent: "n/a"},
        ],
        "oLanguage": {
            "sEmptyTable": "No messages"
        },

        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "'.base_url().'ajax_actions/table_process",
        "fnServerData": fnServerObjectToArray( ["message_from", "message_subject", "message_date" ])
    });
});
</script>

Json输出：

{
    "sEcho": 1,
    "iTotalRecords": 2,
    "iTotalDisplayRecords": 2,
    "aaData": [{
        "message_from": "test@example.com",
        "message_subject": "Test",
        "message_date": "2014-03-11 21:19:55"
    }, {
        "message_from": "test@example.com",
        "message_subject": "Test",
        "message_date": "2014-04-04 20:31:39"
    }],
    "sColumns": "message_from,message_subject,message_date"
}

一切看起来都应该有效。

但是当我加载页面时，它会显示如下表：

可能导致这种情况以及如何解决的任何想法？