Any reason why the next page number is getting Selected?

ayo

Hi everyone,

I am using the serverside functionality of datatables (DataTables Bootstrap 3 integration). It works perfectly but i have this very minor bug i am not able to figure out. If there is a lot of pages and the user clicks on page '7' (see attachment), '7' gets highlighted but there is this broken line highlight on '8' that falsely indicates that page '8' is selected.

Here's a snippet of my code:

var oTable = $("#table-id").dataTable({
        searching : true,
        ordering : true,
        processing : true,
        serverSide : true,
        "pagingType" : "full_numbers",

        "ajax" : "${someFunctionCall}",
        "aoColumns" : [ {
            "aTargets" : [ 0 ],
            "orderable" : true,
            "data" : "id",
            "mRender" : rendererForId
        }, {
            "aTargets" : [ 1 ],
            "orderable" : true,
            "data" : "name",
            "mRender" : rendererForName
        }
});

Any ideas?

Thanks.

kthorngren

Maybe its an issue with the "full_numbers" paging plugin? Have you tried disabling it for the default or tried a different one?

Looks like you are using Bootstrap. Could be a CSS issue. Make sure you have the correct Datatables CSS and JS for Bootstrap loaded and not also loading the normal Datatables CSS files. Could be conflicting if both are loaded.

Kevin

ayo

Thanks @kthorngren . I tried using the default pagination style but its the same outcome.
I also inspected the page number to see if there is some kind css conflict. I didnt find anything to prove its a conflict.

I am guessing its more of a focus issue, Datatables does not refresh the focus every time the page number changes. I am also not sure if its by design or a bug.

allan

I think I might be understanding the issue. I made this trivial test case. It shows that when you are in the ellipsis part of the paging, when you click the next page, it is redrawn correctly and the correct number is now highlighted, but the element that was clicked on retains focus.

That sound about right?

Allan

ayo

Yes @allan, you are correct. Thats the issue!

allan

The DataTables default styling doesn't have any styling for :active, where is it appears Bootstrap does there. That why its a different background colour.

I'm not sure why the DataTables styling version doesn't have the focus ring though. Neither of them actually should on click, but when using the keyboard it should be there to allow for easier keyboard navigation.

Hmmm...

Allan

ayo

Thank you so much @allan, I thought so too (about the keyboard navigation), that's why i suggested it might be there by design.

Any ideas on the easiest way to fix the issue...

Thanks.

allan

a:focus {
  outline: none !important;
}

will remove the focus ring: http://live.datatables.net/zegopugo/2/edit .

But that will reduce keyboard accessibility since we don't know which element is focused! I wouldn't normally recommend doing this. In fact, I'm not recommending it just now either .

I'll try to find some time to figure out why the Bootstrap styling is different.

Allan

ayo

Thanks Allan. It's a quick fix that solves the problem. But i am pretty sure the section 508 testers will raise another defect if keyboard accessibility is affected.

I think i will wait for the Bootstrap style fix.

Thank you so much.

Regards,
Ayo.