Populate javascript.datatables with json?

Question

I am trying to have a javascript.datatable (http://www.datatables.net/) show a dataset which I have passed through as a json string.

$(document).ready(function () {
  $('#Reports').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="ReportsTable"></table>');
  var data = <%=jsonResult%>;
  $('#ReportsTable').dataTable({
     "data": data,
     "columns": [
       { "title": "id" },
       { "title": "name" },
       { "title": "regAndId" },
       { "title": "type" },
       { "title": "timeStamp" }
    ]
  });
});

My jsonResult or data variable looks as follows:

{
    "reports": [
        {
            "id": "421b4b9b-63d5-4fe2-a929-a85d9fe9d2ef",
            "name": "TAMANYA PROPERTIES",
            "regAndId": "1989/011313/23",
            "timeStamp": "2014/10/31 01:57:51 PM",
            "type": "Company"
        },
        {
            "id": "56751c5d-84b2-463a-95be-9feb2fa02c10",
            "name": "TESTA PROPERTY COMPANY PTY",
            "regAndId": "1980/004250/07",
            "timeStamp": "2014/10/31 10:29:09 AM",
            "type": "Company"
        }
    ]
}

The error I am getting is:

Uncaught TypeError: undefined is not a function

It looks like you are not properly including the datatables plugin. About which function is complaining? — dreyescat
– dreyescat, Commented Nov 4, 2014 at 9:46
Possible duplicate: stackoverflow.com/questions/23295424/… — vatsal
– vatsal, Commented Nov 4, 2014 at 9:52

vatsal · Accepted Answer · 2014-11-04 09:49:59Z

1

This could happens if the DataTable library is not loaded properly. First jQuery should be loaded and then dataTables.

answered Nov 4, 2014 at 9:49

vatsal

3,9532 gold badges21 silver badges19 bronze badges

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

Comments

dreyescat · Accepted Answer · 2014-11-04 09:54:53Z

Assuming you have properly included both jQuery and DataTables libraries, you need to configure the columns according to your data structure. Something like this should work for you:

$(document).ready(function () {
  $('#Reports').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="ReportsTable"></table>');
  var data = {
    "reports": [
        {
            "id": "421b4b9b-63d5-4fe2-a929-a85d9fe9d2ef",
            "name": "TAMANYA PROPERTIES",
            "regAndId": "1989/011313/23",
            "timeStamp": "2014/10/31 01:57:51 PM",
            "type": "Company"
        },
        {
            "id": "56751c5d-84b2-463a-95be-9feb2fa02c10",
            "name": "TESTA PROPERTY COMPANY PTY",
            "regAndId": "1980/004250/07",
            "timeStamp": "2014/10/31 10:29:09 AM",
            "type": "Company"
        }
    ]
  };
  $('#ReportsTable').dataTable({
     "data": data.reports,
     "columns": [
       { "data": "id" },
       { "data": "name" },
       { "data": "regAndId" },
       { "data": "type" },
       { "data": "timeStamp" }
    ]
  });
});

See demo

Johan · Accepted Answer · 2014-11-04 09:47:31Z

0

Try change this

 var data = <%=jsonResult%>;

to

 var data = '<%=jsonResult%>';

Note the quotes. This is needed as the content you are assigning is expecting json string and not just an object/function.

answered Nov 4, 2014 at 9:47

Johan

8,2861 gold badge35 silver badges46 bronze badges

Collectives™ on Stack Overflow

Populate javascript.datatables with json?

3 Answers 3

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Linked

Related