mirror of
https://github.com/Mottie/tablesorter.git
synced 2025-01-12 15:24:21 +00:00
Core: Add cssIconDisabled option. See #1409
This commit is contained in:
Rob Garrison
parent
c77d7b2d6e
commit
ca16c8c232
@ -797,6 +797,18 @@
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr id="cssicondisabled">
|
||||
<td><a href="#" class="permalink">cssIconDisabled</a></td>
|
||||
<td>String</td>
|
||||
<td>""</td>
|
||||
<td>The CSS style used to style the header cell icon when the column sort is disabled (<span class="version">v2.28.13</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>
|
||||
@ -1144,7 +1156,7 @@
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
In versions 2.0.6+, all TH text is wrapped in a div with a class name of "tablesorter-inner" by default. In the example below, the header cell (TH) div is given a class name (<a class="external" href="http://www.pengoworks.com/workshop/jquery/tablesorter/tablesorter.htm">source</a>).<br>
|
||||
Function parameters:
|
||||
<p>Function parameters:</p>
|
||||
<ul>
|
||||
<li><code>index</code> - zero-based index of the current table header cell; this value is <em>not</em> indicative of the column index, as it is simply a count of header cells. So it will be effected by rowspan, colspan and multiple rows in the header.</li>
|
||||
<li><code>config</code> - The current <code>table.config</code>.</li>
|
||||
@ -1177,7 +1189,12 @@
|
||||
This function is called after the template string has been built, but before the template string is applied to the header and before the <code>onRenderHeader</code> function is called (v2.7).
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
The <code>onRenderTemplate</code> function receives a column index and template string parameters. The template string, from the <a href="#headertemplate"><code>headerTemplate</code> option</a>, will already have the <code>{icon}</code> and <code>{content}</code> tags replaced; it's just a string of formatted HTML. When done manipulating this string, return it. Here is an example:
|
||||
The <code>onRenderTemplate</code> function receives a column index and template string parameters. The template string, from the <a href="#headertemplate"><code>headerTemplate</code> option</a>, will already have the <code>{icon}</code> and <code>{content}</code> tags replaced; it's just a string of formatted HTML. When done manipulating this string, return it.
|
||||
<p>Function parameters:</p>
|
||||
<ul>
|
||||
<li><code>index</code> - zero-based index of the current table header cell; this value is <em>not</em> indicative of the column index, as it is simply a count of header cells. So it will be effected by rowspan, colspan and multiple rows in the header.</li>
|
||||
<li><code>template</code> - A rendered <code>headerTemplate</code> HTML string.</li>
|
||||
</ul>
|
||||
<pre class="prettyprint lang-js">$(function(){
|
||||
$("table").tablesorter({
|
||||
headerTemplate: '{icon}{content}',
|
||||
|
||||
@ -98,6 +98,7 @@
|
||||
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
|
||||
cssIconDisabled : '', // class name added to the icon when the column has a disabled sort
|
||||
|
||||
// *** events
|
||||
pointerClick : 'click',
|
||||
@ -1074,7 +1075,7 @@
|
||||
▀████▀ ██ █████▀ ██ ██ ██ ██████
|
||||
*/
|
||||
setHeadersCss : function( c ) {
|
||||
var $sorted, indx, column,
|
||||
var indx, column,
|
||||
list = c.sortList,
|
||||
len = list.length,
|
||||
none = ts.css.sortNone + ' ' + c.cssNone,
|
||||
@ -1082,20 +1083,32 @@
|
||||
cssIcon = [ c.cssIconAsc, c.cssIconDesc, c.cssIconNone ],
|
||||
aria = [ 'ascending', 'descending' ],
|
||||
// find the footer
|
||||
$headers = c.$table
|
||||
$extras = c.$table
|
||||
.find( 'tfoot tr' )
|
||||
.children( 'td, th' )
|
||||
.add( $( c.namespace + '_extra_headers' ) )
|
||||
.removeClass( css.join( ' ' ) );
|
||||
// remove all header information
|
||||
c.$headers
|
||||
.add( $( 'thead ' + c.namespace + '_extra_headers' ) )
|
||||
.removeClass( css.join( ' ' ) )
|
||||
.addClass( none )
|
||||
.attr( 'aria-sort', 'none' )
|
||||
.removeClass( css.join( ' ' ) ),
|
||||
// remove all header information
|
||||
$sorted = c.$headers
|
||||
.add( $( 'thead ' + c.namespace + '_extra_headers' ) )
|
||||
.removeClass( css.join( ' ' ) )
|
||||
.addClass( none )
|
||||
.attr( 'aria-sort', 'none' )
|
||||
.find( '.' + ts.css.icon )
|
||||
.removeClass( cssIcon.join( ' ' ) )
|
||||
.end();
|
||||
// add css none to all sortable headers
|
||||
$sorted
|
||||
.not( '.sorter-false' )
|
||||
.find( '.' + ts.css.icon )
|
||||
.removeClass( cssIcon.join( ' ' ) )
|
||||
.addClass( cssIcon[ 2 ] );
|
||||
// add disabled css icon class
|
||||
if ( c.cssIconDisabled ) {
|
||||
$sorted
|
||||
.filter( '.sorter-false' )
|
||||
.find( '.' + ts.css.icon )
|
||||
.addClass( c.cssIconDisabled );
|
||||
}
|
||||
for ( indx = 0; indx < len; indx++ ) {
|
||||
// direction = 2 means reset!
|
||||
if ( list[ indx ][ 1 ] !== 2 ) {
|
||||
@ -1132,8 +1145,8 @@
|
||||
}
|
||||
}
|
||||
// add sorted class to footer & extra headers, if they exist
|
||||
if ( $headers.length ) {
|
||||
$headers
|
||||
if ( $extras.length ) {
|
||||
$extras
|
||||
.filter( '[data-column="' + list[ indx ][ 0 ] + '"]' )
|
||||
.removeClass( none )
|
||||
.addClass( css[ list[ indx ][ 1 ] ] );
|
||||
|
||||
@ -112,7 +112,8 @@ Core plugin tested
|
||||
OPTIONS:
|
||||
cssAsc, cssChildRow, cssDesc, cssHeader, cssHeaderRow, cssInfoBlock, dateFormat, emptyTo, headerList,
|
||||
headers, ignoreCase, initialized, parsers, sortList, sortLocaleCompare, sortReset, sortRestart, stringTo, tableClass,
|
||||
usNumberFormat, widgets (just zebra), sortAppend, sortForce, sortMultiSortKey, sortResetKey, numberSorter
|
||||
usNumberFormat, widgets (just zebra), sortAppend, sortForce, sortMultiSortKey, sortResetKey, numberSorter,
|
||||
cssIconAsc, cssIconDesc, cssIconNone, cssIconDisabled
|
||||
|
||||
METHODS:
|
||||
addRows, applyWidgets, destroy, sorton, sortReset, update/updateRow, updateAll, updateCell
|
||||
@ -123,7 +124,7 @@ EVENTS:
|
||||
Not yet tested
|
||||
=========================
|
||||
OPTIONS:
|
||||
cancelSelection, cssIcon, cssProcessing, debug, delayInit, headerTemplate, initWidgets, onRenderHeader,
|
||||
cancelSelection, cssProcessing, debug, delayInit, headerTemplate, initWidgets, onRenderHeader,
|
||||
onRenderTemplate, selectorHeaders, selectorRemove, selectorSort, serverSideSorting, showProcessing,
|
||||
sortInitialOrder, strings,
|
||||
textExtraction, textSorter, theme, widthFixed, widgets (also need priority testing)
|
||||
@ -694,9 +695,6 @@ jQuery(function($){
|
||||
'a', 'b', 'c1', 'c2'
|
||||
];
|
||||
assert.cacheCompare( $('#testblock table')[0], 'all', t, 'colspans not duplicated but textExtraction defined' );
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
QUnit.test( 'sorton methods', function(assert) {
|
||||
@ -917,6 +915,37 @@ jQuery(function($){
|
||||
assert.equal( t.hasClass(ts.css.sortAsc) || t.hasClass(ts.css.sortDesc), false, 'Testing sortReset' );
|
||||
});
|
||||
|
||||
QUnit.test( 'testing header css icons', function(assert) {
|
||||
var done = assert.async();
|
||||
assert.expect(1);
|
||||
$('#testblock2').html('<table class="tablesorter"><thead><tr>' +
|
||||
'<th>A</th>' +
|
||||
'<th>B</th>' +
|
||||
'<th>C</th>' +
|
||||
'<th class="sorter-false">D</th>' +
|
||||
'</tr></thead><tbody></tbody></table>')
|
||||
.find('table')
|
||||
.tablesorter({
|
||||
sortList: [[0,0], [1,1]],
|
||||
headerTemplate:'{content} {icon}',
|
||||
cssIconAsc: 'asc',
|
||||
cssIconDesc: 'desc',
|
||||
cssIconNone: 'none',
|
||||
cssIconDisabled: 'disabled',
|
||||
initialized: function(table){
|
||||
var i,
|
||||
results = [],
|
||||
expected = ['asc', 'desc', 'none', 'disabled'],
|
||||
c = table.config;
|
||||
for (i = 0; i < c.columns; i++){
|
||||
results[i] = c.$headers.eq(i).find('.' + ts.css.icon).hasClass(expected[i]);
|
||||
}
|
||||
assert.deepEqual( results, [true, true, true, true], 'applies correct cssIcon classes' );
|
||||
done();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
/************************************************
|
||||
test apply widgets function using zebra widget
|
||||
************************************************/
|
||||
|
||||
Loading…
Reference in New Issue
Block a user