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

Answer 1

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

Answer 2

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

Answer 3

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.