mirror of
https://github.com/DataTables/DataTables.git
synced 2024-12-03 15:24:10 +01:00
aec81fd557
- F6 changes the paging control (for the better) to require that there be no `a` tag for the elements which can't be clicked on in the pager. Unforuntately F5 requires them, so we need to detect which one is to be used. This is done using a meta tag based on this discussion: - http://foundation.zurb.com/forum/posts/36681 - F5 remains the main version for the moment, but will be bumped to F6 when the next version of DataTables is released
175 lines
4.2 KiB
JavaScript
175 lines
4.2 KiB
JavaScript
/*! DataTables Foundation integration
|
|
* ©2011-2015 SpryMedia Ltd - datatables.net/license
|
|
*/
|
|
|
|
/**
|
|
* DataTables integration for Foundation. This requires Foundation 5 and
|
|
* DataTables 1.10 or newer.
|
|
*
|
|
* This file sets the defaults and adds options to DataTables to style its
|
|
* controls using Foundation. See http://datatables.net/manual/styling/foundation
|
|
* for further information.
|
|
*/
|
|
(function( factory ){
|
|
if ( typeof define === 'function' && define.amd ) {
|
|
// AMD
|
|
define( ['jquery', 'datatables.net'], function ( $ ) {
|
|
return factory( $, window, document );
|
|
} );
|
|
}
|
|
else if ( typeof exports === 'object' ) {
|
|
// CommonJS
|
|
module.exports = function (root, $) {
|
|
if ( ! root ) {
|
|
root = window;
|
|
}
|
|
|
|
if ( ! $ || ! $.fn.dataTable ) {
|
|
$ = require('datatables.net')(root, $).$;
|
|
}
|
|
|
|
return factory( $, root, root.document );
|
|
};
|
|
}
|
|
else {
|
|
// Browser
|
|
factory( jQuery, window, document );
|
|
}
|
|
}(function( $, window, document, undefined ) {
|
|
'use strict';
|
|
var DataTable = $.fn.dataTable;
|
|
|
|
// Detect Foundation 5 / 6 as they have different element and class requirements
|
|
var meta = $('<meta class="foundation-mq"/>').appendTo('head');
|
|
DataTable.ext.foundationVersion = meta.css('font-family').match(/small|medium|large/) ? 6 : 5;
|
|
meta.remove();
|
|
|
|
|
|
$.extend( DataTable.ext.classes, {
|
|
sWrapper: "dataTables_wrapper dt-foundation",
|
|
sProcessing: "dataTables_processing panel"
|
|
} );
|
|
|
|
|
|
/* Set the defaults for DataTables initialisation */
|
|
$.extend( true, DataTable.defaults, {
|
|
dom:
|
|
"<'row'<'small-6 columns'l><'small-6 columns'f>r>"+
|
|
"t"+
|
|
"<'row'<'small-6 columns'i><'small-6 columns'p>>",
|
|
renderer: 'foundation'
|
|
} );
|
|
|
|
|
|
/* Page button renderer */
|
|
DataTable.ext.renderer.pageButton.foundation = function ( settings, host, idx, buttons, page, pages ) {
|
|
var api = new DataTable.Api( settings );
|
|
var classes = settings.oClasses;
|
|
var lang = settings.oLanguage.oPaginate;
|
|
var aria = settings.oLanguage.oAria.paginate || {};
|
|
var btnDisplay, btnClass;
|
|
var tag;
|
|
var v5 = DataTable.ext.foundationVersion === 5;
|
|
|
|
var attach = function( container, buttons ) {
|
|
var i, ien, node, button;
|
|
var clickHandler = function ( e ) {
|
|
e.preventDefault();
|
|
if ( !$(e.currentTarget).hasClass('unavailable') && api.page() != e.data.action ) {
|
|
api.page( e.data.action ).draw( 'page' );
|
|
}
|
|
};
|
|
|
|
for ( i=0, ien=buttons.length ; i<ien ; i++ ) {
|
|
button = buttons[i];
|
|
|
|
if ( $.isArray( button ) ) {
|
|
attach( container, button );
|
|
}
|
|
else {
|
|
btnDisplay = '';
|
|
btnClass = '';
|
|
tag = null;
|
|
|
|
switch ( button ) {
|
|
case 'ellipsis':
|
|
btnDisplay = '…';
|
|
btnClass = 'unavailable disabled';
|
|
tag = null;
|
|
break;
|
|
|
|
case 'first':
|
|
btnDisplay = lang.sFirst;
|
|
btnClass = button + (page > 0 ?
|
|
'' : ' unavailable disabled');
|
|
tag = page > 0 ? 'a' : null;
|
|
break;
|
|
|
|
case 'previous':
|
|
btnDisplay = lang.sPrevious;
|
|
btnClass = button + (page > 0 ?
|
|
'' : ' unavailable disabled');
|
|
tag = page > 0 ? 'a' : null;
|
|
break;
|
|
|
|
case 'next':
|
|
btnDisplay = lang.sNext;
|
|
btnClass = button + (page < pages-1 ?
|
|
'' : ' unavailable disabled');
|
|
tag = page < pages-1 ? 'a' : null;
|
|
break;
|
|
|
|
case 'last':
|
|
btnDisplay = lang.sLast;
|
|
btnClass = button + (page < pages-1 ?
|
|
'' : ' unavailable disabled');
|
|
tag = page < pages-1 ? 'a' : null;
|
|
break;
|
|
|
|
default:
|
|
btnDisplay = button + 1;
|
|
btnClass = page === button ?
|
|
'current' : '';
|
|
tag = page === button ?
|
|
null : 'a';
|
|
break;
|
|
}
|
|
|
|
if ( v5 ) {
|
|
tag = 'a';
|
|
}
|
|
|
|
if ( btnDisplay ) {
|
|
node = $('<li>', {
|
|
'class': classes.sPageButton+' '+btnClass,
|
|
'aria-controls': settings.sTableId,
|
|
'aria-label': aria[ button ],
|
|
'tabindex': settings.iTabIndex,
|
|
'id': idx === 0 && typeof button === 'string' ?
|
|
settings.sTableId +'_'+ button :
|
|
null
|
|
} )
|
|
.append( tag ?
|
|
$('<'+tag+'/>', {'href': '#'} ).html( btnDisplay ) :
|
|
btnDisplay
|
|
)
|
|
.appendTo( container );
|
|
|
|
settings.oApi._fnBindAction(
|
|
node, {action: button}, clickHandler
|
|
);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
attach(
|
|
$(host).empty().html('<ul class="pagination"/>').children('ul'),
|
|
buttons
|
|
);
|
|
};
|
|
|
|
|
|
return DataTable;
|
|
}));
|