library-mirrors/tablesorter
1
0
Fork 0
mirror of https://github.com/Mottie/tablesorter.git synced 2024-11-15 23:54:22 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

uitheme: add separate sort class names to header & icon element; breaks old demos

Browse Source
This commit is contained in:
Mottie 2015-01-15 14:06:01 -06:00
parent b9ddc1849d
commit 402200914d
4 changed files with 118 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
docs/example-widget-bootstrap-theme.html
View File

@ -30,20 +30,25 @@
$.tablesorter.themes.bootstrap = {
// these classes are added to the table. To see other table classes available,
// look here: http://getbootstrap.com/css/#tables
table : 'table table-bordered',
caption : 'caption',
header : 'bootstrap-header', // give the header a gradient background
footerRow : '',
footerCells: '',
icons : '', // add "icon-white" to make them white; this icon class is added to the <i> in the header
sortNone : 'bootstrap-icon-unsorted',
sortAsc : 'icon-chevron-up glyphicon glyphicon-chevron-up', // includes classes for Bootstrap v2 & v3
sortDesc : 'icon-chevron-down glyphicon glyphicon-chevron-down', // includes classes for Bootstrap v2 & v3
active : '', // applied when column is sorted
hover : '', // use custom css here - bootstrap class may not override it
filterRow : '', // filter row class
even : '', // odd row zebra striping
odd : '' // even row zebra striping
table : 'table table-bordered table-striped',
caption : 'caption',
// header class names
header : 'bootstrap-header', // give the header a gradient background (theme.bootstrap_2.css)
sortNone : '',
sortAsc : '',
sortDesc : '',
active : '', // applied when column is sorted
hover : '', // custom css required - a defined bootstrap style may not override other classes
// icon class names
icons : '', // add "icon-white" to make them white; this icon class is added to the <i> in the header
iconSortNone : 'bootstrap-icon-unsorted', // class name added to icon when column is not sorted
iconSortAsc : 'icon-chevron-up glyphicon glyphicon-chevron-up', // class name added to icon when column has ascending sort
iconSortDesc : 'icon-chevron-down glyphicon glyphicon-chevron-down', // class name added to icon when column has descending sort
filterRow : '', // filter row class
footerRow : '',
footerCells : '',
even : '', // even row zebra striping
odd : '' // odd row zebra striping
};
// call the tablesorter plugin and apply the uitheme widget

39
docs/example-widget-ui-theme.html
View File

@ -33,23 +33,29 @@
<script id="js">$(function() {
// Extend the themes to change any of the default class names ** NEW **
// Extend the themes to change any of the default class names
$.extend($.tablesorter.themes.jui, {
// change default jQuery uitheme icons - find the full list of icons here: http://jqueryui.com/themeroller/ (hover over them for their name)
table : 'ui-widget ui-widget-content ui-corner-all', // table classes
caption : 'ui-widget-content ui-corner-all',
header : 'ui-widget-header ui-corner-all ui-state-default', // header classes
footerRow : '',
footerCells: '',
icons : 'ui-icon', // icon class added to the <i> in the header
sortNone : 'ui-icon-carat-2-n-s',
sortAsc : 'ui-icon-carat-1-n',
sortDesc : 'ui-icon-carat-1-s',
active : 'ui-state-active', // applied when column is sorted
hover : 'ui-state-hover', // hover class
filterRow : '',
even : 'ui-widget-content', // odd row zebra striping
odd : 'ui-state-default' // even row zebra striping
// change default jQuery uitheme icons - find the full list of icons at
// http://jqueryui.com/themeroller/ (hover over them for their name)
table : 'ui-widget ui-widget-content ui-corner-all', // table classes
caption : 'ui-widget-content',
// header class names
header : 'ui-widget-header ui-corner-all ui-state-default', // header classes
sortNone : '',
sortAsc : '',
sortDesc : '',
active : 'ui-state-active', // applied when column is sorted
hover : 'ui-state-hover', // hover class
// icon class names
icons : 'ui-icon', // icon class added to the <i> in the header
iconSortNone : 'ui-icon-carat-2-n-s', // class name added to icon when column is not sorted
iconSortAsc : 'ui-icon-carat-1-n', // class name added to icon when column has ascending sort
iconSortDesc : 'ui-icon-carat-1-s', // class name added to icon when column has descending sort
filterRow : '',
footerRow : '',
footerCells : '',
even : 'ui-widget-content', // even row zebra striping
odd : 'ui-state-default' // odd row zebra striping
});
// call the tablesorter plugin and apply the ui theme widget
@ -227,4 +233,3 @@ $table.trigger('applyWidgets');</pre>
</body>
</html>

2
docs/index.html
View File

@ -1527,6 +1527,8 @@ $.extend($.tablesorter.themes.jui, {
$("table").tablesorter({
// set the new theme name from $.tablesorter.themes here
theme : 'custom',
// add {icon} to template (if needed)
headerTemplate: '{content}{icon}',
// make sure to initialize uitheme widget
widgets : ["uitheme"]
});

128
js/jquery.tablesorter.widgets.js
View File

@ -11,41 +11,51 @@
/*jshint browser:true, jquery:true, unused:false, loopfunc:true */
/*global jQuery: false, localStorage: false */
;(function ($, window) {
"use strict";
'use strict';
var ts = $.tablesorter = $.tablesorter || {};
ts.themes = {
"bootstrap" : {
table : 'table table-bordered table-striped',
caption : 'caption',
header : 'bootstrap-header', // give the header a gradient background
footerRow : '',
footerCells: '',
icons : '', // add "icon-white" to make them white; this icon class is added to the <i> in the header
sortNone : 'bootstrap-icon-unsorted',
sortAsc : 'icon-chevron-up glyphicon glyphicon-chevron-up',
sortDesc : 'icon-chevron-down glyphicon glyphicon-chevron-down',
active : '', // applied when column is sorted
hover : '', // use custom css here - bootstrap class may not override it
filterRow : '', // filter row class
even : '', // even row zebra striping
odd : '' // odd row zebra striping
'bootstrap' : {
table : 'table table-bordered table-striped',
caption : 'caption',
// header class names
header : 'bootstrap-header', // give the header a gradient background (theme.bootstrap_2.css)
sortNone : '',
sortAsc : '',
sortDesc : '',
active : '', // applied when column is sorted
hover : '', // custom css required - a defined bootstrap style may not override other classes
// icon class names
icons : '', // add "icon-white" to make them white; this icon class is added to the <i> in the header
iconSortNone : 'bootstrap-icon-unsorted', // class name added to icon when column is not sorted
iconSortAsc : 'icon-chevron-up glyphicon glyphicon-chevron-up', // class name added to icon when column has ascending sort
iconSortDesc : 'icon-chevron-down glyphicon glyphicon-chevron-down', // class name added to icon when column has descending sort
filterRow : '', // filter row class
footerRow : '',
footerCells : '',
even : '', // even row zebra striping
odd : '' // odd row zebra striping
},
"jui" : {
table : 'ui-widget ui-widget-content ui-corner-all', // table classes
caption : 'ui-widget-content',
header : 'ui-widget-header ui-corner-all ui-state-default', // header classes
footerRow : '',
footerCells: '',
icons : 'ui-icon', // icon class added to the <i> in the header
sortNone : 'ui-icon-carat-2-n-s',
sortAsc : 'ui-icon-carat-1-n',
sortDesc : 'ui-icon-carat-1-s',
active : 'ui-state-active', // applied when column is sorted
hover : 'ui-state-hover', // hover class
filterRow : '',
even : 'ui-widget-content', // even row zebra striping
odd : 'ui-state-default' // odd row zebra striping
'jui' : {
table : 'ui-widget ui-widget-content ui-corner-all', // table classes
caption : 'ui-widget-content',
// header class names
header : 'ui-widget-header ui-corner-all ui-state-default', // header classes
sortNone : '',
sortAsc : '',
sortDesc : '',
active : 'ui-state-active', // applied when column is sorted
hover : 'ui-state-hover', // hover class
// icon class names
icons : 'ui-icon', // icon class added to the <i> in the header
iconSortNone : 'ui-icon-carat-2-n-s', // class name added to icon when column is not sorted
iconSortAsc : 'ui-icon-carat-1-n', // class name added to icon when column has ascending sort
iconSortDesc : 'ui-icon-carat-1-s', // class name added to icon when column has descending sort
filterRow : '',
footerRow : '',
footerCells : '',
even : 'ui-widget-content', // even row zebra striping
odd : 'ui-state-default' // odd row zebra striping
}
};
@ -177,24 +187,26 @@ ts.addWidget({
id: "uitheme",
priority: 10,
format: function(table, c, wo) {
var i, time, classes, $header, $icon, $tfoot, $h, oldtheme, oldremove, hasOldTheme,
var i, hdr, icon, time, hdrClass, iconClass, $header, $icon, $tfoot, $h, oldtheme, oldremove, oldIconRmv, hasOldTheme,
themesAll = ts.themes,
$table = c.$table.add( c.$extraTables ),
$headers = c.$headers.add( c.$extraHeaders ),
theme = c.theme || 'jui',
themes = themesAll[theme] || {},
remove = $.trim( [ themes.sortNone, themes.sortDesc, themes.sortAsc, themes.active ].join( ' ' ) );
remove = $.trim( [ themes.sortNone, themes.sortDesc, themes.sortAsc, themes.active ].join( ' ' ) ),
iconRmv = $.trim( [ themes.iconSortNone, themes.iconSortDesc, themes.iconSortAsc ].join( ' ' ) );
if (c.debug) { time = new Date(); }
// initialization code - run once
if (!$table.hasClass('tablesorter-' + theme) || c.theme !== c.appliedTheme || !wo.uitheme_applied) {
wo.uitheme_applied = true;
oldtheme = themesAll[c.appliedTheme] || {};
hasOldTheme = !$.isEmptyObject(oldtheme);
oldremove = hasOldTheme ? [ oldtheme.sortNone, oldtheme.sortDesc, oldtheme.sortAsc, oldtheme.active ].join( ' ' ) : '';
oldremove = hasOldTheme ? [ oldtheme.sortNone, oldtheme.sortDesc, oldtheme.sortAsc, oldtheme.active ].join( ' ' ) : '',
oldIconRmv = hasOldTheme ? [ oldtheme.iconSortNone, oldtheme.iconSortDesc, oldtheme.iconSortAsc ].join( ' ' ) : '';
if (hasOldTheme) {
wo.zebra[0] = $.trim( ' ' + wo.zebra[0].replace(' ' + oldtheme.even, '') );
wo.zebra[1] = $.trim( ' ' + wo.zebra[1].replace(' ' + oldtheme.odd, '') );
c.$tbodies.children().removeClass( oldtheme.even + ' ' + oldtheme.odd );
c.$tbodies.children().removeClass( [oldtheme.even, oldtheme.odd].join(' ') );
}
// update zebra stripes
if (themes.even) { wo.zebra[0] += ' ' + themes.even; }
@ -206,8 +218,8 @@ ts.addWidget({
// add table/footer class names
$tfoot = $table
// remove other selected themes
.removeClass( ( c.appliedTheme ? 'tablesorter-' + ( c.appliedTheme || '' ) : '' ) + ' ' + (oldtheme.table || '') )
.addClass('tablesorter-' + theme + ' ' + ( themes.table || '' )) // add theme widget class name
.removeClass( (c.appliedTheme ? 'tablesorter-' + (c.appliedTheme || '') : '') + ' ' + (oldtheme.table || '') )
.addClass('tablesorter-' + theme + ' ' + (themes.table || '')) // add theme widget class name
.children('tfoot');
c.appliedTheme = c.theme;
@ -219,47 +231,56 @@ ts.addWidget({
}
// update header classes
$headers
.removeClass( ( hasOldTheme ? oldtheme.header + ' ' + oldtheme.hover + ' ' + oldremove : '' ) || '' )
.removeClass( (hasOldTheme ? [oldtheme.header, oldtheme.hover, oldremove].join(' ') : '') || '' )
.addClass(themes.header)
.not('.sorter-false')
.unbind('mouseenter.tsuitheme mouseleave.tsuitheme')
.bind('mouseenter.tsuitheme mouseleave.tsuitheme', function(event) {
// toggleClass with switch added in jQuery 1.3
$(this)[ event.type === 'mouseenter' ? 'addClass' : 'removeClass' ](themes.hover || '');
});
if (!$headers.find('.' + ts.css.wrapper).length) {
// Firefox needs this inner div to position the resizer correctly
// Firefox needs this inner div to position the icon & resizer correctly
$headers.wrapInner('<div class="' + ts.css.wrapper + '" style="position:relative;height:100%;width:100%"></div>');
}
if (c.cssIcon) {
// if c.cssIcon is '', then no <i> is added to the header
$headers
.find('.' + ts.css.icon)
.removeClass( hasOldTheme ? oldtheme.icons + ' ' + oldremove : '' )
.removeClass(hasOldTheme ? [oldtheme.icons, oldIconRmv].join(' ') : '')
.addClass(themes.icons || '');
}
if ($table.hasClass('hasFilters')) {
$table.children('thead').children('.' + ts.css.filterRow)
.removeClass( hasOldTheme ? oldtheme.filterRow : '' )
.removeClass(hasOldTheme ? oldtheme.filterRow || '' : '')
.addClass(themes.filterRow || '');
}
}
for (i = 0; i < c.columns; i++) {
$header = c.$headers.add(c.$extraHeaders).not('.sorter-false').filter('[data-column="' + i + '"]');
$icon = (ts.css.icon) ? $header.find('.' + ts.css.icon) : $header;
$icon = (ts.css.icon) ? $header.find('.' + ts.css.icon) : $();
$h = $headers.not('.sorter-false').filter('[data-column="' + i + '"]:last');
if ($h.length) {
$header.removeClass(remove);
$icon.removeClass(iconRmv);
if ($h[0].sortDisabled) {
// no sort arrows for disabled columns!
$header.removeClass(remove);
$icon.removeClass(remove + ' ' + themes.icons);
$icon.removeClass(themes.icons || '');
} else {
classes = ($header.hasClass(ts.css.sortAsc)) ?
themes.sortAsc :
($header.hasClass(ts.css.sortDesc)) ? themes.sortDesc :
$header.hasClass(ts.css.header) ? themes.sortNone : '';
$header[classes === themes.sortNone ? 'removeClass' : 'addClass'](themes.active || '');
$icon.removeClass(remove).addClass(classes);
hdr = themes.sortNone;
icon = themes.iconSortNone;
if ($h.hasClass(ts.css.sortAsc)) {
hdr = [themes.sortAsc, themes.active].join(' ');
icon = themes.iconSortAsc;
} else if ($h.hasClass(ts.css.sortDesc)) {
hdr = [themes.sortDesc, themes.active].join(' ');
icon = themes.iconSortDesc;
}
$h
.addClass(hdr)
.find('.' + ts.css.icon)
.addClass(icon || '');
}
}
}
@ -272,16 +293,17 @@ ts.addWidget({
theme = c.theme || 'jui',
themes = ts.themes[ theme ] || ts.themes.jui,
$headers = $table.children('thead').children(),
remove = themes.sortNone + ' ' + themes.sortDesc + ' ' + themes.sortAsc;
remove = themes.sortNone + ' ' + themes.sortDesc + ' ' + themes.sortAsc,
iconRmv = themes.iconSortNone + ' ' + themes.iconSortDesc + ' ' + themes.iconSortAsc;
$table.removeClass('tablesorter-' + theme + ' ' + themes.table);
if (temp) { return; }
$table.find(ts.css.header).removeClass(themes.header);
$headers
.unbind('mouseenter.tsuitheme mouseleave.tsuitheme') // remove hover
.removeClass(themes.hover + ' ' + remove + ' ' + themes.active)
.find('.' + ts.css.filterRow)
.filter('.' + ts.css.filterRow)
.removeClass(themes.filterRow);
$headers.find('.' + ts.css.icon).removeClass(themes.icons);
$headers.find('.' + ts.css.icon).removeClass(themes.icons + ' ' + iconRmv);
}
});