diff --git a/features/alphabetSearch/dataTables.alphabetSearch.css b/features/alphabetSearch/dataTables.alphabetSearch.css new file mode 100644 index 0000000..3258e1e --- /dev/null +++ b/features/alphabetSearch/dataTables.alphabetSearch.css @@ -0,0 +1,39 @@ +div.alphabet { + position: relative; + display: table; + width: 100%; + margin-bottom: 1em; +} + +div.alphabet span { + display: table-cell; + color: #3174c7; + cursor: pointer; + text-align: center; + width: 3.5% +} + +div.alphabet span:hover { + text-decoration: underline; +} + +div.alphabet span.active { + color: black; +} + +div.alphabet span.empty { + color: red; +} + +div.alphabetInfo { + display: block; + position: absolute; + background-color: #111; + border-radius: 3px; + color: white; + top: 2em; + height: 1.8em; + padding-top: 0.4em; + text-align: center; + z-index: 1; +} diff --git a/features/alphabetSearch/dataTables.alphabetSearch.js b/features/alphabetSearch/dataTables.alphabetSearch.js new file mode 100644 index 0000000..25ae2c8 --- /dev/null +++ b/features/alphabetSearch/dataTables.alphabetSearch.js @@ -0,0 +1,163 @@ +/*! AlphabetSearch for DataTables v1.0.0 + * 2014 SpryMedia Ltd - datatables.net/license + */ + +/** + * @summary AlphabetSearch + * @description Show an alphabet aloneside a table providing search input options + * See http://datatables.net/blog/2014-09-22 for details + * @version 1.0.0 + * @file dataTables.alphabetSearch.js + * @author SpryMedia Ltd (www.sprymedia.co.uk) + * @contact www.sprymedia.co.uk/contact + * @copyright Copyright 2014 SpryMedia Ltd. + * + * This source file is free software, available under the following license: + * MIT license - http://datatables.net/license/mit + * + * This source file is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY + * or FITNESS FOR A PARTICULAR PURPOSE. See the license files for details. + * + * For details please refer to: http://www.datatables.net + */ +(function(){ + + +// Search function +$.fn.dataTable.Api.register( 'alphabetSearch()', function ( searchTerm ) { + this.iterator( 'table', function ( context ) { + context.alphabetSearch = searchTerm; + } ); + + return this; +} ); + +// Recalculate the alphabet display for updated data +$.fn.dataTable.Api.register( 'alphabetSearch.recalc()', function ( searchTerm ) { + this.iterator( 'table', function ( context ) { + draw( this, $('div.alphabet', this.table().container()) ); + } ); + + return this; +} ); + + +// Search plug-in +$.fn.dataTable.ext.search.push( function ( context, searchData ) { + // Ensure that there is a search applied to this table before running it + if ( ! context.alphabetSearch ) { + return true; + } + + if ( searchData[0].charAt(0) === context.alphabetSearch ) { + return true; + } + + return false; +} ); + + +// Private support methods +function bin ( data ) { + var letter, bins = {}; + + for ( var i=0, ien=data.length ; i') + .data( 'letter', '' ) + .data( 'match-count', columnData.length ) + .html( 'None' ) + .appendTo( alphabet ); + + for ( var i=0 ; i<26 ; i++ ) { + var letter = String.fromCharCode( 65 + i ); + + $('') + .data( 'letter', letter ) + .data( 'match-count', bins[letter] || 0 ) + .addClass( ! bins[letter] ? 'empty' : '' ) + .html( letter ) + .appendTo( alphabet ); + } + + $('
') + .appendTo( alphabet ); +} + + +$.fn.dataTable.AlphabetSearch = function ( context ) { + var table = new $.fn.dataTable.Api( context ); + var alphabet = $('
'); + + draw( table, alphabet ); + + // Trigger a search + alphabet.on( 'click', 'span', function () { + alphabet.find( '.active' ).removeClass( 'active' ); + $(this).addClass( 'active' ); + + table + .alphabetSearch( $(this).data('letter') ) + .draw(); + } ); + + // Mouse events to show helper information + alphabet + .on( 'mouseenter', 'span', function () { + alphabet + .find('div.alphabetInfo') + .css( { + opacity: 1, + left: $(this).position().left, + width: $(this).width() + } ) + .html( $(this).data('match-count') ); + } ) + .on( 'mouseleave', 'span', function () { + alphabet + .find('div.alphabetInfo') + .css('opacity', 0); + } ); + + // API method to get the alphabet container node + this.node = function () { + return alphabet; + }; +}; + +$.fn.DataTable.AlphabetSearch = $.fn.dataTable.AlphabetSearch; + + +// Register a search plug-in +$.fn.dataTable.ext.feature.push( { + fnInit: function ( settings ) { + var search = new $.fn.dataTable.AlphabetSearch( settings ); + return search.node(); + }, + cFeature: 'A' +} ); + + +}()); +