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);
}
