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

时间:2015-11-27 03:09:05

标签: javascript jquery asp.net-mvc asp.net-ajax datatables-1.10

我一直在努力让DataTables.NET与我构建的WebAPI RESTFul服务很好地配合,并且返回的json似乎不适合DataTables正在寻找的东西。我尝试过各种各样的服务器处理"示例以及我在互联网上找到的一些示例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回来的错误是:

&#34; DataTables警告:table id = data-table - 请求未知参数&#39; 1&#39;第0行第1列。有关此错误的详细信息,请参阅http://datatables.net/tn/4

非常感谢任何帮助

1 个答案:

答案 0 :(得分:7)

您需要指定JSON中哪些属性对应哪些列。您还需要将dataSrc设置为''(因为dataTables期望包含JSON项的数组名为data)或者只是在dataSrc回调中返回JSON。将dataSrc设置为''似乎是最简单的:

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

现在dataTable已正确初始化 - &gt;的 http://jsfiddle.net/2jgt3mn8/