Question

我有一个使用ASP.NET MVC构建的Web API。点击该API的结果如下所示：

{
  "RequestID":1,
  "Options": [
    {"Id":"A", "Name":"Alpha"},
    {"Id":"B", "Name":"Bravo"}
  ],
  "Responses":[
    {"Id":123, "Name":"Test 1", "Description":"This is the first response"},
    {"Id":222, "Name":"Test 2", "Description":"This is the second response"},
    {"Id":333, "Name":"Test 3", "Description":"This is the third response"},
  ]
}

我想使用DataTables plugin将Web API的响应加载到数据表中。为了做到这一点，我有以下内容：

<head>
  <script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <script type="text/javascript" src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
</head>
<body>
    <table id="properties" class="table table-bordered">
        <thead>
            <tr>
                <th>ID</th>
                <th class="sortable">Name</th>
                <th>Description</th>
            </tr>
        </thead>
    </table>

    <script type="text/javascript">
        $(document).ready(function () {
            $('#properties').dataTable({
                "processing": true,
                "serverSide": true,
                "ajax": {
                    'url':'/api/Search?query=Test'
                }
            });
        });
    </script>
</body>

我基于找到here的示例实现了实现。我的问题是，它不起作用。它就像数据表并不知道使用Responses属性作为数据表的数据集。但是，我无法弄清楚如何设置它。

有人知道如何将Responses数组中的对象加载到数据表中吗？

谢谢！

Answer 1

为了让DataTables显示您的数据，必须以DataTables可以理解的方式对其进行格式化。请参阅http://datatables.net/manual/server-side以获取参考。查看标题返回数据。

具体来说，您的JSON需要将数据放在名为 data 的参数下（而不是 Responses ）。

您还需要包含 draw ， recordsTotal 和 recordsFildered 参数。

如果您无法修改Web API以适合DataTables格式，则需要使用其他方法。我想到的两个要么是编写一个中间服务，将Web API的输出转换为DataTables的正确格式，要么使用JavaScript手动读取Web API的输出并将行插入到表中。

Answer 2

你可以试试这个：

由于无法访问您的API，我无法验证以下内容。但它应该可以正常工作。

<script type="text/javascript">
    $(document).ready(function () {
        $('#properties').dataTable({
            "processing": true,
            "serverSide": true,
            "ajax": {
                'url':'/api/Search?query=Test',
                "dataSrc": "Responses"
            }
        });
    });
</script>

谢谢！

将JSON加载到数据表中

2 个答案: