在 sortable table 和 Jquery 上更改升序和降序状态的 aria-label

Question

您好，我正在尝试更改可排序列上的 aria-labels。我正在使用 Jquery。我可以让标签改变，但我不知道如何改变它，这样标签就会根据它是升序还是降序而改变。截至目前，它更改了标签，但是当您单击箭头时，它默认返回到来自数据表的原始标签 jquery。

    $(document).ready(function(){

var x = $("div.masthead a:first").attr('href');
var lang = x.slice(-2);

if (lang==='fr'){
var sSearchfr = "filtre";
var sInfoEmptyfr = "Résultats 0 à 0 sur 0";
var sInfofr = "Résultats _START_ à _END_ sur _TOTAL_";
var sZeroRecordsfr = "Aucun résultat pour cette recherche. Il se peut que le nom recherché soit mal orthographié ou que le député en question n’ait présenté aucune demande de remboursement depuis deux ans";
var sInfoFilteredfr = "filtrés sur  _MAX_";
var sortdn = ": Trier les résultats par ordre croissant";
var sortup = ": Trier les résultats par ordre décroissant";
}
$('#form1\:memberRidingList').DataTable({
     "oLanguage": {
             "sInfo": sInfofr,
          "sInfoEmpty": sInfoEmptyfr,
          "sZeroRecords": sZeroRecordsfr,
          "sInfoFiltered": sInfoFilteredfr,
          "sSearch": sSearchfr,

           "oAria": {
        "sSortAscending": sortup,
        "sSortDescending": sortdn
        }
    },
"paging":   false
} );

$("table.display tbody tr:nth-child(even)").addClass("even");

if (lang==='en'){

$(".dataTables_filter label").html('Filter:<input type="search" class placeholder aria-controls="form1:memberRidingList">');    //add new label 'filter' replace 'Search'

}

});

我是否应该根据匹配 html 和标签名称来更改它？谢谢

Answer 1

SOLUTION

您可以使用 language 选项并使用 aria.sortAscending 和 aria.sortDescending 属性自定义文本。

var table = $('#example').DataTable({
   "language": {
        "aria": {
            "sortAscending":  ": Activate to sort column ascending",
            "sortDescending": ": Activate to sort column descending"
        }           
   }
});

DEMO

有关代码和演示，请参阅 this jsFiddle。

在 sortable table 和 Jquery 上更改升序和降序状态的 aria-label

Changing aria-label for ascending and descending states on a sortable table with Jquery

sorting

jquery

datatables

wai-aria