在 MVC 应用程序中使用 DataTables.NET ajax 调用访问 WebAPI 2 json
Posted
技术标签:
【中文标题】在 MVC 应用程序中使用 DataTables.NET ajax 调用访问 WebAPI 2 json【英文标题】:Accessing WebAPI 2 json with DataTables.NET ajax call in MVC application 【发布时间】:2016-03-01 04:53:36 【问题描述】:我一直试图让 DataTables.NET 与我构建的 WebAPI RESTFul 服务很好地配合使用,并且返回的 json 似乎不符合 DataTables 的要求。我已经尝试了各种“服务器处理”示例以及我在 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。
任何帮助将不胜感激
【问题讨论】:
【参考方案1】:您需要指定 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 : ''
);
现在数据表已正确初始化 -> http://jsfiddle.net/2jgt3mn8/
【讨论】:
以上是关于在 MVC 应用程序中使用 DataTables.NET ajax 调用访问 WebAPI 2 json的主要内容,如果未能解决你的问题,请参考以下文章
我正在为我的 ASP.NET MVC 程序使用 DataTables 插件。该表显示没有任何 CSS。为啥?
如何使用 Datatables.AspNet.Mvc5 进行服务器端排序