title: DataTables server side processing returns data but doesnt display on table
body: <p>I'm having a bit problems with datatables and codeigniter server side processing...  </p>
  
  <p>I'm using this with codeigniter:<br>
  <a href="https://github.com/IgnitedDatatables/Ignited-Datatables/" rel="nofollow noreferrer">https://github.com/IgnitedDatatables/Ignited-Datatables/</a></p>
  
  <p>My code:</p>
  
  <pre><code>&lt;section class="theader-red"&gt;&lt;p&gt;Messages&lt;/p&gt;&lt;/section&gt;
  &lt;table cellpadding="0" cellspacing="0" border="0" class="table-white" id="messages"&gt;
      &lt;thead class="theader"&gt;
          &lt;tr&gt;
              &lt;th width="30%"&gt;&lt;p class="fix"&gt;From&lt;/p&gt;&lt;/th&gt;
              &lt;th&gt;Subject&lt;/th&gt;
              &lt;th width="200"&gt;Date&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td colspan="3" class="dataTables_empty"&gt;Loading messages...&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
      &lt;tfooter&gt;
  &lt;/table&gt;
  
  &lt;script type="text/javascript"&gt;
  fnServerObjectToArray = function ( aElements ){
      return function ( sSource, aoData, fnCallback ) {
          var csrf = {"name": "'.$this-&gt;security-&gt;get_csrf_token_name().'", "value":"'.$this-&gt;security-&gt;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&lt;iLen ; i++ ) {
                      var inner = [];
                      for ( var j=0, jLen=aElements.length ; j&lt;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" ])
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Json output:</p>
  
  <pre><code>{
      "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"
  }
  </code></pre>
  
  <p>Everything looks like it should be working.  </p>
  
  <p>But when I load page, it shows table like this:</p>
  
  <p><img src="https://i.stack.imgur.com/brD7n.png" alt="enter image description here">
  Any ideas what could be causing this and how to fix?</p>