Sortowanie kolumny dopiero po kliknięciu

0

Mam takie pytanie mam sobie tabelkę do której wpuszczam dane i za pomocą DataTables można po kliknięciu na tytuł je sortowac i wszystko jest dobrze, ale mi chodzi jeszcze o coś takiego, że on ma sortować zawartość tej tabeli tylko w momencie klinięcia na tytuł kolumny, ale ten skrypt sortuje nawet dane jak nie jest wykonywana żadna akcja. Chodzi o to że domyślnie nie ma sortować elementów tablicy dopiero w momencie klijniecia jak to zrobić ?

Kod

<script type="text/javascript" src="{{asset('./datatables.css')}}"></script>
<script type="text/javascript" src="{{asset('./datatables.js')}}"></script>

<div class="dayMoodAverage" style=" padding: 10px; ">

    <div style="margin-left: auto;margin-right: auto; ">

        <div class="dateSumDayMood">
            <div class="titleSearchSumDayMood">
                <span class="titleSearchSumDayMood">DATA</span>
            </div>
            <span class="fontSearchSumDay">
                    Od
                    @if ($dateFrom == "")
                    początku
                @else
                    {{$dateFrom}}
                @endif
                    do
                    @if ($dateTo == "")
                    końca
                @else
                    {{$dateTo}}
                @endif
                    </span>
        </div>
        <div class="dateSumDayMood">
            <div class="titleSearchSumDayMood">
                <span class="titleSearchSumDayMood">GODZINA</span>
            </div>
            <span class="fontSearchSumDay">
                    Od
                    @if ($timeFrom == "")
                    najmniejszej
                @else
                    {{$timeFrom}}
                @endif
                    do
                    @if ($timeTo == "")
                    największej
                @else
                    {{$timeTo}}
                @endif
                    </span>
        </div>
        <div class="dateSumDayMoodAverageDayWeek " >
            <div class="titleSearchSumDayMood">
                <span class="titleSearchSumDayMood">DNI TYGODNIA</span>
            </div>
            <span class="fontSearchSumDay">
                        @if (count($week) == 7)
                    <div class="dayWeekDivAverage">Wszystkie dni</div>
                @else
                    @foreach ($week as $week2)

                        @if ($week2 == 2)
                            <div class="dayWeekDivAverageOne"> Poniedziałek </div>
                        @endif

                        @if ($week2 == 3)
                            <div class="dayWeekDivAverageOne"> Wtorek </div>
                        @endif

                        @if ($week2 == 4)
                            <div class="dayWeekDivAverageOne"> Środa </div>
                        @endif

                        @if ($week2 == 5)
                            <div class="dayWeekDivAverageOne"> Czwartek </div>
                        @endif

                        @if ($week2 == 6)
                            <div class="dayWeekDivAverageOne">  Piątek </div>
                        @endif

                        @if ($week2 == 7)
                            <div class="dayWeekDivAverageOne">  Sobota </div>
                        @endif

                        @if ($week2 == 1)
                            <div class="dayWeekDivAverageOne">  Niedziela </div>
                        @endif


                    @endforeach
                @endif
                    </span>
        </div>


    </div></div>

<div class="center" style="width: 100%;">
    <table class="display  cell-border compact stripe row-border" id="tblSort">


        <thead>

        <tr class="borderTrAverageTitle">
           
            <th style="width:26%; text-align: center;  font-weight: bold; font-size: 20px;" class="hrefSettingCursor rightBorder">

                Godzina
            </th>


            <th style="width:15%; text-align: center; font-weight: bold; font-size: 20px;" class="hrefSettingCursor rightBorder">
                Poziom nastroju
            </th>


            <th style="width:15%; text-align: center;  font-weight: bold; font-size: 20px;" class="hrefSettingCursor rightBorder">
                Poziom lęku
            </th>

            <th style="width:15%; text-align: center;  font-weight: bold; font-size: 20px;" class="hrefSettingCursor rightBorder">
                Poziom zdenerowania
            </th>

            <th style="width:15%; text-align: center; font-weight: bold; font-size: 20px;" class="hrefSettingCursor rightBorder">
                Poziom pobudzenia
            </th>

            <th style="width:15%; text-align: center;" class="hrefSettingCursor">
                ilośc nastroji

            </th>
        </tr>
        </thead>
        <tbody>

        @for ($i=0;$i < count($minMax);$i++)
            <tr class="borderTrAverage">
                <td style="text-align: center; font-size: 18px; " class="rightBorder">
                    {{\App\Http\Services\Common::sumHour(explode(":",$minMax[$i]["hourStart"]),$startDay )}} - {{\App\Http\Services\Common::sumHour(explode(":",$minMax[$i]["hourEnd"]) ,$startDay)}}
                </td>



                <td style="text-align: center;font-size: 18px; " class="rightBorder">
                    {{round($minMax[$i]["mood"],3)}}
                </td>


                <td style="text-align: center; font-size: 18px; " class="rightBorder">
                    {{round($minMax[$i]["anxienty"],3)}}
                </td>


                <td style="text-align: center;  font-size: 18px; " class="rightBorder">
                    {{round($minMax[$i]["voltage"],3)}}
                </td>


                <td style="text-align: center;  font-size: 18px; " class="rightBorder">
                    {{round($minMax[$i]["stimulation"],3)}}
                </td>

                <td style="text-align: center;   font-size: 18px; ">
                    {{round($minMax[$i]["count"])}}

                </td>
            </tr>

        @endfor
        </tbody>

    </table>
</div>
<br><br>
<script>
    $('#tblSort').DataTable({
        columnDefs: [
            {
                targets: -1,
                className: 'dt-body-right'
            }
        ],
        "bPaginate": false,

    });
</script>

0

Nie wiem, czy DataTables udostępnia gotową opcję do tego żeby to zmienić w prosty sposób, ale na pewno samemu możesz zbudować podobny mechanizm na evencie click i metodzie order

https://datatables.net/reference/api/order()

https://api.jquery.com/click/

1 użytkowników online, w tym zalogowanych: 0, gości: 1