Create alphabetSearch.js

data/js/alphabetSearch.js

@@ -0,0 +1,176 @@
+/*! 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(   
+                        new $.fn.dataTable.Api( context ),
+                        $('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 ( context.alphabetSearch.match('nonalpha') && !(searchData[1].charAt(0).match(/^[a-zA-Z]/
+                return true;
+        }
+        if ( searchData[1].charAt(0) === context.alphabetSearch ) {
+                return true;
+        }
+
+        return false;
+} );
+
+
+// Private support methods
+function bin ( data ) {
+        var letter, bins = {};
+        var nonalpha = 0;
+        bins['nonalpha'] = 0;
+        for ( var i=0, ien=data.length ; i<ien ; i++ ) {
+                letter = data[i].charAt(13).toUpperCase();
+                if ( !letter.match(/^[A-Z]/) ) {
+                        bins['nonalpha']++;
+                        alert("letter matched nonalpha! bincnt now " + bins['nonalpha']);
+                }
+                else if ( bins[letter] ) {
+                        bins[letter]++;
+                }
+                else {
+                        bins[letter] = 1;
+                }
+        }
+        return bins;
+}
+
+function draw ( table, alphabet )
+{
+        alphabet.empty();
+        alphabet.append( 'Search: ' );
+
+        var columnData = table.column(1).data();
+        var bins = bin( columnData );
+
+        $('<span class="clear active"/>')
+                .data( 'letter', '' )
+                .data( 'match-count', columnData.length )
+                .html( 'None' )
+                .appendTo( alphabet );
+
+        $('<span class="clear active"/>')
+                .data( 'letter', 'nonalpha' )
+                .data( 'match-count', bins['nonalpha'] || 0 )
+                .html( '0-9' )
+                .appendTo( alphabet );
+
+        for ( var i=0 ; i<26 ; i++ ) {
+                var letter = String.fromCharCode( 65 + i );
+
+                $('<span/>')
+                        .data( 'letter', letter )
+                        .data( 'match-count', bins[letter] || 0 )
+                        .addClass( ! bins[letter] ? 'empty' : '' )
+                        .html( letter )
+                        .appendTo( alphabet );
+        }
+
+        $('<div class="alphabetInfo"></div>')
+                .appendTo( alphabet );
+}
+
+
+$.fn.dataTable.AlphabetSearch = function ( context ) {
+        var table = new $.fn.dataTable.Api( context );
+        var alphabet = $('<div class="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'
+} );
+
+
+}());