istudent Ответов: 1

Проблема присвоения значения атрибута данных.

Я пытаюсь присвоить атрибут данных элементу th по щелчку мыши, чтобы я мог отсортировать таблицу. Но это не работает


Дом.

<thead>
    <tr>
        <th class="sort-odrdtl-tbl" data-column="0" data-sort-dir="asc">OrderId</th>
        <th class="sort-odrdtl-tbl" data-column="1" data-sort-dir="asc">Descriptions</th>
        <th class="sort-odrdtl-tbl" data-column="2" data-sort-dir="asc">Quatity</th>
        <th class="sort-odrdtl-tbl" data-column="4" data-sort-dir="asc">Requested Date</th>
        <th class="sort-odrdtl-tbl" data-column="5" data-sort-dir="asc">Reason</th>
    </tr>
</thead>


Что я уже пробовал:

$(document).ready(function () {


       // initialization

       $('#loadingWait').hide();

       var token = $('[name=__RequestVerificationToken]').val();



       $('.sort-odrdtl-tbl').on('click', function () {

          $(this).data('sort-dir', 'desc');
           //$(this).first().data('sort-dir', 'desc');


           debugger;

       })

   });

1 Ответов

Рейтинг:
0

Richard Deeming

Когда вы получаете доступ к атрибуту данных через код, то "kebab-case"имя преобразуется в "camelCaseПоэтому вам нужно использовать:

$(this).data('sortDir', 'desc');

Использование атрибутов данных - Learn web development | MDN[^]

istudent

var dirVal = $(this).data('sort');



if (dirVal === 'asc') {

$(этот).данных('сорт', 'по убыванию');
}
еще {
$(this).data('sort', 'asc');
}

консоли.журнала($(это).данных ("сортировка"));

Я вижу значение desc в журнале консоли, но он не обновил этот элемент.
для простоты я изменил данные-сортировка-Дир данные-сортировка

Richard Deeming

То data метод только обновляет элемент dataset; он не изменяет атрибут элемента.

Если вы также хотите изменить атрибут, вам нужно будет использовать attr метод: 

var $me = $(this);
if ($me.data("sort") === "asc"){
    $me.data("sort", "desc").attr("data-sort", "desc");
}
else {
    $me.data("sort", "asc").attr("data-sort", "asc");
}

istudent

он не обновлялся
&ЛТ;й класс="сортировка-odrdtl-ТБЛ" данные-столбец="0" данные-сортировка="АСК"&ГТ; "Кодзаказа" в</й&ГТ;

к

&ЛТ;й класс="сортировка-odrdtl-ТБЛ" данные-столбец="0" данные-сортировка="убыв"&ГТ; "Кодзаказа" в</й&ГТ;


Надеюсь, вы понимаете, чего я здесь добиваюсь. Я хочу добавить функцию сортировки на голове таблицы. и сохранить его ценность для последующего запроса.

Richard Deeming

Если $me.data("sort", "desc").attr("data-sort", "desc"); если атрибут не изменяется в инструментах разработчика браузера, значит, вы не обновляете правильный элемент.

NB: Убедитесь, что вы смотрите на элемент в инструментах разработчика, а не на "источник представления"; инструменты отражают текущее состояние DOM, тогда как "источник представления" показывает вам источник, возвращенный сервером.