DataTable Not Rendering Rows Even Though JSON Response is Correct

VinnySaul

I'm implementing a DataTable that makes an AJAX call. Per the Chrome browser F12 console, it's receiving the correct JSON response but not rendering the rows. What do I have wrong?

Index.html:

<script type="text/javascript">
  $(document).ready(function () {
    var transactionSearchResultsTable = $('#transactionSearchResults').DataTable({
      "serverSide": true,
      "ajax": {
        "url": "@ajaxUrl",
        "type": "POST",
        "dataSrc": "dataArray",
      },
      "columns": [
        { "data": "rowSelection", "name": "", "autoWidth": true },
        { "data": "docId", "name": "Doc ID", "autoWidth": true }
      ]
    });
  });
</script>

<table id="transactionSearchResults" class="table table-striped table-bordered" style="width:100%">
  <thead>
    <tr>
      <th>Row Selection</th>
      <th hidden="hidden">Row Selection No.</th>
      <th>Doc ID</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td hidden="hidden"></td>
      <td></td>
    </tr>
  </tbody>
</table>

JSON response:

{"draw":0,
 "recordsTotal":75,
 "recordsFiltered":10,
 "dataArray":[{"rowSelection":1,"docId":"AC1B495B179D910E2F4000005E7D9060-1"},
              {"rowSelection":2,"docId":"AC1B495B179D910E48D000005E7D9079-1"},
              {"rowSelection":3,"docId":"AC1B495B179D8C533EA000005E7D9013-1"},
              {"rowSelection":4,"docId":"AC1B495B179D8C51A6F000005E7D8FDE-1"},
              {"rowSelection":5,"docId":"AC1B495B179D8C2ABA5000005E7D8FA9-1"},
              {"rowSelection":6,"docId":"AC1B495B179D2994B28000004982AB80-1"},
              {"rowSelection":7,"docId":"AC1B495B179D29929FA000004982A830-1"},
              {"rowSelection":8,"docId":"AC1B495B179CF49870C000004982A4E0-1"},
              {"rowSelection":9,"docId":"1b3625b67ed23b3d:1d4b1ae8:178ac04bf12:-7ff7"},
              {"rowSelection":10,"docId":"1b3625b67ed23b3d:1d4b1ae8:178ac04bf12:-7ff8"}
             ]
}

kthorngren

"draw":0,

This looks wrong. It should never be 0. When the Datatable initializes and sends its first request the draw parameter it sends is 1. It expects the response to contain the number that was sent in the request. It is essentially a sequence number. See the Server side processing docs for more details.

Are you going to have many thousands of rows that will need server side processing? If not remove the "serverSide": true, option and let the client handle the searching, sorting and paging functions. Its much simpler.

Kevin

VinnySaul

@kthorngren Thanks for for the "draw" catch. I now have the controller response returning back the draw parameter as is in the request. However, rows are still not rendering even though the response data is valid. Yes, I can expect thousands of rows in response:

JSON response:

{"draw":1,
 "recordsTotal":75,
 "recordsFiltered":10,
 "dataArray":[{"rowSelection":1,"docId":"AC1B495B179D910E2F4000005E7D9060-1"},
              {"rowSelection":2,"docId":"AC1B495B179D910E48D000005E7D9079-1"},
              {"rowSelection":3,"docId":"AC1B495B179D8C533EA000005E7D9013-1"},
              {"rowSelection":4,"docId":"AC1B495B179D8C51A6F000005E7D8FDE-1"},
              {"rowSelection":5,"docId":"AC1B495B179D8C2ABA5000005E7D8FA9-1"},
              {"rowSelection":6,"docId":"AC1B495B179D2994B28000004982AB80-1"},
              {"rowSelection":7,"docId":"AC1B495B179D29929FA000004982A830-1"},
              {"rowSelection":8,"docId":"AC1B495B179CF49870C000004982A4E0-1"},
              {"rowSelection":9,"docId":"1b3625b67ed23b3d:1d4b1ae8:178ac04bf12:-7ff7"},
              {"rowSelection":10,"docId":"1b3625b67ed23b3d:1d4b1ae8:178ac04bf12:-7ff8"}
             ]
}

kthorngren

Check your browser's console for errors. I just noticed that you defined 3 columns in HTML but only two in Datatables. When using columns.data all the columns need to be defined. If all the columns aren't returned from the server you can use defaultContent along with data: null to define those columns. See the last example in the docs.

Kevin