Question

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

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

JavaScript：

DataTable

Razor / HTML：

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');">

C＃代码：

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

console.dir（dataSet）输出：

更新：

在ajax调用之前设置一个断点以测试功能和输入值，但仍然会收到（未定义的）错误。

Answer 1

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

from __future__ import print_function
import time
from apiclient import discovery
from httplib2 import Http
from oauth2client import file, client, tools

SCOPES = 'https://www.googleapis.com/auth/drive.readonly.metadata'
store = file.Storage('storage.json')
creds = store.get()
if not creds or creds.invalid:
flow = client.flow_from_clientsecrets('client_secret.json', SCOPES)
creds = tools.run_flow(flow, store)

DRIVE = discovery.build('drive', 'v3', http=creds.authorize(Http()))
file_service = DRIVE.files()
files = file_service.list().execute().get('files', [])
for f in files:
file_shared = (file_service.get(fileId=f['id'], fields="name, 
shared").execute())

# Only display files that are shared
if file_shared['shared']:
    print(file_shared['name'], f['id'])
    #for f in file_shared:
    #   print('title: %s, id: %s' % (f['title'], f['id']))

# Sleep 1/10 of a second between every API call, otherwise
# you will exceed the number of calls allowed
time.sleep(.100)

Answer 2

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

为了以我尝试的方式动态构建表，必须在构建DataTable对象时定义列值。
如果您未使用ajax.reload()关键字，则不能使用DataTables().destroy()或ajax:或任何其他方法（请参见Kevin的文章）。如果您在用数据填充表格后尝试使用ajax.reload()方法，则会收到无效的JSON错误。
您需要清除表，然后添加json内容的行，然后为每个click事件再次绘制它。
我没有等待.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>标签；只是一个具有与onClick事件匹配的正确ID的打开/关闭<table>标签。我能够使用正确的标题和数据绑定正确格式化表格。

AJAX调用可从ASP.NET Core Web API

2 个答案: