Почему не получается отсортировать таблицу по установленному классу

Question

Подскажите пожалуйста что не так ? Мне нужно отсортировать свою таблицу по определенному столбу устанавливая в нее класс сортировки, но не сортируется пока не нажмешь на заголовок столбца. А мне нужно, что бы при загрузке стр, сортировка происходила сразу по столбцу в котором установлены классы : $('#table').DataTable();

Код :

$(document).ready(function () {
                $('th').each(function (col) {
                    $(this).hover(
                            function () {
                                $(this).addClass('focus');
                            },
                            function () {
                                $(this).removeClass('focus');
                            }
                    );
                    $(this).click(function () {
                        if ($(this).is('.asc')) {
                            $(this).removeClass('asc');
                            $(this).addClass('desc selected');
                            sortOrder = -1;
                        } else {
                            $(this).addClass('asc selected');
                            $(this).removeClass('desc');
                            sortOrder = 1;
                        }
                        $(this).siblings().removeClass('asc selected');
                        $(this).siblings().removeClass('desc selected');
                        var arrData = $('table').find('tbody >tr:has(td)').get();
                        arrData.sort(function (a, b) {
                            var val1 = $(a).children('td').eq(col).text().toUpperCase();
                            var val2 = $(b).children('td').eq(col).text().toUpperCase();
                            if ($.isNumeric(val1) && $.isNumeric(val2))
                                return sortOrder == 1 ? val1 - val2 : val2 - val1;
                            else
                                return (val1 < val2) ? -sortOrder : (val1 > val2) ? sortOrder : 0;
                        });
                        $.each(arrData, function (index, row) {
                            $('tbody').append(row);
                        });
                    });
                });
            });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="singletable table_sort">
  <thead>
    <tr class="text-center">
      <th class="px-2">Напряжение</th>
      <th class="px-2">Мощность</th>
      <th class="px-2 asc selected">Модель серводрайвера</th>
      <th class="px-2">Модель двигателя</th>
    </tr>
  </thead>
  <tbody>
    <tr class="text-center">
      <td class="">1</td>
      <td class="">2.5</td>
      <td class="">mod2</td>
      <td class="">serv3</td>
    </tr>
    <tr class="text-center">
      <td class="">2</td>
      <td class="">3.5</td>
      <td class="">mod1</td>
      <td class="">serv1</td>
    </tr>
    <tr class="text-center">
      <td class="">3</td>
      <td class="">5.5</td>
      <td class="">mod4</td>
      <td class="">serv2</td>
    </tr>
    <tr class="text-center">
      <td class="">4</td>
      <td class="">4.5</td>
      <td class="">mod3</td>
      <td class="">serv4</td>
    </tr>
  </tbody>
</table>

Answer 1

Ваша таблица сортируется только по клику, код который изначально отсортирует таблицу без клика отстуствует. Можно создать функцию для выполнения сортировки и изменения DOM-a, и вызвать ее в нужных местах

$(document).ready(function () {
        $('th').each(function (col) {
            $(this).hover(
                    function () {
                        $(this).addClass('focus');
                    },
                    function () {
                        $(this).removeClass('focus');
                    }
            );
            function getSortedTable() {
                if ($(this).is('.asc')) {
                    $(this).removeClass('asc');
                    $(this).addClass('desc selected');
                    sortOrder = -1;
                } else {
                    $(this).addClass('asc selected');
                    $(this).removeClass('desc');
                    sortOrder = 1;
                }
                $(this).siblings().removeClass('asc selected');
                $(this).siblings().removeClass('desc selected');
                var arrData = $('table').find('tbody >tr:has(td)').get();
                arrData.sort(function (a, b) {
                    var val1 = $(a).children('td').eq(col).text().toUpperCase();
                    var val2 = $(b).children('td').eq(col).text().toUpperCase();
                    if ($.isNumeric(val1) && $.isNumeric(val2))
                        return sortOrder == 1 ? val1 - val2 : val2 - val1;
                    else
                        return (val1 < val2) ? -sortOrder : (val1 > val2) ? sortOrder : 0;
                });
                $.each(arrData, function (index, row) {
                    $('tbody').append(row);
                });
            }

            getSortedTable(); 
            
            $(this).click(function () {
                getSortedTable();
            });
        });
    });

БЛОГ НА HUSL

Почему не получается отсортировать таблицу по установленному классу

Ответы (1 шт):