I want to show a small problem with the design of the example screenshot.
This is a screenshot of an example http://datatables.net/release-datatables/examples/basic_init/themes.html in the Google chrome. It reflects very well the problem. Yes, I know how to fix it in this case, but it does not solve the global problem. The fact that the button "3" is above the "2", so the screenshot shows how the right edge overlaps the "2" when you click on it. I partially solved the problem by specifying "z-index: 1;" in the CSS properties of active button.
But with animation effect it (smooth change of style), I'm still watching brief disappearance of right border at the button.
I think it would be possible to completely solve the problem in the DataTables code, raising the index of the active button and lowering it all inactive buttons on the hover event, clicking the buttons ...
Could you use :hover in CSS to raise the index as well? If that works I'll fold that into the latest jQuery UI integration CSS for DataTables.
Yes, I'm doing now, but it works if you do not use animation in my case transition: color .2s linear, background .2s linear, border-color .2s linear;
I think for the z-index on :hover and :active I'm happy to commit that into the core. For z-index with animation, I'll not commit that in at this time. A plug-in can be used to provide it if you need it or use a little bit of css to add a bit of space between the buttons.