Skip to content

Commit 75f176a

Browse files
mpryvkinmpryvkin
committed
Modified HTML markup for easier support of styling for Bootstrap and other frameworks. Other fixes.
1 parent 06058b7 commit 75f176a

File tree

4 files changed

+119
-51
lines changed

4 files changed

+119
-51
lines changed

‎css/dataTables.alphabetSearch.bootstrap.css‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
div.alphabet {
2+
position: relative;
3+
margin-bottom: 1.4em;
4+
}
5+
6+
div.alphabet ul {
7+
margin: 0;
8+
}
9+
10+
div.alphabet a span {
11+
opacity: 0.8;
12+
}
13+
14+
div.alphabet a.active span {
15+
opacity: 1;
16+
font-weight: bold;
17+
}
18+
19+
div.alphabet a.empty span {
20+
opacity: 0.3;
21+
}
22+
23+
div.alphabet a.empty.active span {
24+
opacity: 1;
25+
}
26+
27+
div.alphabet .alphabet-info-display {
28+
vertical-align: top;
29+
margin-right: 0.5em;
30+
}
31+
32+
div.alphabet div.alphabet-info {
33+
position: absolute;
34+
background-color: #111;
35+
border-radius: 3px;
36+
color: #FFF;
37+
margin-top: 0.2em;
38+
padding: 0.2em 0.4em;
39+
text-align: center;
40+
opacity: 0;
41+
transition: opacity .4s ease-in-out;
42+
z-index:9999;
43+
}
44+
45+
tr.alphabet-group, tr.alphabet-group:hover {
46+
background-color: rgba(0,0,0,0.15) !important;
47+
}

‎css/dataTables.alphabetSearch.css‎

Lines changed: 44 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,63 @@
11
div.alphabet {
2-
position: relative;
3-
margin-bottom: 1.4em;
2+
position: relative;
3+
margin-bottom: 1.4em;
4+
}
5+
6+
div.alphabet ul {
7+
display: inline-block;
8+
margin: 0;
9+
padding: 0;
10+
list-style: none;
11+
}
12+
13+
div.alphabet li {
14+
display: inline-block;
415
}
516

617
div.alphabet a {
718
box-sizing: content-box;
8-
display: inline-block;
9-
cursor: pointer;
10-
text-align: center;
11-
text-decoration: none;
12-
min-width: 1.3em;
13-
padding: 0 0.2em;
14-
opacity: 0.8;
19+
display: inline-block;
20+
cursor: pointer;
21+
text-align: center;
22+
text-decoration: none;
23+
min-width: 1.3em;
24+
padding: 0 0.2em;
25+
}
26+
27+
div.alphabet a span {
28+
opacity: 0.8;
1529
}
1630

17-
div.alphabet a.active {
18-
opacity: 1;
19-
font-weight: bold;
31+
div.alphabet a.active span {
32+
opacity: 1;
33+
font-weight: bold;
2034
}
2135

22-
div.alphabet a.empty {
23-
opacity: 0.3;
36+
div.alphabet a.empty span {
37+
opacity: 0.3;
2438
}
2539

26-
div.alphabet a.empty.active {
27-
opacity: 1;
40+
div.alphabet a.empty.active span {
41+
opacity: 1;
2842
}
2943

30-
div.alphabet .alphabet_info_display {
31-
padding: 0 0.5em 0 0;
44+
div.alphabet .alphabet-info-display {
45+
margin-right: 0.5em;
3246
}
3347

34-
div.alphabet div.alphabet_info {
35-
position: absolute;
36-
background-color: #111;
37-
border-radius: 3px;
38-
color: #FFF;
39-
margin-top: 0.2em;
40-
padding: 0.2em 0.4em;
41-
text-align: center;
42-
opacity: 0;
48+
div.alphabet div.alphabet-info {
49+
position: absolute;
50+
background-color: #111;
51+
border-radius: 3px;
52+
color: #FFF;
53+
margin-top: 0.2em;
54+
padding: 0.2em 0.4em;
55+
text-align: center;
56+
opacity: 0;
4357
transition: opacity .4s ease-in-out;
58+
z-index: 9999;
4459
}
4560

46-
tr.alphabet_group, tr.alphabet_group:hover {
47-
background-color: rgba(0,0,0,0.15) !important;
61+
tr.alphabet-group, tr.alphabet-group:hover {
62+
background-color: rgba(0,0,0,0.15) !important;
4863
}

‎js/dataTables.alphabetSearch.js‎

Lines changed: 27 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -49,10 +49,10 @@ $.fn.dataTable.Api.register( 'alphabetSearch.recalc()', function ( searchTerm )
4949

5050
// Search plug-in
5151
$.fn.dataTable.ext.search.push( function ( context, searchData ) {
52-
// Ensure that table has alphabet search feature enabled
53-
if ( ! context.hasOwnProperty('alphabetSearch') ) {
54-
return true;
55-
}
52+
// Ensure that table has alphabet search feature enabled
53+
if ( ! context.hasOwnProperty('alphabetSearch') ) {
54+
return true;
55+
}
5656

5757
// Ensure that there is a search applied to this table before running it
5858
if ( ! context.alphabetSearch.letterSearch ) {
@@ -85,7 +85,7 @@ $.fn.dataTable.ext.search.push( function ( context, searchData ) {
8585
// there would be two calls to this method
8686
$.fn.dataTable.ext.order['alphabetSearch'] = function ( context, col )
8787
{
88-
var order_col = this.api().order()[0][0];
88+
var order_col = this.api().order()[0][0];
8989
var order_method = this.api().order()[0][1];
9090

9191
// If sorting by column other than the one being alphabetized
@@ -158,23 +158,27 @@ function draw ( table, alphabet, context )
158158
alphabet.empty();
159159

160160
if(context.oLanguage.alphabetSearch.infoDisplay !== ''){
161-
$('<span class="alphabet_info_display"></span>')
161+
$('<span class="alphabet-info-display"></span>')
162162
.html(context.oLanguage.alphabetSearch.infoDisplay)
163163
.appendTo( alphabet );
164164
}
165165

166166
var columnData = table.column(context.alphabetSearch.column, { search: 'applied' } ).data();
167167
var bins = bin( columnData );
168168

169+
var alphabetList = $('<ul/>');
170+
169171
$('<a/>')
170172
.attr( 'href', 'javascript:;' )
171173
.data( 'letter', '' )
172174
.data( 'match-count', columnData.length )
173175
.addClass(
174-
((!context.alphabetSearch.letter) ? 'active' : '')
176+
((!context.alphabetSearch.letter) ? 'active' : '')
175177
)
176-
.html( context.oLanguage.alphabetSearch.infoAll )
177-
.appendTo( alphabet );
178+
.html( '<span>' + context.oLanguage.alphabetSearch.infoAll + '</span>' )
179+
.wrap( '<li/>' )
180+
.parent()
181+
.appendTo( alphabetList );
178182

179183
for ( var i=0 ; i<context.oLanguage.alphabetSearch.alphabet.length ; i++ ) {
180184
var letter = context.oLanguage.alphabetSearch.alphabet[i];
@@ -187,13 +191,15 @@ function draw ( table, alphabet, context )
187191
(! bins[letter] ? 'empty' : '')
188192
+ ((context.alphabetSearch.letter === letter) ? ' active' : '')
189193
)
190-
.html(
191-
letter
192-
)
193-
.appendTo( alphabet );
194+
.html( '<span>' + letter + '</span>' )
195+
.wrap( '<li/>' )
196+
.parent()
197+
.appendTo( alphabetList );
194198
}
195199

196-
$('<div class="alphabet_info"></div>')
200+
alphabetList.appendTo( alphabet );
201+
202+
$('<div class="alphabet-info"></div>')
197203
.appendTo( alphabet );
198204

199205

@@ -304,8 +310,8 @@ $.fn.dataTable.AlphabetSearch = function ( context ) {
304310

305311
// Trigger a search
306312
alphabet.on( 'click', 'a', function (e) {
307-
// Prevent default behavior
308-
e.preventDefault();
313+
// Prevent default behavior
314+
e.preventDefault();
309315

310316
alphabet.find( '.active' ).removeClass( 'active' );
311317
$(this).addClass( 'active' );
@@ -318,10 +324,10 @@ $.fn.dataTable.AlphabetSearch = function ( context ) {
318324
// Mouse events to show helper information
319325
alphabet
320326
.on( 'mouseenter', 'a', function () {
321-
var $el = $(this);
327+
var $el = $(this);
322328
var el_pos = $el.position();
323329

324-
var $alphabet_info = $('.alphabet_info', alphabet);
330+
var $alphabet_info = $('.alphabet-info', alphabet);
325331

326332
$alphabet_info.html( $el.data('match-count') );
327333

@@ -335,7 +341,7 @@ $.fn.dataTable.AlphabetSearch = function ( context ) {
335341
} )
336342
.on( 'mouseleave', 'a', function () {
337343
alphabet
338-
.find('div.alphabet_info')
344+
.find('div.alphabet-info')
339345
.css('opacity', 0);
340346
} );
341347

@@ -353,7 +359,7 @@ $.fn.dataTable.AlphabetSearch = function ( context ) {
353359

354360
if (group_last !== group) {
355361
$(rows).eq(index).before(
356-
'<tr class="alphabet_group"><td colspan="' + col_total + '">' + group + '</td></tr>'
362+
'<tr class="alphabet-group"><td colspan="' + col_total + '">' + group + '</td></tr>'
357363
);
358364

359365
group_last = group;
@@ -365,7 +371,7 @@ $.fn.dataTable.AlphabetSearch = function ( context ) {
365371
var letter = context.alphabetSearch.letter;
366372

367373
$(api.table().body()).prepend(
368-
'<tr class="alphabet_group"><td colspan="' + col_total + '">' + letter + '</td></tr>'
374+
'<tr class="alphabet-group"><td colspan="' + col_total + '">' + letter + '</td></tr>'
369375
);
370376
}
371377
});

‎js/dataTables.alphabetSearch.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)