Add aria-labelledby attribute to Jquery Datatable Pagination-CodePudding

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  id="my-table_paginate" aria-label="Pagination navigation">
    <ul >
        <li  id="my-table_first" aria-label="Go to Page 1">
            <a href="#" aria-controls="my-table" data-dt-idx="0" tabindex="0" >First</a>
        </li>
        <li  id="my-table_previous" aria-label="Go to previous page">
            <a href="#" aria-controls="my-table" data-dt-idx="1" tabindex="0" >Previous</a>
        </li>
        <li  aria-current="page">
            <a href="#" aria-controls="my-table" data-dt-idx="2" tabindex="0" >1</a>
        </li>
        <li >
            <a href="#" aria-controls="MY-table" data-dt-idx="3" tabindex="0" >2</a>
        </li>
        <li >
            <a href="#" aria-controls="my-table" data-dt-idx="4" tabindex="0" >3</a>
        </li>
        <li  id="my-table_next" aria-label="Go to next page">
            <a href="#" aria-controls="my-table" data-dt-idx="5" tabindex="0" >Next</a>
        </li>
        <li  id="my-table_last" aria-label="Go to last page">
            <a href="#" aria-controls="my-table" data-dt-idx="6" tabindex="0" >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.

CodePudding user response：

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.

CodePudding user response：

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);
    }
});