Tabindex, checkbox selection, responsive

Hendrik_S

I just noticed the following.

If i am using "Checkbox selection" then in the source there is something like:

<td class=" select-checkbox"></td>

But if i set the responsive mode to: true...then suddenly there is:

<td class=" select-checkbox" tabindex="0"></td>

So without "responsive: true" there is no tabindex and with responsive mode there is. Is this a bug?

The thing is that i wanted to get rid of the blue border line (i think outline) on selection. I am using Chrome is this case. I found out that without "responsive: true" there was no blue border line, but with it there was. That's why i started to check the tabindex etcetera.

Hendrik_S

By the way...now i just added "outline: none" to the css rule:

table.dataTable td.select-checkbox {

Hendrik_S

For the people who are interested in it, see:

https://jsfiddle.net/MaartenB/qvpe6xvc/3/

I am totally new to DataTables and Jquery, so correct me if i made mistakes. And my English is not that well, so then you already know ;).

But i changed the DataTables "Checkbox selection" and "Check all" etcetera a little bit, because of the following:

DataTable is working with self made css checkboxes.
Disadvantages:
1. Click a couple of times on the "selector" right after each other. For visitors this can be the case if they are making some mistakes and they want to correct the selection immidiately. Result: Not working, because there has to be some time between two clicks. In case of real checkboxes at least you don't have that problem when clicking on the checkbox itself.
2. The DataTables self made css checkbox is working with "text-shadow" in css to create some space around the checkmark, so the checkbox has some kind of opening. The disadvantage of this is that you have to change the color used in "text-shadow" if the background color is changing. The advantage of just using real checkboxes is that you don't have that problem and if users want to style their real checkboxes that's also still possible.

"Checkbox selection" select all:
DataTables has a button option for that, but i think it's better to make a cell for that in the "thead". Visitors are not really used to a button for that, so they have to search for it. It also cost you space on the page while you don't use the space in the thead for the "checkbox selection" column.

Be aware that if you have multiple pages that "check all" means that you check / select all rows (also on other pages), but that is what i wanted.