Question

我的表中有两列第一个名字和姓氏。我如何连接它们？我在here之前看过这个问题，但是无法得到任何有效的答案。

 var table = $("#LockerTable").DataTable({
                    ajax: {
                        url: "/api/lockers",
                        dataSrc: "",
                        "data": null
                           },
                    columns: [
                        {
                            data: "lockerNumber"
                        },
                        {
                            "data": "location"
                        },
                        {
                            "data": "student.firstName",
                            "defaultContent": "Not assigned yet"
                        }
                    ]
                });

更新根据annoyingmouse的回答，我试过了如下：

 $('#example').DataTable({
                "ajax": {                       
                    "url": '/api/lockers',
                    "data": null,
                    "dataSrc": ""                                            
                },

                "columns": [
                  {
                      "data": "lockerNumber"
                  },
                  {
                      "data": "location"
                  },
                  {
                      "data": "student",
                      "defaultContent": "Not Assigned Yet",
                      "render": function (d, t, r) {
                          return r.student.firstName;
                      }
                  }
                ]
            });

结果是

无法读取属性'firstName'为null

以下是导航到api /储物柜时返回数据的方式

<LockerVm>
<LockerId>1</LockerId>
<LockerNumber>1</LockerNumber>
<StudentId>1</StudentId>
<student>
<FirstName>David</FirstName>
<LastName>Goldberg</LastName>
<StudentId>1</StudentId>
</student>
</LockerVm>

更新2：

当我登录控制台时，我得到了数据，但奇怪的是我得到了相同的数据4次（下面的局部视图）。 注意：并非所有储物柜都分配给学生。

Answer 1

你需要一个渲染功能：

var data = [{
    "student": {
      "firstname": "John",
      "lastname": "Smith"
    },
    "lockernumber": "1",
    "location": "Wales"
  },
  {
    "student": {
      "firstname": "Jane",
      "lastname": "Smith"
    },
    "lockernumber": "2",
    "location": "Scotland"
  },
  {
    "student": {
      "firstname": "Joe",
      "lastname": "Smith"
    },
    "lockernumber": "3",
    "location": "England"
  },
  {
    "lockernumber": "4",
    "location": "Ireland"
  }
];

$('#example').DataTable({
  "ajax": {
    "type": 'POST',
    "dataType": 'json',
    "url": '/echo/json/',
    "data": {
      "json": JSON.stringify(data)
    },
    "dataSrc": ""
  },
  columns: [{
      "data": "lockernumber"
    },
    {
      "data": "location"
    },
    {
      "data": "location",
      "render": function(d, t, r) {
        if (r.hasOwnProperty('student')) {
          var student = r.student;
          var returnString = "";
          if (student.hasOwnProperty('firstname')) {
            returnString = student.firstname;
          }
          if (student.hasOwnProperty('lastname')) {
            if (returnString.length) {
              returnString += " " + student.lastname;
            } else {
              returnString = student.lastname;
            }
          }
          return returnString;
        } else {
          return "Not assigned"
        }
      }
    }
  ]
});

在某种程度上，您对列使用data的内容并不重要，但您需要访问整行（示例中为r）并抓住您需要的内容render功能。代码使用ES6箭头函数和模板文字，但它应该很容易转换为ES5。工作示例here。另请注意dataSrc。

希望有所帮助。

注意

请注意，我使用JSFiddles来模拟AJAX请求，你需要使用自己的AJAX调用，它应该保持原样。

如何连接两个数据库列的数据？

1 个答案: