JQueryUI DataTable 集合绑定问题

Question

我试图弄清楚如何将来自 AJAX 调用的集合绑定到 DataTable，但遗憾的是每次我收到错误消息说 JSON 无效（但它不是！）

我有一个名为“response”的返回对象，它有一个名为“Recipients”的集合，它有一个“Recipient”类型的对象并有一些道具：

名字 姓 电子邮件地址

即：response.Recipients 在客户端调用中转换为 data.Recipients（见下文）

我不确定如何绑定 - 有什么想法吗？

这是我当前的代码：

$.ajax({
                contentType: 'application/json',
                url: '@Url.Action("GetRecipients")',
                type: 'POST',
                dataType: 'json',
                data: jsonPayload,
                cache: false,
                success: function (data) {
                    if (data.Success) {
                        $('#tblRecipients').DataTable({
                            "data": data.Recipients,
                            "columns": [{
                                "Firstname": "Firstname",
                                "Lastname": "Lastname",
                                "EmailAddress": "EmailAddress"
                            }]
                        });
                    }
                    else {
                        alert(data.FailureInformation);
                    }
                },
                error: function (xhr, status, error) {
                    alert('There was a problem obtaining the selected recipient details. Please try again later');
                }
            });

肯定不会这么难吧？

是的，数据是正确的。我可以在 Recipients 对象中看到从调用中返回的 3 个项目。

感谢您的指点！

编辑 - 示例 json：

[{
  "Firstname": "Tim",
  "Lastname": "Hughes",
  "EmailAddress": "th@test.com"
}, {
  "Firstname": "Joe",
  "Lastname": "Bloggs",
  "EmailAddress": "jb@test.com"
}]

Answer 1

好的。没有人想通。我相信 OP 想要一个答案。如果您在

中使用""，问题显然不是

"columns": [{
   "Firstname": "Firstname",
   "Lastname": "Lastname",
   "EmailAddress": "EmailAddress"
}]

但是你应该在columns 中定义data 正确

columns: [
    {  data: "Firstname" },
    {  data: "Lastname" },
    {  data: "EmailAddress" }
 ]

查看演示 -> http://jsfiddle.net/0f9Ljfjr/796/

Answer 2

您应该使用 aoColumns 而不是列

让我们考虑下面的例子

 var test = [ {"Firstname":"Tim","Lastname":"Hughes","EmailAddress":"th@test.com"},{"Firstname":"Joe","Lastname":"Bloggs","EmailAddress":"jb@test.com"} ];
                    $('#tblRecipients').DataTable({
                        "aaData": test,
                        "aoColumns": [
    { "mDataProp": "Firstname" },
    { "mDataProp": "Lastname" },
    { "mDataProp": "EmailAddress" }
]
                    });

我还创建了 JS fiddle 请查看https://jsfiddle.net/bj3r2bnf/3/

Answer 3

改变这个

$('#tblRecipients').DataTable({
                        "data": data.Recipients,
                        "columns": [{
                            "Firstname": "Firstname",
                            "Lastname": "Lastname",
                            "EmailAddress": "EmailAddress"
                        }]
                    });

到这里：

$('#tblRecipients').DataTable({
                        data: data.Recipients,
                        columns: [{
                            "Firstname": "Firstname",
                            "Lastname": "Lastname",
                            "EmailAddress": "EmailAddress"
                        }]
                    });

我不知道为什么，但使用 data 和 columns 代替字符串属性名称也适用于 @mauliksakhare 的 jsFiddle。