AJAX 调用从 ASP.NET Core Web api 动态构建 DataTable答案

【问题标题】：AJAX call to dynamically build DataTable from ASP.NET Core web apiAJAX 调用从 ASP.NET Core Web api 动态构建 DataTable
【发布时间】：2018-10-10 20:20:59
【问题描述】：

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

我在渲染视图中看到的是一长串 JSON 文本；根本没有列或行。 根据documentation，我应该能够将dataSet 绑定到DataTable 的data 值并动态构建表。

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 调用之前设置断点以测试函数和输入值，但仍会出现（未定义）错误。

【问题讨论】：

嗨@Jason，您可以在GetActivityLog 函数中添加console.dir(dataSet) 并将输出添加到您的问题吗？
你打赌。做完了。有趣的是，dataSet 本身似乎是一个表对象，而不是我想的原始 JSON。也许我不应该做$('#tblActivityLogs').load？
让我回答你的问题。
为了不泄露机密信息，我编辑了您的问题。

标签： javascript c# jquery datatables

【解决方案1】：

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

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

【讨论】：

这看起来更好，但我的表现在是空白的。在 Chrome 的预览窗格中，我可以看到三个实体，它们的格式看起来都正确。当我在 Razor 页面中使用部分视图尝试相同的事情时，我的代码的另一个变体遇到了同样的问题。有什么想法吗？
您能否从控制台选项卡中使用工作参数调用该函数，以检查它是否有效...仅用于测试目的
好建议。如果我在$.ajax 设置断点，我可以看到我的三个输入属性正在传递。那时我复制/粘贴整个函数（上面），我得到“未定义”。
在控制台选项卡上尝试调用函数，只需 GetActivityLog(pk, rk, cn) 将 pk、rk 和 cn 替换为正确的参数。只是看看函数是否被调用并填充数据表。
用图片更新了原始帖子（相同的未定义结果）。

【解决方案2】：

根据“Kevin”的帖子 (https://datatables.net/forums/discussion/comment/136685/#Comment_136685) 以及 @Hackerman 的建议，我终于有了一个可行的解决方案。

为了以我尝试的方式动态构建表，您必须在构建 DataTable 对象时定义列值。
如果您不使用 ajax: 关键字，则不能使用 ajax.reload() 或 DataTables().destroy() 或任何其他方法（请参阅 Kevin 的帖子）。如果您在使用数据填充表后尝试使用 ajax.reload() 方法，您将收到无效的 JSON 错误。
你需要清空表格，然后添加json内容的行，然后为每个点击事件重新绘制。
我没有等待.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> 标记，其 ID 与 onClick 事件匹配。我能够使用正确的标题和数据绑定正确地格式化表格。

【讨论】：