Two-button pagination still showing text

Ironwil616

My pagination uses the two buttons, assigned class: paging_two_button. After upgrading to version 1.9.0, I get the buttons but also "Previous" and "Next" text displayed on top of them. If I use a debugging tool, I can see this is the text of the anchor tags the buttons actually are, this is their assigned text values. I can remove it dynamically and then the buttons appear normally. When looking at the last version of datatables and the latest, it appears that the rendered HTML is different. Version 1.9.0 seems to inject two anchor tags into a containing div, while the last version's HTML was two divs inside of the container div - no anchor tags. Does anyone else have this issue?

allan

Sounds like you need to update the CSS for 1.9 - see the upgrade notes here (the first one is the relevant one): http://datatables.net/upgrade/1.9

Allan

Ironwil616

Thanks, but that didn't seem to help. I placed the new CSS in, but the text within the anchor tags remains.

allan

If you want the text to be removed then you can use the sNext and sPrevious language parameters and set them to be empty strings. However, bare in mind that removing that text would have a negative impact on usability since there is then no description text saying what the buttons do.

Allan

richardjavascript

Using 1.8.1.js, I got the same issue. But this bug disappears if I use 1.8.1.min.js.

allan

@richardjavascript - Can you link me to a page showing the issue with 1.8.1.js? DataTables' release version is current 1.9.2, it might be worth upgrading if you haven't yet. The release notes I linked to above are relevant.

Thanks,
Allan

Ironwil616

I think Richardjavascript meant jQuery 1.8.1, not the datatables version, but I can't be certain. I'd think that it would not be a usability issue to remove the text when using arrow buttons. If someone can't come to the conclusion that arrows going left and right mean next and previous, I think they're probably beyond hope. I tried to load the pages documenting the use of "sNext" and "sPrevious", but the pages got stuck displaying "Please wait - loading information..."

I also tried to use the documentation inside the datatables plugin to modify these values, but didn't have any luck. What I wanted was to remove the "Next" and "Previous" text values, but add them in when using full numbers pagination (otherwise the next and previous buttons are just empty buttons). However, adding this to my init code didn't work:

[code]
"oLanguage": {
"oPaginate": {
"sNext": "Next"
}
}
[/code]

I tried it with variations of only using "oPaginate" and then only "sNext" without the wrapping of their parents in that bit of code, but that didn't work, either. This is a total hack, but what finally worked for me was to leave "sNext" and "sPrevious" as empty strings in the datatables plugin (lines 9169 and 9190 for me), and add this to my datatables init code:

[code]
"fnDrawCallback": function () {
$(".previous").text("Previous");
$(".next").text("Next");
}
[/code]

This works as I want it to, but I have to modify my init calls for each table that will use full numbers for pagination. Bummer. Allan, whenever you have time, could you post an example of how to modify the "sNext" and "sPrevious" values? I just couldn't get that to work.

Ironwil616

I was just reading through the plugin, and oddly the next for "sNext" and "sPrevious" are listed as being used for "full_numbers" type of pagination. However, they're being pulled in and used for "two_button" pagination as well.

allan

> I'd think that it would not be a usability issue to remove the text when using arrow buttons. If someone can't come to the conclusion that arrows going left and right mean next and previous, I think they're probably beyond hope

Heh - and for people that can't see the screen and use a screenreader?

Here is an example showing how to remove the text: http://live.datatables.net/esemen/edit#javascript,html .

@Ironwil616

> I was just reading through the plugin, and oddly the next for "sNext" and "sPrevious" are listed as being used for "full_numbers" type of pagination. However, they're being pulled in and used for "two_button" pagination as well.

Yup - documentation is slightly out of date there. I've just committed the fix and the documentation on the site will be updated with the 1.9.4 release.

Allan

Ironwil616

Thanks! And I didn't even consider screen readers, so thanks for pointing that out as well. I'm wondering if a title attribute on the nav buttons would 'show' up in a screen reader. In my case some of the areas of the page where I'm using datatables are pretty small, and I have things set up so that the length menu, info section, and navigation are set up at left, middle, and right of the bottom of the table. Adding text to the buttons makes the nav area too big. I'll place around with it.

allan

> I'm wondering if a title attribute on the nav buttons would 'show' up in a screen reader

Depends on the screen reader, but typically yes, it will be referenced in one way or another. Working with screen readers and ARIA is like trying to work with browsers and CSS in 1999. Everyone does it utterly differently from everyone else!

Allan