DataTables ajax requires explicit json collection

Question

I recently ran into a problem when implementing the ajax functionality of jquery DataTables. Until I actually gave my json object collection an explicit name I couldn't get anything to display. Shouldn't there be a default data source if nothing named is returned?

Client Side control setup (includes hidden field that supplies data to dynamic anchor:

 $('#accountRequestStatus').dataTable(
      {
          "destroy": true,  // within a method that will be called multiple times with new/different data
          "processing": true,
          "ajax":
              {
                  "type": "GET",
                  "url": "@Url.Action("SomeServerMethod", "SomeController")",
                  "data": { methodParam1: 12341, methodParam2: 123423, requestType: 4123421 }
              }
          , "paging": false
          , "columns": [
                { "data": "DataElement1" },
                { "data": "DataElement2", "title": "Col1" },
                { "data": "DataElement3", "title": "Col2" },
                { "data": "DataElement4", "title": "Col3" },
                { "data": "DataElement5", "title": "Col4" },
          ]
          , "columnDefs": [                            
              {
                  "targets": 0, // hiding first column, userId
                  "visible": false,
                  "searchable": false,
                  "sortable": false
              },
              {
                  "targets": 5,  // creates action link using the hidden data for that row in column [userId]
                  "render": function (data, type, row) {                          
                      return "<a href='@Url.Action("ServerMethod", "Controller")?someParam=" + row["DataElement1"] + "'>Details</a>"
                  },
                  "searchable": false,
                  "sortable": false
              }
          ]
      });

Here's a snippet of my server side code that returns the json collection.
tableRows is a collection of models containing the data to be displayed.

 var json = this.Json(new { data = tableRows });
            json.JsonRequestBehavior = JsonRequestBehavior.AllowGet;

            return json;

As I said before, the ajax call returned data but wouldn't display until I gave the collection a name. Maybe I missed this required step in the documentation, but wouldn't it make sense for the control to wire up to a single returned collection as the default data source and not require the name? Figuring out the name thing equated to about 2+ hours of messin' around trying different things. That's all I'm saying.

Maybe this'll help someone else too...

Answer 1

dataTables does actually have a dataSrc property! dataTables will look for either a data or an aaData section in the JSON. Thats why you finally got it to work with new { data=tableRows }. That is, if dataSrc is not specified! If your JSON differs from that concept you must specify dataSrc :

If you return a not named array / collection [{...},{...}] :

ajax:  {
   url: "@Url.Action("SomeServerMethod", "SomeController")",
   dataSrc: ""
}

If you return a JSON array named different from data or aaData, like customers :

ajax:  {
   url: "@Url.Action("SomeServerMethod", "SomeController")",
   dataSrc: "customers"
}

If the content is nested like { a : { b : [{...},{...}] }}

ajax:  {
   url: "@Url.Action("SomeServerMethod", "SomeController")",
   dataSrc: "a.b"
}

If you have really complex JSON or need to manipulate the JSON in any way, like cherry picking from the content - dataSrc can also be a function :

ajax:  {
   url: "@Url.Action("SomeServerMethod", "SomeController")",
   dataSrc: function(json) {
       //do what ever you want
       //return an array containing JSON / object literals
   } 
}

Hope the above clears things up!