как сделать таблицы данных после ответа 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, тогда как я хотел изменить вкладки, используя таблицы данных, я пробовал несколько кодов, но ничего не получалось, и это мой 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() делает это автоматически, если тело таблицы пусто.