Fix tabbing through paging buttons in Bootstrap

1. Had tab focusing on both the `li` tag and the `a` tags. now just the
`a` tag.

2. Because the code is destroying and creating elements focus would be
lost. Use the same technique as DataTable's built in paging to retain
focus. it isn't perfect, but it is better than not having it!
pull/187/head
Allan Jardine 10 years ago
parent 91902cdb3b
commit 6708f9c621

@ -39,7 +39,7 @@ DataTable.ext.renderer.pageButton.bootstrap = function ( settings, host, idx, bu
var api = new DataTable.Api( settings ); var api = new DataTable.Api( settings );
var classes = settings.oClasses; var classes = settings.oClasses;
var lang = settings.oLanguage.oPaginate; var lang = settings.oLanguage.oPaginate;
var btnDisplay, btnClass; var btnDisplay, btnClass, counter=0;
var attach = function( container, buttons ) { var attach = function( container, buttons ) {
var i, ien, node, button; var i, ien, node, button;
@ -100,14 +100,15 @@ DataTable.ext.renderer.pageButton.bootstrap = function ( settings, host, idx, bu
if ( btnDisplay ) { if ( btnDisplay ) {
node = $('<li>', { node = $('<li>', {
'class': classes.sPageButton+' '+btnClass, 'class': classes.sPageButton+' '+btnClass,
'aria-controls': settings.sTableId,
'tabindex': settings.iTabIndex,
'id': idx === 0 && typeof button === 'string' ? 'id': idx === 0 && typeof button === 'string' ?
settings.sTableId +'_'+ button : settings.sTableId +'_'+ button :
null null
} ) } )
.append( $('<a>', { .append( $('<a>', {
'href': '#' 'href': '#',
'aria-controls': settings.sTableId,
'data-dt-idx': counter,
'tabindex': settings.iTabIndex
} ) } )
.html( btnDisplay ) .html( btnDisplay )
) )
@ -116,15 +117,34 @@ DataTable.ext.renderer.pageButton.bootstrap = function ( settings, host, idx, bu
settings.oApi._fnBindAction( settings.oApi._fnBindAction(
node, {action: button}, clickHandler node, {action: button}, clickHandler
); );
counter++;
} }
} }
} }
}; };
// IE9 throws an 'unknown error' if document.activeElement is used
// inside an iframe or frame.
var activeEl;
try {
// Because this approach is destroying and recreating the paging
// elements, focus is lost on the select button which is bad for
// accessibility. So we want to restore focus once the draw has
// completed
activeEl = $(document.activeElement).data('dt-idx');
}
catch (e) {}
attach( attach(
$(host).empty().html('<ul class="pagination"/>').children('ul'), $(host).empty().html('<ul class="pagination"/>').children('ul'),
buttons buttons
); );
if ( activeEl ) {
$(host).find( '[data-dt-idx='+activeEl+']' ).focus();
}
}; };

@ -1,8 +0,0 @@
/*!
DataTables Bootstrap 3 integration
©2011-2014 SpryMedia Ltd - datatables.net/license
*/
(function(){var f=function(c,b){c.extend(!0,b.defaults,{dom:"<'row'<'col-sm-6'l><'col-sm-6'f>><'row'<'col-sm-12'tr>><'row'<'col-sm-5'i><'col-sm-7'p>>",renderer:"bootstrap"});c.extend(b.ext.classes,{sWrapper:"dataTables_wrapper form-inline dt-bootstrap",sFilterInput:"form-control input-sm",sLengthSelect:"form-control input-sm"});b.ext.renderer.pageButton.bootstrap=function(g,f,p,k,h,l){var q=new b.Api(g),r=g.oClasses,i=g.oLanguage.oPaginate,d,e,o=function(b,f){var j,m,n,a,k=function(a){a.preventDefault();
c(a.currentTarget).hasClass("disabled")||q.page(a.data.action).draw(!1)};j=0;for(m=f.length;j<m;j++)if(a=f[j],c.isArray(a))o(b,a);else{e=d="";switch(a){case "ellipsis":d="&hellip;";e="disabled";break;case "first":d=i.sFirst;e=a+(0<h?"":" disabled");break;case "previous":d=i.sPrevious;e=a+(0<h?"":" disabled");break;case "next":d=i.sNext;e=a+(h<l-1?"":" disabled");break;case "last":d=i.sLast;e=a+(h<l-1?"":" disabled");break;default:d=a+1,e=h===a?"active":""}d&&(n=c("<li>",{"class":r.sPageButton+" "+
e,"aria-controls":g.sTableId,tabindex:g.iTabIndex,id:0===p&&"string"===typeof a?g.sTableId+"_"+a:null}).append(c("<a>",{href:"#"}).html(d)).appendTo(b),g.oApi._fnBindAction(n,{action:a},k))}};o(c(f).empty().html('<ul class="pagination"/>').children("ul"),k)};b.TableTools&&(c.extend(!0,b.TableTools.classes,{container:"DTTT btn-group",buttons:{normal:"btn btn-default",disabled:"disabled"},collection:{container:"DTTT_dropdown dropdown-menu",buttons:{normal:"",disabled:"disabled"}},print:{info:"DTTT_print_info"},
select:{row:"active"}}),c.extend(!0,b.TableTools.DEFAULTS.oTags,{collection:{container:"ul",button:"li",liner:"a"}}))};"function"===typeof define&&define.amd?define(["jquery","datatables"],f):"object"===typeof exports?f(require("jquery"),require("datatables")):jQuery&&f(jQuery,jQuery.fn.dataTable)})(window,document);
Loading…
Cancel
Save