Trying to populate empty table with onClick

jasonshave

Is it possible to populate an empty table initialized after loading the document? I'm struggling to understand what I'm doing wrong. Here is my question for reference:

https://stackoverflow.com/questions/52748198/ajax-call-to-dynamically-build-datatable-from-asp-net-core-web-api

Using the following code I can see my console.log return the json data from my ajax call but the table remains empty. My HTML is pretty basic (open/close table tag).

    function GetActivityLog(pk, rk, cn) {
        $.ajax({
            url: '/Nodes?handler=ActivityLog' + '&PartitionKey=' + pk + '&RowKey=' + rk + '&ComputerName=' + cn
        }).done(function (response) {
            console.log(response)
            $('#tblActivityLogs').DataTable({
                data: response
            });
        });
    }

kthorngren

I think response is a JSON string not a Javascript array. You probably need something like this before your Datatable init:
response = JSON.parse(response);

Kevin

jasonshave

Very nice....and closer. I think my data might need some massaging though. I'm now getting unexpected token. Redacted content is a GUID by the way.

kthorngren

Since your data is object based you need to use columns.data to define your columns.

Unexpected token

Maybe you don't need to use JSON.parse() and just need the columns.data option.

Kevin

jasonshave

Updated with suggested columns. I also set the eTag to null as this was causing the unexpected token error. I don't get any errors in the console but the table is still blank. Does it need to be redrawn or reloaded?

        function GetActivityLog(pk, rk, cn) {
            $.ajax({
                url: '/Nodes?handler=ActivityLog' + '&PartitionKey=' + pk + '&RowKey=' + rk + '&ComputerName=' + cn
            }).done(function (response) {
                console.log(response)
                $('#tblActivityLogs').DataTable({
                    data: response,
                    columns: [
                        { "data": "computerName" },
                        { "data": "domainName" },
                        { "data": "eTag" },
                        { "data": "entryType" },
                        { "data": "eventid" },
                        { "data": "logName" },
                        { "data": "Message" },
                        { "data": "partitionKey" },
                        { "data": "rowKey" },
                        {"data":"timestamp"}
                    ]
                });
            });
        }

I also tried a dataTables.ajax.reload() and this gives me a new error suggesting data is null. I'm wondering if this is because my table is drawn initially without a data tag and without any data at all? It's a bit of a catch22 though. I don't know what the data reference will be until the user clicks on the button to pass the parameters to the function so I can fetch the data...

jasonshave

Getting closer...I had to remove the other script block which built the blank table. I guess the properties (including the data value) is defined as it's created and modifying it afterward doesn't fly. I can see the table now when the onClick fires. The table won't update though if I click on another row. I'm thinking I need to clear or refresh...I'll ask a separate question for that.

kthorngren

ajax.reload()

This only works for ajax loaded tables.

I'm wondering if this is because my table is drawn initially without a data tag and without any data at all? I

You can initialize a blank table without a data option. If you want to reinitialize the table then you either need to use destroy or use the destroy() API. You should get an error otherwise when trying to initialize the table a second time.

You can also initialize a blank table then use rows.add() and draw() to add the new rows without destroying it. Probably a better way to go.

Kevin

kthorngren

The table won't update though if I click on another row. I'm thinking I need to clear or refresh...I'll ask a separate question for that.

Are you trying to do something like this?
https://datatables.net/blog/2016-03-25

Kevin