Question

The JSON coming back from the server (used for populating the dataTable) looks like:

[
   {
      "id":1,
      "attributeType":{
         "id":1,
         "name":"test1",
         "tag":"test-type",
         "is-dog":false
      },
      "attributeValue":{
         "id":null,
         "name":"blah",
         "tag":"BLAH"
      },
      "buzz":1,
      "fizz":"53abc"
   }
]

However, I only want to display the following fields:

• id
• attributeValue.name
• buzz

And furthermore, I want them displayed in the following order (left to right):

• buzz
• attributeValue.name
• id

How can I configure my dataTable to select only these three fields, and to display them in the desired order? Thanks in advance!

Answer 1

What you could do to achive this is build your table dynamically and then send this to the datatable.

In the following example I am assuming the Json is coming back in a jQuery Ajax call and you have multiple items in your response:

$.ajax({
    type: "POST",
    url: "Controller Url",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
...
...
success: function (response) {

// Assuming you need to parse, you may not need to depending on how the data is returned.
var parsedJson = $.parseJSON(response); 
// Empty var to hold the table content.
var buildTable = "";

$.each(parsedJson, function(i)) {
    buildTable += "<tr>";
    buildTable += "<td>" + parsedJson[i].buzz + "</td>";
    buildTable += "<td>" + parsedJson[i].attributeValue.name + "</td>";
    buildTable += "<td>" + parsedJson[i].id + "</td>";
    buildTable += "</tr>";
});

// Now fill your datatable with the table content in the order you want and with only the fields required.
$("#datatableContent").append(buildTable);

// Configure your datatable
$('#datatableContent').dataTable({ });

} //end success

});// end ajax

In your View you would have:

<table id="datatableContent">
<thead>
    <tr>
        <th>Buzz</th>
        <th>Name</th>
        <th>ID</th>
    </tr>
</thead>
<tbody>
</tbody>

One thing to bear in mind is that I had problems if I placed the $('#datatableContent').dataTable({ }); config part outwith the success of the ajax call. I have mines placed after the $("#datatableContent").append(buildTable); line within the success and it works perfectly every time.