Cannot Get Data to Add to Table After Initialization

anthony89

I am attempting to populate a Datatable after it has been initialized based on the user choosing a particular record to edit.

I defined the table as such:

        var oEventSchedulerDetailsTable = $('#eventtime_details').DataTable( {
            info: false,
            paging: false,
            select: {
                "info": false
            },
            "language": {
                "emptyTable": "No times scheduled"
            },
            searching: false,
            processing: true,
        });

I then have a button defined that when clicked retrieves the ID I need to populate the table defined above:

      $("#event_scheduler_table_menu .EditMenuButton").on("click", function(e) {
            e.preventDefault();
            if ($(this).hasClass('disabled')) {
                return false;
            }
            
            var selectedRowData = oEventSchedulerTable.rows( { selected: true } ).data();
            loadData(selectedRowData[0].id);
            
            $('#editEvent').modal('toggle');
        });

The loadData function is as follows:

        function loadData(id) {
            var dataString = "eventid=" + id;
            $.ajax({
                type: 'POST',
                url: root + 'resources/php/data_handler_event_scheduler_details.php',
                data: dataString,
                dataType: 'json',
                success: function(data) {
                    console.dir(data.data);
                    oEventSchedulerDetailsTable.clear().draw();
                    oEventSchedulerDetailsTable.rows.add(data).draw();
                },
                error: function(request, status, error) {
                    bootbox.alert(request.responseText);
                }
            });
        }

So when I run my code, I can see in the browser inspector window that the data_handler_event_scheduler_details.php returns the json data, but the $('#eventtime_details').DataTable never shows the data in the table.

Any clues on what I am missing here?

kthorngren

Its hard to say without knowing what is returned. You have console.dir(data.data); but you are using oEventSchedulerDetailsTable.rows.add(data).draw();. Is your data in the data.data object or just in data?

Is it one row or multiple rows in an array. If its one row not in an array then you will use row.add(), note the singular row for one row that is not in an array.

If you still need help please post the ajax response from the browser's network inspector.

Kevin

anthony89

The ajax call to data_handler_event_scheduler_details.php can return one item or several items in the array. Depends on how many times have been scheduled. Here's what the call returns in one particular case:

{
  "draw": 0,
  "recordsTotal": 2,
  "recordsFiltered": 2,
  "data": [
    {
      "id": "680",
      "eventid": "23",
      "eventtime": "21:43:45",
      "eventdate": "2007-02-03",
      "eventday": "Saturday",
      "recurring": "Yes"
    },
    {
      "id": "679",
      "eventid": "23",
      "eventtime": "09:43:45",
      "eventdate": "2007-02-03",
      "eventday": "Saturday",
      "recurring": "Yes"
    }
  ]
}

anthony89

On the html side:

<table id="eventtime_details" class="table table-sm table-striped w-100 mx-0">
     <thead>
        <tr>
            <!-- eventtime column -->
            <th>Time</th>
            <!-- eventday column -->
            <th>Execute on</th>
        </tr>
    </thead>
</table>

anthony89

Ok, I got it working by redefining the table as:

        var oEventSchedulerDetailsTable = $('#eventtime_details').DataTable( {
            info: false,
            paging: false,
            select: {
                "info": false
            },
            "language": {
                "emptyTable": "No times scheduled"
            },
            searching: false,
            processing: true,
            columns: [
                { data: 'eventtime', title: 'Time' }, // Row 0
                { data: 'eventday', title: 'Execute on' } // Row 1
            ]
        });

On the html side as:

<table id="eventtime_details" class="table table-sm table-striped w-100 mx-0"</table>

And then the loadData function:

        function loadData(id) {
            var dataString = "eventid=" + id;
            $.ajax({
                type: 'POST',
                url: root + 'resources/php/data_handler_event_scheduler_details.php',
                data: dataString,
                dataType: 'json',
                success: function(data) {
                    oEventSchedulerDetailsTable.clear().draw();
                    oEventSchedulerDetailsTable.rows.add(data.data).draw();
                },
                error: function(request, status, error) {
                    bootbox.alert(request.responseText);
                }
            });

However, I guess in cases where only one record is in the array, I will need to call oEventSchedulerDetailsTable.rows.add(data.data).draw() in a different way?

kthorngren

I guess in cases where only one record is in the array, I will need to call oEventSchedulerDetailsTable.rows.add(data.data).draw() in a different way?

If the one row is in an array like this you will still use rows.add():

  "data": [
    {
      "id": "680",
      "eventid": "23",
      "eventtime": "21:43:45",
      "eventdate": "2007-02-03",
      "eventday": "Saturday",
      "recurring": "Yes"
    },
  ]

But if your one row is not in an array, like this then use row.add():

  "data": 
    {
      "id": "680",
      "eventid": "23",
      "eventtime": "21:43:45",
      "eventdate": "2007-02-03",
      "eventday": "Saturday",
      "recurring": "Yes"
    }

The docs for both API's have more details.

Kevin