如何将多个json数据组合成jquery数据表中的单列？

Question

我从后端收到此 JSON 响应。

{
  "data": [
    {
      "id": 6,
      "firstname": "fname",
      "middlename": "mname",
      "lastname": "lname",
    },
    ...
  ]
}

使用 jquery 数据表使用 ajax 请求从 JSON 响应创建表。

$number = 1;
$("#people-table").DataTable({
    ajax: {
        url: window.location.href + '/fetchdata',
        method: "GET",
        dataType: "json",
        dataSrc: "data"
    },
    columns: [
        {
            render: function () {
                return $number++;
            }
        },
        { data: 'firstname' },
        { data: 'middlename' },
        { data: 'lastname' },
    ]
});

<table>
  <thead>
     <tr>
        <th>No.</th>
        <th>Profile</th>
        <th>Firstname</th>
        <th>Middlename</th>
        <th>Lastname</th>
    </tr>
  </thead>
  <tbody>
      {{-- data --}}
  </tbody>
</table>

我在 html 表中获得了此代码的正确输出，但现在我想使用 jquery 数据表将所有三个字段名字、中间名和姓氏合并到一个名为 fullname 的字段中

Answer 1

你可以做这样的事情而不是数据表。这是一个纯 JavaScript 的例子。

HTML

 <thead>
  <tr>
     <th>No.</th>
     <th>Profile</th>
     <th>Full Name</th>
 </tr>
</thead>
<tbody id="myDataTable"></tbody>

Javascript

       <script>

       function MyFunction(){
        $.ajax({
         url: 'your-url' ,
         type: 'get',
         datetype:"json",
         success: function(res){
            var myData = res.data //collection from backend
            let str = "";
            myData.forEach((data, key) => {
                str += `
                    <tr>
                        <td> ${data.no} </td>
                        <td> ${data.profile} </td>
                        <td> 
                           ${data.firstname} 
                           ${data.middlename}
                           ${data.lastname} 
                        </td>
            
                    </tr>
                 `
            })
            $("#myDataTable").html(str);
         }
        })
       }
      
    </script>

确保在需要显示时调用您的函数。