mirror of
https://github.com/Mottie/tablesorter.git
synced 2024-11-15 23:54:22 +00:00
Merge branch 'master' into gh-pages
This commit is contained in:
Rob Garrison
commit
a2477f5c5a
84
README.md
84
README.md
@ -23,7 +23,7 @@ tablesorter (FORK) is a jQuery plugin for turning a standard HTML table with THE
|
||||
|
||||
* Multi-column alphanumeric sorting and filtering.
|
||||
* Multi-tbody sorting - see the [options](https://mottie.github.io/tablesorter/docs/index.html#options) table on the main document page.
|
||||
* Supports [Bootstrap v2 and 3](https://mottie.github.io/tablesorter/docs/example-widget-bootstrap-theme.html).
|
||||
* Supports [Bootstrap v2-4](https://mottie.github.io/tablesorter/docs/example-option-theme-bootstrap-v3.html).
|
||||
* Parsers for sorting text, alphanumeric text, URIs, integers, currency, floats, IP addresses, dates (ISO, long and short formats) & time. [Add your own easily](https://mottie.github.io/tablesorter/docs/example-parsers.html).
|
||||
* Inline editing - see [demo](https://mottie.github.io/tablesorter/docs/example-widget-editable.html).
|
||||
* Support for ROWSPAN and COLSPAN on TH elements.
|
||||
@ -103,9 +103,49 @@ If you would like to contribute, please...
|
||||
|
||||
View the [complete change log here](https://github.com/Mottie/tablesorter/wiki/Changes).
|
||||
|
||||
#### <a name="v2.28.4">Version 2.28.4</a> (1/6/2017)
|
||||
|
||||
* Docs:
|
||||
* Add more notes about moving "ipAddress" parser into an external file. See [issue #1344](https://github.com/Mottie/tablesorter/issues/1344).
|
||||
* Load storage widget in grouping widget demo. Fixes [issue #1346](https://github.com/Mottie/tablesorter/issues/1346).
|
||||
* Add page header section to grouping child demo. See [issue #1346](https://github.com/Mottie/tablesorter/issues/1346).
|
||||
* Include jQuery in page header section in various demos.
|
||||
* Add page header to output demo. See [issue #1349](https://github.com/Mottie/tablesorter/issues/1349).
|
||||
* Add comma to broken output demo.
|
||||
* Add info on output to Excel in output widget demo. See [issue #1349](https://github.com/Mottie/tablesorter/issues/1349).
|
||||
* Renamed [Bootstrap v2.x demo](https://mottie.github.io/tablesorter/docs/example-option-theme-bootstrap-v2.html).
|
||||
* Renamed [Bootstrap v3.x demo](https://mottie.github.io/tablesorter/docs/example-option-theme-bootstrap-v3.html).
|
||||
* Created [Bootstrap v4.x demo](https://mottie.github.io/tablesorter/docs/example-option-theme-bootstrap-v4.html).
|
||||
* Update all Bootstrap links to point to Bootstrap v3.x demo.
|
||||
* Maintain minimal original [Bootstrap demo](https://mottie.github.io/tablesorter/docs/example-widget-bootstrap-theme.html).
|
||||
* Output:
|
||||
* Prevent error on output to an already open popup.
|
||||
* Add `output_savePlugin` option & update download code.
|
||||
* Add `output_includeHeader` option & docs. Fixes [issue #1349](https://github.com/Mottie/tablesorter/issues/1349).
|
||||
* Pager:
|
||||
* (widget only) make compatible with stickyHeaders. [Fixes #1313](https://github.com/Mottie/tablesorter/issues/1313):
|
||||
* Removed all references to stored `pager.$goto` and `pager.$size`
|
||||
* Removed check if header text matches header length - this breaks when a header row has a "tablesorter-ignoreRow" class name.
|
||||
* Add stickyHeader container to `pager.$container` in case the pager controls are inside the thead.
|
||||
* Fix rendering of sticky headers after ajax.
|
||||
* Use option to target inner header.
|
||||
* Restore check for new headers. [Fixes #1343](https://github.com/Mottie/tablesorter/issues/1343).
|
||||
* Add `data-attribute` override on output. See [issue #1348](https://github.com/Mottie/tablesorter/issues/1348).
|
||||
* StickHeaders:
|
||||
* Reduce widget priority below the pager widget priority.
|
||||
* Theme:
|
||||
* Add group widget css file. See [issue #1346](https://github.com/Mottie/tablesorter/issues/1346).
|
||||
* Add column widget support to Bootstrap. See [issue #1347](https://github.com/Mottie/tablesorter/issues/1347).
|
||||
* Update high-specificity blue theme - [demo](https://jsfiddle.net/Mottie/k9uasLc7/); see [Stack Overflow](http://stackoverflow.com/q/41472634/145346).
|
||||
* Add `theme.bootstrap_4.css` file ([demo](https://mottie.github.io/tablesorter/docs/example-option-theme-bootstrap-v4.html); Bootstrap v4-alpha - do not use in production!).
|
||||
* Duplicated `theme.bootstrap_3.css` from `theme.bootstrap.css` (maintaining this non-versioned file name until Bootstrap v4-stable has been available for about 6 months).
|
||||
* Readme:
|
||||
* Update log for v2.28.3.
|
||||
|
||||
#### <a name="v2.28.3">Version 2.28.3</a> (12/16/2016)
|
||||
|
||||
* Core: Fix internal version numbering.
|
||||
* Grunt: add version check.
|
||||
|
||||
#### <a name="v2.28.2">Version 2.28.2</a> (12/15/2016)
|
||||
|
||||
@ -126,45 +166,3 @@ View the [complete change log here](https://github.com/Mottie/tablesorter/wiki/C
|
||||
* Meta:
|
||||
* Add jsDelivr CDN link to readme.
|
||||
* Add scss to dist folder.
|
||||
|
||||
#### <a name="v2.28.1">Version 2.28.1</a> (11/27/2016)
|
||||
|
||||
* Core:
|
||||
* Update dist files. Fixes [issue #1331](https://github.com/Mottie/tablesorter/issues/1331).
|
||||
* Filter:
|
||||
* Fix searchDelay & minimum character count. See [issue #1299](https://github.com/Mottie/tablesorter/issues/1299).
|
||||
* Fix liveSearch ignoring searchDelay. See [issue #1299](https://github.com/Mottie/tablesorter/issues/1299).
|
||||
* Print
|
||||
* Use `hasWidget` function.
|
||||
* UI-theme:
|
||||
* Use `hasWidget` function. Fixes [issue #1327](https://github.com/Mottie/tablesorter/issues/1327).
|
||||
|
||||
#### <a name="v2.28.0">Version 2.28.0</a> (11/27/2016)
|
||||
|
||||
* Core:
|
||||
* Return value from `getColumnData` if not an object.
|
||||
* Include extra headers when adding unsorted class. Fixes [issue #1306](https://github.com/Mottie/tablesorter/issues/1306).
|
||||
* Add option validator. Fixes [issue #1319](https://github.com/Mottie/tablesorter/issues/1319).
|
||||
* Maintain original settings on `resetToLoadState`.
|
||||
* Docs:
|
||||
* Add missing colon in CSS. Fixes [issue #1307](https://github.com/Mottie/tablesorter/issues/1307).
|
||||
* Add notes on `sortList` overridding `sortForce` & `sortAppend`. See [issue #1286](https://github.com/Mottie/tablesorter/issues/1286).
|
||||
* Update sortTbody widget demo showing new option.
|
||||
* Add zebra widget to sort reset demo.
|
||||
* Define a triggered "update". Fixes [issue #1317](https://github.com/Mottie/tablesorter/issues/1317).
|
||||
* Clarify recalculation update method. Fixes [issue #1317](https://github.com/Mottie/tablesorter/issues/1317).
|
||||
* Explain difference between `#` and `0` in the math mask. Fixes [issue #1320](https://github.com/Mottie/tablesorter/issues/1320).
|
||||
* Add link to disable thead row example. Fixes [issue #1326](https://github.com/Mottie/tablesorter/issues/1326).
|
||||
* Filter:
|
||||
* Restore `filter_searchDelay` function. Fixes [issue #1299](https://github.com/Mottie/tablesorter/issues/1299).
|
||||
* Grouping:
|
||||
* Fix insertion of group header before child rows. See [pull #1301](https://github.com/Mottie/tablesorter/pull/1301); thanks [@babaevmm](https://github.com/babaevmm)! Also fixes [issue #1325](https://github.com/Mottie/tablesorter/issues/1325).
|
||||
* Math:
|
||||
* Fix prefix/suffix option names & processing. Fixes [issue #1305](https://github.com/Mottie/tablesorter/issues/1305).
|
||||
* Remove `math_prefix` content prior to parsing cell values.
|
||||
* Pager:
|
||||
* Set `ariaDisabled` property to stop MS Edge crash. Fixes [issue #1303](https://github.com/Mottie/tablesorter/issues/1303).
|
||||
* Restore settings on `resetToLoadState`. Fixes [issue #1311](https://github.com/Mottie/tablesorter/issues/1311).
|
||||
* Tbodysort:
|
||||
* Add `sortTbody_lockHead` option. See [pull #1312](https://github.com/Mottie/tablesorter/pull/1312); thanks [@ChrisM-Rogers](https://github.com/ChrisM-Rogers)!
|
||||
* Add `sortTbody_lockHead` to default options.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
/*!
|
||||
* tablesorter (FORK) pager plugin
|
||||
* updated 11/26/2016 (v2.28.0)
|
||||
* updated 1/6/2017 (v2.28.4)
|
||||
*/
|
||||
/*jshint browser:true, jquery:true, unused:false */
|
||||
;(function($) {
|
||||
@ -173,7 +173,7 @@
|
||||
|
||||
updatePageDisplay = function(table, p, completed) {
|
||||
if ( p.initializing ) { return; }
|
||||
var s, t, $out, indx, len, options,
|
||||
var s, t, $out, $el, indx, len, options, output,
|
||||
c = table.config,
|
||||
namespace = c.namespace + 'pager',
|
||||
sz = parsePageSize( p, p.size, 'get' ); // don't allow dividing by zero
|
||||
@ -196,8 +196,12 @@
|
||||
if (typeof p.output === 'function') {
|
||||
s = p.output(table, p);
|
||||
} else {
|
||||
output = $out
|
||||
// get output template from data-pager-output or data-pager-output-filtered
|
||||
.attr('data-pager-output' + (p.filteredRows < p.totalRows ? '-filtered' : '')) ||
|
||||
p.output;
|
||||
// form the output string (can now get a new output string from the server)
|
||||
s = ( p.ajaxData && p.ajaxData.output ? p.ajaxData.output || p.output : p.output )
|
||||
s = ( p.ajaxData && p.ajaxData.output ? p.ajaxData.output || output : output )
|
||||
// {page} = one-based index; {page+#} = zero based index +/- value
|
||||
.replace(/\{page([\-+]\d+)?\}/gi, function(m, n){
|
||||
return p.totalPages ? p.page + (n ? parseInt(n, 10) : 1) : 0;
|
||||
@ -218,7 +222,8 @@
|
||||
return extra.length > 1 && data && data[extra[0]] ? data[extra[0]][extra[1]] : p[str] || (data ? data[str] : deflt) || deflt;
|
||||
});
|
||||
}
|
||||
if ( p.$goto.length ) {
|
||||
$el = p.$container.find(p.cssGoto);
|
||||
if ( $el.length ) {
|
||||
t = '';
|
||||
options = buildPageSelect( table, p );
|
||||
len = options.length;
|
||||
@ -226,7 +231,7 @@
|
||||
t += '<option value="' + options[indx] + '">' + options[indx] + '</option>';
|
||||
}
|
||||
// innerHTML doesn't work in IE9 - http://support2.microsoft.com/kb/276228
|
||||
p.$goto.html(t).val( p.page + 1 );
|
||||
$el.html(t).val( p.page + 1 );
|
||||
}
|
||||
if ($out.length) {
|
||||
$out[ ($out[0].nodeName === 'INPUT') ? 'val' : 'html' ](s);
|
||||
@ -388,8 +393,9 @@
|
||||
},
|
||||
|
||||
hideRowsSetup = function(table, p){
|
||||
p.size = parsePageSize( p, p.$size.val(), 'get' );
|
||||
p.$size.val( p.size );
|
||||
var $el = p.$container.find(p.cssPageSize);
|
||||
p.size = parsePageSize( p, $el.val(), 'get' );
|
||||
$el.val( p.size );
|
||||
$.data(table, 'pagerLastSize', p.size);
|
||||
pagerArrows( table, p );
|
||||
if ( !p.removeRows ) {
|
||||
@ -470,10 +476,12 @@
|
||||
}
|
||||
}
|
||||
p.processAjaxOnInit = true;
|
||||
// only add new header text if the length matches
|
||||
if ( th && th.length === hl ) {
|
||||
// update new header text
|
||||
if ( th ) {
|
||||
hsh = $table.hasClass('hasStickyHeaders');
|
||||
$sh = hsh ? c.widgetOptions.$sticky.children('thead:first').children('tr').children() : '';
|
||||
$sh = hsh ?
|
||||
c.widgetOptions.$sticky.children('thead:first').children('tr:not(.' + c.cssIgnoreRow + ')').children() :
|
||||
'';
|
||||
$f = $table.find('tfoot tr:first').children();
|
||||
// don't change td headers (may contain pager)
|
||||
$headers = c.$headers.filter( 'th ' );
|
||||
@ -483,15 +491,17 @@
|
||||
// add new test within the first span it finds, or just in the header
|
||||
if ( $h.find('.' + ts.css.icon).length ) {
|
||||
icon = $h.find('.' + ts.css.icon).clone(true);
|
||||
$h.find('.tablesorter-header-inner').html( th[j] ).append(icon);
|
||||
$h.find('.' + ts.css.headerIn).html( th[j] ).append(icon);
|
||||
if ( hsh && $sh.length ) {
|
||||
icon = $sh.eq(j).find('.' + ts.css.icon).clone(true);
|
||||
$sh.eq(j).find('.tablesorter-header-inner').html( th[j] ).append(icon);
|
||||
$sh.eq(j).find('.' + ts.css.headerIn).html( th[j] ).append(icon);
|
||||
}
|
||||
} else {
|
||||
$h.find('.tablesorter-header-inner').html( th[j] );
|
||||
$h.find('.' + ts.css.headerIn).html( th[j] );
|
||||
if (hsh && $sh.length) {
|
||||
$sh.eq(j).find('.tablesorter-header-inner').html( th[j] );
|
||||
// add sticky header to container just in case it contains pager controls
|
||||
p.$container = p.$container.add( c.widgetOptions.$sticky );
|
||||
$sh.eq(j).find('.' + ts.css.headerIn).html( th[j] );
|
||||
}
|
||||
}
|
||||
$f.eq(j).html( th[j] );
|
||||
@ -693,9 +703,7 @@
|
||||
}
|
||||
}
|
||||
// disable size selector
|
||||
$controls = p.$size
|
||||
.add( p.$goto )
|
||||
.add( p.$container.find( '.ts-startRow, .ts-page' ) );
|
||||
$controls = p.$container.find( p.cssGoto + ',' + p.cssPageSize + ', .ts-startRow, .ts-page' );
|
||||
len = $controls.length;
|
||||
for ( index = 0; index < len; index++ ) {
|
||||
$controls.eq( index ).addClass( p.cssDisabled )[0].disabled = true;
|
||||
@ -798,7 +806,7 @@
|
||||
parsePageSize = function( p, size, mode ) {
|
||||
var s = parseInt( size, 10 ) || p.size || p.settings.size || 10;
|
||||
return p.initialized && (/all/i.test( size ) || s === p.totalRows) ?
|
||||
// "get" to get `p.size` or "set" to set `p.$size.val()`
|
||||
// "get" to get `p.size` or "set" to set `pageSize.val()`
|
||||
'all' : ( mode === 'get' ? s : p.size );
|
||||
},
|
||||
|
||||
@ -812,7 +820,7 @@
|
||||
|
||||
setPageSize = function(table, size, p) {
|
||||
p.size = parsePageSize( p, size, 'get' );
|
||||
p.$size.val( parsePageSize( p, p.size, 'set' ) );
|
||||
p.$container.find(p.cssPageSize).val( parsePageSize( p, p.size, 'set' ) );
|
||||
$.data(table, 'pagerLastPage', parsePageNumber( table, p ) );
|
||||
$.data(table, 'pagerLastSize', p.size);
|
||||
p.totalPages = p.size === 'all' ? 1 : Math.ceil( p.totalRows / p.size );
|
||||
@ -887,7 +895,7 @@
|
||||
enablePager = function(table, p, triggered) {
|
||||
var info, size, $el,
|
||||
c = table.config;
|
||||
p.$size.add(p.$goto).add(p.$container.find('.ts-startRow, .ts-page'))
|
||||
p.$container.find(p.cssGoto + ',' + p.cssPageSize + ',.ts-startRow, .ts-page')
|
||||
.removeClass(p.cssDisabled)
|
||||
.removeAttr('disabled')
|
||||
.each(function(){
|
||||
@ -895,9 +903,10 @@
|
||||
});
|
||||
p.isDisabled = false;
|
||||
p.page = $.data(table, 'pagerLastPage') || p.page || 0;
|
||||
size = p.$size.find('option[selected]').val();
|
||||
$el = p.$container.find(p.cssPageSize);
|
||||
size = $el.find('option[selected]').val();
|
||||
p.size = $.data(table, 'pagerLastSize') || parsePageSize( p, size, 'get' );
|
||||
p.$size.val( p.size ); // set page size
|
||||
$el.val( p.size ); // set page size
|
||||
p.totalPages = p.size === 'all' ? 1 : Math.ceil( getTotalPages( table, p ) / p.size );
|
||||
// if table id exists, include page display with aria info
|
||||
if ( table.id && !c.$table.attr( 'aria-describedby' ) ) {
|
||||
@ -923,7 +932,7 @@
|
||||
},
|
||||
|
||||
init = function(table, settings) {
|
||||
var t, ctrls, fxn, size,
|
||||
var t, ctrls, fxn, size, $el,
|
||||
c = table.config,
|
||||
wo = c.widgetOptions,
|
||||
p = c.pager = $.extend( true, {}, $.tablesorterPager.defaults, settings ),
|
||||
@ -1057,9 +1066,9 @@
|
||||
});
|
||||
|
||||
// goto selector
|
||||
p.$goto = pager.find(p.cssGoto);
|
||||
if ( p.$goto.length ) {
|
||||
p.$goto
|
||||
$el = pager.find(p.cssGoto);
|
||||
if ( $el.length ) {
|
||||
$el
|
||||
.unbind('change' + namespace)
|
||||
.bind('change' + namespace, function(){
|
||||
p.page = $(this).val() - 1;
|
||||
@ -1070,14 +1079,15 @@
|
||||
console.warn('Pager: >> Goto selector not found');
|
||||
}
|
||||
// page size selector
|
||||
p.$size = pager.find(p.cssPageSize);
|
||||
if ( p.$size.length ) {
|
||||
$el = pager.find(p.cssPageSize);
|
||||
if ( $el.length ) {
|
||||
// setting an option as selected appears to cause issues with initial page size
|
||||
p.$size.find('option').removeAttr('selected');
|
||||
p.$size.unbind('change' + namespace).bind('change' + namespace, function() {
|
||||
$el.find('option').removeAttr('selected');
|
||||
$el.unbind('change' + namespace).bind('change' + namespace, function() {
|
||||
if ( !$(this).hasClass(p.cssDisabled) ) {
|
||||
var size = $(this).val();
|
||||
p.$size.val( size ); // in case there are more than one pagers
|
||||
// in case there are more than one pager
|
||||
p.$container.find(p.cssGoto).val( size );
|
||||
setPageSize(table, size, p);
|
||||
changeHeight(table, p);
|
||||
}
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
/*************
|
||||
Blue Theme (nested tables)
|
||||
*************/
|
||||
/**
|
||||
* Blue Theme (demo - https://jsfiddle.net/Mottie/k9uasLc7/)
|
||||
* Intended for an outer table containing differently styled nested
|
||||
* tables (inner tables will not need a high specificity style)
|
||||
*/
|
||||
/* overall */
|
||||
.tablesorter-blue {
|
||||
width: 100%;
|
||||
@ -122,10 +124,10 @@
|
||||
}
|
||||
|
||||
/* Zebra Widget - row alternating colors */
|
||||
.tablesorter-blue > tbody tr.odd > td {
|
||||
.tablesorter-blue > tbody > tr.odd > td {
|
||||
background-color: #ebf2fa;
|
||||
}
|
||||
.tablesorter-blue > tbody tr.even > td {
|
||||
.tablesorter-blue > tbody > tr.even > td {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
@ -171,13 +173,13 @@
|
||||
transition: line-height 0.1s ease;
|
||||
}
|
||||
/* optional disabled input styling */
|
||||
.tablesorter-blue .tablesorter-filter-row .disabled {
|
||||
.tablesorter-blue > thead > .tablesorter-filter-row .disabled {
|
||||
opacity: 0.5;
|
||||
filter: alpha(opacity=50);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
/* hidden filter row */
|
||||
.tablesorter-blue .tablesorter-filter-row.hideme td {
|
||||
.tablesorter-blue > thead > .tablesorter-filter-row.hideme td {
|
||||
/*** *********************************************** ***/
|
||||
/*** change this padding to modify the thickness ***/
|
||||
/*** of the closed filter row (height = padding x 2) ***/
|
||||
@ -187,7 +189,7 @@
|
||||
line-height: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.tablesorter-blue .tablesorter-filter-row.hideme * {
|
||||
.tablesorter-blue > thead > .tablesorter-filter-row.hideme * {
|
||||
height: 1px;
|
||||
min-height: 0;
|
||||
border: 0;
|
||||
@ -198,8 +200,8 @@
|
||||
filter: alpha(opacity=0);
|
||||
}
|
||||
/* filters */
|
||||
.tablesorter-blue input.tablesorter-filter,
|
||||
.tablesorter-blue select.tablesorter-filter {
|
||||
.tablesorter-blue > thead > .tablesorter-filter-row input.tablesorter-filter,
|
||||
.tablesorter-blue > thead > .tablesorter-filter-row select.tablesorter-filter {
|
||||
width: 98%;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
@ -221,7 +223,7 @@
|
||||
}
|
||||
|
||||
/* ajax error row */
|
||||
.tablesorter .tablesorter-errorRow td {
|
||||
.tablesorter-blue > thead > .tablesorter-errorRow td {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
background-color: #e6bf99;
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
/*************
|
||||
Bootstrap theme
|
||||
*************/
|
||||
/* jQuery Bootstrap Theme */
|
||||
/**
|
||||
* Bootstrap theme v3.x
|
||||
*
|
||||
* WARNING!... once a stable Bootstrap v4.x is released,
|
||||
* this file will be removed; use theme.bootstrap_3.css
|
||||
*/
|
||||
.tablesorter-bootstrap {
|
||||
width: 100%;
|
||||
}
|
||||
@ -83,6 +85,29 @@
|
||||
background-repeat: no-repeat !important;
|
||||
}
|
||||
|
||||
/* Column Widget - column sort colors */
|
||||
.tablesorter-bootstrap > tbody > tr.odd td.primary {
|
||||
background-color: #bfbfbf;
|
||||
}
|
||||
.tablesorter-bootstrap > tbody > tr td.primary,
|
||||
.tablesorter-bootstrap > tbody > tr.even td.primary {
|
||||
background-color: #d9d9d9;
|
||||
}
|
||||
.tablesorter-bootstrap > tbody > tr.odd td.secondary {
|
||||
background-color: #d9d9d9;
|
||||
}
|
||||
.tablesorter-bootstrap > tbody > tr td.secondary,
|
||||
.tablesorter-bootstrap > tbody > tr.even td.secondary {
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
.tablesorter-bootstrap > tbody > tr.odd td.tertiary {
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
.tablesorter-bootstrap > tbody > tr td.tertiary,
|
||||
.tablesorter-bootstrap > tbody > tr.even td.tertiary {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
/* caption */
|
||||
.caption {
|
||||
background-color: #fff;
|
||||
@ -143,7 +168,7 @@
|
||||
opacity: 0;
|
||||
filter: alpha(opacity=0);
|
||||
}
|
||||
/* rows hidden by filtering (needed for child rows) */
|
||||
/* rows hidden by filtering */
|
||||
.tablesorter .filtered {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
/*************
|
||||
Bootstrap 2 Theme
|
||||
*************/
|
||||
/* jQuery Bootstrap 2 Theme */
|
||||
/**
|
||||
* Bootstrap theme v2.x
|
||||
*/
|
||||
.tablesorter-bootstrap {
|
||||
width: 100%;
|
||||
}
|
||||
@ -89,6 +88,29 @@
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
/* Column Widget - column sort colors */
|
||||
.tablesorter-bootstrap > tbody > tr.odd td.primary {
|
||||
background-color: #bfbfbf;
|
||||
}
|
||||
.tablesorter-bootstrap > tbody > tr td.primary,
|
||||
.tablesorter-bootstrap > tbody > tr.even td.primary {
|
||||
background-color: #d9d9d9;
|
||||
}
|
||||
.tablesorter-bootstrap > tbody > tr.odd td.secondary {
|
||||
background-color: #d9d9d9;
|
||||
}
|
||||
.tablesorter-bootstrap > tbody > tr td.secondary,
|
||||
.tablesorter-bootstrap > tbody > tr.even td.secondary {
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
.tablesorter-bootstrap > tbody > tr.odd td.tertiary {
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
.tablesorter-bootstrap > tbody > tr td.tertiary,
|
||||
.tablesorter-bootstrap > tbody > tr.even td.tertiary {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
/* caption */
|
||||
caption {
|
||||
background-color: #fff;
|
||||
@ -145,7 +167,7 @@ caption {
|
||||
opacity: 0;
|
||||
filter: alpha(opacity=0);
|
||||
}
|
||||
/* rows hidden by filtering (needed for child rows) */
|
||||
/* rows hidden by filtering */
|
||||
.tablesorter .filtered {
|
||||
display: none;
|
||||
}
|
||||
|
||||
190
css/theme.bootstrap_3.css
Normal file
190
css/theme.bootstrap_3.css
Normal file
@ -0,0 +1,190 @@
|
||||
/**
|
||||
* Bootstrap theme v3.x
|
||||
*/
|
||||
.tablesorter-bootstrap {
|
||||
width: 100%;
|
||||
}
|
||||
.tablesorter-bootstrap thead th,
|
||||
.tablesorter-bootstrap thead td,
|
||||
.tablesorter-bootstrap tfoot th,
|
||||
.tablesorter-bootstrap tfoot td {
|
||||
font: 14px/20px Arial, Sans-serif;
|
||||
font-weight: bold;
|
||||
padding: 4px;
|
||||
margin: 0 0 18px;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.tablesorter-bootstrap .tablesorter-header {
|
||||
cursor: pointer;
|
||||
}
|
||||
.tablesorter-bootstrap .sorter-false {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.tablesorter-bootstrap .tablesorter-header.sorter-false i.tablesorter-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tablesorter-bootstrap .tablesorter-header-inner {
|
||||
position: relative;
|
||||
padding: 4px 18px 4px 4px;
|
||||
}
|
||||
.tablesorter-bootstrap .sorter-false .tablesorter-header-inner {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
/* bootstrap uses <i> for icons */
|
||||
.tablesorter-bootstrap .tablesorter-header i.tablesorter-icon {
|
||||
font-size: 11px;
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
top: 50%;
|
||||
margin-top: -7px; /* half the icon height; older IE doesn't like this */
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background-repeat: no-repeat;
|
||||
line-height: 14px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* black unsorted icon */
|
||||
.tablesorter-bootstrap .bootstrap-icon-unsorted {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAOCAYAAAD5YeaVAAAA20lEQVR4AWJABpKSkoxALCstLb0aUAsZaCAMhVEY6B0amx8YZWDDEDSBa2AGe7XeIiAAClYwVGBvsAcIllsf/mvcC9DgOOd8h90fxWvngVEUbZIkuWRZZlE8eQjcisgZMM9zi+LJ6ZfwegmWZflZDugdHMfxTcGqql7TNBlUB/QObtv2VBSFrev6OY7jngzFk9OT/fn73fWYpqnlXNyXDMWT0zuYx/Bvel9ej+LJ6R08DMOu67q7DkTkrSA5vYPneV71fX/QASdTkJwezhs0TfMARn0wMDDGXEPgF4oijqwM5YjNAAAAAElFTkSuQmCC);
|
||||
}
|
||||
|
||||
/* white unsorted icon */
|
||||
.tablesorter-bootstrap .icon-white.bootstrap-icon-unsorted {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAOCAYAAAD5YeaVAAAAe0lEQVR4AbXQoRWDMBiF0Sh2QLAAQ8SxJGugWSA6A2STW1PxTsnB9cnkfuYvv8OGC1t5G3Y0QMP+Bm857keAdQIzWBP3+Bw4MADQE18B6/etRnCV/w9nnGuLezfAmXhABGtAGIkruvk6auIFRwQJDywllsEAjCecB20GP59BQQ+gtlRLAAAAAElFTkSuQmCC);
|
||||
}
|
||||
|
||||
/* since bootstrap (table-striped) uses nth-child(), we just use this to add a zebra stripe color */
|
||||
.tablesorter-bootstrap > tbody > tr.odd > td,
|
||||
.tablesorter-bootstrap > tbody > tr.tablesorter-hasChildRow.odd:hover ~ tr.tablesorter-hasChildRow.odd ~ .tablesorter-childRow.odd > td {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
.tablesorter-bootstrap > tbody > tr.hover > td,
|
||||
.tablesorter-bootstrap > tbody > tr.odd:hover > td,
|
||||
.tablesorter-bootstrap > tbody > tr.even:hover > td,
|
||||
.tablesorter-bootstrap > tbody > tr.tablesorter-hasChildRow.odd:hover ~ .tablesorter-childRow.odd > td,
|
||||
.tablesorter-bootstrap > tbody > tr.tablesorter-hasChildRow.even:hover ~ .tablesorter-childRow.even > td {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.tablesorter-bootstrap > tbody > tr.even > td,
|
||||
.tablesorter-bootstrap > tbody > tr.tablesorter-hasChildRow.even:hover ~ tr.tablesorter-hasChildRow.even ~ .tablesorter-childRow.even > td {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* processing icon */
|
||||
.tablesorter-bootstrap .tablesorter-processing {
|
||||
background-image: url('data:image/gif;base64,R0lGODlhFAAUAKEAAO7u7lpaWgAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQBCgACACwAAAAAFAAUAAACQZRvoIDtu1wLQUAlqKTVxqwhXIiBnDg6Y4eyx4lKW5XK7wrLeK3vbq8J2W4T4e1nMhpWrZCTt3xKZ8kgsggdJmUFACH5BAEKAAIALAcAAAALAAcAAAIUVB6ii7jajgCAuUmtovxtXnmdUAAAIfkEAQoAAgAsDQACAAcACwAAAhRUIpmHy/3gUVQAQO9NetuugCFWAAAh+QQBCgACACwNAAcABwALAAACE5QVcZjKbVo6ck2AF95m5/6BSwEAIfkEAQoAAgAsBwANAAsABwAAAhOUH3kr6QaAcSrGWe1VQl+mMUIBACH5BAEKAAIALAIADQALAAcAAAIUlICmh7ncTAgqijkruDiv7n2YUAAAIfkEAQoAAgAsAAAHAAcACwAAAhQUIGmHyedehIoqFXLKfPOAaZdWAAAh+QQFCgACACwAAAIABwALAAACFJQFcJiXb15zLYRl7cla8OtlGGgUADs=');
|
||||
background-position: center center !important;
|
||||
background-repeat: no-repeat !important;
|
||||
}
|
||||
|
||||
/* Column Widget - column sort colors */
|
||||
.tablesorter-bootstrap > tbody > tr.odd td.primary {
|
||||
background-color: #bfbfbf;
|
||||
}
|
||||
.tablesorter-bootstrap > tbody > tr td.primary,
|
||||
.tablesorter-bootstrap > tbody > tr.even td.primary {
|
||||
background-color: #d9d9d9;
|
||||
}
|
||||
.tablesorter-bootstrap > tbody > tr.odd td.secondary {
|
||||
background-color: #d9d9d9;
|
||||
}
|
||||
.tablesorter-bootstrap > tbody > tr td.secondary,
|
||||
.tablesorter-bootstrap > tbody > tr.even td.secondary {
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
.tablesorter-bootstrap > tbody > tr.odd td.tertiary {
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
.tablesorter-bootstrap > tbody > tr td.tertiary,
|
||||
.tablesorter-bootstrap > tbody > tr.even td.tertiary {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
/* caption */
|
||||
.caption {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* filter widget */
|
||||
.tablesorter-bootstrap .tablesorter-filter-row input.tablesorter-filter,
|
||||
.tablesorter-bootstrap .tablesorter-filter-row select.tablesorter-filter {
|
||||
width: 98%;
|
||||
margin: 0;
|
||||
padding: 4px 6px;
|
||||
color: #333;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
-webkit-transition: height 0.1s ease;
|
||||
-moz-transition: height 0.1s ease;
|
||||
-o-transition: height 0.1s ease;
|
||||
transition: height 0.1s ease;
|
||||
}
|
||||
.tablesorter-bootstrap .tablesorter-filter-row .tablesorter-filter.disabled {
|
||||
background-color: #eee;
|
||||
color: #555;
|
||||
cursor: not-allowed;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset;
|
||||
box-sizing: border-box;
|
||||
transition: height 0.1s ease;
|
||||
}
|
||||
.tablesorter-bootstrap .tablesorter-filter-row {
|
||||
background-color: #efefef;
|
||||
}
|
||||
.tablesorter-bootstrap .tablesorter-filter-row td {
|
||||
background-color: #efefef;
|
||||
line-height: normal;
|
||||
text-align: center;
|
||||
padding: 4px 6px;
|
||||
vertical-align: middle;
|
||||
-webkit-transition: line-height 0.1s ease;
|
||||
-moz-transition: line-height 0.1s ease;
|
||||
-o-transition: line-height 0.1s ease;
|
||||
transition: line-height 0.1s ease;
|
||||
}
|
||||
/* hidden filter row */
|
||||
.tablesorter-bootstrap .tablesorter-filter-row.hideme td {
|
||||
padding: 2px; /* change this to modify the thickness of the closed border row */
|
||||
margin: 0;
|
||||
line-height: 0;
|
||||
}
|
||||
.tablesorter-bootstrap .tablesorter-filter-row.hideme * {
|
||||
height: 1px;
|
||||
min-height: 0;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
/* don't use visibility: hidden because it disables tabbing */
|
||||
opacity: 0;
|
||||
filter: alpha(opacity=0);
|
||||
}
|
||||
/* rows hidden by filtering */
|
||||
.tablesorter .filtered {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* pager plugin */
|
||||
.tablesorter-bootstrap .tablesorter-pager select {
|
||||
padding: 4px 6px;
|
||||
}
|
||||
.tablesorter-bootstrap .tablesorter-pager .pagedisplay {
|
||||
border: 0;
|
||||
}
|
||||
/* tfoot i for pager controls */
|
||||
.tablesorter-bootstrap tfoot i {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
/* ajax error row */
|
||||
.tablesorter .tablesorter-errorRow td {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
background-color: #e6bf99;
|
||||
}
|
||||
189
css/theme.bootstrap_4.css
Normal file
189
css/theme.bootstrap_4.css
Normal file
@ -0,0 +1,189 @@
|
||||
/**
|
||||
* Bootstrap theme v4.x
|
||||
*/
|
||||
.tablesorter-bootstrap {
|
||||
width: 100%;
|
||||
}
|
||||
.tablesorter-bootstrap thead th,
|
||||
.tablesorter-bootstrap thead td,
|
||||
.tablesorter-bootstrap tfoot th,
|
||||
.tablesorter-bootstrap tfoot td {
|
||||
font: 14px/20px Arial, Sans-serif;
|
||||
font-weight: bold;
|
||||
padding: 4px;
|
||||
margin: 0 0 18px;
|
||||
}
|
||||
|
||||
.tablesorter-bootstrap thead .tablesorter-header {
|
||||
background-position: right 5px center;
|
||||
background-repeat: no-repeat;
|
||||
cursor: pointer;
|
||||
white-space: normal;
|
||||
}
|
||||
.tablesorter-bootstrap:not(.table-inverse) thead:not(.thead-inverse) .tablesorter-header,
|
||||
.tablesorter-bootstrap:not(.table-inverse) tfoot th,
|
||||
.tablesorter-bootstrap:not(.table-inverse) tfoot td {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.tablesorter-bootstrap thead .sorter-false {
|
||||
cursor: default;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.tablesorter-bootstrap .tablesorter-header-inner {
|
||||
position: relative;
|
||||
padding: 4px 18px 4px 4px;
|
||||
}
|
||||
.tablesorter-bootstrap .sorter-false .tablesorter-header-inner {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
/* black icons */
|
||||
.tablesorter-bootstrap thead .tablesorter-headerUnSorted:not(.sorter-false) {
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE0IDIwIj48cGF0aCBkPSJNMTQgMTNsLTIuNS0yLjVMNyAxNWwtNC41LTQuNUwwIDEzbDcgN3pNMTQgNy41TDExLjUgMTAgNyA1LjUgMi41IDEwIDAgNy41bDctN3oiLz48L3N2Zz4=);
|
||||
}
|
||||
.tablesorter-bootstrap thead .tablesorter-headerAsc {
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDE0IDE0Ij48cGF0aCBkPSJNMTQgOS41TDExLjUgMTIgNyA3LjUgMi41IDEyIDAgOS41bDctN3oiLz48L3N2Zz4=);
|
||||
}
|
||||
.tablesorter-bootstrap thead .tablesorter-headerDesc {
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDE0IDE0Ij48cGF0aCBkPSJNMTQgNWwtMi41LTIuNS00LjUgNC41LTQuNS00LjVMMCA1IDcgMTJ6Ii8+PC9zdmc+);
|
||||
}
|
||||
|
||||
/* white icons */
|
||||
.tablesorter-bootstrap thead.thead-inverse .tablesorter-headerUnSorted:not(.sorter-false),
|
||||
.tablesorter-bootstrap.table-inverse thead .tablesorter-headerUnSorted:not(.sorter-false) {
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE0IDIwIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTQgMTNsLTIuNS0yLjVMNyAxNWwtNC41LTQuNUwwIDEzbDcgN3pNMTQgNy41TDExLjUgMTAgNyA1LjUgMi41IDEwIDAgNy41bDctN3oiLz48L3N2Zz4=);
|
||||
}
|
||||
.tablesorter-bootstrap thead.thead-inverse .tablesorter-headerAsc,
|
||||
.tablesorter-bootstrap.table-inverse thead .tablesorter-headerAsc {
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDE0IDE0Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTQgOS41TDExLjUgMTIgNyA3LjUgMi41IDEyIDAgOS41bDctN3oiLz48L3N2Zz4=);
|
||||
}
|
||||
.tablesorter-bootstrap thead.thead-inverse .tablesorter-headerDesc,
|
||||
.tablesorter-bootstrap.table-inverse thead .tablesorter-headerDesc {
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDE0IDE0Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTQgNWwtMi41LTIuNS00LjUgNC41LTQuNS00LjVMMCA1IDcgMTJ6Ii8+PC9zdmc+);
|
||||
}
|
||||
|
||||
/* since bootstrap (table-striped) uses nth-child(), we just use this to add a zebra stripe color */
|
||||
.tablesorter-bootstrap:not(.table-inverse) > tbody > tr.odd > td,
|
||||
.tablesorter-bootstrap:not(.table-inverse) > tbody > tr.tablesorter-hasChildRow.odd:hover ~ tr.tablesorter-hasChildRow.odd ~ .tablesorter-childRow.odd > td {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
.tablesorter-bootstrap:not(.table-inverse) > tbody > tr.hover > td,
|
||||
.tablesorter-bootstrap:not(.table-inverse) > tbody > tr.odd:hover > td,
|
||||
.tablesorter-bootstrap:not(.table-inverse) > tbody > tr.even:hover > td,
|
||||
.tablesorter-bootstrap:not(.table-inverse) > tbody > tr.tablesorter-hasChildRow.odd:hover ~ .tablesorter-childRow.odd > td,
|
||||
.tablesorter-bootstrap:not(.table-inverse) > tbody > tr.tablesorter-hasChildRow.even:hover ~ .tablesorter-childRow.even > td {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.tablesorter-bootstrap:not(.table-inverse) > tbody > tr.even > td,
|
||||
.tablesorter-bootstrap:not(.table-inverse) > tbody > tr.tablesorter-hasChildRow.even:hover ~ tr.tablesorter-hasChildRow.even ~ .tablesorter-childRow.even > td {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* processing icon */
|
||||
.tablesorter-bootstrap .tablesorter-processing {
|
||||
background-image: url('data:image/gif;base64,R0lGODlhFAAUAKEAAO7u7lpaWgAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQBCgACACwAAAAAFAAUAAACQZRvoIDtu1wLQUAlqKTVxqwhXIiBnDg6Y4eyx4lKW5XK7wrLeK3vbq8J2W4T4e1nMhpWrZCTt3xKZ8kgsggdJmUFACH5BAEKAAIALAcAAAALAAcAAAIUVB6ii7jajgCAuUmtovxtXnmdUAAAIfkEAQoAAgAsDQACAAcACwAAAhRUIpmHy/3gUVQAQO9NetuugCFWAAAh+QQBCgACACwNAAcABwALAAACE5QVcZjKbVo6ck2AF95m5/6BSwEAIfkEAQoAAgAsBwANAAsABwAAAhOUH3kr6QaAcSrGWe1VQl+mMUIBACH5BAEKAAIALAIADQALAAcAAAIUlICmh7ncTAgqijkruDiv7n2YUAAAIfkEAQoAAgAsAAAHAAcACwAAAhQUIGmHyedehIoqFXLKfPOAaZdWAAAh+QQFCgACACwAAAIABwALAAACFJQFcJiXb15zLYRl7cla8OtlGGgUADs=');
|
||||
background-position: center center !important;
|
||||
background-repeat: no-repeat !important;
|
||||
}
|
||||
|
||||
/* Column Widget - column sort colors */
|
||||
.tablesorter-bootstrap:not(.table-inverse) > tbody > tr.odd td.primary {
|
||||
background-color: #bfbfbf;
|
||||
}
|
||||
.tablesorter-bootstrap:not(.table-inverse) > tbody > tr td.primary,
|
||||
.tablesorter-bootstrap:not(.table-inverse) > tbody > tr.even td.primary {
|
||||
background-color: #d9d9d9;
|
||||
}
|
||||
.tablesorter-bootstrap:not(.table-inverse) > tbody > tr.odd td.secondary {
|
||||
background-color: #d9d9d9;
|
||||
}
|
||||
.tablesorter-bootstrap:not(.table-inverse) > tbody > tr td.secondary,
|
||||
.tablesorter-bootstrap:not(.table-inverse) > tbody > tr.even td.secondary {
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
.tablesorter-bootstrap:not(.table-inverse) > tbody > tr.odd td.tertiary {
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
.tablesorter-bootstrap:not(.table-inverse) > tbody > tr td.tertiary,
|
||||
.tablesorter-bootstrap:not(.table-inverse) > tbody > tr.even td.tertiary {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
/* caption */
|
||||
.tablesorter-bootstrap:not(.table-inverse) .caption {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* filter widget */
|
||||
.tablesorter-bootstrap .tablesorter-filter-row input.tablesorter-filter,
|
||||
.tablesorter-bootstrap .tablesorter-filter-row select.tablesorter-filter {
|
||||
width: 98%;
|
||||
margin: 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
-webkit-transition: height 0.1s ease;
|
||||
-moz-transition: height 0.1s ease;
|
||||
-o-transition: height 0.1s ease;
|
||||
transition: height 0.1s ease;
|
||||
}
|
||||
.tablesorter-bootstrap:not(.table-inverse) .tablesorter-filter-row {
|
||||
background-color: #efefef;
|
||||
}
|
||||
.tablesorter-bootstrap:not(.table-inverse) .tablesorter-filter-row input.tablesorter-filter,
|
||||
.tablesorter-bootstrap:not(.table-inverse) .tablesorter-filter-row select.tablesorter-filter {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.tablesorter-bootstrap .tablesorter-filter-row .tablesorter-filter.disabled {
|
||||
cursor: not-allowed;
|
||||
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset;
|
||||
box-sizing: border-box;
|
||||
transition: height 0.1s ease;
|
||||
}
|
||||
|
||||
.tablesorter-bootstrap:not(.table-inverse) .tablesorter-filter-row td {
|
||||
line-height: normal;
|
||||
text-align: center;
|
||||
padding: 4px 6px;
|
||||
vertical-align: middle;
|
||||
-webkit-transition: line-height 0.1s ease;
|
||||
-moz-transition: line-height 0.1s ease;
|
||||
-o-transition: line-height 0.1s ease;
|
||||
transition: line-height 0.1s ease;
|
||||
}
|
||||
/* hidden filter row */
|
||||
.tablesorter-bootstrap .tablesorter-filter-row.hideme td {
|
||||
padding: 2px; /* change this to modify the thickness of the closed border row */
|
||||
margin: 0;
|
||||
line-height: 0;
|
||||
}
|
||||
.tablesorter-bootstrap .tablesorter-filter-row.hideme * {
|
||||
height: 1px;
|
||||
min-height: 0;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
/* don't use visibility: hidden because it disables tabbing */
|
||||
opacity: 0;
|
||||
filter: alpha(opacity=0);
|
||||
}
|
||||
/* rows hidden by filtering */
|
||||
.tablesorter .filtered {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* pager plugin */
|
||||
|
||||
.tablesorter-bootstrap .tablesorter-pager .pagedisplay {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* ajax error row */
|
||||
.tablesorter:not(.table-inverse) .tablesorter-errorRow td {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
background-color: #e6bf99;
|
||||
}
|
||||
38
css/widget.grouping.css
Normal file
38
css/widget.grouping.css
Normal file
@ -0,0 +1,38 @@
|
||||
/* Grouping widget css */
|
||||
tr.group-header td {
|
||||
background: #eee;
|
||||
}
|
||||
.group-name {
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
}
|
||||
.group-count {
|
||||
color: #999;
|
||||
}
|
||||
.group-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
.group-header, .group-header td {
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
}
|
||||
/* collapsed arrow */
|
||||
tr.group-header td i {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 4px solid transparent;
|
||||
border-bottom: 4px solid #888;
|
||||
border-right: 4px solid #888;
|
||||
border-left: 4px solid transparent;
|
||||
margin-right: 7px;
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
}
|
||||
tr.group-header.collapsed td i {
|
||||
border-top: 5px solid transparent;
|
||||
border-bottom: 5px solid transparent;
|
||||
border-left: 5px solid #888;
|
||||
border-right: 0;
|
||||
margin-right: 10px;
|
||||
}
|
||||
2
dist/css/theme.bootstrap.min.css
vendored
2
dist/css/theme.bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
2
dist/css/theme.bootstrap_2.min.css
vendored
2
dist/css/theme.bootstrap_2.min.css
vendored
File diff suppressed because one or more lines are too long
1
dist/css/theme.bootstrap_3.min.css
vendored
Normal file
1
dist/css/theme.bootstrap_3.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
dist/css/theme.bootstrap_4.min.css
vendored
Normal file
1
dist/css/theme.bootstrap_4.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
dist/css/widget.grouping.min.css
vendored
Normal file
1
dist/css/widget.grouping.min.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
tr.group-header td{background:#eee}.group-name{text-transform:uppercase;font-weight:700}.group-count{color:#999}.group-hidden{display:none!important}.group-header,.group-header td{user-select:none;-moz-user-select:none}tr.group-header td i{display:inline-block;width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid #888;border-right:4px solid #888;border-left:4px solid transparent;margin-right:7px;user-select:none;-moz-user-select:none}tr.group-header.collapsed td i{border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #888;border-right:0;margin-right:10px}
|
||||
File diff suppressed because one or more lines are too long
10
dist/js/jquery.tablesorter.combined.js
vendored
10
dist/js/jquery.tablesorter.combined.js
vendored
@ -1,4 +1,4 @@
|
||||
/*! tablesorter (FORK) - updated 12-16-2016 (v2.28.3)*/
|
||||
/*! tablesorter (FORK) - updated 01-06-2017 (v2.28.4)*/
|
||||
/* Includes widgets ( storage,uitheme,columns,filter,stickyHeaders,resizable,saveSort ) */
|
||||
(function(factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
@ -10,7 +10,7 @@
|
||||
}
|
||||
}(function(jQuery) {
|
||||
|
||||
/*! TableSorter (FORK) v2.28.3 *//*
|
||||
/*! TableSorter (FORK) v2.28.4 *//*
|
||||
* Client-side table sorting with ease!
|
||||
* @requires jQuery v1.2.6+
|
||||
*
|
||||
@ -34,7 +34,7 @@
|
||||
'use strict';
|
||||
var ts = $.tablesorter = {
|
||||
|
||||
version : '2.28.3',
|
||||
version : '2.28.4',
|
||||
|
||||
parsers : [],
|
||||
widgets : [],
|
||||
@ -5065,7 +5065,7 @@
|
||||
|
||||
})( jQuery );
|
||||
|
||||
/*! Widget: stickyHeaders - updated 7/31/2016 (v2.27.0) *//*
|
||||
/*! Widget: stickyHeaders - updated 1/6/2017 (v2.28.4) *//*
|
||||
* Requires tablesorter v2.8+ and jQuery 1.4.3+
|
||||
* by Rob Garrison
|
||||
*/
|
||||
@ -5128,7 +5128,7 @@
|
||||
// **************************
|
||||
ts.addWidget({
|
||||
id: 'stickyHeaders',
|
||||
priority: 55, // sticky widget must be initialized after the filter widget!
|
||||
priority: 54, // sticky widget must be initialized after the filter & before pager widget!
|
||||
options: {
|
||||
stickyHeaders : '', // extra class name added to the sticky header row
|
||||
stickyHeaders_appendTo : null, // jQuery selector or object to phycially attach the sticky headers
|
||||
|
||||
6
dist/js/jquery.tablesorter.combined.min.js
vendored
6
dist/js/jquery.tablesorter.combined.min.js
vendored
File diff suppressed because one or more lines are too long
4
dist/js/jquery.tablesorter.js
vendored
4
dist/js/jquery.tablesorter.js
vendored
@ -8,7 +8,7 @@
|
||||
}
|
||||
}(function(jQuery) {
|
||||
|
||||
/*! TableSorter (FORK) v2.28.3 *//*
|
||||
/*! TableSorter (FORK) v2.28.4 *//*
|
||||
* Client-side table sorting with ease!
|
||||
* @requires jQuery v1.2.6+
|
||||
*
|
||||
@ -32,7 +32,7 @@
|
||||
'use strict';
|
||||
var ts = $.tablesorter = {
|
||||
|
||||
version : '2.28.3',
|
||||
version : '2.28.4',
|
||||
|
||||
parsers : [],
|
||||
widgets : [],
|
||||
|
||||
2
dist/js/jquery.tablesorter.min.js
vendored
2
dist/js/jquery.tablesorter.min.js
vendored
File diff suppressed because one or more lines are too long
6
dist/js/jquery.tablesorter.widgets.js
vendored
6
dist/js/jquery.tablesorter.widgets.js
vendored
@ -1,4 +1,4 @@
|
||||
/*! tablesorter (FORK) - updated 12-16-2016 (v2.28.3)*/
|
||||
/*! tablesorter (FORK) - updated 01-06-2017 (v2.28.4)*/
|
||||
/* Includes widgets ( storage,uitheme,columns,filter,stickyHeaders,resizable,saveSort ) */
|
||||
(function(factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
@ -2270,7 +2270,7 @@
|
||||
|
||||
})( jQuery );
|
||||
|
||||
/*! Widget: stickyHeaders - updated 7/31/2016 (v2.27.0) *//*
|
||||
/*! Widget: stickyHeaders - updated 1/6/2017 (v2.28.4) *//*
|
||||
* Requires tablesorter v2.8+ and jQuery 1.4.3+
|
||||
* by Rob Garrison
|
||||
*/
|
||||
@ -2333,7 +2333,7 @@
|
||||
// **************************
|
||||
ts.addWidget({
|
||||
id: 'stickyHeaders',
|
||||
priority: 55, // sticky widget must be initialized after the filter widget!
|
||||
priority: 54, // sticky widget must be initialized after the filter & before pager widget!
|
||||
options: {
|
||||
stickyHeaders : '', // extra class name added to the sticky header row
|
||||
stickyHeaders_appendTo : null, // jQuery selector or object to phycially attach the sticky headers
|
||||
|
||||
4
dist/js/jquery.tablesorter.widgets.min.js
vendored
4
dist/js/jquery.tablesorter.widgets.min.js
vendored
File diff suppressed because one or more lines are too long
4
dist/js/widgets/widget-output.min.js
vendored
4
dist/js/widgets/widget-output.min.js
vendored
File diff suppressed because one or more lines are too long
4
dist/js/widgets/widget-pager.min.js
vendored
4
dist/js/widgets/widget-pager.min.js
vendored
File diff suppressed because one or more lines are too long
4
dist/js/widgets/widget-stickyHeaders.min.js
vendored
4
dist/js/widgets/widget-stickyHeaders.min.js
vendored
File diff suppressed because one or more lines are too long
6
docs/css/bootstrap-v4.min.css
vendored
Normal file
6
docs/css/bootstrap-v4.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -181,7 +181,7 @@ table.focus-highlight td:before {
|
||||
</li>
|
||||
<li>To add <strong class="hover-hl">Hover</strong> Highlighting:
|
||||
<ul>
|
||||
<li>Add a class name of <code>"<span class="hover-hl">hover-highlight</span>"</code> to enable hover row and column highlighting.</li>
|
||||
<li>Add a class name of <code>"<span class="hover-hl">hover-highlight</span>"</code> to the <code>table</code> to enable hover row and column highlighting.</li>
|
||||
<li>Include the CSS shown on this page.</li>
|
||||
<li>If needed, modify the table background color & zebra striping row colors.</li>
|
||||
<li>Modify the hover highlight row and/or column color definitions as desired (they can be different colors).</li>
|
||||
@ -190,7 +190,7 @@ table.focus-highlight td:before {
|
||||
</li>
|
||||
<li>To add <strong class="focus-hl">Focus</strong> Highlighting:
|
||||
<ul>
|
||||
<li>Add a class name of <code>"<span class="focus-hl">focus-highlight</span>"</code> to enable focused cell with row and column highlighting.</li>
|
||||
<li>Add a class name of <code>"<span class="focus-hl">focus-highlight</span>"</code> to the <code>table</code> to enable focused cell with row and column highlighting.</li>
|
||||
<li>Click on a table cell in the demo below to see the highlight; only <em>one element</em>, per page, can be active at a time.</li>
|
||||
<li>Include the CSS and the extra javascript shown on this page to make table cells focusable.</li>
|
||||
<li>If needed, modify the table background color & zebra striping row colors.</li>
|
||||
@ -321,6 +321,15 @@ table.focus-highlight td:before {
|
||||
</div>
|
||||
<br class="clear"/>
|
||||
|
||||
<h1>Page Header</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><!-- Add any theme; the css for highlighting may need modification
|
||||
to match the selected theme, if it isn't the "blue" theme -->
|
||||
<link href="css/theme.blue.css" rel="stylesheet">
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="js/jquery.tablesorter.js"></script></pre>
|
||||
</div>
|
||||
|
||||
<h1>CSS</h1>
|
||||
<div id="css">
|
||||
<pre class="prettyprint lang-css"></pre>
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
|
||||
<link rel="stylesheet" href="css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="css/bootstrap-v3.min.css">
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - jQuery UITheme Widget (Bootstrap v2.x)</title>
|
||||
<title>jQuery tablesorter 2.0 - Bootstrap Theme (Bootstrap v2.x)</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-1.4.4.min.js"></script>
|
||||
@ -26,7 +26,7 @@
|
||||
<script id="js">$(function() {
|
||||
|
||||
// NOTE: $.tablesorter.theme.bootstrap is ALREADY INCLUDED in the jquery.tablesorter.widgets.js
|
||||
// file for Bootstrap v3.x; it is included here to show how you can modify the default classes
|
||||
// file for Bootstrap v3.x; it is included here because of class name differences in Bootstrap v2
|
||||
// for version 2.x (the iconSortAsc & iconSortDesc use different classes)
|
||||
$.tablesorter.themes.bootstrap = {
|
||||
// these classes are added to the table. To see other table classes available,
|
||||
@ -56,7 +56,7 @@
|
||||
$("table").tablesorter({
|
||||
// this will apply the bootstrap theme if "uitheme" widget is included
|
||||
// the widgetOptions.uitheme is no longer required to be set
|
||||
theme : "bootstrap",
|
||||
theme : "bootstrap", // version 2!!
|
||||
|
||||
widthFixed: true,
|
||||
|
||||
@ -64,13 +64,16 @@
|
||||
|
||||
// widget code contained in the jquery.tablesorter.widgets.js file
|
||||
// use the zebra stripe widget if you plan on hiding any rows (filter widget)
|
||||
widgets : [ "uitheme", "filter", "zebra" ],
|
||||
widgets : [ "uitheme", "filter", "columns", "zebra" ],
|
||||
|
||||
widgetOptions : {
|
||||
// using the default zebra striping class name, so it actually isn't included in the theme variable above
|
||||
// this is ONLY needed for bootstrap theming if you are using the filter widget, because rows are hidden
|
||||
zebra : ["even", "odd"],
|
||||
|
||||
// class names added to columns when sorted
|
||||
columns: [ "primary", "secondary", "tertiary" ],
|
||||
|
||||
// reset filters button
|
||||
filter_reset : ".reset",
|
||||
|
||||
@ -125,7 +128,7 @@
|
||||
$(this)
|
||||
.toggleClass('btn-danger btn-success')
|
||||
.find('i')
|
||||
.toggleClass('icon-ok icon-remove glyphicon-ok glyphicon-remove').end()
|
||||
.toggleClass('icon-ok icon-remove').end()
|
||||
.find('span')
|
||||
.text(t ? 'disabled' : 'enabled');
|
||||
$('table').trigger('refreshWidgets', [false]);
|
||||
@ -139,7 +142,7 @@
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>jQuery UITheme Widget (Bootstrap v2.x)</h2>
|
||||
<h2>Bootstrap v2.x Theme (requires UITheme Widget)</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
@ -150,17 +153,19 @@
|
||||
<span class="label label-info">NOTE!</span>
|
||||
</p>
|
||||
<ul>
|
||||
<li>Go to <a href="example-option-theme-bootstrap-v4.html">Bootstrap v4.x</a> or <a href="example-option-theme-bootstrap-v3.html">Bootstrap v3.x</a> demo.<br><br></li>
|
||||
<li>In <span class="version updated">v2.28.4</span>, added support for the column widget.</li>
|
||||
<li>This demo uses <a href="http://getbootstrap.com/2.3.2/">Bootstrap v2.x</a> (v2.3.2 specifically).</li>
|
||||
<li>Hover over the thick grey bar under the header to reveal the filter row.</li>
|
||||
<li>For more information like revision history of this theme & why there is a button to enable/disable the zebra widget, please see the <a href="example-widget-bootstrap-theme.html">Bootstrap v3.x demo</a>.</li>
|
||||
<li>For more information like revision history of this theme & why there is a button to enable/disable the zebra widget, please see the <a href="example-option-theme-bootstrap-v3.html">Bootstrap v3.x demo</a>.</li>
|
||||
</ul>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<!-- use the filter_reset : '.reset' option or include data-filter="" using the filter button demo code to reset the filters -->
|
||||
<div class="bootstrap_buttons">
|
||||
Reset filter : <button type="button" class="reset btn btn-primary" data-column="0" data-filter=""><i class="icon-white icon-refresh glyphicon glyphicon-refresh"></i> Reset filters</button>
|
||||
Reset filter : <button type="button" class="reset btn btn-primary" data-column="0" data-filter=""><i class="icon-white icon-refresh"></i> Reset filters</button>
|
||||
<br>
|
||||
Zebra widget : <button type="button" class="zebra btn btn-success"><i class="icon-white icon-ok glyphicon glyphicon-ok"></i> <span>enabled</span></button>
|
||||
Zebra widget : <button type="button" class="zebra btn btn-success"><i class="icon-white icon-ok"></i> <span>enabled</span></button>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
@ -187,16 +192,20 @@
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="7" class="ts-pager form-horizontal">
|
||||
<button type="button" class="btn first"><i class="icon-step-backward glyphicon glyphicon-step-backward"></i></button>
|
||||
<button type="button" class="btn prev"><i class="icon-arrow-left glyphicon glyphicon-backward"></i></button>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn first"><i class="icon-step-backward"></i></button>
|
||||
<button type="button" class="btn prev"><i class="icon-arrow-left"></i></button>
|
||||
</div>
|
||||
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
|
||||
<button type="button" class="btn next"><i class="icon-arrow-right glyphicon glyphicon-forward"></i></button>
|
||||
<button type="button" class="btn last"><i class="icon-step-forward glyphicon glyphicon-step-forward"></i></button>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn next"><i class="icon-arrow-right"></i></button>
|
||||
<button type="button" class="btn last"><i class="icon-step-forward"></i></button>
|
||||
</div>
|
||||
<select class="pagesize input-mini" title="Select page size">
|
||||
<option selected="selected" value="10">10</option>
|
||||
<option value="20">20</option>
|
||||
<option value="30">30</option>
|
||||
<option value="40">40</option>
|
||||
<option value="all">All Rows</option>
|
||||
</select>
|
||||
<select class="pagenum input-mini" title="Select page number"></select>
|
||||
</th>
|
||||
@ -259,10 +268,13 @@
|
||||
<h2>Page Header</h2>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><!-- Bootstrap stylesheet -->
|
||||
<link rel="stylesheet" href="css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="css/bootstrap-v3.min.css">
|
||||
<!-- bootstrap widget theme -->
|
||||
<link rel="stylesheet" href="css/theme.bootstrap_2.css">
|
||||
|
||||
<!-- load jQuery first -->
|
||||
<script src="js/jquery.min.js"></script>
|
||||
|
||||
<!-- tablesorter plugin -->
|
||||
<script src="js/jquery.tablesorter.js"></script>
|
||||
<!-- tablesorter widget file - loaded after the plugin -->
|
||||
343
docs/example-option-theme-bootstrap-v3.html
Normal file
343
docs/example-option-theme-bootstrap-v3.html
Normal file
@ -0,0 +1,343 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Bootstrap Theme (Bootstrap v3.x)</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link rel="stylesheet" href="css/bootstrap-v3.min.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required for bootstrap -->
|
||||
<link rel="stylesheet" href="../css/theme.bootstrap.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<!-- Tablesorter: optional -->
|
||||
<link rel="stylesheet" href="../addons/pager/jquery.tablesorter.pager.css">
|
||||
<script src="../addons/pager/jquery.tablesorter.pager.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
// NOTE: $.tablesorter.theme.bootstrap is ALREADY INCLUDED in the jquery.tablesorter.widgets.js
|
||||
// file; it is included here to show how you can modify the default classes
|
||||
$.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 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 : 'glyphicon glyphicon-chevron-up', // class name added to icon when column has ascending sort
|
||||
iconSortDesc : 'glyphicon glyphicon-chevron-down', // class name added to icon when column has descending sort
|
||||
filterRow : '', // filter row class; use widgetOptions.filter_cssFilter for the input/select element
|
||||
footerRow : '',
|
||||
footerCells : '',
|
||||
even : '', // even row zebra striping
|
||||
odd : '' // odd row zebra striping
|
||||
};
|
||||
|
||||
// call the tablesorter plugin and apply the uitheme widget
|
||||
$("table").tablesorter({
|
||||
// this will apply the bootstrap theme if "uitheme" widget is included
|
||||
// the widgetOptions.uitheme is no longer required to be set
|
||||
theme : "bootstrap",
|
||||
|
||||
widthFixed: true,
|
||||
|
||||
headerTemplate : '{content} {icon}', // new in v2.7. Needed to add the bootstrap icon!
|
||||
|
||||
// widget code contained in the jquery.tablesorter.widgets.js file
|
||||
// use the zebra stripe widget if you plan on hiding any rows (filter widget)
|
||||
widgets : [ "uitheme", "filter", "columns", "zebra" ],
|
||||
|
||||
widgetOptions : {
|
||||
// using the default zebra striping class name, so it actually isn't included in the theme variable above
|
||||
// this is ONLY needed for bootstrap theming if you are using the filter widget, because rows are hidden
|
||||
zebra : ["even", "odd"],
|
||||
|
||||
// class names added to columns when sorted
|
||||
columns: [ "primary", "secondary", "tertiary" ],
|
||||
|
||||
// reset filters button
|
||||
filter_reset : ".reset",
|
||||
|
||||
// extra css class name (string or array) added to the filter element (input or select)
|
||||
filter_cssFilter: "form-control",
|
||||
|
||||
// set the uitheme widget to use the bootstrap theme class names
|
||||
// this is no longer required, if theme is set
|
||||
// ,uitheme : "bootstrap"
|
||||
|
||||
}
|
||||
})
|
||||
.tablesorterPager({
|
||||
|
||||
// target the pager markup - see the HTML block below
|
||||
container: $(".ts-pager"),
|
||||
|
||||
// target the pager page select dropdown - choose a page
|
||||
cssGoto : ".pagenum",
|
||||
|
||||
// remove rows from the table to speed up the sort of large tables.
|
||||
// setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
|
||||
removeRows: false,
|
||||
|
||||
// output string - default is '{page}/{totalPages}';
|
||||
// possible variables: {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {totalRows}
|
||||
output: '{startRow} - {endRow} / {filteredRows} ({totalRows})'
|
||||
|
||||
});
|
||||
|
||||
});</script>
|
||||
|
||||
<script>
|
||||
$(function(){
|
||||
|
||||
// filter button demo code
|
||||
$('button.filter').click(function(){
|
||||
var col = $(this).data('column'),
|
||||
txt = $(this).data('filter');
|
||||
$('table').find('.tablesorter-filter').val('').eq(col).val(txt);
|
||||
$('table').trigger('search', false);
|
||||
return false;
|
||||
});
|
||||
|
||||
// toggle zebra widget
|
||||
$('button.zebra').click(function(){
|
||||
var t = $(this).hasClass('btn-success');
|
||||
// if (t) {
|
||||
// removing classes applied by the zebra widget
|
||||
// you shouldn't ever need to use this code, it is only for this demo
|
||||
// $('table').find('tr').removeClass('odd even');
|
||||
// }
|
||||
$('table')
|
||||
.toggleClass('table-striped')[0]
|
||||
.config.widgets = (t) ? ["uitheme", "filter"] : ["uitheme", "filter", "zebra"];
|
||||
$(this)
|
||||
.toggleClass('btn-danger btn-success')
|
||||
.find('i')
|
||||
.toggleClass('icon-ok icon-remove glyphicon-ok glyphicon-remove').end()
|
||||
.find('span')
|
||||
.text(t ? 'disabled' : 'enabled');
|
||||
$('table').trigger('refreshWidgets', [false]);
|
||||
return false;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Bootstrap v3.x Theme (requires UITheme Widget)</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
|
||||
<div class="alert alert-danger" role="alert">
|
||||
<p><strong>WARNING!</strong>: Bootstrap v.3x theme file was renamed to <code>theme.bootstrap_3.css</code>; a copy named <code>theme.bootstrap.css</code> will be maintained for about 6 months after a stable release of Bootstrap v4.x is available!</p>
|
||||
<p><code>theme.bootstrap_4.css</code> currently contains the theme styling for Bootstrap v4.x.</p>
|
||||
</div>
|
||||
<ul>
|
||||
<li>Go to <a href="example-option-theme-bootstrap-v4.html">Bootstrap v4.x</a> or <a href="example-option-theme-bootstrap-v2.html">Bootstrap v2.x</a> demo.<br><br></li>
|
||||
|
||||
<li>In <span class="version updated">v2.28.4</span>
|
||||
<ul>
|
||||
<li>Added support for the column widget.</li>
|
||||
<li>Added <a href="example-option-theme-bootstrap-v4.html">Bootstrap v4.x</a> demo.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>In tablesorter v2.11+, The bootstrap theme now works with Bootstrap 3 and older versions.
|
||||
<ul>
|
||||
<li>Note the changes to the sorting icons in the <code>$.tablesorter.themes.bootstrap</code> defaults below.</li>
|
||||
<li>Just use the appropriate icon class name (<code>icon-{name}</code> for Bootstrap v2, and <code>glyphicon glyphicon-{name}</code> for Bootstrap v3.</li>
|
||||
<li>And of course include the necessary Bootstrap image or font).</li>
|
||||
<li>Wrapped all of the <code>pager</code> controls in the tfoot within a div (don't use the class name <code>pager</code> as it adds a lot of padding) to keep the controls from being centered.</li>
|
||||
<li>Pager control buttons in the tfoot have class names needed for both Bootstrap v2+ and v3, so there's no need for you to use both, just use the ones you need.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>As of tablesorter version 2.9+, this widget can no longer be applied to versions of tablesorter prior to version 2.8.</li>
|
||||
<li>Make sure to include the <code>{icon}</code> in the <code>headerTemplate</code> to add a sorting arrow to the headers.</li>
|
||||
<li>Added in v2.7!
|
||||
<ul>
|
||||
<li>You will need to modify the <code>headerTemplate</code> option to include the bootstrap icon! See the example in the code.</li>
|
||||
<li>Setting <code>theme</code> option to <code>"Bootstrap"</code> will now override/ignore the <code>uitheme</code> value in the <code>widgetOptions</code>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>In tablesorter v2.4, the <code>uitheme</code> option has changed to indicate the theme instead of an array of icons to use:
|
||||
<ul>
|
||||
<li>All theme class names are now contained within <code>$.tablesorter.themes</code> with the Bootstrap theme saved to <code>$.tablesorter.themes.bootstrap</code>.</li>
|
||||
<li>The themes variable allows you to modify the class names for the table, header, sort icons, active state, hover state, filter inputs and zebra striping. See the code below on how to extend these variables.</li>
|
||||
<li>Set the <del><code>uitheme</code> widget</del> <code>theme</code> option (changed in v2.7) to <code>"bootstrap"</code> to set the widget to use the Bootstrap theme. See the <a href="example-widget-ui-theme.html">jQuery UI demo</a> for another example.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>This demo shows how to get around an issue with the filter widget:
|
||||
<ul>
|
||||
<li>The <span class="label label-info">zebra widget button</span> below was added to show that when bootstrap's "table-striped" class is applied, the css defined zebra striping will not apply correctly because table rows are hidden but still accounted for by the css <code>nth-child()</code> selector.</li>
|
||||
<li>To better understand this issue, disable the zebra widget (using the toggle button). Now <button type="button" class="filter btn btn-sm btn-primary" data-column="5" data-filter=">80"><i class="icon-white icon-filter glyphicon glyphicon-filter"></i> Filter ">80"</button> in the "Calculus" column.</li>
|
||||
<li>Try other filter searches with the zebra widget disabled, like <button type="button" class="filter btn btn-sm btn-primary" data-column="2" data-filter="male"><i class="icon-white icon-filter glyphicon glyphicon-filter"></i> Filter "male"</button> in the "Sex" column.</li>
|
||||
<li>To solve this issue, just enable the zebra widget and the "even" and "odd" row class names <del>will</del> should over-ride the <code>nth-child()</code> styling.<br><span class="label label-warning">NOTE!</span> This doesn't seem to work in the latest Bootstrap version, so you'll have to remove the "table-striped" class completely from the table.</li>
|
||||
<li>The only down side is that for custom bootstrap themes, you'll need to edit the "theme.bootstrap.css" file for bootstrap.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>This demo uses HTML5 data attributes and therefore needs jQuery 1.4+.</li>
|
||||
</ul>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<!-- use the filter_reset : '.reset' option or include data-filter="" using the filter button demo code to reset the filters -->
|
||||
<div class="bootstrap_buttons">
|
||||
Reset filter : <button type="button" class="reset btn btn-primary" data-column="0" data-filter=""><i class="icon-white icon-refresh glyphicon glyphicon-refresh"></i> Reset filters</button>
|
||||
<br>
|
||||
Zebra widget : <button type="button" class="zebra btn btn-success"><i class="icon-white icon-ok glyphicon glyphicon-ok"></i> <span>enabled</span></button>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<div id="demo"><table> <!-- bootstrap classes added by the uitheme widget -->
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Major</th>
|
||||
<th class="filter-select filter-exact" data-placeholder="Pick a gender">Sex</th>
|
||||
<th>English</th>
|
||||
<th>Japanese</th>
|
||||
<th>Calculus</th>
|
||||
<th>Geometry</th></tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Major</th>
|
||||
<th>Sex</th>
|
||||
<th>English</th>
|
||||
<th>Japanese</th>
|
||||
<th>Calculus</th>
|
||||
<th>Geometry</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="7" class="ts-pager form-inline">
|
||||
<div class="btn-group btn-group-sm" role="group">
|
||||
<button type="button" class="btn btn-default first"><span class="glyphicon glyphicon-step-backward"></span></button>
|
||||
<button type="button" class="btn btn-default prev"><span class="glyphicon glyphicon-backward"></span></button>
|
||||
</div>
|
||||
<span class="pagedisplay"></span>
|
||||
<div class="btn-group btn-group-sm" role="group">
|
||||
<button type="button" class="btn btn-default next"><span class="glyphicon glyphicon-forward"></span></button>
|
||||
<button type="button" class="btn btn-default last"><span class="glyphicon glyphicon-step-forward"></span></button>
|
||||
</div>
|
||||
<select class="form-control input-sm pagesize" title="Select page size">
|
||||
<option selected="selected" value="10">10</option>
|
||||
<option value="20">20</option>
|
||||
<option value="30">30</option>
|
||||
<option value="all">All Rows</option>
|
||||
</select>
|
||||
<select class="form-control input-sm pagenum" title="Select page number"></select>
|
||||
</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr><td>Student01</td><td>Languages</td><td>male</td><td>80</td><td>70</td><td>75</td><td>80</td></tr>
|
||||
<tr><td>Student02</td><td>Mathematics</td><td>male</td><td>90</td><td>88</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student03</td><td>Languages</td><td>female</td><td>85</td><td>95</td><td>80</td><td>85</td></tr>
|
||||
<tr><td>Student04</td><td>Languages</td><td>male</td><td>60</td><td>55</td><td>100</td><td>100</td></tr>
|
||||
<tr><td>Student05</td><td>Languages</td><td>female</td><td>68</td><td>80</td><td>95</td><td>80</td></tr>
|
||||
<tr><td>Student06</td><td>Mathematics</td><td>male</td><td>100</td><td>99</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student07</td><td>Mathematics</td><td>male</td><td>85</td><td>68</td><td>90</td><td>90</td></tr>
|
||||
<tr><td>Student08</td><td>Languages</td><td>male</td><td>100</td><td>90</td><td>90</td><td>85</td></tr>
|
||||
<tr><td>Student09</td><td>Mathematics</td><td>male</td><td>80</td><td>50</td><td>65</td><td>75</td></tr>
|
||||
<tr><td>Student10</td><td>Languages</td><td>male</td><td>85</td><td>100</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student11</td><td>Languages</td><td>male</td><td>86</td><td>85</td><td>100</td><td>100</td></tr>
|
||||
<tr><td>Student12</td><td>Mathematics</td><td>female</td><td>100</td><td>75</td><td>70</td><td>85</td></tr>
|
||||
<tr><td>Student13</td><td>Languages</td><td>female</td><td>100</td><td>80</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student14</td><td>Languages</td><td>female</td><td>50</td><td>45</td><td>55</td><td>90</td></tr>
|
||||
<tr><td>Student15</td><td>Languages</td><td>male</td><td>95</td><td>35</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student16</td><td>Languages</td><td>female</td><td>100</td><td>50</td><td>30</td><td>70</td></tr>
|
||||
<tr><td>Student17</td><td>Languages</td><td>female</td><td>80</td><td>100</td><td>55</td><td>65</td></tr>
|
||||
<tr><td>Student18</td><td>Mathematics</td><td>male</td><td>30</td><td>49</td><td>55</td><td>75</td></tr>
|
||||
<tr><td>Student19</td><td>Languages</td><td>male</td><td>68</td><td>90</td><td>88</td><td>70</td></tr>
|
||||
<tr><td>Student20</td><td>Mathematics</td><td>male</td><td>40</td><td>45</td><td>40</td><td>80</td></tr>
|
||||
<tr><td>Student21</td><td>Languages</td><td>male</td><td>50</td><td>45</td><td>100</td><td>100</td></tr>
|
||||
<tr><td>Student22</td><td>Mathematics</td><td>male</td><td>100</td><td>99</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student23</td><td>Mathematics</td><td>male</td><td>82</td><td>77</td><td>0</td><td>79</td></tr>
|
||||
<tr><td>Student24</td><td>Languages</td><td>female</td><td>100</td><td>91</td><td>13</td><td>82</td></tr>
|
||||
<tr><td>Student25</td><td>Mathematics</td><td>male</td><td>22</td><td>96</td><td>82</td><td>53</td></tr>
|
||||
<tr><td>Student26</td><td>Languages</td><td>female</td><td>37</td><td>29</td><td>56</td><td>59</td></tr>
|
||||
<tr><td>Student27</td><td>Mathematics</td><td>male</td><td>86</td><td>82</td><td>69</td><td>23</td></tr>
|
||||
<tr><td>Student28</td><td>Languages</td><td>female</td><td>44</td><td>25</td><td>43</td><td>1</td></tr>
|
||||
<tr><td>Student29</td><td>Mathematics</td><td>male</td><td>77</td><td>47</td><td>22</td><td>38</td></tr>
|
||||
<tr><td>Student30</td><td>Languages</td><td>female</td><td>19</td><td>35</td><td>23</td><td>10</td></tr>
|
||||
<tr><td>Student31</td><td>Mathematics</td><td>male</td><td>90</td><td>27</td><td>17</td><td>50</td></tr>
|
||||
<tr><td>Student32</td><td>Languages</td><td>female</td><td>60</td><td>75</td><td>33</td><td>38</td></tr>
|
||||
<tr><td>Student33</td><td>Mathematics</td><td>male</td><td>4</td><td>31</td><td>37</td><td>15</td></tr>
|
||||
<tr><td>Student34</td><td>Languages</td><td>female</td><td>77</td><td>97</td><td>81</td><td>44</td></tr>
|
||||
<tr><td>Student35</td><td>Mathematics</td><td>male</td><td>5</td><td>81</td><td>51</td><td>95</td></tr>
|
||||
<tr><td>Student36</td><td>Languages</td><td>female</td><td>70</td><td>61</td><td>70</td><td>94</td></tr>
|
||||
<tr><td>Student37</td><td>Mathematics</td><td>male</td><td>60</td><td>3</td><td>61</td><td>84</td></tr>
|
||||
<tr><td>Student38</td><td>Languages</td><td>female</td><td>63</td><td>39</td><td>0</td><td>11</td></tr>
|
||||
<tr><td>Student39</td><td>Mathematics</td><td>male</td><td>50</td><td>46</td><td>32</td><td>38</td></tr>
|
||||
<tr><td>Student40</td><td>Languages</td><td>female</td><td>51</td><td>75</td><td>25</td><td>3</td></tr>
|
||||
<tr><td>Student41</td><td>Mathematics</td><td>male</td><td>43</td><td>34</td><td>28</td><td>78</td></tr>
|
||||
<tr><td>Student42</td><td>Languages</td><td>female</td><td>11</td><td>89</td><td>60</td><td>95</td></tr>
|
||||
<tr><td>Student43</td><td>Mathematics</td><td>male</td><td>48</td><td>92</td><td>18</td><td>88</td></tr>
|
||||
<tr><td>Student44</td><td>Languages</td><td>female</td><td>82</td><td>2</td><td>59</td><td>73</td></tr>
|
||||
<tr><td>Student45</td><td>Mathematics</td><td>male</td><td>91</td><td>73</td><td>37</td><td>39</td></tr>
|
||||
<tr><td>Student46</td><td>Languages</td><td>female</td><td>4</td><td>8</td><td>12</td><td>10</td></tr>
|
||||
<tr><td>Student47</td><td>Mathematics</td><td>male</td><td>89</td><td>10</td><td>6</td><td>11</td></tr>
|
||||
<tr><td>Student48</td><td>Languages</td><td>female</td><td>90</td><td>32</td><td>21</td><td>18</td></tr>
|
||||
<tr><td>Student49</td><td>Mathematics</td><td>male</td><td>42</td><td>49</td><td>49</td><td>72</td></tr>
|
||||
<tr><td>Student50</td><td>Languages</td><td>female</td><td>56</td><td>37</td><td>67</td><td>54</td></tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h2>Page Header</h2>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><!-- Bootstrap v3.x stylesheet -->
|
||||
<link rel="stylesheet" href="css/bootstrap.min.css">
|
||||
<!-- bootstrap widget theme - **** RENAMED TO theme.bootstrap_3.css **** -->
|
||||
<link rel="stylesheet" href="css/theme.bootstrap_3.css">
|
||||
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="js/jquery.tablesorter.js"></script>
|
||||
<script src="js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<!-- pager plugin -->
|
||||
<link rel="stylesheet" href="css/jquery.tablesorter.pager.css">
|
||||
<script src="js/jquery.tablesorter.pager.js"></script></pre>
|
||||
</div>
|
||||
|
||||
<h2>Javascript</h2>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
|
||||
<h2>HTML</h2>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-widget-bootstrap-theme-v2.html">Bootstrap v2.x demo ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
286
docs/example-option-theme-bootstrap-v4.html
Normal file
286
docs/example-option-theme-bootstrap-v4.html
Normal file
@ -0,0 +1,286 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Bootstrap Theme (Bootstrap v4.x)</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link rel="stylesheet" href="css/bootstrap-v4.min.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required for bootstrap -->
|
||||
<link rel="stylesheet" href="../css/theme.bootstrap_4.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<!-- Tablesorter: optional -->
|
||||
<link rel="stylesheet" href="../addons/pager/jquery.tablesorter.pager.css">
|
||||
<style>
|
||||
.tablesorter-pager .btn-group-sm .btn {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
</style>
|
||||
<script src="../addons/pager/jquery.tablesorter.pager.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
$("table").tablesorter({
|
||||
theme : "bootstrap",
|
||||
|
||||
widthFixed: true,
|
||||
|
||||
// widget code contained in the jquery.tablesorter.widgets.js file
|
||||
// use the zebra stripe widget if you plan on hiding any rows (filter widget)
|
||||
// the uitheme widget is NOT REQUIRED!
|
||||
widgets : [ "filter", "columns", "zebra" ],
|
||||
|
||||
widgetOptions : {
|
||||
// using the default zebra striping class name, so it actually isn't included in the theme variable above
|
||||
// this is ONLY needed for bootstrap theming if you are using the filter widget, because rows are hidden
|
||||
zebra : ["even", "odd"],
|
||||
|
||||
// class names added to columns when sorted
|
||||
columns: [ "primary", "secondary", "tertiary" ],
|
||||
|
||||
// reset filters button
|
||||
filter_reset : ".reset",
|
||||
|
||||
// extra css class name (string or array) added to the filter element (input or select)
|
||||
filter_cssFilter: [
|
||||
'form-control',
|
||||
'form-control',
|
||||
'form-control custom-select', // select needs custom class names :(
|
||||
'form-control',
|
||||
'form-control',
|
||||
'form-control',
|
||||
'form-control'
|
||||
]
|
||||
|
||||
}
|
||||
})
|
||||
.tablesorterPager({
|
||||
|
||||
// target the pager markup - see the HTML block below
|
||||
container: $(".ts-pager"),
|
||||
|
||||
// target the pager page select dropdown - choose a page
|
||||
cssGoto : ".pagenum",
|
||||
|
||||
// remove rows from the table to speed up the sort of large tables.
|
||||
// setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
|
||||
removeRows: false,
|
||||
|
||||
// output string - default is '{page}/{totalPages}';
|
||||
// possible variables: {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {totalRows}
|
||||
output: '{startRow} - {endRow} / {filteredRows} ({totalRows})'
|
||||
|
||||
});
|
||||
|
||||
});</script>
|
||||
|
||||
<script>
|
||||
$(function(){
|
||||
|
||||
// filter button demo code
|
||||
$('button.filter').click(function(){
|
||||
var col = $(this).data('column'),
|
||||
txt = $(this).data('filter');
|
||||
$('table').find('.tablesorter-filter').val('').eq(col).val(txt);
|
||||
$('table').trigger('search', false);
|
||||
return false;
|
||||
});
|
||||
|
||||
// toggle zebra widget
|
||||
$('button.zebra').click(function(){
|
||||
var t = $(this).hasClass('btn-success');
|
||||
$('table')
|
||||
.toggleClass('table-striped')[0]
|
||||
.config.widgets = (t) ? ["filter"] : ["filter", "zebra"];
|
||||
$(this)
|
||||
.toggleClass('btn-danger btn-success')
|
||||
.find('span')
|
||||
.text(t ? 'disabled' : 'enabled');
|
||||
$('table').trigger('refreshWidgets', [false]);
|
||||
return false;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>jQuery Theme (Bootstrap v4.x)</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
|
||||
<div class="alert alert-warning" role="alert">
|
||||
<strong>NOTE!</strong>: Bootstrap v4.x is still in alpha development. Do not use it, or the <code>theme.bootstrap_4.css</code> theme file in production until a stable release is available.
|
||||
</div>
|
||||
|
||||
<ul>
|
||||
<li>Go to <a href="example-option-theme-bootstrap-v3.html">Bootstrap v3.x</a> or <a href="example-option-theme-bootstrap-v2.html">Bootstrap v2.x</a> demo.<br><br></li>
|
||||
|
||||
<li>In <span class="version updated">v2.28.4</span>, added this Bootstrap v4.x demo.</li>
|
||||
<li>This demo uses <a href="https://v4-alpha.getbootstrap.com/">Bootstrap v4.x</a> (currently v4.0.0-alpha.6).</li>
|
||||
<li>This version of the theme <strong>no longer requires the UITheme widget</strong>!</li>
|
||||
<li>For more information like revision history of this theme & why there is a button to enable/disable the zebra widget, please see the <a href="example-option-theme-bootstrap-v3.html">Bootstrap v3.x demo</a>.</li>
|
||||
</ul>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<!-- use the filter_reset : '.reset' option or include data-filter="" using the filter button demo code to reset the filters -->
|
||||
<div class="bootstrap_buttons">
|
||||
Reset filter : <button type="button" class="reset btn btn-primary" data-column="0" data-filter="">Reset filters</button>
|
||||
<br>
|
||||
Zebra widget : <button type="button" class="zebra btn btn-success"><span>enabled</span></button>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<div id="demo"><table class="table table-bordered table-striped">
|
||||
<thead> <!-- add class="thead-inverse" for a dark header -->
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Major</th>
|
||||
<th class="filter-select filter-exact" data-placeholder="Pick a gender">Sex</th>
|
||||
<th>English</th>
|
||||
<th>Japanese</th>
|
||||
<th>Calculus</th>
|
||||
<th class="sorter-false filter-false">Geometry</th></tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Major</th>
|
||||
<th>Sex</th>
|
||||
<th>English</th>
|
||||
<th>Japanese</th>
|
||||
<th>Calculus</th>
|
||||
<th>Geometry</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="7" class="ts-pager">
|
||||
<div class="form-inline">
|
||||
<div class="btn-group btn-group-sm mx-1" role="group">
|
||||
<button type="button" class="btn btn-secondary first" title="first">⇤</button>
|
||||
<button type="button" class="btn btn-secondary prev" title="previous">←</button>
|
||||
</div>
|
||||
<span class="pagedisplay"></span>
|
||||
<div class="btn-group btn-group-sm mx-1" role="group">
|
||||
<button type="button" class="btn btn-secondary next" title="next">→</button>
|
||||
<button type="button" class="btn btn-secondary last" title="last">⇥</button>
|
||||
</div>
|
||||
<select class="form-control-sm custom-select px-1 pagesize" title="Select page size">
|
||||
<option selected="selected" value="10">10</option>
|
||||
<option value="20">20</option>
|
||||
<option value="30">30</option>
|
||||
<option value="all">All Rows</option>
|
||||
</select>
|
||||
<select class="form-control-sm custom-select px-4 mx-1 pagenum" title="Select page number"></select>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr><td>Student01</td><td>Languages</td><td>male</td><td>80</td><td>70</td><td>75</td><td>80</td></tr>
|
||||
<tr><td>Student02</td><td>Mathematics</td><td>male</td><td>90</td><td>88</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student03</td><td>Languages</td><td>female</td><td>85</td><td>95</td><td>80</td><td>85</td></tr>
|
||||
<tr><td>Student04</td><td>Languages</td><td>male</td><td>60</td><td>55</td><td>100</td><td>100</td></tr>
|
||||
<tr><td>Student05</td><td>Languages</td><td>female</td><td>68</td><td>80</td><td>95</td><td>80</td></tr>
|
||||
<tr><td>Student06</td><td>Mathematics</td><td>male</td><td>100</td><td>99</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student07</td><td>Mathematics</td><td>male</td><td>85</td><td>68</td><td>90</td><td>90</td></tr>
|
||||
<tr><td>Student08</td><td>Languages</td><td>male</td><td>100</td><td>90</td><td>90</td><td>85</td></tr>
|
||||
<tr><td>Student09</td><td>Mathematics</td><td>male</td><td>80</td><td>50</td><td>65</td><td>75</td></tr>
|
||||
<tr><td>Student10</td><td>Languages</td><td>male</td><td>85</td><td>100</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student11</td><td>Languages</td><td>male</td><td>86</td><td>85</td><td>100</td><td>100</td></tr>
|
||||
<tr><td>Student12</td><td>Mathematics</td><td>female</td><td>100</td><td>75</td><td>70</td><td>85</td></tr>
|
||||
<tr><td>Student13</td><td>Languages</td><td>female</td><td>100</td><td>80</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student14</td><td>Languages</td><td>female</td><td>50</td><td>45</td><td>55</td><td>90</td></tr>
|
||||
<tr><td>Student15</td><td>Languages</td><td>male</td><td>95</td><td>35</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student16</td><td>Languages</td><td>female</td><td>100</td><td>50</td><td>30</td><td>70</td></tr>
|
||||
<tr><td>Student17</td><td>Languages</td><td>female</td><td>80</td><td>100</td><td>55</td><td>65</td></tr>
|
||||
<tr><td>Student18</td><td>Mathematics</td><td>male</td><td>30</td><td>49</td><td>55</td><td>75</td></tr>
|
||||
<tr><td>Student19</td><td>Languages</td><td>male</td><td>68</td><td>90</td><td>88</td><td>70</td></tr>
|
||||
<tr><td>Student20</td><td>Mathematics</td><td>male</td><td>40</td><td>45</td><td>40</td><td>80</td></tr>
|
||||
<tr><td>Student21</td><td>Languages</td><td>male</td><td>50</td><td>45</td><td>100</td><td>100</td></tr>
|
||||
<tr><td>Student22</td><td>Mathematics</td><td>male</td><td>100</td><td>99</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student23</td><td>Mathematics</td><td>male</td><td>82</td><td>77</td><td>0</td><td>79</td></tr>
|
||||
<tr><td>Student24</td><td>Languages</td><td>female</td><td>100</td><td>91</td><td>13</td><td>82</td></tr>
|
||||
<tr><td>Student25</td><td>Mathematics</td><td>male</td><td>22</td><td>96</td><td>82</td><td>53</td></tr>
|
||||
<tr><td>Student26</td><td>Languages</td><td>female</td><td>37</td><td>29</td><td>56</td><td>59</td></tr>
|
||||
<tr><td>Student27</td><td>Mathematics</td><td>male</td><td>86</td><td>82</td><td>69</td><td>23</td></tr>
|
||||
<tr><td>Student28</td><td>Languages</td><td>female</td><td>44</td><td>25</td><td>43</td><td>1</td></tr>
|
||||
<tr><td>Student29</td><td>Mathematics</td><td>male</td><td>77</td><td>47</td><td>22</td><td>38</td></tr>
|
||||
<tr><td>Student30</td><td>Languages</td><td>female</td><td>19</td><td>35</td><td>23</td><td>10</td></tr>
|
||||
<tr><td>Student31</td><td>Mathematics</td><td>male</td><td>90</td><td>27</td><td>17</td><td>50</td></tr>
|
||||
<tr><td>Student32</td><td>Languages</td><td>female</td><td>60</td><td>75</td><td>33</td><td>38</td></tr>
|
||||
<tr><td>Student33</td><td>Mathematics</td><td>male</td><td>4</td><td>31</td><td>37</td><td>15</td></tr>
|
||||
<tr><td>Student34</td><td>Languages</td><td>female</td><td>77</td><td>97</td><td>81</td><td>44</td></tr>
|
||||
<tr><td>Student35</td><td>Mathematics</td><td>male</td><td>5</td><td>81</td><td>51</td><td>95</td></tr>
|
||||
<tr><td>Student36</td><td>Languages</td><td>female</td><td>70</td><td>61</td><td>70</td><td>94</td></tr>
|
||||
<tr><td>Student37</td><td>Mathematics</td><td>male</td><td>60</td><td>3</td><td>61</td><td>84</td></tr>
|
||||
<tr><td>Student38</td><td>Languages</td><td>female</td><td>63</td><td>39</td><td>0</td><td>11</td></tr>
|
||||
<tr><td>Student39</td><td>Mathematics</td><td>male</td><td>50</td><td>46</td><td>32</td><td>38</td></tr>
|
||||
<tr><td>Student40</td><td>Languages</td><td>female</td><td>51</td><td>75</td><td>25</td><td>3</td></tr>
|
||||
<tr><td>Student41</td><td>Mathematics</td><td>male</td><td>43</td><td>34</td><td>28</td><td>78</td></tr>
|
||||
<tr><td>Student42</td><td>Languages</td><td>female</td><td>11</td><td>89</td><td>60</td><td>95</td></tr>
|
||||
<tr><td>Student43</td><td>Mathematics</td><td>male</td><td>48</td><td>92</td><td>18</td><td>88</td></tr>
|
||||
<tr><td>Student44</td><td>Languages</td><td>female</td><td>82</td><td>2</td><td>59</td><td>73</td></tr>
|
||||
<tr><td>Student45</td><td>Mathematics</td><td>male</td><td>91</td><td>73</td><td>37</td><td>39</td></tr>
|
||||
<tr><td>Student46</td><td>Languages</td><td>female</td><td>4</td><td>8</td><td>12</td><td>10</td></tr>
|
||||
<tr><td>Student47</td><td>Mathematics</td><td>male</td><td>89</td><td>10</td><td>6</td><td>11</td></tr>
|
||||
<tr><td>Student48</td><td>Languages</td><td>female</td><td>90</td><td>32</td><td>21</td><td>18</td></tr>
|
||||
<tr><td>Student49</td><td>Mathematics</td><td>male</td><td>42</td><td>49</td><td>49</td><td>72</td></tr>
|
||||
<tr><td>Student50</td><td>Languages</td><td>female</td><td>56</td><td>37</td><td>67</td><td>54</td></tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h2>Page Header</h2>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><!-- Bootstrap v4.x stylesheet -->
|
||||
<link rel="stylesheet" href="css/bootstrap.min.css">
|
||||
<!-- bootstrap css theme -->
|
||||
<link rel="stylesheet" href="css/theme.bootstrap_4.css">
|
||||
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="js/jquery.tablesorter.js"></script>
|
||||
<script src="js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<!-- pager plugin -->
|
||||
<link rel="stylesheet" href="css/jquery.tablesorter.pager.css">
|
||||
<script src="js/jquery.tablesorter.pager.js"></script>
|
||||
<style>
|
||||
.tablesorter-pager .btn-group-sm .btn {
|
||||
font-size: 1.2em; /* make pager arrows more visible */
|
||||
}
|
||||
</style></pre>
|
||||
</div>
|
||||
|
||||
<h2>Javascript</h2>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
|
||||
<h2>HTML</h2>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-widget-bootstrap-theme-v3.html">Bootstrap v3.x demo ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -58,7 +58,7 @@
|
||||
// also {page:input} & {startRow:input} will add a modifiable input in place of the value
|
||||
// In v2.27.7, this can be set as a function
|
||||
// output: function(table, pager) { return 'page ' + pager.startRow + ' - ' + pager.endRow; }
|
||||
output: '{startRow:input} to {endRow} ({totalRows})',
|
||||
output: '{startRow:input} – {endRow} / {totalRows} rows',
|
||||
|
||||
// apply disabled classname (cssDisabled option) to the pager arrows when the rows
|
||||
// are at either extreme is visible; default is true
|
||||
@ -116,7 +116,7 @@
|
||||
.tablesorter({
|
||||
theme: 'blue',
|
||||
widthFixed: true,
|
||||
widgets: ['zebra']
|
||||
widgets: ['zebra', 'filter']
|
||||
})
|
||||
|
||||
// bind to pager events
|
||||
@ -239,6 +239,7 @@
|
||||
<em>NOTE!</em> The following are not part of the original plugin:
|
||||
</p>
|
||||
<ul>
|
||||
<li>In <span class="version updated">v2.28.4</span>, added <code>data-pager-output</code> and <code>data-pager-output-filtered</code> attributes which override the <code>output</code> option when set on the <code>pageDisplay</code> element.</li>
|
||||
<li>In <span class="version updated">v2.26.0</span>, a page size of "all" instead of a specific number will be saved and used on reload. Also, ajax interaction will pass a size of "all" which may break current server methods on number of pages to return.</li>
|
||||
<li>In <span class="version updated">v2.24.0</span>, a page size select option with a value of "all" will display all rows - not recommended for ajax interactions!</li>
|
||||
<li>In <span class="version updated">v2.23.0</span>, the following methods were changed due to issues with unique namespacing.
|
||||
@ -271,14 +272,14 @@
|
||||
<div class="pager">
|
||||
<img src="../addons/pager/icons/first.png" class="first" alt="First" />
|
||||
<img src="../addons/pager/icons/prev.png" class="prev" alt="Prev" />
|
||||
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
|
||||
<!-- the "pagedisplay" can be any element, including an input -->
|
||||
<span class="pagedisplay" data-pager-output-filtered="{startRow:input} – {endRow} / {filteredRows} of {totalRows} total rows"></span>
|
||||
<img src="../addons/pager/icons/next.png" class="next" alt="Next" />
|
||||
<img src="../addons/pager/icons/last.png" class="last" alt="Last" />
|
||||
<select class="pagesize" title="Select page size">
|
||||
<option value="10">10</option>
|
||||
<option value="20">20</option>
|
||||
<option value="30">30</option>
|
||||
<option value="40">40</option>
|
||||
<option value="all">All Rows</option>
|
||||
</select>
|
||||
<select class="gotoPage" title="Select page number"></select>
|
||||
@ -366,14 +367,14 @@
|
||||
<div class="pager">
|
||||
<img src="../addons/pager/icons/first.png" class="first" alt="First" />
|
||||
<img src="../addons/pager/icons/prev.png" class="prev" alt="Prev" />
|
||||
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
|
||||
<!-- the "pagedisplay" can be any element, including an input -->
|
||||
<span class="pagedisplay" data-pager-output-filtered="{startRow:input} – {endRow} / {filteredRows} of {totalRows} total rows"></span>
|
||||
<img src="../addons/pager/icons/next.png" class="next" alt="Next" />
|
||||
<img src="../addons/pager/icons/last.png" class="last" alt="Last" />
|
||||
<select class="pagesize" title="Select page size">
|
||||
<option value="10">10</option>
|
||||
<option value="20">20</option>
|
||||
<option value="30">30</option>
|
||||
<option value="40">40</option>
|
||||
<option value="all">All Rows</option>
|
||||
</select>
|
||||
<select class="gotoPage" title="Select page number"></select>
|
||||
@ -440,7 +441,8 @@ td.tablesorter-pager {
|
||||
<form>
|
||||
<img src="first.png" class="first"/>
|
||||
<img src="prev.png" class="prev"/>
|
||||
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
|
||||
<!-- the "pagedisplay" can be any element, including an input -->
|
||||
<span class="pagedisplay" data-pager-output-filtered="{startRow:input} &ndash; {endRow} / {filteredRows} of {totalRows} total rows"></span>
|
||||
<img src="next.png" class="next"/>
|
||||
<img src="last.png" class="last"/>
|
||||
<select class="pagesize">
|
||||
|
||||
@ -48,8 +48,7 @@
|
||||
<em>NOTE!</em>
|
||||
</p>
|
||||
<ul>
|
||||
<li>This parser can be applied to the original plugin.</li>
|
||||
<li>The default "ipAdress" parser (IPv4) is included with the original tablesorter; it was moved to the <code>parser-network.js</code> file in <span class="version">v2.18.0</span>.</li>
|
||||
<li><span class="label warning">NOTE</span> The default "ipAddress" parser (also named "ipv4Address") is included with the original tablesorter; it was moved to the <code>parser-network.js</code> file in <span class="version">v2.18.0</span>.</li>
|
||||
<li>A parser for IPv6 was added in <span class="version">v2.12</span> and named "ipv6Address":
|
||||
<ul>
|
||||
<li>Unlike some other custom parsers, this one will auto-detect & check for a valid IPv6 address since the same address can be represented in many different ways. Some examples are shown in the demo table below.</li>
|
||||
@ -68,6 +67,7 @@ $('table').tablesorter({
|
||||
});
|
||||
});</pre>
|
||||
</li>
|
||||
<li>These parsers may also be used with the original tablesorter plugin.</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
@ -2,147 +2,19 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - jQuery UITheme Widget (Bootstrap v3.x)</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-1.4.4.min.js"></script>
|
||||
<title>jQuery tablesorter 2.0 - Bootstrap Themes</title>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link rel="stylesheet" href="css/bootstrap.min.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<link rel="stylesheet" href="css/bootstrap-v3.min.css">
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required for bootstrap -->
|
||||
<link rel="stylesheet" href="../css/theme.bootstrap.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<!-- Tablesorter: optional -->
|
||||
<link rel="stylesheet" href="../addons/pager/jquery.tablesorter.pager.css">
|
||||
<script src="../addons/pager/jquery.tablesorter.pager.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
// NOTE: $.tablesorter.theme.bootstrap is ALREADY INCLUDED in the jquery.tablesorter.widgets.js
|
||||
// file; it is included here to show how you can modify the default classes
|
||||
$.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 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 : 'glyphicon glyphicon-chevron-up', // class name added to icon when column has ascending sort
|
||||
iconSortDesc : 'glyphicon glyphicon-chevron-down', // class name added to icon when column has descending sort
|
||||
filterRow : '', // filter row class; use widgetOptions.filter_cssFilter for the input/select element
|
||||
footerRow : '',
|
||||
footerCells : '',
|
||||
even : '', // even row zebra striping
|
||||
odd : '' // odd row zebra striping
|
||||
};
|
||||
|
||||
// call the tablesorter plugin and apply the uitheme widget
|
||||
$("table").tablesorter({
|
||||
// this will apply the bootstrap theme if "uitheme" widget is included
|
||||
// the widgetOptions.uitheme is no longer required to be set
|
||||
theme : "bootstrap",
|
||||
|
||||
widthFixed: true,
|
||||
|
||||
headerTemplate : '{content} {icon}', // new in v2.7. Needed to add the bootstrap icon!
|
||||
|
||||
// widget code contained in the jquery.tablesorter.widgets.js file
|
||||
// use the zebra stripe widget if you plan on hiding any rows (filter widget)
|
||||
widgets : [ "uitheme", "filter", "zebra" ],
|
||||
|
||||
widgetOptions : {
|
||||
// using the default zebra striping class name, so it actually isn't included in the theme variable above
|
||||
// this is ONLY needed for bootstrap theming if you are using the filter widget, because rows are hidden
|
||||
zebra : ["even", "odd"],
|
||||
|
||||
// reset filters button
|
||||
filter_reset : ".reset",
|
||||
|
||||
// extra css class name (string or array) added to the filter element (input or select)
|
||||
filter_cssFilter: "form-control",
|
||||
|
||||
// set the uitheme widget to use the bootstrap theme class names
|
||||
// this is no longer required, if theme is set
|
||||
// ,uitheme : "bootstrap"
|
||||
|
||||
}
|
||||
})
|
||||
.tablesorterPager({
|
||||
|
||||
// target the pager markup - see the HTML block below
|
||||
container: $(".ts-pager"),
|
||||
|
||||
// target the pager page select dropdown - choose a page
|
||||
cssGoto : ".pagenum",
|
||||
|
||||
// remove rows from the table to speed up the sort of large tables.
|
||||
// setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
|
||||
removeRows: false,
|
||||
|
||||
// output string - default is '{page}/{totalPages}';
|
||||
// possible variables: {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {totalRows}
|
||||
output: '{startRow} - {endRow} / {filteredRows} ({totalRows})'
|
||||
|
||||
});
|
||||
|
||||
});</script>
|
||||
|
||||
<script>
|
||||
$(function(){
|
||||
|
||||
// filter button demo code
|
||||
$('button.filter').click(function(){
|
||||
var col = $(this).data('column'),
|
||||
txt = $(this).data('filter');
|
||||
$('table').find('.tablesorter-filter').val('').eq(col).val(txt);
|
||||
$('table').trigger('search', false);
|
||||
return false;
|
||||
});
|
||||
|
||||
// toggle zebra widget
|
||||
$('button.zebra').click(function(){
|
||||
var t = $(this).hasClass('btn-success');
|
||||
// if (t) {
|
||||
// removing classes applied by the zebra widget
|
||||
// you shouldn't ever need to use this code, it is only for this demo
|
||||
// $('table').find('tr').removeClass('odd even');
|
||||
// }
|
||||
$('table')
|
||||
.toggleClass('table-striped')[0]
|
||||
.config.widgets = (t) ? ["uitheme", "filter"] : ["uitheme", "filter", "zebra"];
|
||||
$(this)
|
||||
.toggleClass('btn-danger btn-success')
|
||||
.find('i')
|
||||
.toggleClass('icon-ok icon-remove glyphicon-ok glyphicon-remove').end()
|
||||
.find('span')
|
||||
.text(t ? 'disabled' : 'enabled');
|
||||
$('table').trigger('refreshWidgets', [false]);
|
||||
return false;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>jQuery UITheme Widget (Bootstrap v3.x)</h2>
|
||||
<h2>Bootstrap Themes</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
@ -150,178 +22,16 @@
|
||||
<div id="main">
|
||||
|
||||
<p class="tip">
|
||||
<span class="label label-info">NOTE!</span>
|
||||
<span class="label warning">NOTE!</span>
|
||||
</p>
|
||||
<h3>In <span class="version updated">v2.28.4</span>, Bootstrap demo files were renamed</h3>
|
||||
<h4>Choose the demo by version number below:</h4>
|
||||
<ul>
|
||||
<li><span class="label label-success">New!</span>In tablesorter v2.11+, The bootstrap theme now works with Bootstrap 3 and older versions.
|
||||
<ul>
|
||||
<li>Note the changes to the sorting icons in the <code>$.tablesorter.themes.bootstrap</code> defaults below.</li>
|
||||
<li>Just use the appropriate icon class name (<code>icon-{name}</code> for Bootstrap v2, and <code>glyphicon glyphicon-{name}</code> for Bootstrap v3.</li>
|
||||
<li>And of course include the necessary Bootstrap image or font).</li>
|
||||
<li>Wrapped all of the <code>pager</code> controls in the tfoot within a div (don't use the class name <code>pager</code> as it adds a lot of padding) to keep the controls from being centered.</li>
|
||||
<li>Pager control buttons in the tfoot have class names needed for both Bootstrap v2+ and v3, so there's no need for you to use both, just use the ones you need.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>As of tablesorter version 2.9+, this widget can no longer be applied to versions of tablesorter prior to version 2.8.</li>
|
||||
<li>Make sure to include the <code>{icon}</code> in the <code>headerTemplate</code> to add a sorting arrow to the headers.</li>
|
||||
<li>Added in v2.7!
|
||||
<ul>
|
||||
<li>You will need to modify the <code>headerTemplate</code> option to include the bootstrap icon! See the example in the code.</li>
|
||||
<li>Setting <code>theme</code> option to <code>"Bootstrap"</code> will now override/ignore the <code>uitheme</code> value in the <code>widgetOptions</code>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>In tablesorter v2.4, the <code>uitheme</code> option has changed to indicate the theme instead of an array of icons to use:
|
||||
<ul>
|
||||
<li>All theme class names are now contained within <code>$.tablesorter.themes</code> with the Bootstrap theme saved to <code>$.tablesorter.themes.bootstrap</code>.</li>
|
||||
<li>The themes variable allows you to modify the class names for the table, header, sort icons, active state, hover state, filter inputs and zebra striping. See the code below on how to extend these variables.</li>
|
||||
<li>Set the <del><code>uitheme</code> widget</del> <code>theme</code> option (changed in v2.7) to <code>"bootstrap"</code> to set the widget to use the Bootstrap theme. See the <a href="example-widget-ui-theme.html">jQuery UI demo</a> for another example.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>This demo shows how to get around an issue with the filter widget:
|
||||
<ul>
|
||||
<li>The <span class="label label-info">zebra widget button</span> below was added to show that when bootstrap's "table-striped" class is applied, the css defined zebra striping will not apply correctly because table rows are hidden but still accounted for by the css <code>nth-child()</code> selector.</li>
|
||||
<li>To better understand this issue, disable the zebra widget (using the toggle button). Now <button type="button" class="filter btn btn-small btn-primary" data-column="5" data-filter=">80"><i class="icon-white icon-filter glyphicon glyphicon-filter"></i> Filter ">80"</button> in the "Calculus" column.</li>
|
||||
<li>Try other filter searches with the zebra widget disabled, like <button type="button" class="filter btn btn-small btn-primary" data-column="2" data-filter="male"><i class="icon-white icon-filter glyphicon glyphicon-filter"></i> Filter "male"</button> in the "Sex" column.</li>
|
||||
<li>To solve this issue, just enable the zebra widget and the "even" and "odd" row class names <del>will</del> should over-ride the <code>nth-child()</code> styling.<br><span class="label label-warning">NOTE!</span> This doesn't seem to work in the latest Bootstrap version, so you'll have to remove the "table-striped" class completely from the table.</li>
|
||||
<li>The only down side is that for custom bootstrap themes, you'll need to edit the "theme.bootstrap.css" file for bootstrap.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>This demo uses HTML5 data attributes and therefore needs jQuery 1.4+.</li>
|
||||
<li><a href="example-option-theme-bootstrap-v4.html">Bootstrap v4.x</a></li>
|
||||
<li><a href="example-option-theme-bootstrap-v3.html">Bootstrap v3.x</a></li>
|
||||
<li><a href="example-option-theme-bootstrap-v2.html">Bootstrap v2.x</a></li>
|
||||
</ul>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<!-- use the filter_reset : '.reset' option or include data-filter="" using the filter button demo code to reset the filters -->
|
||||
<div class="bootstrap_buttons">
|
||||
Reset filter : <button type="button" class="reset btn btn-primary" data-column="0" data-filter=""><i class="icon-white icon-refresh glyphicon glyphicon-refresh"></i> Reset filters</button>
|
||||
<br>
|
||||
Zebra widget : <button type="button" class="zebra btn btn-success"><i class="icon-white icon-ok glyphicon glyphicon-ok"></i> <span>enabled</span></button>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<div id="demo"><table> <!-- bootstrap classes added by the uitheme widget -->
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Major</th>
|
||||
<th class="filter-select filter-exact" data-placeholder="Pick a gender">Sex</th>
|
||||
<th>English</th>
|
||||
<th>Japanese</th>
|
||||
<th>Calculus</th>
|
||||
<th>Geometry</th></tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Major</th>
|
||||
<th>Sex</th>
|
||||
<th>English</th>
|
||||
<th>Japanese</th>
|
||||
<th>Calculus</th>
|
||||
<th>Geometry</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="7" class="ts-pager form-horizontal">
|
||||
<button type="button" class="btn first"><i class="icon-step-backward glyphicon glyphicon-step-backward"></i></button>
|
||||
<button type="button" class="btn prev"><i class="icon-arrow-left glyphicon glyphicon-backward"></i></button>
|
||||
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
|
||||
<button type="button" class="btn next"><i class="icon-arrow-right glyphicon glyphicon-forward"></i></button>
|
||||
<button type="button" class="btn last"><i class="icon-step-forward glyphicon glyphicon-step-forward"></i></button>
|
||||
<select class="pagesize input-mini" title="Select page size">
|
||||
<option selected="selected" value="10">10</option>
|
||||
<option value="20">20</option>
|
||||
<option value="30">30</option>
|
||||
<option value="40">40</option>
|
||||
</select>
|
||||
<select class="pagenum input-mini" title="Select page number"></select>
|
||||
</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr><td>Student01</td><td>Languages</td><td>male</td><td>80</td><td>70</td><td>75</td><td>80</td></tr>
|
||||
<tr><td>Student02</td><td>Mathematics</td><td>male</td><td>90</td><td>88</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student03</td><td>Languages</td><td>female</td><td>85</td><td>95</td><td>80</td><td>85</td></tr>
|
||||
<tr><td>Student04</td><td>Languages</td><td>male</td><td>60</td><td>55</td><td>100</td><td>100</td></tr>
|
||||
<tr><td>Student05</td><td>Languages</td><td>female</td><td>68</td><td>80</td><td>95</td><td>80</td></tr>
|
||||
<tr><td>Student06</td><td>Mathematics</td><td>male</td><td>100</td><td>99</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student07</td><td>Mathematics</td><td>male</td><td>85</td><td>68</td><td>90</td><td>90</td></tr>
|
||||
<tr><td>Student08</td><td>Languages</td><td>male</td><td>100</td><td>90</td><td>90</td><td>85</td></tr>
|
||||
<tr><td>Student09</td><td>Mathematics</td><td>male</td><td>80</td><td>50</td><td>65</td><td>75</td></tr>
|
||||
<tr><td>Student10</td><td>Languages</td><td>male</td><td>85</td><td>100</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student11</td><td>Languages</td><td>male</td><td>86</td><td>85</td><td>100</td><td>100</td></tr>
|
||||
<tr><td>Student12</td><td>Mathematics</td><td>female</td><td>100</td><td>75</td><td>70</td><td>85</td></tr>
|
||||
<tr><td>Student13</td><td>Languages</td><td>female</td><td>100</td><td>80</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student14</td><td>Languages</td><td>female</td><td>50</td><td>45</td><td>55</td><td>90</td></tr>
|
||||
<tr><td>Student15</td><td>Languages</td><td>male</td><td>95</td><td>35</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student16</td><td>Languages</td><td>female</td><td>100</td><td>50</td><td>30</td><td>70</td></tr>
|
||||
<tr><td>Student17</td><td>Languages</td><td>female</td><td>80</td><td>100</td><td>55</td><td>65</td></tr>
|
||||
<tr><td>Student18</td><td>Mathematics</td><td>male</td><td>30</td><td>49</td><td>55</td><td>75</td></tr>
|
||||
<tr><td>Student19</td><td>Languages</td><td>male</td><td>68</td><td>90</td><td>88</td><td>70</td></tr>
|
||||
<tr><td>Student20</td><td>Mathematics</td><td>male</td><td>40</td><td>45</td><td>40</td><td>80</td></tr>
|
||||
<tr><td>Student21</td><td>Languages</td><td>male</td><td>50</td><td>45</td><td>100</td><td>100</td></tr>
|
||||
<tr><td>Student22</td><td>Mathematics</td><td>male</td><td>100</td><td>99</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student23</td><td>Mathematics</td><td>male</td><td>82</td><td>77</td><td>0</td><td>79</td></tr>
|
||||
<tr><td>Student24</td><td>Languages</td><td>female</td><td>100</td><td>91</td><td>13</td><td>82</td></tr>
|
||||
<tr><td>Student25</td><td>Mathematics</td><td>male</td><td>22</td><td>96</td><td>82</td><td>53</td></tr>
|
||||
<tr><td>Student26</td><td>Languages</td><td>female</td><td>37</td><td>29</td><td>56</td><td>59</td></tr>
|
||||
<tr><td>Student27</td><td>Mathematics</td><td>male</td><td>86</td><td>82</td><td>69</td><td>23</td></tr>
|
||||
<tr><td>Student28</td><td>Languages</td><td>female</td><td>44</td><td>25</td><td>43</td><td>1</td></tr>
|
||||
<tr><td>Student29</td><td>Mathematics</td><td>male</td><td>77</td><td>47</td><td>22</td><td>38</td></tr>
|
||||
<tr><td>Student30</td><td>Languages</td><td>female</td><td>19</td><td>35</td><td>23</td><td>10</td></tr>
|
||||
<tr><td>Student31</td><td>Mathematics</td><td>male</td><td>90</td><td>27</td><td>17</td><td>50</td></tr>
|
||||
<tr><td>Student32</td><td>Languages</td><td>female</td><td>60</td><td>75</td><td>33</td><td>38</td></tr>
|
||||
<tr><td>Student33</td><td>Mathematics</td><td>male</td><td>4</td><td>31</td><td>37</td><td>15</td></tr>
|
||||
<tr><td>Student34</td><td>Languages</td><td>female</td><td>77</td><td>97</td><td>81</td><td>44</td></tr>
|
||||
<tr><td>Student35</td><td>Mathematics</td><td>male</td><td>5</td><td>81</td><td>51</td><td>95</td></tr>
|
||||
<tr><td>Student36</td><td>Languages</td><td>female</td><td>70</td><td>61</td><td>70</td><td>94</td></tr>
|
||||
<tr><td>Student37</td><td>Mathematics</td><td>male</td><td>60</td><td>3</td><td>61</td><td>84</td></tr>
|
||||
<tr><td>Student38</td><td>Languages</td><td>female</td><td>63</td><td>39</td><td>0</td><td>11</td></tr>
|
||||
<tr><td>Student39</td><td>Mathematics</td><td>male</td><td>50</td><td>46</td><td>32</td><td>38</td></tr>
|
||||
<tr><td>Student40</td><td>Languages</td><td>female</td><td>51</td><td>75</td><td>25</td><td>3</td></tr>
|
||||
<tr><td>Student41</td><td>Mathematics</td><td>male</td><td>43</td><td>34</td><td>28</td><td>78</td></tr>
|
||||
<tr><td>Student42</td><td>Languages</td><td>female</td><td>11</td><td>89</td><td>60</td><td>95</td></tr>
|
||||
<tr><td>Student43</td><td>Mathematics</td><td>male</td><td>48</td><td>92</td><td>18</td><td>88</td></tr>
|
||||
<tr><td>Student44</td><td>Languages</td><td>female</td><td>82</td><td>2</td><td>59</td><td>73</td></tr>
|
||||
<tr><td>Student45</td><td>Mathematics</td><td>male</td><td>91</td><td>73</td><td>37</td><td>39</td></tr>
|
||||
<tr><td>Student46</td><td>Languages</td><td>female</td><td>4</td><td>8</td><td>12</td><td>10</td></tr>
|
||||
<tr><td>Student47</td><td>Mathematics</td><td>male</td><td>89</td><td>10</td><td>6</td><td>11</td></tr>
|
||||
<tr><td>Student48</td><td>Languages</td><td>female</td><td>90</td><td>32</td><td>21</td><td>18</td></tr>
|
||||
<tr><td>Student49</td><td>Mathematics</td><td>male</td><td>42</td><td>49</td><td>49</td><td>72</td></tr>
|
||||
<tr><td>Student50</td><td>Languages</td><td>female</td><td>56</td><td>37</td><td>67</td><td>54</td></tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h2>Page Header</h2>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><!-- Bootstrap stylesheet -->
|
||||
<link rel="stylesheet" href="css/bootstrap.min.css">
|
||||
<!-- bootstrap widget theme -->
|
||||
<link rel="stylesheet" href="css/theme.bootstrap.css">
|
||||
|
||||
<!-- tablesorter plugin -->
|
||||
<script src="js/jquery.tablesorter.js"></script>
|
||||
<!-- tablesorter widget file - loaded after the plugin -->
|
||||
<script src="js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<!-- pager plugin -->
|
||||
<link rel="stylesheet" href="css/jquery.tablesorter.pager.css">
|
||||
<script src="js/jquery.tablesorter.pager.js"></script></pre>
|
||||
</div>
|
||||
|
||||
<h2>Javascript</h2>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
|
||||
<h2>HTML</h2>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-widget-bootstrap-theme-v2.html">Bootstrap v2.x demo ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="stylesheet" href="css/prettify.css">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
<link rel="stylesheet" href="css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="css/bootstrap-v3.min.css">
|
||||
<script src="js/bootstrap.min.js"></script>
|
||||
|
||||
<!-- Google charts -->
|
||||
@ -485,7 +485,7 @@ FusionCharts.ready(function () {
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
|
||||
<!-- buttons -->
|
||||
<link rel="stylesheet" href="css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="css/bootstrap-v3.min.css">
|
||||
<script src="js/bootstrap.min.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
<!-- Demo stuff -->
|
||||
<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
|
||||
<script src="js/jquery-ui.min.js"></script>
|
||||
<link rel="stylesheet" href="css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="css/bootstrap-v3.min.css">
|
||||
<script src="js/bootstrap.min.js"></script>
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
|
||||
@ -33,7 +33,9 @@
|
||||
background: #bfbfbf;
|
||||
}
|
||||
|
||||
/* Grouping widget css */
|
||||
/* Grouping widget css;
|
||||
* contained in widget.grouping.css (added v2.28.4)
|
||||
*/
|
||||
tr.group-header td {
|
||||
background: #eee;
|
||||
}
|
||||
@ -76,9 +78,7 @@ tr.group-header.collapsed td i {
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<!-- grouping widget -->
|
||||
<script src="../js/parsers/parser-input-select.js"></script>
|
||||
<script src="../js/widgets/widget-grouping.js"></script>
|
||||
|
||||
<script id="js">$(function(){
|
||||
@ -91,13 +91,13 @@ tr.group-header.collapsed td i {
|
||||
group_collapsible : true,
|
||||
group_collapsed : false,
|
||||
group_count : false,
|
||||
filter_childRows : true,
|
||||
filter_childRows : true
|
||||
}
|
||||
});
|
||||
|
||||
$('.tablesorter-childRow td').hide();
|
||||
|
||||
$('.tablesorter').delegate('.toggle', 'click' ,function(){
|
||||
$('.tablesorter').on('click', '.toggle', function(){
|
||||
$(this).closest('tr').nextUntil('tr:not(.tablesorter-childRow)').find('td').toggle();
|
||||
return false;
|
||||
});
|
||||
@ -173,6 +173,19 @@ tr.group-header.collapsed td i {
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h1>Page Header</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><!-- Tablesorter: required -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
<link href="css/theme.blue.css" rel="stylesheet">
|
||||
<script src="js/jquery.tablesorter.js"></script>
|
||||
<script src="js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<!-- Grouping widget -->
|
||||
<link href="css/widget.group.css" rel="stylesheet"> <!-- added v2.28.4 -->
|
||||
<script src="js/widgets/widget-grouping.js"></script></pre>
|
||||
</div>
|
||||
|
||||
<h1>Script</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-js"></pre>
|
||||
|
||||
@ -22,7 +22,8 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
<style id="css">tr.group-header td {
|
||||
<style id="css">/* CSS from widget.grouping.css (added v2.28.4) */
|
||||
tr.group-header td {
|
||||
background: #eee;
|
||||
}
|
||||
.group-name {
|
||||
@ -66,9 +67,11 @@ tr.group-header.collapsed td i {
|
||||
<script src="../js/widgets/widget-filter.js"></script>
|
||||
|
||||
<!-- grouping widget -->
|
||||
<!-- <link href="../css/widget.grouping.css" rel="stylesheet"> (added above) -->
|
||||
<script src="../js/parsers/parser-input-select.js"></script>
|
||||
<script src="../js/parsers/parser-date-weekday.js"></script>
|
||||
<script src="../js/widgets/widget-grouping.js"></script>
|
||||
<script src="../js/widgets/widget-storage.js"></script>
|
||||
|
||||
<script id="js">$(function(){
|
||||
|
||||
@ -165,6 +168,7 @@ tr.group-header.collapsed td i {
|
||||
<li>This widget will <strong>only work</strong> in tablesorter version 2.8+ and jQuery version 1.7+.</li>
|
||||
<li>Please do not use this widget in very large tables (it might be really slow) <del>or when your table includes multiple tbodies</del>.<br><br></li>
|
||||
|
||||
<li>In <span class="version updated">v2.28.4</span>, added <code>widget.group.css</code> file into the <code>css</code> folder. It contains the grouping widget css shown on this page.</li>
|
||||
<li>In <span class="version updated">v2.27.6</span>, added <code>group-date-hour</code> group type to the Header Class Names.</li>
|
||||
<li>In <span class="version updated">v2.25.4</span>, the zebra widget is reapplied to the table after opening a collapsed group.</li>
|
||||
<li>In <span class="version">v2.24.1</span>
|
||||
@ -852,13 +856,17 @@ $(function() {
|
||||
<h1>Page Header</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><!-- Tablesorter: required -->
|
||||
<link href="../css/theme.blue.css" rel="stylesheet">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
<link href="css/theme.blue.css" rel="stylesheet">
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
<script src="js/jquery.tablesorter.js"></script>
|
||||
<script src="js/widget-filter.js"></script>
|
||||
<script src="js/widget-storage.js"></script>
|
||||
|
||||
<!-- Grouping widget -->
|
||||
<script src="../js/parsers/parser-input-select.js"></script>
|
||||
<script src="../js/widgets/widget-grouping.js"></script></pre>
|
||||
<link href="css/widget.group.css" rel="stylesheet"> <!-- added v2.28.4 -->
|
||||
<script src="js/parsers/parser-input-select.js"></script>
|
||||
<script src="js/parsers/parser-date-weekday.js"></script>
|
||||
<script src="js/widgets/widget-grouping.js"></script></pre>
|
||||
</div>
|
||||
|
||||
<h1>Script</h1>
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
<!-- Demo stuff -->
|
||||
<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
|
||||
<script src="js/jquery-ui.min.js"></script>
|
||||
<link rel="stylesheet" href="css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="css/bootstrap-v3.min.css">
|
||||
<script src="js/bootstrap.min.js"></script><!-- -->
|
||||
<link href="css/jq.css" rel="stylesheet">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
@ -42,7 +42,7 @@
|
||||
text-align: right;
|
||||
margin-right: 4px;
|
||||
}
|
||||
div.output-download-popup {
|
||||
.dropdown-menu li div {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.output-separator, .output-replacequotes, .output-quotes {
|
||||
@ -91,7 +91,7 @@ table.tablesorter tbody tr.even.checked td {
|
||||
// buttons set up like this:
|
||||
// <button type="button" data-filter-column="4" data-filter-text="2?%">Saved Search</button>
|
||||
$('button[data-filter-column]').click(function(){
|
||||
/*** first method *** data-filter-column="1" data-filter-text="!son"
|
||||
/*** first method *** data-filter-column="2" data-filter-text="!son"
|
||||
add search value to Discount column (zero based index) input */
|
||||
var filters = [],
|
||||
$t = $(this),
|
||||
@ -115,14 +115,16 @@ table.tablesorter tbody tr.even.checked td {
|
||||
headerTemplate : '{content} {icon}',
|
||||
widgets: ["zebra", "filter", "uitheme", "output"],
|
||||
widgetOptions : {
|
||||
filter_filteredRow : 'filtered',
|
||||
filter_reset : '.group1 .reset',
|
||||
filter_filteredRow : 'filtered',
|
||||
filter_reset : '.group1 .reset',
|
||||
|
||||
output_separator : ',', // ',' 'json', 'array' or separator (e.g. ';')
|
||||
output_ignoreColumns : [0], // columns to ignore [0, 1,... ] (zero-based index)
|
||||
output_ignoreColumns : [0], // columns to ignore [0, 1,... ] (zero-based index)
|
||||
output_hiddenColumns : false, // include hidden columns in the output
|
||||
output_includeFooter : true, // include footer rows in the output
|
||||
output_includeHeader : true, // include header rows in the output
|
||||
output_headerRows : false, // output all header rows (if multiple rows)
|
||||
output_dataAttrib : 'data-name', // data-attribute containing alternate cell text
|
||||
output_headerRows : true, // output all header rows (multiple rows)
|
||||
output_delivery : 'p', // (p)opup, (d)ownload
|
||||
output_saveRows : 'f', // (a)ll, (v)isible, (f)iltered, jQuery filter selector (string only) or filter function
|
||||
output_duplicateSpans: true, // duplicate output data in tbody colspan/rowspan
|
||||
@ -133,7 +135,9 @@ table.tablesorter tbody tr.even.checked td {
|
||||
output_popupStyle : 'width=580,height=310',
|
||||
output_saveFileName : 'mytable.csv',
|
||||
// callbackJSON used when outputting JSON & any header cells has a colspan - unique names required
|
||||
output_callbackJSON : function($cell, txt, cellIndex) { return txt + '(' + cellIndex + ')'; },
|
||||
output_callbackJSON : function($cell, txt, cellIndex) {
|
||||
return txt + '(' + cellIndex + ')';
|
||||
},
|
||||
// callback executed when processing completes
|
||||
output_callback : function(config, data, url) {
|
||||
// return false to stop delivery & do something else with the data
|
||||
@ -142,8 +146,13 @@ table.tablesorter tbody tr.even.checked td {
|
||||
},
|
||||
|
||||
// the need to modify this for Excel no longer exists
|
||||
output_encoding : 'data:application/octet-stream;charset=utf8,'
|
||||
|
||||
output_encoding : 'data:application/octet-stream;charset=utf8,',
|
||||
// override internal save file code and use an external plugin such as
|
||||
// https://github.com/eligrey/FileSaver.js
|
||||
output_savePlugin : null /* function(config, widgetOptions, data) {
|
||||
var blob = new Blob([data], {type: widgetOptions.output_encoding});
|
||||
saveAs(blob, widgetOptions.output_saveFileName);
|
||||
} */
|
||||
}
|
||||
}).tablesorterPager({
|
||||
container: $('.ts-pager'),
|
||||
@ -180,7 +189,7 @@ table.tablesorter tbody tr.even.checked td {
|
||||
// make separator & replace quotes buttons update the value
|
||||
$this.find('.output-separator').click(function(){
|
||||
$this.find('.output-separator').removeClass('active');
|
||||
var txt = $(this).addClass('active').html()
|
||||
var txt = $(this).addClass('active').html();
|
||||
$this.find('.output-separator-input').val( txt );
|
||||
$this.find('.output-filename').val(function(i, v){
|
||||
// change filename extension based on separator
|
||||
@ -195,27 +204,42 @@ table.tablesorter tbody tr.even.checked td {
|
||||
$this.find('.output-replacequotes').val( $(this).addClass('active').text() );
|
||||
return false;
|
||||
});
|
||||
|
||||
// header/footer toggle buttons
|
||||
$this.find('.output-header, .output-footer').click(function(){
|
||||
$(this).toggleClass('active');
|
||||
});
|
||||
// clicking the download button; all you really need is to
|
||||
// trigger an "output" event on the table
|
||||
$this.find('.download').click(function(){
|
||||
var typ,
|
||||
$table = $this.find('table'),
|
||||
wo = $table[0].config.widgetOptions,
|
||||
saved = $this.find('.output-filter-all :checked').attr('class');
|
||||
wo.output_separator = $this.find('.output-separator-input').val();
|
||||
wo.output_delivery = $this.find('.output-download-popup :checked').attr('class') === 'output-download' ? 'd' : 'p';
|
||||
wo.output_saveRows = saved === 'output-filter' ? 'f' :
|
||||
saved === 'output-visible' ? 'v' :
|
||||
saved === 'output-selected' ? '.checked' : // checked class name, see table.config.checkboxClass
|
||||
saved === 'output-sel-vis' ? '.checked:visible' :
|
||||
val = $this.find('.output-filter-all :checked').attr('class');
|
||||
wo.output_saveRows = val === 'output-filter' ? 'f' :
|
||||
val === 'output-visible' ? 'v' :
|
||||
// checked class name, see table.config.checkboxClass
|
||||
val === 'output-selected' ? '.checked' :
|
||||
val === 'output-sel-vis' ? '.checked:visible' :
|
||||
'a';
|
||||
val = $this.find('.output-download-popup :checked').attr('class');
|
||||
wo.output_delivery = val === 'output-download' ? 'd' : 'p';
|
||||
wo.output_separator = $this.find('.output-separator-input').val();
|
||||
wo.output_replaceQuote = $this.find('.output-replacequotes').val();
|
||||
wo.output_trimSpaces = $this.find('.output-trim').is(':checked');
|
||||
wo.output_includeHTML = $this.find('.output-html').is(':checked');
|
||||
wo.output_wrapQuotes = $this.find('.output-wrap').is(':checked');
|
||||
wo.output_headerRows = $this.find('.output-headers').is(':checked');
|
||||
wo.output_saveFileName = $this.find('.output-filename').val();
|
||||
|
||||
// first example buttons, second has radio buttons
|
||||
if (groupIndex === 0) {
|
||||
wo.output_includeHeader = $this.find('button.output-header').is(".active");
|
||||
} else {
|
||||
wo.output_includeHeader = !$this.find('.output-no-header').is(':checked');
|
||||
wo.output_headerRows = $this.find('.output-headers').is(':checked');
|
||||
}
|
||||
// footer not included in second example
|
||||
wo.output_includeFooter = $this.find('.output-footer').is(".active");
|
||||
|
||||
$table.trigger('outputTable');
|
||||
return false;
|
||||
});
|
||||
@ -247,40 +271,55 @@ table.tablesorter tbody tr.even.checked td {
|
||||
|
||||
<h4>Changes</h4>
|
||||
<ul>
|
||||
<li>In <span class="version">v2.27.0</span>, the <code>output_callback</code> now includes a <code>url</code> parameter.</li>
|
||||
<li>In <span class="version">v2.25.2</span>, updated the <code>output_saveRows</code> option to accept a function.</li>
|
||||
<li>In <span class="version">v2.25.1</span>, the <code>output_callback</code> can return modified data instead of a boolean.</li>
|
||||
<li>In <span class="version">v2.22.4</span>, added <code>output_formatContent</code> callback function which allows for extra formatting of cell content (e.g. convert <code>'&amp;'</code> → <code>'&'</code>).</li>
|
||||
<li>In <span class="version">v2.22.2</span>,
|
||||
<li>In <span class="version">v2.28.4</span>,
|
||||
<ul>
|
||||
<li>The data-attribute used by the <code>output_dataAttrib</code> can now be an empty string.</li>
|
||||
<li>Update <code>output_saveRows</code> option, it now includes the ability to set a jQuery filter selector.
|
||||
<li>Added <a class="intlink" href="#output_includeheader"><code>output_includeHeader</code></a> option.</li>
|
||||
<li>Added <a class="intlink" href="#output_saveplugin"><code>output_savePlugin</code></a> option.</li>
|
||||
<li>Prevent javascript error while attempting to update an already open popup window.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>In <span class="version">v2.27.0</span>, the <a class="intlink" href="#output_callback"><code>output_callback</code></a> now includes a <code>url</code> parameter.</li>
|
||||
<li>In <span class="version">v2.25.2</span>, updated the <a class="intlink" href="#output_saverows"><code>output_saveRows</code></a> option to accept a function.</li>
|
||||
<li>In <span class="version">v2.25.1</span>, the <a class="intlink" href="#output_callback"><code>output_callback</code></a> can return modified data instead of a boolean.</li>
|
||||
<li>In <span class="version">v2.22.4</span>, added <a class="intlink" href="#output_formatcontent"><code>output_formatContent</code></a> callback function which allows for extra formatting of cell content (e.g. convert <code>'&amp;'</code> → <code>'&'</code>).</li>
|
||||
</ul>
|
||||
|
||||
<div class="accordion start-closed">
|
||||
<h3 id="old-notes"><a href="#">Older Notes</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>In <span class="version">v2.22.2</span>,
|
||||
<ul>
|
||||
<li>For example, if you want to only output rows with an active checkbox, set this option to <code>'.checked'</code> (default class added by the checkbox parser contained in the "parser-input-select.js" file).</li>
|
||||
<li>To output only visible active checkboxes, set this option to <code>'.checked:visible'</code>.</li>
|
||||
<li>To output rows without an active checkbox, set this option to <code>':not(.checked)'</code>, etc.</li>
|
||||
<li>More details can be found in the options section.</li>
|
||||
<li>The data-attribute used by the <code>output_dataAttrib</code> can now be an empty string.</li>
|
||||
<li>Update <code>output_saveRows</code> option, it now includes the ability to set a jQuery filter selector.
|
||||
<ul>
|
||||
<li>For example, if you want to only output rows with an active checkbox, set this option to <code>'.checked'</code> (default class added by the checkbox parser contained in the "parser-input-select.js" file).</li>
|
||||
<li>To output only visible active checkboxes, set this option to <code>'.checked:visible'</code>.</li>
|
||||
<li>To output rows without an active checkbox, set this option to <code>':not(.checked)'</code>, etc.</li>
|
||||
<li>More details can be found in the options section.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Fix issue with <code>output_hiddenColumns</code> causing an empty output.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Fix issue with <code>output_hiddenColumns</code> causing an empty output.</li>
|
||||
<li>In <span class="version">v2.22.0</span>,
|
||||
<ul>
|
||||
<li>Added the BOM back to the UTF-8 csv downloadable file to support unicode characters in Excel.</li>
|
||||
<li>Add <code>output_hiddenColumns</code> which includes hidden columns in the output when <code>true</code>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>In <span class="version">v2.21.0</span>, added the <code>output_includeFooter</code> option.</li>
|
||||
<li>In <span class="version">v2.17.5</span>, the need to modify the server's content disposition no longer exists.</li>
|
||||
<li>In <span class="version">v2.17.0</span>,
|
||||
<ul>
|
||||
<li>Added the <code>output_ignoreColumns</code> option & modified the <a class="intlink" href="#output_callback"><code>output_callback</code></a> parameters.</li>
|
||||
<li>Added <code>output_duplicateSpans</code> option to duplicate (when <code>true</code>) colspan & rowspan content across cells.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>In <span class="version">v2.16.4</span>, added the <code>output_encoding</code> option.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>In <span class="version">v2.22.0</span>,
|
||||
<ul>
|
||||
<li>Added the BOM back to the UTF-8 csv downloadable file to support unicode characters in Excel.</li>
|
||||
<li>Add <code>output_hiddenColumns</code> which includes hidden columns in the output when <code>true</code>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>In <span class="version">v2.21.0</span>, added the <code>output_includeFooter</code> option.</li>
|
||||
<li>In <span class="version">v2.17.5</span>, the need to modify the server's content disposition no longer exists.</li>
|
||||
<li>In <span class="version">v2.17.0</span>,
|
||||
<ul>
|
||||
<li>Added the <code>output_ignoreColumns</code> option & modified the <code>output_callback</code> parameters.</li>
|
||||
<li>Added <code>output_duplicateSpans</code> option to duplicate (when <code>true</code>) colspan & rowspan content across cells.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>In <span class="version">v2.16.4</span>, added the <code>output_encoding</code> option.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4>Requirements</h4>
|
||||
<ul>
|
||||
@ -300,11 +339,29 @@ table.tablesorter tbody tr.even.checked td {
|
||||
</ul>
|
||||
</li>
|
||||
<li>Rowspan and colspan are supported by this widget. Please take note of additional information in the "Rowspan and colspan" section below.</li>
|
||||
<li>Working with Excel:
|
||||
<ul>
|
||||
<li>To save a file for Excel
|
||||
<ul>
|
||||
<li>Set the <code>separator</code> to a comma (<code>,</code>).</li>
|
||||
<li>Save the file with a <code>csv</code> extension, then load it into Excel.</li>
|
||||
<li>Or, save the file with a <code>xls</code> extension; but when loading the file in Excel, you will likely see a message stating that the file is corrupt. Continue loading and you will see the expected data placed into each cell.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>To copy the data into Excel
|
||||
<ul>
|
||||
<li>Set the <code>separator</code> as a tab (<code>\t</code>).</li>
|
||||
<li>Open the data in a popup window, then copy the contents to the clipboard.</li>
|
||||
<li>Paste from the clipboard directly into a cell in Excel.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>This demo uses Bootstrap to create the download button dropdown for each table allowing the user to choose the settings
|
||||
<ul>
|
||||
<li>Using Bootstrap was kind of a pain in the butt... any click inside would close the dropdown.</li>
|
||||
<li>I am sure there are better alternatives as the download button and popup are all completely customizable.</li>
|
||||
<li>The download dropdown code is probably overly complicated because it is set up for two tables & allows modifying almost all of the options.</li>
|
||||
<li>Using Bootstrap started out relatively difficult... any click inside would close the dropdown.</li>
|
||||
<li>There are likely better alternatives as the download button and popup are all completely customizable.</li>
|
||||
<li>The download dropdown code is overly complicated because it is set up for two tables & allows modifying almost all of the options.</li>
|
||||
<li>The only thing needed to output the table code (download or open a popup) is to trigger the following event after all of your widget options are set as desired: <pre class="prettyprint lang-js">$table.trigger('outputTable');</pre></li>
|
||||
</ul>
|
||||
</li>
|
||||
@ -320,6 +377,7 @@ table.tablesorter tbody tr.even.checked td {
|
||||
<li><a href="http://www.kunalbabre.com/projects/table2CSV.php">HTML Table to CSV</a> (License unknown)</li>
|
||||
<li><a href="https://github.com/PixelsCommander/Download-File-JS">Download-File-JS</a> (<a href="http://www.apache.org/licenses/LICENSE-2.0">Apache v2.0</a>)</li>
|
||||
<li><a href="http://html5-demos.appspot.com/static/a.download.html">Download demo</a> from <a href="https://github.com/ebidel/html5demos">ebidel/html5demos</a></li>
|
||||
<li><a href="https://github.com/eligrey/FileSaver.js">FileSaver.js</a> (<a href="https://github.com/eligrey/FileSaver.js/blob/master/LICENSE.md">MIT</a>)</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
@ -453,7 +511,7 @@ line,value1,value2,value3
|
||||
<br>
|
||||
When the output is created, and it this option doesn't match either <code>"json"</code> or <code>"array"</code>, each block of table cell data will be separated by this setting.<br>
|
||||
<br>
|
||||
This is the result with this option set to <code>","</code> and with the table filtered with Rank <button type="button" data-filter-column="0" data-filter-text=">100">>100</button> :
|
||||
This is the result with this option set to <code>","</code> and with the table filtered with Rank <button type="button" data-filter-column="1" data-filter-text=">100">>100</button> :
|
||||
<br>
|
||||
<pre class="prettyprint lang-js">Rank,First,Last,Age,Total,Discount,Date
|
||||
111,Peter,Parker,28,$9.99,20%,"Jul 6, 2006 8:14 AM"
|
||||
@ -516,6 +574,24 @@ line,value1,value2,value3
|
||||
Change this option to <code>true</code> to include the <code><tfoot></code> rows in the output (<span class="version">v2.21.0</span>)
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="output_includeheader">
|
||||
<td><span class="permalink">output_includeHeader</span></td>
|
||||
<td><code>true</code></td>
|
||||
<td>
|
||||
Change this option to <code>false</code> to not include any rows from the <code><thead></code> in the output (<span class="version">v2.28.4</span>)
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="output_headerrows">
|
||||
<td><a href="#" class="permalink">output_headerRows</a></td>
|
||||
<td><code>false</code></td>
|
||||
<td>
|
||||
Setting this option to <code>true</code> will include all header rows while processing a JSON output.
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
If this option is set to <code>false</code>, only the <strong>last row</strong> of the table header will be used as a key names for the tbody values; this does assume that the last table row in the header contains all of the header cell names & does not contain any <code>colspan</code>.
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="output_dataattrib">
|
||||
<td><a href="#" class="permalink">output_dataAttrib</a></td>
|
||||
<td><code>'data-name'</code></td>
|
||||
@ -542,17 +618,6 @@ line,value1,value2,value3
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="output_headerrows">
|
||||
<td><a href="#" class="permalink">output_headerRows</a></td>
|
||||
<td><code>false</code></td>
|
||||
<td>
|
||||
Setting this option to <code>true</code> will include all header rows while processing a JSON output.
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
If this option is set to <code>false</code>, only the <strong>last row</strong> of the table header will be used as a key names for the tbody values; this does assume that the last table row in the header contains all of the header cell names & does not contain any <code>colspan</code>.
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="output_delivery">
|
||||
<td><a href="#" class="permalink">output_delivery</a></td>
|
||||
<td><code>'popup'</code></td>
|
||||
@ -685,7 +750,7 @@ line,value1,value2,value3
|
||||
This option, if <code>true</code> wrap the output of all table cell content in quotes.
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
This is the output of the widget when the age column is filtered for results in the range <button type="button" data-filter-column="3" data-filter-text="25 - 35">25 - 35</button>.
|
||||
This is the output of the widget when the age column is filtered for results in the range <button type="button" data-filter-column="4" data-filter-text="25 - 35">25 - 35</button>.
|
||||
<pre class="prettyprint lang-js">"Rank","First","Last","Age","Total","Discount","Date"
|
||||
"1","Philip Aaron Wong","Johnson Sr Esq","25","$5.95","22%","Jun 26, 2004 7:22 AM"
|
||||
"111","Peter","Parker","28","$9.99","20%","Jul 6, 2006 8:14 AM"
|
||||
@ -718,7 +783,6 @@ line,value1,value2,value3
|
||||
<td><code>'mytable.csv'</code></td>
|
||||
<td>When downloading, this option sets the filename of the output.</td>
|
||||
</tr>
|
||||
|
||||
<tr id="output_formatcontent">
|
||||
<td><a href="#" class="permalink">output_formatContent</a></td>
|
||||
<td>null</td>
|
||||
@ -836,6 +900,22 @@ output_encoding : 'data:text/csv;charset=utf8,'</pre><span class="label label-in
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="output_saveplugin">
|
||||
<td><a href="#" class="permalink">output_savePlugin</a></td>
|
||||
<td><code>null</code></td>
|
||||
<td>Override internal save file code and use an external plugin (<span class="version">v2.28.4</span>)
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
<p>You can use a plugin such as <a href="https://github.com/eligrey/FileSaver.js">FileSaver.js</a> instead of the simplified, and possibly out-of-date internal method.</p>
|
||||
Use this option as follows:
|
||||
<pre class="prettyprint lang-js">output_savePlugin: function(config, widgetOptions, data) {
|
||||
var blob = new Blob([data], {type: widgetOptions.output_encoding});
|
||||
saveAs(blob, widgetOptions.output_saveFileName);
|
||||
}</pre>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
<span class="label label-info">Note</span> If you need to change the carriage return and/or the tab replacement strings, modify them as follows (changed in <span class="version">v2.21.2</span>):
|
||||
@ -851,7 +931,7 @@ $.tablesorter.output.replaceTab = '\x09';</pre>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<br>
|
||||
Search <button type="button" data-filter-column="5" data-filter-text=">15">>15</button> in the Discount column<br>
|
||||
Search <button type="button" data-filter-column="6" data-filter-text=">15">>15</button> in the Discount column<br>
|
||||
<br>
|
||||
|
||||
<div id="demo"><div class="group1">
|
||||
@ -861,7 +941,7 @@ $.tablesorter.output.replaceTab = '\x09';</pre>
|
||||
|
||||
<!-- Split button -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-default download">Download</button>
|
||||
<button type="button" class="btn btn-default download">Output</button>
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
||||
<span class="caret"></span>
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
@ -878,6 +958,7 @@ $.tablesorter.output.replaceTab = '\x09';</pre>
|
||||
<button type="button" class="output-separator btn btn-default btn-xs" title="output Array (see note)">array</button>
|
||||
</li>
|
||||
<li>
|
||||
<label>Send to:</label>
|
||||
<div class="btn-group output-download-popup" data-toggle="buttons" title="Download file or open in Popup window">
|
||||
<label class="btn btn-default btn-sm active">
|
||||
<input type="radio" name="delivery1" class="output-popup" checked> Popup
|
||||
@ -888,6 +969,7 @@ $.tablesorter.output.replaceTab = '\x09';</pre>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<label>Include:</label>
|
||||
<div class="btn-group output-filter-all" data-toggle="buttons" title="Output only filtered, visible, selected, selected+visible or all rows">
|
||||
<label class="btn btn-default btn-sm active">
|
||||
<input type="radio" name="getrows1" class="output-filter" checked="checked"> Filtered
|
||||
@ -906,6 +988,10 @@ $.tablesorter.output.replaceTab = '\x09';</pre>
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<button class="output-header btn btn-default btn-sm active" title="Include table header">Header</button>
|
||||
<button class="output-footer btn btn-default btn-sm active" title="Include table footer">Footer</button>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li>
|
||||
<label>Replace quotes: <input class="output-replacequotes" type="text" size="2" value="'" /></label>
|
||||
@ -922,11 +1008,11 @@ $.tablesorter.output.replaceTab = '\x09';</pre>
|
||||
</div>
|
||||
|
||||
<div class="ts-pager form-horizontal">
|
||||
<button type="button" class="btn btn-default btn-sm first"><i class="icon-step-backward glyphicon glyphicon-step-backward"></i></button>
|
||||
<button type="button" class="btn btn-default btn-sm prev"><i class="icon-arrow-left glyphicon glyphicon-backward"></i></button>
|
||||
<button type="button" class="btn btn-default btn-sm first"><i class="glyphicon glyphicon-step-backward"></i></button>
|
||||
<button type="button" class="btn btn-default btn-sm prev"><i class="glyphicon glyphicon-backward"></i></button>
|
||||
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
|
||||
<button type="button" class="btn btn-default btn-sm next"><i class="icon-arrow-right glyphicon glyphicon-forward"></i></button>
|
||||
<button type="button" class="btn btn-default btn-sm last"><i class="icon-step-forward glyphicon glyphicon-step-forward"></i></button>
|
||||
<button type="button" class="btn btn-default btn-sm next"><i class="glyphicon glyphicon-forward"></i></button>
|
||||
<button type="button" class="btn btn-default btn-sm last"><i class="glyphicon glyphicon-step-forward"></i></button>
|
||||
<select class="pagesize form-control btn-sm" title="Select page size">
|
||||
<option selected="selected" value="5">5</option>
|
||||
<option value="10">10</option>
|
||||
@ -937,7 +1023,7 @@ $.tablesorter.output.replaceTab = '\x09';</pre>
|
||||
<table id="table" class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="sorter-checkbox"></th>
|
||||
<th class="sorter-checkbox filter-false"> </th>
|
||||
<th>Rank</th>
|
||||
<th data-name="First">First Name</th>
|
||||
<th data-name="Last">Last Name</th>
|
||||
@ -984,7 +1070,7 @@ $.tablesorter.output.replaceTab = '\x09';</pre>
|
||||
|
||||
<!-- Split button -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-default download">Download</button>
|
||||
<button type="button" class="btn btn-default download">Output</button>
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
||||
<span class="caret"></span>
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
@ -1001,6 +1087,7 @@ $.tablesorter.output.replaceTab = '\x09';</pre>
|
||||
<button type="button" class="output-separator btn btn-default btn-xs" title="output Array (see note)">array</button>
|
||||
</li>
|
||||
<li>
|
||||
<label>Send to:</label>
|
||||
<div class="btn-group output-download-popup" data-toggle="buttons" title="Download file or open in Popup window">
|
||||
<label class="btn btn-default btn-sm active">
|
||||
<input type="radio" name="delivery2" class="output-popup" checked> Popup
|
||||
@ -1011,6 +1098,7 @@ $.tablesorter.output.replaceTab = '\x09';</pre>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<label>Include:</label>
|
||||
<div class="btn-group output-filter-all" data-toggle="buttons" title="Output only filtered, visible or all rows">
|
||||
<label class="btn btn-default btn-sm active">
|
||||
<input type="radio" name="getrows2" class="output-filter" checked> Filtered
|
||||
@ -1023,6 +1111,20 @@ $.tablesorter.output.replaceTab = '\x09';</pre>
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<label>Header:</label>
|
||||
<div class="btn-group output-includes" data-toggle="buttons" title="Include no, single (last row), or all table headers">
|
||||
<label class="btn btn-default btn-sm">
|
||||
<input type="radio" name="headers" class="output-no-header"> None
|
||||
</label>
|
||||
<label class="btn btn-default btn-sm">
|
||||
<input type="radio" name="headers"> Single
|
||||
</label>
|
||||
<label class="btn btn-default btn-sm active">
|
||||
<input type="radio" name="headers" class="output-headers" checked> All
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li>
|
||||
<label>Replace quotes: <input class="output-replacequotes" type="text" size="2" value="'" /></label>
|
||||
@ -1033,7 +1135,6 @@ $.tablesorter.output.replaceTab = '\x09';</pre>
|
||||
<li><label title="Remove extra white space from each cell">Trim spaces: <input class="output-trim" type="checkbox" checked /></label></li>
|
||||
<li><label title="Include HTML from cells in output">Include HTML: <input class="output-html" type="checkbox" /></label></li>
|
||||
<li><label title="Wrap all values in quotes">Wrap in Quotes: <input class="output-wrap" type="checkbox" /></label></li>
|
||||
<li><label title="Include both header rows in output">Include both header rows: <input class="output-headers" type="checkbox" checked /></label></li>
|
||||
<li><label title="Choose a download filename">Filename: <input class="output-filename" type="text" size="15" value="mytable.csv"/></label></li>
|
||||
</ul>
|
||||
</div>
|
||||
@ -1096,6 +1197,21 @@ $.tablesorter.output.replaceTab = '\x09';</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1>Page Header</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><!-- Tablesorter: required -->
|
||||
<link href="css/theme.bootstrap.css" rel="stylesheet">
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
<script src="js/jquery.tablesorter.js"></script>
|
||||
<script src="js/jquery.tablesorter.widgets.js"></script>
|
||||
<!-- pager -->
|
||||
<link href="css/jquery.tablesorter.pager.css" rel="stylesheet">
|
||||
<script src="js/jquery.tablesorter.pager.js"></script>
|
||||
<!-- Ouput widget -->
|
||||
<script src="js/parsers/parser-input-select.js"></script>
|
||||
<script src="js/widgets/widget-ouput.js"></script></pre>
|
||||
</div>
|
||||
|
||||
<h1>CSS</h1>
|
||||
<div id="css">
|
||||
<pre class="prettyprint lang-css"></pre>
|
||||
|
||||
@ -33,14 +33,14 @@
|
||||
.tablesorter({
|
||||
theme: 'blue',
|
||||
widthFixed: true,
|
||||
widgets: ['zebra', 'pager'],
|
||||
widgets: ['zebra', 'filter', 'pager'],
|
||||
|
||||
widgetOptions: {
|
||||
|
||||
// output default: '{page}/{totalPages}'
|
||||
// possible variables: {size}, {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {totalRows}
|
||||
// also {page:input} & {startRow:input} will add a modifiable input in place of the value
|
||||
pager_output: '{startRow:input} to {endRow} of {totalRows} rows', // '{page}/{totalPages}'
|
||||
pager_output: '{startRow:input} – {endRow} / {totalRows} rows', // '{page}/{totalPages}'
|
||||
|
||||
// apply disabled classname to the pager arrows when the rows at either extreme is visible
|
||||
pager_updateArrows: true,
|
||||
@ -231,6 +231,7 @@
|
||||
<em>NOTE!</em>
|
||||
</p>
|
||||
<ul>
|
||||
<li>In <span class="version updated">v2.28.4</span>, added <code>data-pager-output</code> and <code>data-pager-output-filtered</code> attributes which override the <code>output</code> option when set on the <code>pageDisplay</code> element.</li>
|
||||
<li>In <span class="version updated">v2.26.0</span>, a page size of "all" instead of a specific number will be saved and used on reload. Also, ajax interaction will pass a size of "all" which may break current server methods on number of pages to return.</li>
|
||||
<li>In <span class="version updated">v2.25.4</span>, updated example to use <code>applyWidgetId</code> to re-apply the pager widget after being destroyed.</li>
|
||||
<li>In <span class="version updated">v2.24.0</span>, a page size select option with a value of "all" will display all rows - not recommended for ajax interactions!</li>
|
||||
@ -267,14 +268,14 @@
|
||||
<div class="pager">
|
||||
<img src="../addons/pager/icons/first.png" class="first" alt="First" />
|
||||
<img src="../addons/pager/icons/prev.png" class="prev" alt="Prev" />
|
||||
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
|
||||
<!-- the "pagedisplay" can be any element, including an input -->
|
||||
<span class="pagedisplay" data-pager-output-filtered="{startRow:input} – {endRow} / {filteredRows} of {totalRows} total rows"></span>
|
||||
<img src="../addons/pager/icons/next.png" class="next" alt="Next" />
|
||||
<img src="../addons/pager/icons/last.png" class="last" alt="Last" />
|
||||
<select class="pagesize" title="Select page size">
|
||||
<option value="10">10</option>
|
||||
<option value="20">20</option>
|
||||
<option value="30">30</option>
|
||||
<option value="40">40</option>
|
||||
<option value="all">All Rows</option>
|
||||
</select>
|
||||
<select class="gotoPage" title="Select page number"></select>
|
||||
@ -362,14 +363,14 @@
|
||||
<div class="pager">
|
||||
<img src="../addons/pager/icons/first.png" class="first" alt="First" />
|
||||
<img src="../addons/pager/icons/prev.png" class="prev" alt="Prev" />
|
||||
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
|
||||
<!-- the "pagedisplay" can be any element, including an input -->
|
||||
<span class="pagedisplay" data-pager-output-filtered="{startRow:input} – {endRow} / {filteredRows} of {totalRows} total rows"></span>
|
||||
<img src="../addons/pager/icons/next.png" class="next" alt="Next" />
|
||||
<img src="../addons/pager/icons/last.png" class="last" alt="Last" />
|
||||
<select class="pagesize" title="Select page size">
|
||||
<option value="10">10</option>
|
||||
<option value="20">20</option>
|
||||
<option value="30">30</option>
|
||||
<option value="40">40</option>
|
||||
<option value="all">All Rows</option>
|
||||
</select>
|
||||
<select class="gotoPage" title="Select page number"></select>
|
||||
@ -448,7 +449,8 @@ td.tablesorter-pager {
|
||||
<form>
|
||||
<img src="first.png" class="first"/>
|
||||
<img src="prev.png" class="prev"/>
|
||||
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
|
||||
<!-- the "pagedisplay" can be any element, including an input -->
|
||||
<span class="pagedisplay" data-pager-output-filtered="{startRow:input} &ndash; {endRow} / {filteredRows} of {totalRows} total rows"></span>
|
||||
<img src="next.png" class="next"/>
|
||||
<img src="last.png" class="last"/>
|
||||
<select class="pagesize">
|
||||
@ -469,8 +471,6 @@ td.tablesorter-pager {
|
||||
<li>Moved to <a href="https://github.com/Mottie/tablesorter/wiki/Changes">wiki pages</a>.</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
<!-- Demo stuff -->
|
||||
<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
|
||||
<script src="js/jquery-ui.min.js"></script>
|
||||
<link rel="stylesheet" href="css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="css/bootstrap-v3.min.css">
|
||||
<script src="js/bootstrap.min.js"></script>
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/tipsy.css" rel="stylesheet">
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
<!-- Demo stuff -->
|
||||
<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
|
||||
<script src="js/jquery-ui.min.js"></script>
|
||||
<link rel="stylesheet" href="css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="css/bootstrap-v3.min.css">
|
||||
<script src="js/bootstrap.min.js"></script>
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
|
||||
@ -124,7 +124,7 @@ $table.trigger('applyWidgets');</pre>
|
||||
<ul>
|
||||
<li>All theme class names are now contained within <code>$.tablesorter.themes</code> with the jQuery UI theme saved to <code>$.tablesorter.themes.jui</code></li>
|
||||
<li>The themes variable allows you to modify the class names for the table, header, sort icons, active state, hover state, filter inputs and zebra striping. See the code below on how to extend these variables.</li>
|
||||
<li>Set the <code>uitheme</code> widget option to <code>"jui"</code> to set the widget to use the jQuery UI theme. See the <a href="example-widget-bootstrap-theme.html">bootstrap demo</a> for another example.</li>
|
||||
<li>Set the <code>uitheme</code> widget option to <code>"jui"</code> to set the widget to use the jQuery UI theme. See the <a href="example-option-theme-bootstrap-v3.html">bootstrap demo</a> for another example.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Earlier widget versions required jQuery 1.4+. The UITheme widget for tablesorter 2.4+ requires jQuery 1.2.6+.</li>
|
||||
@ -202,7 +202,6 @@ $table.trigger('applyWidgets');</pre>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
|
||||
<h1>Page Header</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><!-- ui theme stylesheet - contents shown below -->
|
||||
@ -210,6 +209,9 @@ $table.trigger('applyWidgets');</pre>
|
||||
<!-- jQuery UI theme (cupertino example here) -->
|
||||
<link rel="stylesheet" href="css/jquery-ui.min.css">
|
||||
|
||||
<!-- load jQuery first -->
|
||||
<script src="js/jquery.min.js"></script>
|
||||
|
||||
<!-- tablesorter plugin -->
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<!-- tablesorter widget file - loaded after the plugin -->
|
||||
@ -228,7 +230,7 @@ $table.trigger('applyWidgets');</pre>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-widget-bootstrap-theme.html">UITheme widget - Bootstrap theme ››</a><br>
|
||||
Next up: <a href="example-option-theme-bootstrap-v3.html">UITheme widget - Bootstrap theme ››</a><br>
|
||||
Second time around: <a href="example-option-render-header.html">Modifying the Header during rendering ››</a>
|
||||
</div>
|
||||
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="stylesheet" href="css/prettify.css">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
<!--<link rel="stylesheet" href="css/bootstrap.min.css">-->
|
||||
<!--<link rel="stylesheet" href="css/bootstrap-v3.min.css">-->
|
||||
<!--<script src="js/bootstrap.min.js"></script>-->
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<title>jQuery tablesorter 2.0</title>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="css/bootstrap-v3.min.css">
|
||||
<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
|
||||
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
@ -353,10 +353,12 @@
|
||||
|
||||
<h4>Theming</h4>
|
||||
<ul>
|
||||
<li>The <a href="example-widget-bootstrap-theme-v2.html">Bootstrap v2.x</a>, <a href="example-widget-bootstrap-theme.html">Bootstrap v3.x</a> & <a href="example-widget-ui-theme.html">jQuery UI</a> themes require the uitheme widget.</li>
|
||||
<li>The <a href="example-option-theme-bootstrap-v2.html">Bootstrap v2.x</a>, <a href="example-option-theme-bootstrap-v3.html">Bootstrap v3.x</a> & <a href="example-widget-ui-theme.html">jQuery UI</a> themes require the uitheme widget.</li>
|
||||
<li>The <a href="example-option-theme-bootstrap-v4.html">Bootstrap v4.x</a> theme (<span class="version">v2.28.4</span>) does not require the uitheme widget!</li>
|
||||
<li>Set up a <a href="example-option-theme-metro-style.html">Metro style theme</a> (<span class="version">v2.16.4</span>).</li>
|
||||
<li>Set up a <a href="example-option-theme-materialize.html">Materialize theme</a> (<span class="version">v2.27.0</span>).</li>
|
||||
<li>Use css to <a href="example-css-highlighting.html">highlight rows & columns</a> (<span class="version">v2.20.0</span>).</li>
|
||||
<li>See all <a href="themes.html">available themes</a>.</li>
|
||||
</ul>
|
||||
<p></p>
|
||||
|
||||
@ -493,9 +495,9 @@
|
||||
<br><br>
|
||||
</li>
|
||||
|
||||
<li>Pager plugin (<a href="example-pager.html">basic</a> & <a href="example-pager-ajax.html">ajax</a> demos; <span class="version updated">v2.28.0</span>).</li>
|
||||
<li>Pager plugin (<a href="example-pager.html">basic</a> & <a href="example-pager-ajax.html">ajax</a> demos; <span class="version updated">v2.28.4</span>).</li>
|
||||
<li>
|
||||
Pager widget (<a href="example-widget-pager.html">basic</a> & <a href="example-widget-pager-ajax.html">ajax</a> demos) (<span class="version">v2.12</span>; <span class="version updated">v2.28.0</span>).<br>
|
||||
Pager widget (<a href="example-widget-pager.html">basic</a> & <a href="example-widget-pager-ajax.html">ajax</a> demos) (<span class="version">v2.12</span>; <span class="version updated">v2.28.4</span>).<br>
|
||||
<br>
|
||||
</li>
|
||||
|
||||
@ -517,7 +519,9 @@
|
||||
<li><span class="results">†</span> UITheme widget (<span class="version">v2.0.9</span>; <span class="version updated">v2.27.0</span>):
|
||||
<ul>
|
||||
<li><a href="example-widget-ui-theme.html">jQuery UI theme</a> (v2.0.9; <span class="version updated">v2.27.0</span>).</li>
|
||||
<li><a href="example-widget-bootstrap-theme-v2.html">Bootstrap v2.x</a> (demo added <span class="version">v2.22.0</span>) & <a href="example-widget-bootstrap-theme.html">Bootstrap v3.x</a> (v2.4).</li>
|
||||
<li><a href="example-option-theme-bootstrap-v2.html">Bootstrap v2.x</a> (demo added <span class="version">v2.22.0</span>).</li>
|
||||
<li><a href="example-option-theme-bootstrap-v3.html">Bootstrap v3.x</a> (v2.4.0; <span class="version updated">v2.28.4</span>).</li>
|
||||
<li><a href="example-option-theme-bootstrap-v4.html">Bootstrap v4.x</a> (<span class="version updated">v2.28.4</span>) <span class="label warning">NOTE</span> <strong>does not</strong> require the uitheme widget!</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><span class="label label-info">Beta</span> <a href="example-widget-view.html">View Widget</a> (<span class="version">v2.24.0</span>; <span class="version updated">v2.26.6</span>).</li>
|
||||
@ -538,7 +542,7 @@
|
||||
<li><a href="example-parsers-globalize.html">jQuery Globalize</a> (number & date parsers; <span class="version">v2.22.0</span>; <span class="version updated">v2.25.0</span>).</li>
|
||||
<li><a href="example-parsers-metric.html">Metric parser</a> (<span class="version">v2.8</span>).</li>
|
||||
<li><a href="example-parsers-named-numbers.html">Named Numbers parser</a> (<span class="version">v2.18.0</span>; <span class="version updated">v2.22.0</span>).</li>
|
||||
<li><a href="example-parsers-ip-address.html">Network (IPv4, IPv6 and MAC address parser</a> (<span class="version">v2.12</span>; <span class="version updated">v2.22.0</span>).</li>
|
||||
<li><a href="example-parsers-ip-address.html">Network (IPv4, IPv6 and MAC address parser</a> (<span class="version">v2.12</span>; <span class="version updated">v2.22.0</span>; <span class="label warning">NOTE</span> "ipAddress" parser moved to this file in v2.18.0).</li>
|
||||
<li><a href="example-parsers-roman.html">Roman Numeral parser</a> (<span class="version">v2.17.3</span>).</li>
|
||||
<li><a href="example-option-textsorter-semver.html">Semantic Versioning (Semver) sorting</a> (<span class="version">v2.14.3</span>; <span class="version updated">v2.21.4</span>).</li>
|
||||
</ul>
|
||||
@ -974,28 +978,32 @@
|
||||
// See example - Disable first header cell; parser false skips extracting content
|
||||
0: { sorter: false, parser: false },
|
||||
|
||||
// See example 2: Sort column numerically & treat any text as if its value is:
|
||||
1: { sorter: "digit", empty: "top" }, // zero; sort empty cells to the top
|
||||
2: { sorter: "digit", string: "max" }, // maximum positive value
|
||||
3: { sorter: "digit", string: "min" }, // maximum negative value
|
||||
// WARNING! The "ipAddress" parser was MOVED into the "parser-network.js" file
|
||||
// in v2.18.0
|
||||
1: { sorter: "ipAddress" },
|
||||
|
||||
// Sort the fifth column by date & set the format
|
||||
4: { sorter: "shortDate", dateFormat: "yyyymmdd" }, // year first format
|
||||
// See example 2: Sort column numerically & treat any text as if its value is:
|
||||
2: { sorter: "digit", empty: "top" }, // zero; sort empty cells to the top
|
||||
3: { sorter: "digit", string: "max" }, // maximum positive value
|
||||
4: { sorter: "digit", string: "min" }, // maximum negative value
|
||||
|
||||
// Sort the sixth column by date & set the format
|
||||
5: { sorter: "shortDate", dateFormat: "yyyymmdd" }, // year first format
|
||||
|
||||
// See example 3: lock the sort order
|
||||
// this option will not work if added as metadata
|
||||
5: { lockedOrder: "asc" },
|
||||
6: { lockedOrder: "asc" },
|
||||
|
||||
// See Example 4: Initial sort order direction of seventh header cell
|
||||
6: { sortInitialOrder: "desc" },
|
||||
// See Example 4: Initial sort order direction of 8th header cell
|
||||
7: { sortInitialOrder: "desc" },
|
||||
|
||||
// Set filter widget options for this column
|
||||
// See the "Applying the filter widget" demo
|
||||
7: { filter: false }, // disable filter widget for this column
|
||||
8: { filter: "parsed" }, // use parsed data for this column in the filter search
|
||||
8: { filter: false }, // disable filter widget for this column
|
||||
9: { filter: "parsed" }, // use parsed data for this column in the filter search
|
||||
|
||||
// Set resizable widget options for this column
|
||||
9: { resizable: false } // prevent resizing of header cell 9
|
||||
10: { resizable: false } // prevent resizing of the 11th column
|
||||
|
||||
}
|
||||
});
|
||||
@ -4519,11 +4527,15 @@ $('table').trigger('search', false);</pre></div>
|
||||
<td><a href="#" class="permalink">output</a></td>
|
||||
<td>String</td>
|
||||
<td>"{page}/<wbr>{totalPages}"</td>
|
||||
<td>This option allows you to format the output display which can show the current page, total pages, filtered pages, current start and end rows, total rows and filtered rows (v2.0.9; <span class="version">v2.27.7</span>).
|
||||
<td>This option allows you to format the output display which can show the current page, total pages, filtered pages, current start and end rows, total rows and filtered rows (v2.0.9; <span class="version updated">v2.28.4</span>).
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
<span class="label label-info">Note</span> The pager widget equivalent option is within the <code>widgetOptions</code> and accessed via <code>widgetOptions.pager_output</code><br>
|
||||
<br>
|
||||
<p></p>
|
||||
In <span class="version updated">v2.28.4</span>
|
||||
<p>The <a href="#pager-csspagedisplay">output</a> element can now include two data-attributes, <code>data-pager-output</code> and <code>data-pager-output-filtered</code> which override this setting <em>string</em> when set.</p>
|
||||
<pre class="prettyprint lang-html"><span class="pagedisplay" data-pager-output="{startRow:input} – {endRow} / {totalRows} total rows" data-pager-output-filtered="{startRow:input} – {endRow} / {filteredRows} of {totalRows} total rows"></span></pre>
|
||||
<p>It will not override this option if set as a function, or if a specific <a href="#object">output is returned</a> from the server through ajax.</p>
|
||||
In <span class="version updated">v2.27.7</span>, this option can also be set as a function
|
||||
<pre class="prettyprint lang-js">output: function(table, pager) {
|
||||
return 'page ' + pager.startRow + ' - ' + pager.endRow;
|
||||
@ -4560,7 +4572,7 @@ $('table').trigger('search', false);</pre></div>
|
||||
<a href="example-pager.html">1</a>
|
||||
<a href="example-pager-ajax.html">2</a>
|
||||
<a href="example-pager-filtered.html">3</a>
|
||||
<a href="example-widget-bootstrap-theme.html">4</a>
|
||||
<a href="example-option-theme-bootstrap-v3.html">4</a>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@ -6410,7 +6422,7 @@ $('.tablesorter')[0].config.cache[0].normalized[0];
|
||||
<tr id="parsers">
|
||||
<td><a href="#" class="permalink">config.parsers</a></td>
|
||||
<td>Array</td>
|
||||
<td>Internal list of all of the table's currently set parsers (objects copied from <a href="#variable-parsers"><code>$.tablesorter.parsers</code></a>). Here is a complete list of default parsers:
|
||||
<td>Internal list of all of the table's currently set parsers (objects copied from <a href="#variable-parsers"><code>$.tablesorter.parsers</code></a>). Here is a complete list of default parsers: (modified v2.18.0)
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
<table class="info"><tbody>
|
||||
@ -6419,7 +6431,7 @@ $('.tablesorter')[0].config.cache[0].normalized[0];
|
||||
<tr><th><code>sorter: "text"</code></th><td>Sort alpha-numerically.</td></tr>
|
||||
<tr><th><code>sorter: "digit"</code></th><td>Sort numerically.</td></tr>
|
||||
<tr><th><code>sorter: "currency"</code></th><td>Sort by currency value (supports "£$€¤¥¢").</td></tr>
|
||||
<tr><th><code>sorter: "image"</code></th><td>Sort by image alt value (see <a href="#imgattr"><code>imgAttr</code></a> option).</td></tr>
|
||||
<tr><th><code>sorter: "image"</code></th><td>Sort by image alt value (see <a href="#imgattr"><code>imgAttr</code></a> option; added in v2.18.0).</td></tr>
|
||||
<tr><th><code>sorter: "ipAddress"</code></th><td>Sort by IP Address; <span class="label label-warning">Warning</span> This parser was moved to the <code>parser-network.js</code> file in <span class="version updated">v2.18.0</span>.</td></tr>
|
||||
<tr><th><code>sorter: "url"</code></th><td>Sort by url.</td></tr>
|
||||
<tr><th><code>sorter: "isoDate"</code></th><td>Sort by ISO date (YYYY-MM-DD or YYYY/MM/DD; these formats can be followed by a time).</td></tr>
|
||||
@ -6428,8 +6440,9 @@ $('.tablesorter')[0].config.cache[0].normalized[0];
|
||||
<tr><th><code>sorter: "shortDate"</code></th><td>Sort by a shortened date (see <a href="#dateformat"><code>dateFormat</code></a>; these formats can also be followed by a time).</td></tr>
|
||||
<tr><th><code>sorter: "time"</code></th><td>Sort by time (23:59 or 12:59 pm).</td></tr>
|
||||
<tr><th><code>sorter: "metadata"</code></th><td>Sort by the sorter value in the metadata - requires the metadata plugin.</td></tr>
|
||||
</tbody></table><br>
|
||||
Check out the <a href="#headers"><code>headers</code></a> option to see how to use these parsers in your table (example #1).<br>Or add a header class name using "sorter-" plus the parser name (example #2), this includes custom parsers (example #3).
|
||||
</tbody></table>
|
||||
<p>Check out the <a href="#headers"><code>headers</code></a> option to see how to use these parsers in your table (example #1).</p>
|
||||
Or add a header class name using "sorter-" plus the parser name (example #2), this includes custom parsers (example #3).
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
<link href="../css/theme.jui.css" rel="stylesheet">
|
||||
|
||||
<!-- bootstrap -->
|
||||
<link href="css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="css/bootstrap-v3.min.css" rel="stylesheet">
|
||||
<link href="../css/theme.bootstrap.css" rel="stylesheet">
|
||||
|
||||
<!-- more themes -->
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██▀▀ ▀▀▀██
|
||||
█████▀ ▀████▀ ██ ██ ▀████▀ ██ ██ ██ ██ ▀████▀ █████▀ ██ ██ █████▀
|
||||
*/
|
||||
/*! tablesorter (FORK) - updated 12-16-2016 (v2.28.3)*/
|
||||
/*! tablesorter (FORK) - updated 01-06-2017 (v2.28.4)*/
|
||||
/* Includes widgets ( storage,uitheme,columns,filter,stickyHeaders,resizable,saveSort ) */
|
||||
(function(factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
@ -16,7 +16,7 @@
|
||||
}
|
||||
}(function(jQuery) {
|
||||
|
||||
/*! TableSorter (FORK) v2.28.3 *//*
|
||||
/*! TableSorter (FORK) v2.28.4 *//*
|
||||
* Client-side table sorting with ease!
|
||||
* @requires jQuery v1.2.6+
|
||||
*
|
||||
@ -40,7 +40,7 @@
|
||||
'use strict';
|
||||
var ts = $.tablesorter = {
|
||||
|
||||
version : '2.28.3',
|
||||
version : '2.28.4',
|
||||
|
||||
parsers : [],
|
||||
widgets : [],
|
||||
@ -5071,7 +5071,7 @@
|
||||
|
||||
})( jQuery );
|
||||
|
||||
/*! Widget: stickyHeaders - updated 7/31/2016 (v2.27.0) *//*
|
||||
/*! Widget: stickyHeaders - updated 1/6/2017 (v2.28.4) *//*
|
||||
* Requires tablesorter v2.8+ and jQuery 1.4.3+
|
||||
* by Rob Garrison
|
||||
*/
|
||||
@ -5134,7 +5134,7 @@
|
||||
// **************************
|
||||
ts.addWidget({
|
||||
id: 'stickyHeaders',
|
||||
priority: 55, // sticky widget must be initialized after the filter widget!
|
||||
priority: 54, // sticky widget must be initialized after the filter & before pager widget!
|
||||
options: {
|
||||
stickyHeaders : '', // extra class name added to the sticky header row
|
||||
stickyHeaders_appendTo : null, // jQuery selector or object to phycially attach the sticky headers
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
/*! TableSorter (FORK) v2.28.3 *//*
|
||||
/*! TableSorter (FORK) v2.28.4 *//*
|
||||
* Client-side table sorting with ease!
|
||||
* @requires jQuery v1.2.6+
|
||||
*
|
||||
@ -22,7 +22,7 @@
|
||||
'use strict';
|
||||
var ts = $.tablesorter = {
|
||||
|
||||
version : '2.28.3',
|
||||
version : '2.28.4',
|
||||
|
||||
parsers : [],
|
||||
widgets : [],
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██▀▀ ▀▀▀██
|
||||
█████▀ ▀████▀ ██ ██ ▀████▀ ██ ██ ██ ██ ▀████▀ █████▀ ██ ██ █████▀
|
||||
*/
|
||||
/*! tablesorter (FORK) - updated 12-16-2016 (v2.28.3)*/
|
||||
/*! tablesorter (FORK) - updated 01-06-2017 (v2.28.4)*/
|
||||
/* Includes widgets ( storage,uitheme,columns,filter,stickyHeaders,resizable,saveSort ) */
|
||||
(function(factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
@ -2276,7 +2276,7 @@
|
||||
|
||||
})( jQuery );
|
||||
|
||||
/*! Widget: stickyHeaders - updated 7/31/2016 (v2.27.0) *//*
|
||||
/*! Widget: stickyHeaders - updated 1/6/2017 (v2.28.4) *//*
|
||||
* Requires tablesorter v2.8+ and jQuery 1.4.3+
|
||||
* by Rob Garrison
|
||||
*/
|
||||
@ -2339,7 +2339,7 @@
|
||||
// **************************
|
||||
ts.addWidget({
|
||||
id: 'stickyHeaders',
|
||||
priority: 55, // sticky widget must be initialized after the filter widget!
|
||||
priority: 54, // sticky widget must be initialized after the filter & before pager widget!
|
||||
options: {
|
||||
stickyHeaders : '', // extra class name added to the sticky header row
|
||||
stickyHeaders_appendTo : null, // jQuery selector or object to phycially attach the sticky headers
|
||||
|
||||
@ -152,7 +152,7 @@
|
||||
if ($container.length) {
|
||||
// set default col title
|
||||
name = $header.attr(wo.columnSelector_name) || $header.text().trim();
|
||||
if (typeof wo.columnSelector_layoutCustomizer === "function") {
|
||||
if (typeof wo.columnSelector_layoutCustomizer === 'function') {
|
||||
$el = $header.find('.' + ts.css.headerIn);
|
||||
name = wo.columnSelector_layoutCustomizer( $el.length ? $el : $header, name, parseInt(colId, 10) );
|
||||
}
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
/*! Widget: output - updated 7/31/2016 (v2.27.0) *//*
|
||||
/*! Widget: output - updated 1/6/2017 (v2.28.4) *//*
|
||||
* Requires tablesorter v2.8+ and jQuery 1.7+
|
||||
* Modified from:
|
||||
* HTML Table to CSV: http://www.kunalbabre.com/projects/table2CSV.php (License unknown?)
|
||||
* Download-File-JS: https://github.com/PixelsCommander/Download-File-JS (http://www.apache.org/licenses/LICENSE-2.0)
|
||||
* FileSaver.js: https://github.com/eligrey/FileSaver.js (MIT)
|
||||
*/
|
||||
/*jshint browser:true, jquery:true, unused:false */
|
||||
/*global jQuery:false, alert:false */
|
||||
@ -25,7 +26,7 @@
|
||||
replaceTab : '\x09',
|
||||
|
||||
popupTitle : 'Output',
|
||||
popupStyle : 'width:100%;height:100%;', // for textarea
|
||||
popupStyle : 'width:100%;height:100%;margin:0;resize:none;', // for textarea
|
||||
message : 'Your device does not support downloading. Please try again in desktop browser.',
|
||||
|
||||
init : function(c) {
|
||||
@ -162,7 +163,6 @@
|
||||
|
||||
// process to array of arrays
|
||||
csvData = output.processRow(c, $rows);
|
||||
|
||||
if (wo.output_includeFooter) {
|
||||
// clone, to force the tfoot rows to the end of this selection of rows
|
||||
// otherwise they appear after the thead (the order in the HTML)
|
||||
@ -183,9 +183,13 @@
|
||||
// requires JSON stringify; if it doesn't exist, the output will show [object Object],... in the output window
|
||||
mydata = hasStringify ? JSON.stringify(tmpData) : tmpData;
|
||||
} else {
|
||||
tmp = [ headers[ ( len > 1 && wo.output_headerRows ) ? indx % len : len - 1 ] ];
|
||||
tmpData = output.row2CSV(wo, wo.output_headerRows ? headers : tmp, outputArray)
|
||||
.concat( output.row2CSV(wo, csvData, outputArray) );
|
||||
if (wo.output_includeHeader) {
|
||||
tmp = [ headers[ ( len > 1 && wo.output_headerRows ) ? indx % len : len - 1 ] ];
|
||||
tmpData = output.row2CSV(wo, wo.output_headerRows ? headers : tmp, outputArray)
|
||||
.concat( output.row2CSV(wo, csvData, outputArray) );
|
||||
} else {
|
||||
tmpData = output.row2CSV(wo, csvData, outputArray);
|
||||
}
|
||||
|
||||
// stringify the array; if stringify doesn't exist the array will be flattened
|
||||
mydata = outputArray && hasStringify ? JSON.stringify(tmpData) : tmpData.join('\n');
|
||||
@ -204,7 +208,7 @@
|
||||
if ( /p/i.test( wo.output_delivery || '' ) ) {
|
||||
output.popup(mydata, wo.output_popupStyle, outputJSON || outputArray);
|
||||
} else {
|
||||
output.download(wo, mydata);
|
||||
output.download(c, wo, mydata);
|
||||
}
|
||||
|
||||
}, // end process
|
||||
@ -274,13 +278,20 @@
|
||||
|
||||
popup : function(data, style, wrap) {
|
||||
var generator = window.open('', output.popupTitle, style);
|
||||
generator.document.write(
|
||||
'<html><head><title>' + output.popupTitle + '</title></head><body>' +
|
||||
'<textarea wrap="' + (wrap ? 'on' : 'off') + '" style="' + output.popupStyle + '">' + data + '\n</textarea>' +
|
||||
'</body></html>'
|
||||
);
|
||||
generator.document.close();
|
||||
generator.focus();
|
||||
try {
|
||||
generator.document.write(
|
||||
'<html><head><title>' + output.popupTitle + '</title></head><body>' +
|
||||
'<textarea wrap="' + (wrap ? 'on' : 'off') + '" style="' +
|
||||
output.popupStyle + '">' + data + '\n</textarea>' +
|
||||
'</body></html>'
|
||||
);
|
||||
generator.document.close();
|
||||
generator.focus();
|
||||
} catch (e) {
|
||||
// popup already open
|
||||
generator.close();
|
||||
return output.popup(data, style, wrap);
|
||||
}
|
||||
// select all text and focus within the textarea in the popup
|
||||
// $(generator.document).find('textarea').select().focus();
|
||||
return true;
|
||||
@ -288,13 +299,18 @@
|
||||
|
||||
// modified from https://github.com/PixelsCommander/Download-File-JS
|
||||
// & http://html5-demos.appspot.com/static/a.download.html
|
||||
download : function (wo, data){
|
||||
download : function (c, wo, data) {
|
||||
|
||||
var e, blob, gotBlob,
|
||||
if (typeof wo.output_savePlugin === 'function') {
|
||||
return wo.output_savePlugin(c, wo, data);
|
||||
}
|
||||
|
||||
var e, blob, gotBlob, bom,
|
||||
nav = window.navigator,
|
||||
link = document.createElement('a');
|
||||
|
||||
// iOS devices do not support downloading. We have to inform user about this.
|
||||
// iOS devices do not support downloading. We have to inform user about
|
||||
// this limitation.
|
||||
if (/(iP)/g.test(nav.userAgent)) {
|
||||
alert(output.message);
|
||||
return false;
|
||||
@ -311,8 +327,12 @@
|
||||
if ( gotBlob ) {
|
||||
|
||||
window.URL = window.URL || window.webkitURL;
|
||||
// prepend BOM for utf-8 encoding - see https://github.com/eligrey/FileSaver.js/blob/master/FileSaver.js#L140
|
||||
blob = new Blob( [ '\ufeff', data ], { type: wo.output_encoding } );
|
||||
// prepend BOM for UTF-8 XML and text/* types (including HTML)
|
||||
// note: your browser will automatically convert UTF-16 U+FEFF to EF BB BF
|
||||
// see https://github.com/eligrey/FileSaver.js/blob/master/FileSaver.js#L68
|
||||
bom = (/^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(wo.output_encoding)) ?
|
||||
[ '\ufeff', data ] : [ data ];
|
||||
blob = new Blob( bom, { type: wo.output_encoding } );
|
||||
|
||||
if (nav.msSaveBlob) {
|
||||
// IE 10+
|
||||
@ -353,8 +373,9 @@
|
||||
output_ignoreColumns : [], // columns to ignore [0, 1,... ] (zero-based index)
|
||||
output_hiddenColumns : false, // include hidden columns in the output
|
||||
output_includeFooter : false, // include footer rows in the output
|
||||
output_includeHeader : true, // include header rows in the output
|
||||
output_headerRows : false, // if true, include multiple header rows
|
||||
output_dataAttrib : 'data-name', // header attrib containing modified header name
|
||||
output_headerRows : false, // if true, include multiple header rows (JSON only)
|
||||
output_delivery : 'popup', // popup, download
|
||||
output_saveRows : 'filtered', // (a)ll, (v)isible, (f)iltered or jQuery filter selector
|
||||
output_duplicateSpans : true, // duplicate output data in tbody colspan/rowspan
|
||||
@ -373,7 +394,13 @@
|
||||
// JSON callback executed when a colspan is encountered in the header
|
||||
output_callbackJSON : function($cell, txt, cellIndex) { return txt + '(' + (cellIndex) + ')'; },
|
||||
// the need to modify this for Excel no longer exists
|
||||
output_encoding : 'data:application/octet-stream;charset=utf8,'
|
||||
output_encoding : 'data:application/octet-stream;charset=utf8,',
|
||||
// override internal save file code and use an external plugin such as
|
||||
// https://github.com/eligrey/FileSaver.js
|
||||
output_savePlugin : null /* function(c, wo, data) {
|
||||
var blob = new Blob([data], {type: wo.output_encoding});
|
||||
saveAs(blob, wo.output_saveFileName);
|
||||
} */
|
||||
},
|
||||
init: function(table, thisWidget, c) {
|
||||
output.init(c);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
/*! Widget: Pager - updated 11/26/2016 (v2.28.0) */
|
||||
/*! Widget: Pager - updated 1/6/2017 (v2.28.4) */
|
||||
/* Requires tablesorter v2.8+ and jQuery 1.7+
|
||||
* by Rob Garrison
|
||||
*/
|
||||
@ -109,6 +109,7 @@
|
||||
prev : '.prev', // previous page arrow
|
||||
next : '.next', // next page arrow
|
||||
last : '.last', // go to last page arrow
|
||||
// goto is a reserved word #657
|
||||
gotoPage : '.gotoPage', // go to page selector - select dropdown that sets the current page
|
||||
pageDisplay : '.pagedisplay', // location of where the 'output' is displayed
|
||||
pageSize : '.pagesize' // page size selector - select dropdown that sets the 'size' option
|
||||
@ -168,10 +169,6 @@
|
||||
p.size = $.data( table, 'pagerLastSize' ) || wo.pager_size;
|
||||
// added in case the pager is reinitialized after being destroyed.
|
||||
p.$container = $( s.container ).addClass( wo.pager_css.container ).show();
|
||||
// goto selector
|
||||
p.$goto = p.$container.find( s.gotoPage ); // goto is a reserved word #657
|
||||
// page size selector
|
||||
p.$size = p.$container.find( s.pageSize );
|
||||
p.totalRows = c.$tbodies.eq( 0 )
|
||||
.children( 'tr' )
|
||||
.not( wo.pager_countChildRows ? '' : '.' + c.cssChildRow )
|
||||
@ -184,7 +181,7 @@
|
||||
p.page = ( isNaN( t.page ) ? p.page : t.page ) || p.setPage || 0;
|
||||
p.size = t.size === 'all' ? t.size : ( isNaN( t.size ) ? p.size : t.size ) || p.setSize || 10;
|
||||
$.data( table, 'pagerLastSize', p.size );
|
||||
p.$size.val( p.size );
|
||||
p.$container.find( s.pageSize ).val( p.size );
|
||||
}
|
||||
|
||||
// skipped rows
|
||||
@ -243,7 +240,7 @@
|
||||
},
|
||||
|
||||
bindEvents: function( c ) {
|
||||
var ctrls, fxn,
|
||||
var ctrls, fxn, tmp,
|
||||
p = c.pager,
|
||||
wo = c.widgetOptions,
|
||||
namespace = c.namespace + 'pager',
|
||||
@ -359,8 +356,9 @@
|
||||
}
|
||||
});
|
||||
|
||||
if ( p.$goto.length ) {
|
||||
p.$goto
|
||||
tmp = p.$container.find( wo.pager_selectors.gotoPage );
|
||||
if ( tmp.length ) {
|
||||
tmp
|
||||
.off( 'change' + namespace )
|
||||
.on( 'change' + namespace, function() {
|
||||
p.page = $( this ).val() - 1;
|
||||
@ -371,15 +369,17 @@
|
||||
console.warn( 'Pager: >> Goto selector not found' );
|
||||
}
|
||||
|
||||
if ( p.$size.length ) {
|
||||
tmp = p.$container.find( wo.pager_selectors.pageSize );
|
||||
if ( tmp.length ) {
|
||||
// setting an option as selected appears to cause issues with initial page size
|
||||
p.$size.find( 'option' ).removeAttr( 'selected' );
|
||||
p.$size
|
||||
tmp.find( 'option' ).removeAttr( 'selected' );
|
||||
tmp
|
||||
.off( 'change' + namespace )
|
||||
.on( 'change' + namespace, function() {
|
||||
if ( !$( this ).hasClass( wo.pager_css.disabled ) ) {
|
||||
var size = $( this ).val();
|
||||
p.$size.val( size ); // in case there are more than one pagers
|
||||
// in case there are more than one pager
|
||||
p.$container.find( wo.pager_selectors.pageSize ).val( size );
|
||||
tsp.setPageSize( c, size );
|
||||
tsp.changeHeight( c );
|
||||
}
|
||||
@ -439,7 +439,7 @@
|
||||
|
||||
updatePageDisplay: function( c, completed ) {
|
||||
if ( c.pager && c.pager.initializing ) { return; }
|
||||
var s, t, $out, options, indx, len,
|
||||
var s, t, $out, options, indx, len, output,
|
||||
table = c.table,
|
||||
wo = c.widgetOptions,
|
||||
p = c.pager,
|
||||
@ -447,8 +447,7 @@
|
||||
sz = tsp.parsePageSize( c, p.size, 'get' ); // don't allow dividing by zero
|
||||
if ( sz === 'all' ) { sz = p.totalRows; }
|
||||
if ( wo.pager_countChildRows ) { t[ t.length ] = c.cssChildRow; }
|
||||
p.$size
|
||||
.add( p.$goto )
|
||||
p.$container.find( wo.pager_selectors.pageSize + ',' + wo.pager_selectors.gotoPage )
|
||||
.removeClass( wo.pager_css.disabled )
|
||||
.removeAttr( 'disabled' )
|
||||
.prop( 'aria-disabled', 'false' );
|
||||
@ -469,8 +468,12 @@
|
||||
if ( typeof wo.pager_output === 'function' ) {
|
||||
s = wo.pager_output( table, p );
|
||||
} else {
|
||||
output = $out
|
||||
// get output template from data-pager-output or data-pager-output-filtered
|
||||
.attr('data-pager-output' + (p.filteredRows < p.totalRows ? '-filtered' : '')) ||
|
||||
wo.pager_output;
|
||||
// form the output string (can now get a new output string from the server)
|
||||
s = ( p.ajaxData && p.ajaxData.output ? p.ajaxData.output || wo.pager_output : wo.pager_output )
|
||||
s = ( p.ajaxData && p.ajaxData.output ? p.ajaxData.output || output : output )
|
||||
// {page} = one-based index; {page+#} = zero based index +/- value
|
||||
.replace( /\{page([\-+]\d+)?\}/gi, function( m, n ) {
|
||||
return p.totalPages ? p.page + ( n ? parseInt( n, 10 ) : 1 ) : 0;
|
||||
@ -494,7 +497,7 @@
|
||||
p[ str ] || ( data ? data[ str ] : deflt ) || deflt;
|
||||
});
|
||||
}
|
||||
if ( p.$goto.length ) {
|
||||
if ( p.$container.find( wo.pager_selectors.gotoPage ).length ) {
|
||||
t = '';
|
||||
options = tsp.buildPageSelect( c, p );
|
||||
len = options.length;
|
||||
@ -502,7 +505,7 @@
|
||||
t += '<option value="' + options[ indx ] + '">' + options[ indx ] + '</option>';
|
||||
}
|
||||
// innerHTML doesn't work in IE9 - http://support2.microsoft.com/kb/276228
|
||||
p.$goto.html( t ).val( p.page + 1 );
|
||||
p.$container.find( wo.pager_selectors.gotoPage ).html( t ).val( p.page + 1 );
|
||||
}
|
||||
if ( $out.length ) {
|
||||
$out[ ($out[ 0 ].nodeName === 'INPUT' ) ? 'val' : 'html' ]( s );
|
||||
@ -687,9 +690,10 @@
|
||||
hideRowsSetup: function( c ) {
|
||||
var p = c.pager,
|
||||
namespace = c.namespace + 'pager',
|
||||
size = p.$size.val();
|
||||
$el = p.$container.find( c.widgetOptions.pager_selectors.pageSize ),
|
||||
size = $el.val();
|
||||
p.size = tsp.parsePageSize( c, size, 'get' );
|
||||
p.$size.val( p.size );
|
||||
$el.val( p.size );
|
||||
$.data( c.table, 'pagerLastSize', p.size );
|
||||
tsp.pagerArrows( c );
|
||||
if ( !c.widgetOptions.pager_removeRows ) {
|
||||
@ -774,10 +778,12 @@
|
||||
}
|
||||
}
|
||||
wo.pager_processAjaxOnInit = true;
|
||||
// only add new header text if the length matches
|
||||
if ( th && th.length === hl ) {
|
||||
// update new header text
|
||||
if ( th ) {
|
||||
hsh = $table.hasClass( 'hasStickyHeaders' );
|
||||
$sh = hsh ? wo.$sticky.children( 'thead:first' ).children( 'tr' ).children() : '';
|
||||
$sh = hsh ?
|
||||
wo.$sticky.children( 'thead:first' ).children( 'tr:not(.' + c.cssIgnoreRow + ')' ).children() :
|
||||
'';
|
||||
$f = $table.find( 'tfoot tr:first' ).children();
|
||||
// don't change td headers (may contain pager)
|
||||
$headers = c.$headers.filter( 'th' );
|
||||
@ -787,19 +793,24 @@
|
||||
// add new test within the first span it finds, or just in the header
|
||||
if ( $h.find( '.' + ts.css.icon ).length ) {
|
||||
icon = $h.find( '.' + ts.css.icon ).clone( true );
|
||||
$h.find( '.tablesorter-header-inner' ).html( th[ j ] ).append( icon );
|
||||
$h.find( '.' + ts.css.headerIn ).html( th[ j ] ).append( icon );
|
||||
if ( hsh && $sh.length ) {
|
||||
icon = $sh.eq( j ).find( '.' + ts.css.icon ).clone( true );
|
||||
$sh.eq( j ).find( '.tablesorter-header-inner' ).html( th[ j ] ).append( icon );
|
||||
$sh.eq( j ).find( '.' + ts.css.headerIn ).html( th[ j ] ).append( icon );
|
||||
}
|
||||
} else {
|
||||
$h.find( '.tablesorter-header-inner' ).html( th[ j ] );
|
||||
$h.find( '.' + ts.css.headerIn ).html( th[ j ] );
|
||||
if ( hsh && $sh.length ) {
|
||||
$sh.eq( j ).find( '.tablesorter-header-inner' ).html( th[ j ] );
|
||||
// add sticky header to container just in case it contains pager controls
|
||||
p.$container = p.$container.add( wo.$sticky );
|
||||
$sh.eq( j ).find( '.' + ts.css.headerIn ).html( th[ j ] );
|
||||
}
|
||||
}
|
||||
$f.eq( j ).html( th[ j ] );
|
||||
}
|
||||
if ( hsh ) {
|
||||
tsp.bindEvents( c );
|
||||
}
|
||||
}
|
||||
}
|
||||
if ( c.showProcessing ) {
|
||||
@ -1006,9 +1017,11 @@
|
||||
}
|
||||
}
|
||||
// disable size selector
|
||||
$controls = p.$size
|
||||
.add( p.$goto )
|
||||
.add( p.$container.find( '.ts-startRow, .ts-page ' ) );
|
||||
$controls = p.$container.find(
|
||||
wo.pager_selectors.pageSize + ',' +
|
||||
wo.pager_selectors.gotoPage + ',' +
|
||||
'.ts-startRow, .ts-page'
|
||||
);
|
||||
len = $controls.length;
|
||||
for ( index = 0; index < len; index++ ) {
|
||||
$controls.eq( index )
|
||||
@ -1122,7 +1135,7 @@
|
||||
var p = c.pager,
|
||||
s = parseInt( size, 10 ) || p.size || c.widgetOptions.pager_size || 10;
|
||||
return p.initialized && (/all/i.test( size ) || s === p.totalRows) ?
|
||||
// "get" to set `p.size` or "set" to set `p.$size.val()`
|
||||
// "get" to set `p.size` or "set" to set `pageSize.val()`
|
||||
'all' : ( mode === 'get' ? s : p.size );
|
||||
},
|
||||
|
||||
@ -1138,7 +1151,9 @@
|
||||
var p = c.pager,
|
||||
table = c.table;
|
||||
p.size = tsp.parsePageSize( c, size, 'get' );
|
||||
p.$size.val( tsp.parsePageSize( c, p.size, 'set' ) );
|
||||
p.$container
|
||||
.find( c.widgetOptions.pager_selectors.pageSize )
|
||||
.val( tsp.parsePageSize( c, p.size, 'set' ) );
|
||||
$.data( table, 'pagerLastPage', tsp.parsePageNumber( c, p ) );
|
||||
$.data( table, 'pagerLastSize', p.size );
|
||||
p.totalPages = p.size === 'all' ? 1 : Math.ceil( p.totalRows / p.size );
|
||||
@ -1197,27 +1212,27 @@
|
||||
ts.storage( table, c.widgetOptions.pager_storageKey, '' );
|
||||
}
|
||||
p.$container = null;
|
||||
p.$goto = null;
|
||||
p.$size = null;
|
||||
c.pager = null;
|
||||
c.rowsCopy = null;
|
||||
}
|
||||
},
|
||||
|
||||
enablePager: function( c, triggered ) {
|
||||
var info, size, $el,
|
||||
var info, size,
|
||||
table = c.table,
|
||||
p = c.pager;
|
||||
p = c.pager,
|
||||
wo = c.widgetOptions,
|
||||
$el = p.$container.find( wo.pager_selectors.pageSize );
|
||||
p.isDisabled = false;
|
||||
p.page = $.data( table, 'pagerLastPage' ) || p.page || 0;
|
||||
size = p.$size.find( 'option[selected]' ).val();
|
||||
size = $el.find('option[selected]' ).val();
|
||||
p.size = $.data( table, 'pagerLastSize' ) || tsp.parsePageSize( c, size, 'get' );
|
||||
p.$size.val( p.size ); // set page size
|
||||
$el.val( p.size ); // set page size
|
||||
p.totalPages = p.size === 'all' ? 1 : Math.ceil( tsp.getTotalPages( c, p ) / p.size );
|
||||
c.$table.removeClass( 'pagerDisabled' );
|
||||
// if table id exists, include page display with aria info
|
||||
if ( table.id && !c.$table.attr( 'aria-describedby' ) ) {
|
||||
$el = p.$container.find( c.widgetOptions.pager_selectors.pageDisplay );
|
||||
$el = p.$container.find( wo.pager_selectors.pageDisplay );
|
||||
info = $el.attr( 'id' );
|
||||
if ( !info ) {
|
||||
// only add pageDisplay id if it doesn't exist - see #1288
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
/*! Widget: stickyHeaders - updated 7/31/2016 (v2.27.0) *//*
|
||||
/*! Widget: stickyHeaders - updated 1/6/2017 (v2.28.4) *//*
|
||||
* Requires tablesorter v2.8+ and jQuery 1.4.3+
|
||||
* by Rob Garrison
|
||||
*/
|
||||
@ -61,7 +61,7 @@
|
||||
// **************************
|
||||
ts.addWidget({
|
||||
id: 'stickyHeaders',
|
||||
priority: 55, // sticky widget must be initialized after the filter widget!
|
||||
priority: 54, // sticky widget must be initialized after the filter & before pager widget!
|
||||
options: {
|
||||
stickyHeaders : '', // extra class name added to the sticky header row
|
||||
stickyHeaders_appendTo : null, // jQuery selector or object to phycially attach the sticky headers
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "tablesorter",
|
||||
"title": "tablesorter",
|
||||
"version": "2.28.3",
|
||||
"version": "2.28.4",
|
||||
"description": "tablesorter (FORK) is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell.",
|
||||
"author": {
|
||||
"name": "Christian Bach",
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "tablesorter",
|
||||
"title": "tablesorter",
|
||||
"version": "2.28.3",
|
||||
"version": "2.28.4",
|
||||
"description": "tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell.\n\nThis forked version adds lots of new enhancements including: alphanumeric sorting, pager callback functons, multiple widgets providing column styling, ui theme application, sticky headers, column filters and resizer, as well as extended documentation with a lot more demos.",
|
||||
"author": {
|
||||
"name": "Christian Bach",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user