javascript - 如何在响应ajax后制作数据表

Question

我这里有一个问题，我想在从ajax获取数据后使用数据表创建一个表，我不知道如何制作它，当我使用append来制作表时，有人可以帮助我吗？

$.ajax({
            type: "get",
            url: "{{route('getAccount-user')}}"+"/"+user_id,
            dataType: "json",
                success: function(data){
                    if (data.length==0){
                        $('#list-account').append(`
                        <tr id="">
                                <td colspan="5" class="text-center"> 
                                   <h5> Data not fount </h5>
                                </td>               
                            </tr>
                        `)
                    }
                    else{
                    $.each(data, function(key, value) {
                        $('#list-account').append(`
                            <tr>
                                <td>
                                    <input type="hidden" id="finfini_id" value="${value.finfini_account_id}">
                                    <input type="hidden" id="connect_id" value="${value.connect_id}">
                                    ${value.fullname}
                                </td>
                                <td>
                                    ${value.month}
                                </td>
                                <td>
                                    ${value.name}
                                </td>
                                <td>
                                    ${value.debet}
                                </td>
                                <td>
                                    ${value.kredit}
                                </td>
                                <td>
                                    ${value.balance}
                                </td>

                            </tr>
                            `)

                    });
                    }

                },
        });

暂时我使用jquery中的append函数制作选项卡，而我想使用数据表更改选项卡，我尝试了几个代码但没有任何效果 这是我的 html 代码

<table id="tAccount" class="table display" style="width:100%">
                     <thead class="thead-dark">  
                        <tr>
                            <th scope="col">Fullname</th>
                            <th scope="col">Month</th>
                            <th scope="col">Bank</th>
                            <th scope="col">Debet</th>
                            <th scope="col">Kredit</th>
                            <th scope="col">Balance</th>
                          </tr>
                     </thead>
                     <tbody id="list-account">

                     </tbody>  

                </table>  

Answer 1

您应该将具有 ajax 和 columns 属性的对象传递给 DataTable() 方法。并从表中删除 tbody:

  $('#tAccount').DataTable({
    ajax: "{{route('getAccount-user')}}" + '/' + user_id,
    columns: [
      { data: 'fullname' },
      { data: 'month' },
      { data: 'name' },
      { data: 'debet' },
      { data: 'kredit' },
      { data: 'balance' }
    ]
});

<table id="tAccount" class="table display" style="width:100%">
 
  <thead class="thead-dark">  
    <tr>
      <th scope="col">Fullname</th>
      <th scope="col">Month</th>
      <th scope="col">Bank</th>
      <th scope="col">Debet</th>
      <th scope="col">Kredit</th>
      <th scope="col">Balance</th>
    </tr>
  </thead>

</table>  

但是，您将无法使用此方法插入这些隐藏的输入。自己创建表格主体更加灵活。

在每次迭代时将元素附加到 DOM 的代码效率有点低。这是稍微修改和优化的版本:

$.ajax({

  type: 'get',
  url: "{{route('getAccount-user')}}" + '/' + user_id,
  dataType: 'json',

  success: function(data) {
    let tbody = '';

    if (data.length > 0) {
      $.each(data, function(key, value) {
        tbody += `
          <tr>
            <td>
              <input type="hidden" id="finfini_id" value="${value.finfini_account_id}">
              <input type="hidden" id="connect_id" value="${value.connect_id}">
              ${value.fullname}
            </td>
            <td>${value.month}</td>
            <td>${value.name}</td>
            <td>${value.debet}</td>
            <td>${value.kredit}</td>
            <td>${value.balance}</td>
          </tr>
        `;
      });
  
      $('#list-account').append(tbody).DataTable();
    }
  }
  
});

PS，无需插入“未找到数据”消息。如果表主体为空，DataTable() 会自动执行此操作。