javascript - AJAX 调用从 ASP.NET Core Web api 动态构建 DataTable

Question

当用户单击另一个表的行时，我试图填充一个表。我在第一个表onClick的标签中有一个事件，<tr>它触发一个函数来向我的 webapi 发送三个属性。我有一个命名处理程序，它采用三个属性并将它们用作另一个方法的输入值，以从 Azure 表中检索数据。响应是我提供给 JavaScript 代码的预格式化 JSON 数据。

我在渲染视图中看到的是一长串 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 调用之前设置断点以测试函数和输入值，但仍会出现（未定义）错误。

标签： javascriptc#jquerydatatables

Answer 1

您只需要对代码进行一些小的更改：

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