How can I add Text to the Pagination numbers?

tgrantges

Is this possible? Looking to help with Accessibility WCAG

allan

Hi,

Currently there isn't a trivial way to do that in DataTables without writing a paging plug-in. However, if this is something that is explicitly noted in the WCAG guidelines, it is something that we would look at add into the core - can you give me a link to a page showing that requirement? I hesitate to put it in immediately because we've had feedback from a number of accessibility experts, including from Apple, and this is the first time that point has been raised.

This is the line of code where the value for the paging number button is assigned, so it could readily be added there if needed.

Regards,
Allan

rf1234

table
    .on ('init', function () {
        $('ul.pagination li.paginate_button:not(.previous):not(.next) a').prepend('Page ');
        $('ul.pagination li.paginate_button.previous a, li.paginate_button.next a').append(' Page');
    })

Gives you this:

tgrantges

Thank you so much for your help.
The requirement that I am going after was dictated by my customers interpretation of the the guidelines. I could argue, which I have before, but since I have a solution I will save my argument for another misinterpretation.

The solution I came up with based upon rf1234's response was:

table
.on( 'draw.dt', function () {
    $('ul.pagination li.paginate_button:not(.previous):not(.next) a').prepend('Page ');
 })

using the init event only worked the first time the page was drawn. it would not redraw the prepended 'Page ' on the numbers after activating a different page.

rf1234

Right, "draw" is the better event to use!

As a suggestion: On the rare occasions you don't find a solution using the api just try jQuery with a suitable Data Tables or Editor event. Using an event is required because jQuery doesn't work if the Data Tables or Editor DOM elements are not existing on jQuery code execution.