replaced alphabetSearch.js with corrected one

This commit is contained in:
evilhero 2018-08-23 20:44:31 -04:00
parent 0b394a7ba9
commit 8bdcb2f616
3 changed files with 96 additions and 95 deletions

0
data/css/alphabetSearch.css Normal file → Executable file
View File

View File

@ -101,7 +101,7 @@
<%def name="headIncludes()"> <%def name="headIncludes()">
<link rel="stylesheet" href="interfaces/default/css/data_table.css"> <link rel="stylesheet" href="interfaces/default/css/data_table.css">
<link type="text/css" href="css/alphabetSearch.css" rel="stylesheet"> <link rel="stylesheet" href="css/alphabetSearch.css">
</%def> </%def>
<%def name="javascriptIncludes()"> <%def name="javascriptIncludes()">
@ -114,7 +114,7 @@
$.fn.DataTable.ext.pager.numbers_length = 3; $.fn.DataTable.ext.pager.numbers_length = 3;
var table = $('#series_table').dataTable( { var table = $('#series_table').dataTable( {
"destroy": true, "destroy": true,
"sDom": '<"clear"Af><"clear"lp><"clear">rt<"clear"ip>', "sDom": '<"clear"Af><"clear"lp><"clear">rt<"clear"ip>',
"columnDefs": [ "columnDefs": [
{ "orderable": false, "targets": [5, 7, 10] }, { "orderable": false, "targets": [5, 7, 10] },
{ "visible": false, "targets": [5, 7, 10] }, { "visible": false, "targets": [5, 7, 10] },

View File

@ -4,9 +4,9 @@
/** /**
* @summary AlphabetSearch * @summary AlphabetSearch
* @description Show an alphabet aloneside a table providing search input options * @description Show an alphabet aloneside a table providing search input options
* See http://datatables.net/blog/2014-09-22 for details * See http://datatables.net/blog/2014-09-22 for details
* @version 1.0.0 * @version 1.0.0
* @file dataTables.alphabetSearch.js * @file dataTables.alphabetSearch.js
* @author SpryMedia Ltd (www.sprymedia.co.uk) * @author SpryMedia Ltd (www.sprymedia.co.uk)
* @contact www.sprymedia.co.uk/contact * @contact www.sprymedia.co.uk/contact
@ -26,137 +26,137 @@
// Search function // Search function
$.fn.dataTable.Api.register( 'alphabetSearch()', function ( searchTerm ) { $.fn.dataTable.Api.register( 'alphabetSearch()', function ( searchTerm ) {
this.iterator( 'table', function ( context ) { this.iterator( 'table', function ( context ) {
context.alphabetSearch = searchTerm; context.alphabetSearch = searchTerm;
} ); } );
return this; return this;
} ); } );
// Recalculate the alphabet display for updated data // Recalculate the alphabet display for updated data
$.fn.dataTable.Api.register( 'alphabetSearch.recalc()', function ( searchTerm ) { $.fn.dataTable.Api.register( 'alphabetSearch.recalc()', function ( searchTerm ) {
this.iterator( 'table', function ( context ) { this.iterator( 'table', function ( context ) {
draw( draw(
new $.fn.dataTable.Api( context ), new $.fn.dataTable.Api( context ),
$('div.alphabet', this.table().container()) $('div.alphabet', this.table().container())
); );
} ); } );
return this; return this;
} ); } );
// Search plug-in // Search plug-in
$.fn.dataTable.ext.search.push( function ( context, searchData ) { $.fn.dataTable.ext.search.push( function ( context, searchData ) {
// Ensure that there is a search applied to this table before running it // Ensure that there is a search applied to this table before running it
if ( ! context.alphabetSearch ) { if ( ! context.alphabetSearch ) {
return true; return true;
} }
if ( context.alphabetSearch.match('nonalpha') && !(searchData[1].charAt(0).match(/^[a-zA-Z]/ if ( context.alphabetSearch.match('nonalpha') && !(searchData[1].charAt(0).match(/^[a-zA-Z]/)) ) {
return true; return true;
} }
if ( searchData[1].charAt(0) === context.alphabetSearch ) { if ( searchData[1].charAt(0) === context.alphabetSearch ) {
return true; return true;
} }
return false; return false;
} ); } );
// Private support methods // Private support methods
function bin ( data ) { function bin ( data ) {
var letter, bins = {}; var letter, bins = {};
var nonalpha = 0; var nonalpha = 0;
bins['nonalpha'] = 0; bins['nonalpha'] = 0;
for ( var i=0, ien=data.length ; i<ien ; i++ ) { for ( var i=0, ien=data.length ; i<ien ; i++ ) {
letter = data[i].charAt(13).toUpperCase(); letter = data[i].charAt(13).toUpperCase();
if ( !letter.match(/^[A-Z]/) ) { if ( !letter.match(/^[A-Z]/) ) {
bins['nonalpha']++; bins['nonalpha']++;
} }
else if ( bins[letter] ) { else if ( bins[letter] ) {
bins[letter]++; bins[letter]++;
} }
else { else {
bins[letter] = 1; bins[letter] = 1;
} }
} }
return bins; return bins;
} }
function draw ( table, alphabet ) function draw ( table, alphabet )
{ {
alphabet.empty(); alphabet.empty();
alphabet.append( 'Search: ' ); alphabet.append( 'Search: ' );
var columnData = table.column(1).data(); var columnData = table.column(1).data();
var bins = bin( columnData ); var bins = bin( columnData );
$('<span class="clear active"/>') $('<span class="clear active"/>')
.data( 'letter', '' ) .data( 'letter', '' )
.data( 'match-count', columnData.length ) .data( 'match-count', columnData.length )
.html( 'None' ) .html( 'None' )
.appendTo( alphabet ); .appendTo( alphabet );
$('<span class="clear active"/>') $('<span class="clear active"/>')
.data( 'letter', 'nonalpha' ) .data( 'letter', 'nonalpha' )
.data( 'match-count', bins['nonalpha'] || 0 ) .data( 'match-count', bins['nonalpha'] || 0 )
.html( '0-9' ) .html( '0-9' )
.appendTo( alphabet ); .appendTo( alphabet );
for ( var i=0 ; i<26 ; i++ ) { for ( var i=0 ; i<26 ; i++ ) {
var letter = String.fromCharCode( 65 + i ); var letter = String.fromCharCode( 65 + i );
$('<span/>') $('<span/>')
.data( 'letter', letter ) .data( 'letter', letter )
.data( 'match-count', bins[letter] || 0 ) .data( 'match-count', bins[letter] || 0 )
.addClass( ! bins[letter] ? 'empty' : '' ) .addClass( ! bins[letter] ? 'empty' : '' )
.html( letter ) .html( letter )
.appendTo( alphabet ); .appendTo( alphabet );
} }
$('<div class="alphabetInfo"></div>') $('<div class="alphabetInfo"></div>')
.appendTo( alphabet ); .appendTo( alphabet );
} }
$.fn.dataTable.AlphabetSearch = function ( context ) { $.fn.dataTable.AlphabetSearch = function ( context ) {
var table = new $.fn.dataTable.Api( context ); var table = new $.fn.dataTable.Api( context );
var alphabet = $('<div class="alphabet"/>'); var alphabet = $('<div class="alphabet"/>');
draw( table, alphabet ); draw( table, alphabet );
// Trigger a search // Trigger a search
alphabet.on( 'click', 'span', function () { alphabet.on( 'click', 'span', function () {
alphabet.find( '.active' ).removeClass( 'active' ); alphabet.find( '.active' ).removeClass( 'active' );
$(this).addClass( 'active' ); $(this).addClass( 'active' );
table table
.alphabetSearch( $(this).data('letter') ) .alphabetSearch( $(this).data('letter') )
.draw(); .draw();
} ); } );
// Mouse events to show helper information // Mouse events to show helper information
alphabet alphabet
.on( 'mouseenter', 'span', function () { .on( 'mouseenter', 'span', function () {
alphabet alphabet
.find('div.alphabetInfo') .find('div.alphabetInfo')
.css( { .css( {
opacity: 1, opacity: 1,
left: $(this).position().left, left: $(this).position().left,
width: $(this).width() width: $(this).width()
} ) } )
.html( $(this).data('match-count') ); .html( $(this).data('match-count') );
} ) } )
.on( 'mouseleave', 'span', function () { .on( 'mouseleave', 'span', function () {
alphabet alphabet
.find('div.alphabetInfo') .find('div.alphabetInfo')
.css('opacity', 0); .css('opacity', 0);
} ); } );
// API method to get the alphabet container node // API method to get the alphabet container node
this.node = function () { this.node = function () {
return alphabet; return alphabet;
}; };
}; };
$.fn.DataTable.AlphabetSearch = $.fn.dataTable.AlphabetSearch; $.fn.DataTable.AlphabetSearch = $.fn.dataTable.AlphabetSearch;
@ -164,12 +164,13 @@ $.fn.DataTable.AlphabetSearch = $.fn.dataTable.AlphabetSearch;
// Register a search plug-in // Register a search plug-in
$.fn.dataTable.ext.feature.push( { $.fn.dataTable.ext.feature.push( {
fnInit: function ( settings ) { fnInit: function ( settings ) {
var search = new $.fn.dataTable.AlphabetSearch( settings ); var search = new $.fn.dataTable.AlphabetSearch( settings );
return search.node(); return search.node();
}, },
cFeature: 'A' cFeature: 'A'
} ); } );
}()); }());