将 aria-labelledby 属性添加到 Jquery 数据表分页

Question

Here is the current HTML generated by the Jquery Datatable plug-in for pagination( https://datatables.net/plug-ins/pagination/full_numbers_no_ellipses ):

<div class="dataTables_paginate paging_full_numbers" id="my-table_paginate" aria-label="Pagination navigation">
    <ul class="pagination">
        <li class="paginate_button page-item first disabled" id="my-table_first" aria-label="Go to Page 1">
            <a href="#" aria-controls="my-table" data-dt-idx="0" tabindex="0" class="page-link">First</a>
        </li>
        <li class="paginate_button page-item previous disabled" id="my-table_previous" aria-label="Go to previous page">
            <a href="#" aria-controls="my-table" data-dt-idx="1" tabindex="0" class="page-link">Previous</a>
        </li>
        <li class="paginate_button page-item active" aria-current="page">
            <a href="#" aria-controls="my-table" data-dt-idx="2" tabindex="0" class="page-link">1</a>
        </li>
        <li class="paginate_button page-item ">
            <a href="#" aria-controls="MY-table" data-dt-idx="3" tabindex="0" class="page-link">2</a>
        </li>
        <li class="paginate_button page-item ">
            <a href="#" aria-controls="my-table" data-dt-idx="4" tabindex="0" class="page-link">3</a>
        </li>
        <li class="paginate_button page-item next" id="my-table_next" aria-label="Go to next page">
            <a href="#" aria-controls="my-table" data-dt-idx="5" tabindex="0" class="page-link">Next</a>
        </li>
        <li class="paginate_button page-item last" id="my-table_last" aria-label="Go to last page">
            <a href="#" aria-controls="my-table" data-dt-idx="6" tabindex="0" class="page-link">Last</a>
        </li>
    </ul>
</div>

I want to add aria-labelledby attributes for the individual page numbers 1,2,3. (eg. for page 1, aria-labelledby="Go to Page 1"). I added it to the first, next, previous, and last labels using Jquery as so:

$("#my-table_paginate").attr("aria-label", "Pagination navigation")
$("#my-table_first").attr("aria-label", "Go to Page 1")
$("#my-table_previous").attr("aria-label", "Go to previous page")
$("#my-table_next").attr("aria-label", "Go to next page")
$("#my-table_last").attr("aria-label", "Go to last page")
$("#my-table_paginate .pagination .active").attr("aria-current", "page")

How do I do the same for individual pages since they all share the same class? I'm thinking of using a for loop to loop through the a tags in the ul and adding the aria attribute using jquery, but am not sure how to do so.

Answer 1

Try each loop for class name:

$('.paginate_button').each(function () {
    var pageNumber = $(this).text();
    // check if pageNumber is a number
    if (!isNaN(pageNumber)) {
        $(this).attr('aria-label', 'Go To Page ' + pageNumber);
    }
});

Answer 2

A somewhat brute-force approach is as follows:

  let table = $('#my-table').DataTable( {
    initComplete: function(settings, json) {
      addAriaClasses();
    }
  } );

  $('#my-table').on( 'draw.dt', function () {
    addAriaClasses();
  } );

  function addAriaClasses() {
    $('.paginate_button').each(function () {
      $(this).attr("aria-label", "Go to page " + $(this).text());
    });
    $("#my-table_paginate").attr("aria-label", "Pagination navigation")
    $("#my-table_first").attr("aria-label", "Go to Page 1")
    $("#my-table_previous").attr("aria-label", "Go to previous page")
    $("#my-table_next").attr("aria-label", "Go to next page")
    $("#my-table_last").attr("aria-label", "Go to last page")
    $("#my-table_paginate .pagination .active").attr("aria-current", "page")
  }

} );

This assumes the table is defined with an ID of my-table :

<table id="my-table" ... >

It uses the DataTables initComplete function to handle the initial draw of the table, and then uses the DataTables draw event to handle subsequent re-draws.

I say this is a "brute-force" approach because it first assumes all buttons show page numbers, and then overwrites those special cases which are not numbers, using the code you already provided in the question. You could probably use a switch statement to streamline this.