| 8 |
lars |
1 |
/*! AlphabetSearch for DataTables v1.0.0
|
|
|
2 |
* 2014 SpryMedia Ltd - datatables.net/license
|
|
|
3 |
*/
|
|
|
4 |
|
|
|
5 |
/**
|
|
|
6 |
* @summary AlphabetSearch
|
|
|
7 |
* @description Show an set of alphabet buttons alongside a table providing
|
|
|
8 |
* search input options
|
|
|
9 |
* @version 1.0.0
|
|
|
10 |
* @file dataTables.alphabetSearch.js
|
|
|
11 |
* @author SpryMedia Ltd (www.sprymedia.co.uk)
|
|
|
12 |
* @contact www.sprymedia.co.uk/contact
|
|
|
13 |
* @copyright Copyright 2014 SpryMedia Ltd.
|
|
|
14 |
*
|
|
|
15 |
* License MIT - http://datatables.net/license/mit
|
|
|
16 |
*
|
|
|
17 |
* For more detailed information please see:
|
|
|
18 |
* http://datatables.net/blog/2014-09-22
|
|
|
19 |
*/
|
|
|
20 |
(function(){
|
|
|
21 |
|
|
|
22 |
|
|
|
23 |
// Search function
|
|
|
24 |
$.fn.dataTable.Api.register( 'alphabetSearch()', function ( searchTerm ) {
|
|
|
25 |
this.iterator( 'table', function ( context ) {
|
|
|
26 |
context.alphabetSearch = searchTerm;
|
|
|
27 |
} );
|
|
|
28 |
|
|
|
29 |
return this;
|
|
|
30 |
} );
|
|
|
31 |
|
|
|
32 |
// Recalculate the alphabet display for updated data
|
|
|
33 |
$.fn.dataTable.Api.register( 'alphabetSearch.recalc()', function ( searchTerm ) {
|
|
|
34 |
this.iterator( 'table', function ( context ) {
|
|
|
35 |
draw(
|
|
|
36 |
new $.fn.dataTable.Api( context ),
|
|
|
37 |
$('div.alphabet', this.table().container())
|
|
|
38 |
);
|
|
|
39 |
} );
|
|
|
40 |
|
|
|
41 |
return this;
|
|
|
42 |
} );
|
|
|
43 |
|
|
|
44 |
|
|
|
45 |
// Search plug-in
|
|
|
46 |
$.fn.dataTable.ext.search.push( function ( context, searchData ) {
|
|
|
47 |
// Ensure that there is a search applied to this table before running it
|
|
|
48 |
if ( ! context.alphabetSearch ) {
|
|
|
49 |
return true;
|
|
|
50 |
}
|
|
|
51 |
|
|
|
52 |
if ( searchData[0].charAt(0) === context.alphabetSearch ) {
|
|
|
53 |
return true;
|
|
|
54 |
}
|
|
|
55 |
|
|
|
56 |
return false;
|
|
|
57 |
} );
|
|
|
58 |
|
|
|
59 |
|
|
|
60 |
// Private support methods
|
|
|
61 |
function bin ( data ) {
|
|
|
62 |
var letter, bins = {};
|
|
|
63 |
|
|
|
64 |
for ( var i=0, ien=data.length ; i<ien ; i++ ) {
|
|
|
65 |
letter = data[i].charAt(0).toUpperCase();
|
|
|
66 |
|
|
|
67 |
if ( bins[letter] ) {
|
|
|
68 |
bins[letter]++;
|
|
|
69 |
}
|
|
|
70 |
else {
|
|
|
71 |
bins[letter] = 1;
|
|
|
72 |
}
|
|
|
73 |
}
|
|
|
74 |
|
|
|
75 |
return bins;
|
|
|
76 |
}
|
|
|
77 |
|
|
|
78 |
function draw ( table, alphabet )
|
|
|
79 |
{
|
|
|
80 |
alphabet.empty();
|
|
|
81 |
alphabet.append( 'Search: ' );
|
|
|
82 |
|
|
|
83 |
var columnData = table.column(0).data();
|
|
|
84 |
var bins = bin( columnData );
|
|
|
85 |
|
|
|
86 |
$('<span class="clear active"/>')
|
|
|
87 |
.data( 'letter', '' )
|
|
|
88 |
.data( 'match-count', columnData.length )
|
|
|
89 |
.html( 'None' )
|
|
|
90 |
.appendTo( alphabet );
|
|
|
91 |
|
|
|
92 |
for ( var i=0 ; i<26 ; i++ ) {
|
|
|
93 |
var letter = String.fromCharCode( 65 + i );
|
|
|
94 |
|
|
|
95 |
$('<span/>')
|
|
|
96 |
.data( 'letter', letter )
|
|
|
97 |
.data( 'match-count', bins[letter] || 0 )
|
|
|
98 |
.addClass( ! bins[letter] ? 'empty' : '' )
|
|
|
99 |
.html( letter )
|
|
|
100 |
.appendTo( alphabet );
|
|
|
101 |
}
|
|
|
102 |
|
|
|
103 |
$('<div class="alphabetInfo"></div>')
|
|
|
104 |
.appendTo( alphabet );
|
|
|
105 |
}
|
|
|
106 |
|
|
|
107 |
|
|
|
108 |
$.fn.dataTable.AlphabetSearch = function ( context ) {
|
|
|
109 |
var table = new $.fn.dataTable.Api( context );
|
|
|
110 |
var alphabet = $('<div class="alphabet"/>');
|
|
|
111 |
|
|
|
112 |
draw( table, alphabet );
|
|
|
113 |
|
|
|
114 |
// Trigger a search
|
|
|
115 |
alphabet.on( 'click', 'span', function () {
|
|
|
116 |
alphabet.find( '.active' ).removeClass( 'active' );
|
|
|
117 |
$(this).addClass( 'active' );
|
|
|
118 |
|
|
|
119 |
table
|
|
|
120 |
.alphabetSearch( $(this).data('letter') )
|
|
|
121 |
.draw();
|
|
|
122 |
} );
|
|
|
123 |
|
|
|
124 |
// Mouse events to show helper information
|
|
|
125 |
alphabet
|
|
|
126 |
.on( 'mouseenter', 'span', function () {
|
|
|
127 |
alphabet
|
|
|
128 |
.find('div.alphabetInfo')
|
|
|
129 |
.css( {
|
|
|
130 |
opacity: 1,
|
|
|
131 |
left: $(this).position().left,
|
|
|
132 |
width: $(this).width()
|
|
|
133 |
} )
|
|
|
134 |
.html( $(this).data('match-count') );
|
|
|
135 |
} )
|
|
|
136 |
.on( 'mouseleave', 'span', function () {
|
|
|
137 |
alphabet
|
|
|
138 |
.find('div.alphabetInfo')
|
|
|
139 |
.css('opacity', 0);
|
|
|
140 |
} );
|
|
|
141 |
|
|
|
142 |
// API method to get the alphabet container node
|
|
|
143 |
this.node = function () {
|
|
|
144 |
return alphabet;
|
|
|
145 |
};
|
|
|
146 |
};
|
|
|
147 |
|
|
|
148 |
$.fn.DataTable.AlphabetSearch = $.fn.dataTable.AlphabetSearch;
|
|
|
149 |
|
|
|
150 |
|
|
|
151 |
// Register a search plug-in
|
|
|
152 |
$.fn.dataTable.ext.feature.push( {
|
|
|
153 |
fnInit: function ( settings ) {
|
|
|
154 |
var search = new $.fn.dataTable.AlphabetSearch( settings );
|
|
|
155 |
return search.node();
|
|
|
156 |
},
|
|
|
157 |
cFeature: 'A'
|
|
|
158 |
} );
|
|
|
159 |
|
|
|
160 |
|
|
|
161 |
}());
|
|
|
162 |
|