AJAX-вызов для динамической сборки DataTable из веб-API ASP.NET Core

Question

Я пытаюсь заполнить таблицу, когда пользователь щелкает строку другой таблицы.У меня есть событие onClick в теге <tr> первой таблицы, которое запускает функцию для отправки трех свойств в мой webapi.У меня есть именованный обработчик, который берет три свойства и использует их в качестве входных значений для другого метода для извлечения данных из таблиц Azure.Ответ представляет собой предварительно отформатированные данные JSON, которые я передаю в код JavaScript.

В моем отображаемом виде я вижу длинную строку текста JSON;нет столбцов или строк вообще. Согласно документации я смогу связать dataSet со значением data DataTable и построить таблицу динамически.

JavaScript:

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

$(document).ready(function () {
$('#tblActivityLogs').DataTable({
    "order": [[0, "desc"]],
    columnDefs: [
            {
                targets: 0,
                className: 'dt-body-nowrap'
            }
        ]
    });
})

Бритва / HTML:

<tr onmouseover="" style="cursor: pointer;" role="button" id="getActivtiy" onclick="GetActivityLog('@item.PartitionKey','@item.RowKey','@item.ComputerName');">

HTML Таблица:

<div class="row">
    <div class="col-lg-12">
        <table id="tblActivityLogs" class="display"></table>
    </div>
</div>

C # код:

public async Task<ContentResult> OnGetActivityLog([FromQuery] string PartitionKey, string RowKey, string ComputerName)
{
    Activities = await _azureTableConnection.GetActivitiesAsync(PartitionKey, RowKey, ComputerName);
    return Content(JsonConvert.SerializeObject(new { Activities }));
}

console.dir (dataSet) выход:

ОБНОВЛЕНИЕ:

Установите точку останова перед вызовом ajax, чтобы проверить функцию и входные значения, но при этом получить (неопределенную) ошибку.

Answer 1

Согласно сообщению 'Кевина' (https://datatables.net/forums/discussion/comment/136685/#Comment_136685), вместе с предложениями @ Хакермана, у меня наконец есть рабочее решение.

1. Для того, чтобы динамически построить таблицу так, как япытаясь, вы ДОЛЖНЫ определить значения столбца при создании объекта DataTable.
2. Вы не можете использовать ajax.reload() или DataTables().destroy() или любой другой метод, если вы не используете ключевое слово ajax: (см. пост КевинаЕсли вы попытаетесь использовать метод ajax.reload() после заполнения таблицы данными, вы получите недопустимую ошибку JSON.
3. Необходимо очистить таблицу, затем добавить строки содержимого json, а затем нарисоватьэто снова для каждого события щелчка.
4. Вместо ожидания .done для запуска анонимной функции, я использовал тег success, чтобы отключить ее.

Вотокончательное решение:

    function GetActivityLog(pk, rk, cn) {
        $.ajax({
            url: '/Nodes?handler=ActivityLog' + '&PartitionKey=' + pk + '&RowKey=' + rk + '&ComputerName=' + cn,
            success: function (json) {
                table = $('#tblActivityLogs').DataTable({
                    "order": [[0, "desc"]],
                });
                table.clear();
                table.rows.add(json).draw();
            }
        })
    }

    $(document).ready(function () {
        $('#tblActivityLogs').DataTable({
            "order": [[0, "desc"]],
            columnDefs: [
                { targets: 0, className: 'dt-body-nowrap', title: 'Date/Time', data: 'timestamp' },
                { targets: 1, title: 'Computer', data: 'computerName' },
                { targets: 2, title: 'Type', data: 'entryType' },
                { targets: 3, title: 'Event ID', data: 'eventid' },
                { targets: 4, title: 'Message', data: 'message' }
            ]
        });
    })

БОНУС:

Вы МОЖЕТЕ фактически загрузить таблицу до заполнения данных, и вам не нужны <thead> или<tr/td> теги либо просто открывать / закрывать <table> тег с правильным идентификатором, совпадающим сСобытие onClick.Мне удалось правильно отформатировать таблицу с правильным заголовком и привязками данных.

Answer 2

Вам просто нужно внести небольшие изменения в ваш код:

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