I am trying to build my DataTable (1.10.5) using an ajax call to a service - /

Here is my Javascript:

$('#tableexample').DataTable({

    "dom": 'C<"clear">lfrtip',
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": "../../api/EventTypes/GetAll",
    "aoColumnDefs": [
      {
          "aTargets": [0],
          "mData": "Id"
      },
       {
           "aTargets": [1], 
           "mData": "Name"
       },
       {
           "aTargets": [2],
           "mData": "Name"
       },
       {
           "aTargets": [3],
           "mData": "Name"
       },
       {
           "aTargets": [4],
           "mData": "Name"
       }
    ]
});

Here is my HTML:

<table id="tableexample" class="table table-striped dataTable table-hover">
                        <thead>
                            <tr>
                                <th>Select</th>
                                <th>Event</th>
                                <th>Primary Category</th>
                                <th>Secondary Category</th>
                                <th>Workflow</th>
                            </tr>
                        </thead>
                    </table>

Here is my error:

Uncaught TypeError: Cannot read property 'length' of undefined

If I look i my jquery.dataTables.js - it says that my data is undefined...

var data = _fnAjaxDataSrc( settings, json );

Can anyone help me out with setting up my ajax call properly to dynamically build my table??

Thanks!

I am trying to build my DataTable (1.10.5) using an ajax call to a service - http://www.datatables/examples/ajax/

Here is my Javascript:

$('#tableexample').DataTable({

    "dom": 'C<"clear">lfrtip',
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": "../../api/EventTypes/GetAll",
    "aoColumnDefs": [
      {
          "aTargets": [0],
          "mData": "Id"
      },
       {
           "aTargets": [1], 
           "mData": "Name"
       },
       {
           "aTargets": [2],
           "mData": "Name"
       },
       {
           "aTargets": [3],
           "mData": "Name"
       },
       {
           "aTargets": [4],
           "mData": "Name"
       }
    ]
});

Here is my HTML:

<table id="tableexample" class="table table-striped dataTable table-hover">
                        <thead>
                            <tr>
                                <th>Select</th>
                                <th>Event</th>
                                <th>Primary Category</th>
                                <th>Secondary Category</th>
                                <th>Workflow</th>
                            </tr>
                        </thead>
                    </table>

Here is my error:

Uncaught TypeError: Cannot read property 'length' of undefined

If I look i my jquery.dataTables.js - it says that my data is undefined...

var data = _fnAjaxDataSrc( settings, json );

Can anyone help me out with setting up my ajax call properly to dynamically build my table??

Thanks!

• javascript
• jquery
• ajax
• datatable

• What server side language are you using? "sAjaxSource": "../../api/EventTypes/GetAll" does not look like a php or asp file. Maybe it just isn't returning anything, because it isn't able to contact the server script. – Sablefoste Commented Mar 6, 2015 at 20:02
• It is an API call to get a response back from the database. My response looks like this: [ { "Id": 1, "Name": "Abandonment Proceeding Notes" }, { "Id": 2, "Name": "Adversary Closed" }, { "Id": 3, "Name": "Adversary Proceeding Dismissed" }, { "Id": 4, "Name": "Adversary Proceeding Filed" }] – tania_s Commented Mar 6, 2015 at 20:26
• You don't have a <tbody></tbody>. That may be what is "undefined". – Sablefoste Commented Mar 6, 2015 at 20:53
• Based on datatables/examples/api/row_details.html I should not need a it. But I went ahead and tried...still no luck :( Same error – tania_s Commented Mar 6, 2015 at 20:58

1 Answer 1

Finally found it!

I needed to make an ajax call and pass the data to "aaData":

$.ajax({
    url: '/Portal/api/EventTypes/GetEventWorkflowDefinitions',
    type: 'GET',
    dataType: 'json',
    success: function (data) {
        assignToEventsColumns(data);
    }
});

function assignToEventsColumns(data) {
var table = $('#tableexample').dataTable({
    "dom": 'C<"clear">lfrtip',
    "bAutoWidth": false,
    "aaData": data,
    "aaSorting": [],
    "aoColumnDefs": [
       {
           "aTargets": [0],
           "bSearchable": false,
           "bSortable": false,
           "bSort": false,
           "mData": "EventTypeId",
           "mRender": function (event) {
               return '<input class="childCheck" type="checkbox" id="childCheckBoxes" value="' + event + '">';
           }
       },
       {
           "aTargets": [1], 
           "mData": "EventType"
       }

Once I did this...the table build perfectly!