在 MVC 应用程序中使用 DataTables.NET ajax 调用访问 WebAPI 2 json

Question

我一直在尝试让 DataTables.NET 与我构建的 WebAPI RESTFul 服务很好地配合使用，但返回的 json 似乎不适合什么DataTables 正在寻找。我尝试了各种 "server processing" 示例以及我在 Internet 上找到的一些示例，例如 this one，但我不想使 WebAPI 调用动态化。我希望 API 能够自我记录，以便其他应用程序和其他开发人员也可以轻松地使用 API。到目前为止，这就是我所拥有的。

从我的 API 返回的 Json.stringify 后的 JSON 数组是这样的：

[{"FirstName":"Gregg","LastName":"Coleman"},{"FirstName":"Ryan","LastName":"May"},{"FirstName":"Sean","LastName":"OConnor"},{"FirstName":"Rebecca","LastName":"Coleman"}]

datatable.net 代码如下所示：

$("#data-table").DataTable({

            serverSide: true,
            processing: true,
            ajax: {

                url: "http://localhost:55180/api/Person",
                type: 'GET',
                dataType: 'json',
                dataSrc: function(json)
                {
                    var j = JSON.stringify(json)
                    alert(j);
                    return j;
                }
            }

        });

HTML 看起来像这样

<table id="data-table" class="display">
<thead>
    <tr>
        <th>First Name</th>
        <th>Last Name</th>
    </tr>
</thead>

我从 dataTables 返回的错误是：

“DataTables 警告：table id=data-table - 为第 0 行第 1 列请求未知参数“1”。有关此错误的详细信息，请参阅 http://datatables.net/tn/4.

如有任何帮助，我们将不胜感激

Answer 1

您需要指定 JSON 中的哪些属性对应于哪些列。您还需要将 dataSrc 设置为 ''（因为 dataTables 期望保存 JSON 项的数组被命名为 data）或简单地 return JSON 在 dataSrc 回调中。将 dataSrc 设置为 '' 似乎是最简单的：

$("#data-table").DataTable({
      serverSide: true,
      processing: true,
      columns : [
          { data : 'FirstName' },
          { data : 'LastName' }
      ],    
      ajax: {
          url: "http://localhost:55180/api/Person",
          dataSrc : ''
      }
});

现在数据表已正确初始化 -> http://jsfiddle.net/2jgt3mn8/

在 MVC 应用程序中使用 DataTables.NET ajax 调用访问 WebAPI 2 json

Accessing WebAPI 2 json with DataTables.NET ajax call in MVC application

javascript

asp.net-mvc

jquery

asp.net-ajax

datatables-1.10