dataTables nie działa pod ajaxem

Mam taki problem chcę dodać funkcje sortowania do tabeli i taką funkcje sortowania oferuje biblioteka dataTables tylko, że jak jej użyłem a dane są pobierane przez ajax to tabela się rozjeżdza jak dodaje bez ajaxa to wszsytko działa.

<div class="center" style="width: 100%;">
    <table class="display table" id="averageTable">
      @if ($day == "on")
      <thead>
            <tr>
      
            <th style="width: 18%;">
                Data <br>{{$hour}}
            </th>
            <th>
                Poziom nastroju
            </th>
            <th>
                odchylenie nastroju
                
            </th>
            <th>
                różnica nastroju (min/max)
                
            </th>
            <th>
                Poziom lęku
            </th>
            <th>
                odchylenie lęku
                
            </th>
            <th>
                Poziom zdenerowania
            </th>
            <th>
                odchylenie zdenerowania
                
            </th>
            <th>
                Poziom pobudzenia
            </th>
            <th>
                odchylenie pobudzenia
                
            </th>
      </tr>
      </thead>
      <tbody>
      <tr>
            <td>
                Dla tego czasu
            </td>
            <td>
                {{$list[0]}}
            </td>
            <td>
                {{$list[1]}}
            </td>
            <td>
                {{$list[8]}} / {{$list[9]}}
            </td>
            <td>
                {{$list[2]}}
            </td>
            <td>
                {{$list[3]}}
            </td>
            <td>
                {{$list[4]}}
            </td>
            <td>
                {{$list[5]}}
            </td>
            <td>
                {{$list[6]}}
            </td>
            <td>
                {{$list[7]}}
            </td>
        </tr>
      
      </tbody>
      
      @else
      <tr>
            <td style="width: 18%;">
                Data <br>{{$hour}}
            </td>
            <td>
                Poziom nastroju
            </td>
            <td>
                odchylenie nastroju
                
            </td>
            <td>
                różnica nastroju (min/max)
                
            </td>
            <td>
                Poziom lęku
            </td>
            <td>
                odchylenie lęku
                
            </td>
            <td>
                Poziom zdenerowania
            </td>
            <td>
                odchylenie zdenerowania
                
            </td>
            <td>
                Poziom pobudzenia
            </td>
            <td>
                odchylenie pobudzenia
                
            </td>
      </tr>
        @for ($i=0;$i < count($days);$i++)
        <tr>
            <td>
                {{$days[$i]}}
            </td>
            <td>
                {{$list[0][$i]}}
            </td>
            <td>
                {{$harmonyMood[$i]}}
                
            </td>
            <td>
                {{$list[4][$i]}} / {{$list[5][$i]}}
                
            </td>
            <td>
                {{$list[1][$i]}}
            </td>
            <td>
                {{$harmonyAnxiety[$i]}}
                
            </td>
            
            <td>
                {{$list[2][$i]}}
            </td>
            <td>
                {{$harmonyNer[$i]}}
                
            </td>
            
            <td>
                {{$list[3][$i]}}
            </td>
            <td>
                {{$harmonyStimu[$i]}}
                
            </td>
        </tr>
        @endfor
      @endif
    </table>
</div>

<script>
    $(document).ready( function () {
    $('#averageTable').DataTable();
} );
    </script>

Drugi plik

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">
  
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>




<div id='averageMoods' style='display: none;'>
    <form method="get">
        <table class="table">
            <tr>
                <td class="center">
                    Data od 
                </td>
                <td class="center">
                    <input type="date" name="dateFrom" class="form-control">
                </td>
                <td class="center">
                    Godzina od
                </td>
                <td>
                    <input type="time" name="timeFrom" class="form-control">
                </td>
                <td class="center">
                    dzień
                </td>
                <td colspan="2">
                    <select name="day" class="form-control">
                        <option value="" selected>Wszystkie</option>
                        <option value="1">Poniedziałek</option>
                        <option value="2">Wtorek</option>
                        <option value="3">Środa</option>
                        <option value="4">Czwartek</option>
                        <option value="5">Piątek</option>
                        <option value="6">Sobota</option>
                        <option value="7">Niedziela</option>
                        
                        
                    </select>
                </td>
            </tr>
            <tr>
                <td class="center">
                    Data do
                </td>
                <td class="center">
                    <input type="date" name="dateTo" class="form-control">
                </td>
                <td class="center">
                    Godzina do
                </td>
                <td>
                    <input type="time" name="timeTo" class="form-control">
                </td>
                <td class="center">
                    Sumuj wszystkie dni <input type="checkbox" class="form-control" name="sumDay">
                </td>
                <td class="center">
                    dla całego dnia <input type="checkbox" class="form-control" name="allDay">
                </td>
                <td>
                    
                </td>
            </tr>
        <tr>
            <td colspan="6" class="center">
                <input type="button" onclick="searchAI('{{route('Search.AI')}}')" value="Szukaj" class="btn btn-primary">
            </td>
        </tr>
        <tr>
        <td colspan="6">
            <div id="AI" class="tras"></div>
            
        </td>
        </tr>
        </table>
    </form>
</div>

function searchAI(url) {
    
var response;
$.ajax({ type: "GET",   
     url: url + "?" + $("form").serialize(),   
     async: false,
     success : function(text)
     {
         response= text;
     }
});
    //$("#AI").load(url + "?" + $("form").serialize()).append();
    $("#AI").prepend(response);
}

Co to znaczy: "rozjeżdża się"? Patrzyłeś w DevToolsach czy przez Ajax idzie to samo?
To dzielenie to Ci się przy tym Ajaxie wykonuje?

            <td>
                {{$list[4][$i]}} / {{$list[5][$i]}}
            </td>

Wykonuje

I tabela z ajaxem uruchomiona bez dataTables w2yświetla się prawidłowo.

No ale wykonuje Ci się dzielenie zmiennych otrzymywanych przez Ajax? Przecież tu już Blade nie jest renderowany. Nie opisałeś co to znaczy, że się rozjeżdża.

Może nie rozjeżdza, ale tabela jest maxyamalnie rozjasniona dopieor jak zaznaczę to widać tekst i nie ma tych hiperłączy co oferuje datatables.

O które łączą Ci chodzi? Coś Ci się jednak nie ładuje jak należy CSS?
Nie wiem jak to napisałeś ale do prostych tabel możesz użyć https://github.com/yajra/laravel-datatables
Tu masz rozwiązane w zasadzie wszystko

Już wiem co było po prostu była źle ułożona tabela nie było thead i tbody, teraz działa tylko teraz nie wiem jak się za pomocą jquery zmienia własciwości html tej tabeli bo mi wychodzi za div.