Basic Rendering

Paul Ashton

I am using the basic rendering, I can see the json object using the debugger line but I get an error of "error no length"

Please help

JS

    $(document).ready(function () {

       var table = $('#myTable').DataTable({
            "ajax": '/Home/GetData'
        });

        table.on( 'xhr', function () {
            var json = table.ajax.json();
            debugger;
            alert( json );
        });

    } );

Json response

{
  "Item1": [
    {
      "RequestId": 10938,
      "RequestTypeId": 1,
      "RequestUserId": 0,
      "RequestDateTime": "\/Date(1385548201040)\/",
      "RequestComment": "Created by the Data Integration Toolkit.",
      "EntityInstanceId": 11021,
      "ResponseId": 0,
      "EntityDisplayName": "Project",
      "UserName": null
    },
    {
      "RequestId": 10939,
      "RequestTypeId": 1,
      "RequestUserId": 0,
      "RequestDateTime": "\/Date(1385548383413)\/",
      "RequestComment": "Created by the Data Integration Toolkit.",
      "EntityInstanceId": 11022,
      "ResponseId": 0,
      "EntityDisplayName": "Sample Location",
      "UserName": null
    },
    {
      "RequestId": 10940,
      "RequestTypeId": 1,
      "RequestUserId": 0,
      "RequestDateTime": "\/Date(1385548384323)\/",
      "RequestComment": "Created by the Data Integration Toolkit.",
      "EntityInstanceId": 11023,
      "ResponseId": 0,
      "EntityDisplayName": "Piezometer",
      "UserName": null
    },
    {
      "RequestId": 10941,
      "RequestTypeId": 1,
      "RequestUserId": 0,
      "RequestDateTime": "\/Date(1385548384667)\/",
      "RequestComment": "Created by the Data Integration Toolkit.",
      "EntityInstanceId": 11024,
      "ResponseId": 0,
      "EntityDisplayName": "Sample Location Detail",
      "UserName": null
    },
    {
      "RequestId": 10942,
      "RequestTypeId": 1,
      "RequestUserId": 0,
      "RequestDateTime": "\/Date(1385548384883)\/",
      "RequestComment": "Created by the Data Integration Toolkit.",
      "EntityInstanceId": 11025,
      "ResponseId": 0,
      "EntityDisplayName": "Sample Location",
      "UserName": null
    },
    {
      "RequestId": 10943,
      "RequestTypeId": 1,
      "RequestUserId": 0,
      "RequestDateTime": "\/Date(1385548385080)\/",
      "RequestComment": "Created by the Data Integration Toolkit.",
      "EntityInstanceId": 11026,
      "ResponseId": 0,
      "EntityDisplayName": "Piezometer",
      "UserName": null
    },
    {
      "RequestId": 10944,
      "RequestTypeId": 1,
      "RequestUserId": 0,
      "RequestDateTime": "\/Date(1385548385367)\/",
      "RequestComment": "Created by the Data Integration Toolkit.",
      "EntityInstanceId": 11027,
      "ResponseId": 0,
      "EntityDisplayName": "Sample Location Detail",
      "UserName": null
    },
    {
      "RequestId": 10945,
      "RequestTypeId": 1,
      "RequestUserId": 0,
      "RequestDateTime": "\/Date(1385548385583)\/",
      "RequestComment": "Created by the Data Integration Toolkit.",
      "EntityInstanceId": 11028,
      "ResponseId": 0,
      "EntityDisplayName": "Sample Location",
      "UserName": null
    },
    {
      "RequestId": 10946,
      "RequestTypeId": 1,
      "RequestUserId": 0,
      "RequestDateTime": "\/Date(1385548385760)\/",
      "RequestComment": "Created by the Data Integration Toolkit.",
      "EntityInstanceId": 11029,
      "ResponseId": 0,
      "EntityDisplayName": "Piezometer",
      "UserName": null
    },
    {
      "RequestId": 10947,
      "RequestTypeId": 1,
      "RequestUserId": 0,
      "RequestDateTime": "\/Date(1385548386050)\/",
      "RequestComment": "Created by the Data Integration Toolkit.",
      "EntityInstanceId": 11030,
      "ResponseId": 0,
      "EntityDisplayName": "Sample Location Detail",
      "UserName": null
    },
    {
      "RequestId": 10948,
      "RequestTypeId": 1,
      "RequestUserId": 0,
      "RequestDateTime": "\/Date(1385548386273)\/",
      "RequestComment": "Created by the Data Integration Toolkit.",
      "EntityInstanceId": 11031,
      "ResponseId": 0,
      "EntityDisplayName": "Sample Location",
      "UserName": null
    },
    {
      "RequestId": 10949,
      "RequestTypeId": 1,
      "RequestUserId": 0,
      "RequestDateTime": "\/Date(1385548386500)\/",
      "RequestComment": "Created by the Data Integration Toolkit.",
      "EntityInstanceId": 11032,
      "ResponseId": 0,
      "EntityDisplayName": "Piezometer",
      "UserName": null
    },
    {
      "RequestId": 10950,
      "RequestTypeId": 1,
      "RequestUserId": 0,
      "RequestDateTime": "\/Date(1385548386820)\/",
      "RequestComment": "Created by the Data Integration Toolkit.",
      "EntityInstanceId": 11033,
      "ResponseId": 0,
      "EntityDisplayName": "Sample Location Detail",
      "UserName": null
    },
    {
      "RequestId": 10951,
      "RequestTypeId": 1,
      "RequestUserId": 0,
      "RequestDateTime": "\/Date(1385548387023)\/",
      "RequestComment": "Created by the Data Integration Toolkit.",
      "EntityInstanceId": 11034,
      "ResponseId": 0,
      "EntityDisplayName": "Sample Location",
      "UserName": null
    },
    {
      "RequestId": 10952,
      "RequestTypeId": 1,
      "RequestUserId": 0,
      "RequestDateTime": "\/Date(1385548387217)\/",
      "RequestComment": "Created by the Data Integration Toolkit.",
      "EntityInstanceId": 11035,
      "ResponseId": 0,
      "EntityDisplayName": "Piezometer",
      "UserName": null
    }
  ],
  "Item2": true
}

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

You need to tell DataTables that you want to use the array of data in the Item1 property. That is done using ajax.dataSrc - e.g.:

"ajax": {
  url: '/Home/GetData',
  dataSrc: 'Item1'
}

Note that since you are using object based data for the rows, you'll also need to tell DataTables which property you want to show in each column. That is done using columns.data. The manual for that is here.

Allan