Core: add cssIcon class name options for no, asc & desc sorts

This commit is contained in:
Mottie 2014-11-05 14:29:27 -06:00
parent f13dc3ce0e
commit da2a0d9958
2 changed files with 55 additions and 6 deletions

View File

@ -724,6 +724,42 @@
<td></td>
</tr>
<tr id="cssiconasc">
<td><a href="#" class="permalink">cssIconAsc</a></td>
<td>String</td>
<td>&quot;&quot;</td>
<td>The CSS style added to the header cell icon when the column has an ascending sort (<span class="version">v2.18.3</span>).
<div class="collapsible"><br>
This class is only applied when the <a href="#headertemplate"><code>headerTemplate</code></a> option includes a <code>{icon}</code> tag or an HTML element with the class name from the <a href="#cssicon"><code>cssIcon</code></a> option.
</div>
</td>
<td></td>
</tr>
<tr id="cssicondesc">
<td><a href="#" class="permalink">cssIconDesc</a></td>
<td>String</td>
<td>&quot;&quot;</td>
<td>The CSS style used to style the header cell icon when the column has a descending sort (<span class="version">v2.18.3</span>)
<div class="collapsible"><br>
This class is only applied when the <a href="#headertemplate"><code>headerTemplate</code></a> option includes a <code>{icon}</code> tag or an HTML element with the class name from the <a href="#cssicon"><code>cssIcon</code></a> option.
</div>
</td>
<td></td>
</tr>
<tr id="cssiconnone">
<td><a href="#" class="permalink">cssIconNone</a></td>
<td>String</td>
<td>&quot;&quot;</td>
<td>The CSS style used to style the header cell icon when the column does not have a sort applied (<span class="version">v2.18.3</span>)
<div class="collapsible"><br>
This class is only applied when the <a href="#headertemplate"><code>headerTemplate</code></a> option includes a <code>{icon}</code> tag or an HTML element with the class name from the <a href="#cssicon"><code>cssIcon</code></a> option.
</div>
</td>
<td></td>
</tr>
<tr id="cssnone">
<td><a href="#" class="permalink">cssNone</a></td>
<td>String</td>

View File

@ -91,6 +91,9 @@
cssChildRow : 'tablesorter-childRow', // class name indiciating that a row is to be attached to the its parent
cssIcon : 'tablesorter-icon', // if this class exists, a <i> will be added to the header automatically
cssIconNone : '', // class name added to the icon when there is no column sort
cssIconAsc : '', // class name added to the icon when the column has an ascending sort
cssIconDesc : '', // class name added to the icon when the column has a descending sort
cssInfoBlock : 'tablesorter-infoOnly', // don't sort tbody with this class name (only one class name allowed here!)
cssAllowClicks : 'tablesorter-allowClicks', // class name added to table header which allows clicks to bubble up
@ -528,13 +531,17 @@
len = list.length,
none = ts.css.sortNone + ' ' + c.cssNone,
css = [ts.css.sortAsc + ' ' + c.cssAsc, ts.css.sortDesc + ' ' + c.cssDesc],
cssIcon = [ c.cssIconAsc, c.cssIconDesc, c.cssIconNone ],
aria = ['ascending', 'descending'],
// find the footer
$t = $(table).find('tfoot tr').children().add(c.$extraHeaders).removeClass(css.join(' '));
// remove all header information
c.$headers
.removeClass(css.join(' '))
.addClass(none).attr('aria-sort', 'none');
.addClass(none).attr('aria-sort', 'none')
.find('.' + c.cssIcon)
.removeClass(cssIcon.join(' '))
.addClass(cssIcon[2]);
for (i = 0; i < len; i++) {
// direction = 2 means reset!
if (list[i][1] !== 2) {
@ -543,7 +550,13 @@
if (f.length) {
for (j = 0; j < f.length; j++) {
if (!f[j].sortDisabled) {
f.eq(j).removeClass(none).addClass(css[list[i][1]]).attr('aria-sort', aria[list[i][1]]);
f.eq(j)
.removeClass(none)
.addClass(css[list[i][1]])
.attr('aria-sort', aria[list[i][1]])
.find('.' + c.cssIcon)
.removeClass(cssIcon[2])
.addClass(cssIcon[list[i][1]]);
}
}
// add sorted class to footer & extra headers, if they exist