Jquery DataTables Populate data from JSON

Question

I have been trying to get this to work forever and really cant get it to work :(

I am building a MVC 5 application and the JSON string from the controller looks like this:

[{"Action_Comment_ID":9,"Action_ID":36,"Comment":"Test commrnt","Modified_by":null,"Modified_date":null,"Created_by":"bb1222b0-699e-4d6a-81fc-04ff68c8c5c6","Created_date":"/Date(1420066800000)/"}]

And I can see that by running alert(JSON.stringify(data));

The datatable is beeing populated on a click method and I am calling the controller with Ajax.

$.ajax({
    url: '/Case/ActionDetails/',
    data: JSON.stringify(Action),
    type: 'POST',
    contentType: 'application/json; charset=utf-8',
    success: function (data) {

        acTable.fnClearTable();

        alert(JSON.stringify(data));

        acTable.fnAddData(data);

        console.debug(JSON.stringify(data));
    }
});

So how do i extract the data from the JSON string and add it to the DataTable. I want to extract each field by itself because I want to do things with each individual field.

The created date needs to be parsed with this method f.ex

created_date = new Date(parseInt(SOMEVARIABLE.replace("/Date(", "").replace(")/", ""), 10));

And I want the fields to show different data depending on the record have been modified etc.

It can also be multiple records returned so if I add some more records it will look like this:

[{"Action_Comment_ID":9,"Action_ID":36,"Comment":"Test comment 1","Modified_by":null,"Modified_date":null,"Created_by":"bb1222b0-699e-4d6a-81fc-04ff68c8c5c6","Created_date":"/Date(1420066800000)/"},{"Action_Comment_ID":11,"Action_ID":36,"Comment":"Test comment 2","Modified_by":null,"Modified_date":null,"Created_by":"bb1222b0-699e-4d6a-81fc-04ff68c8c5c6","Created_date":"/Date(1388530800000)/"},{"Action_Comment_ID":12,"Action_ID":36,"Comment":"Test comment 3","Modified_by":"bb1222b0-699e-4d6a-81fc-04ff68c8c5c6","Modified_date":"/Date(1405634400000)/","Created_by":"bb1222b0-699e-4d6a-81fc-04ff68c8c5c6","Created_date":"/Date(1405548000000)/"}]

JQuery Datatables can do it for you datatables.net/manual/server-side — Baximilian
– Baximilian, Commented Jul 18, 2014 at 11:48
Jquery Datatables is what I am using.. I need a little bit more info on how do this. The table is already initialised because it have to be possible to open an empty table and add new records there — stig
– stig, Commented Jul 18, 2014 at 11:51

Baximilian · Accepted Answer · 2014-07-18 12:19:54Z

1

Here is a small DEMO

$.ajax({
url: '/Case/ActionDetails/', 
//data: JSON.stringify(Action), //I Didn't send any data
type: 'POST',
contentType: 'application/json; charset=utf-8',
success: function () {
    $(result).each(function(){
        acTable.fnAddData([this.Comment]); 
    })
  }
});

[this.Comment] In this array you need to add your columns values, in same sequence as your columns placed.

answered Jul 18, 2014 at 12:19

Baximilian

8857 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

stig Over a year ago

Thats working perfect! Thanks alot. Is there an easy way to check if its empty? The data object looks like this when its nothing in it: {"Data":[]} Since I get an error if data is empty

Baximilian Over a year ago

@stibay The best idea, as for me, it's to return empty data and nonempty in very same format. empty {"Data":[]}/ nonempty {"Data":[column1:value1,...]} then you need to change $(result).each to $(result.data).each

stig Over a year ago

Ok, thank you. From your suggestion I changed it up abit in the controller instead so it doesnt return anything when it's empty.

Collectives™ on Stack Overflow

Jquery DataTables Populate data from JSON

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related