updated docs

This commit is contained in:
Mottie 2012-09-27 14:57:19 -05:00
parent 56f987a5d0
commit c29e651ebf
80 changed files with 5145 additions and 1857 deletions

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 416 B

View File

@ -1,39 +1,39 @@
/* pager wrapper, div */
.pager {
.tablesorter-pager {
padding: 5px;
}
/* pager wrapper, in thead/tfoot */
td.pager {
td.tablesorter-pager {
background-color: #e6eeee;
margin: 0; /* needed for bootstrap .pager gets a 18px bottom margin */
}
/* pager navigation arrows */
.pager img {
.tablesorter-pager img {
vertical-align: middle;
margin-right: 2px;
cursor: pointer;
}
/* pager output text */
.pager .pagedisplay {
font-size: 11px;
.tablesorter-pager .pagedisplay {
padding: 0 5px 0 5px;
width: 50px;
text-align: center;
}
/*** loading ajax indeterminate progress indicator ***/
#tablesorterPagerLoading {
background: rgba(255,255,255,0.8) url(icons/loading.gif) center center no-repeat;
position: absolute;
z-index: 1000;
/* pager element reset (needed for bootstrap) */
.tablesorter-pager select {
margin: 0;
padding: 0;
}
/*** css used when "updateArrows" option is true ***/
/* the pager itself gets a disabled class when the number of rows is less than the size */
.pager.disabled {
.tablesorter-pager.disabled {
display: none;
}
/* hide or fade out pager arrows when the first or last row is visible */
.pager img.disabled {
.tablesorter-pager .disabled {
/* visibility: hidden */
opacity: 0.5;
filter: alpha(opacity=50);

View File

@ -1,8 +1,10 @@
/*!
* tablesorter pager plugin
* updated 5/28/2012
* updated 9/27/2012
*/
/*jshint browser:true, jquery:true */
;(function($) {
"use strict";
$.extend({tablesorterPager: new function() {
this.defaults = {
@ -29,6 +31,7 @@
ajaxProcessing: function(ajax){ return [ 0, [], null ]; },
// output default: '{page}/{totalPages}'
// possible variables: {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {totalRows}
output: '{startRow} to {endRow} of {totalRows} rows', // '{page}/{totalPages}'
// apply disabled classname to the pager arrows when the rows at either extreme is visible
@ -46,13 +49,14 @@
// 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: true, // removing rows in larger tables speeds up the sort
removeRows: false, // removing rows in larger tables speeds up the sort
// css class names of pager arrows
cssNext: '.next', // next page arrow
cssFirst: '.first', // go to first page arrow
cssPrev: '.prev', // previous page arrow
cssFirst: '.first', // first page arrow
cssLast: '.last', // last page arrow
cssNext: '.next', // next page arrow
cssLast: '.last', // go to last page arrow
cssGoto: '.gotoPage', // go to page selector - select dropdown that sets the current page
cssPageDisplay: '.pagedisplay', // location of where the "output" is displayed
cssPageSize: '.pagesize', // page size selector - select dropdown that sets the "size" option
@ -61,7 +65,9 @@
// stuff not set by the user
totalRows: 0,
totalPages: 0
totalPages: 0,
filteredRows: 0,
filteredPages : 0
};
@ -69,32 +75,50 @@
// hide arrows at extremes
pagerArrows = function(c, disable) {
var a = 'addClass', r = 'removeClass',
d = c.cssDisabled, dis = !!disable;
if (c.updateArrows) {
c.container[(c.totalRows < c.size) ? a : r](d);
$(c.cssFirst + ',' + c.cssPrev, c.container)[(dis || c.page === 0) ? a : r](d);
$(c.cssNext + ',' + c.cssLast, c.container)[(dis || c.page === c.totalPages - 1) ? a : r](d);
var a = 'addClass',
r = 'removeClass',
d = c.cssDisabled,
dis = !!disable,
// tr = Math.min( c.totalRows, c.filteredRows ),
tp = Math.min( c.totalPages, c.filteredPages );
if ( c.updateArrows ) {
$(c.cssFirst + ',' + c.cssPrev, c.container)[ ( dis || c.page === 0 ) ? a : r ](d);
$(c.cssNext + ',' + c.cssLast, c.container)[ ( dis || c.page === tp - 1 ) ? a : r ](d);
}
},
updatePageDisplay = function(table, c) {
if (c.totalPages > 0) {
c.startRow = c.size * (c.page) + 1;
c.endRow = Math.min(c.totalRows, c.size * (c.page+1));
var out = $(c.cssPageDisplay, c.container),
var i, p, s, t, out, f = $(table).hasClass('hasFilters');
c.filteredRows = (f) ? $(table).find('tbody tr:not(.filtered)').length : c.totalRows;
c.filteredPages = (f) ? Math.ceil( c.filteredRows / c.size ) : c.totalPages;
if ( Math.min( c.totalPages, c.filteredPages ) > 0 ) {
t = (c.size * c.page > c.filteredRows);
c.startRow = (t) ? 1 : ( c.size * c.page ) + 1;
c.page = (t) ? 0 : c.page;
c.endRow = Math.min( c.filteredRows, c.totalRows, c.size * ( c.page + 1 ) );
out = $(c.cssPageDisplay, c.container);
// form the output string
s = c.output.replace(/\{(page|totalPages|startRow|endRow|totalRows)\}/gi, function(m){
s = c.output.replace(/\{(page|filteredRows|filteredPages|totalPages|startRow|endRow|totalRows)\}/gi, function(m){
return {
'{page}' : c.page + 1,
'{totalPages}' : c.totalPages,
'{startRow}' : c.startRow,
'{endRow}' : c.endRow,
'{totalRows}' : c.totalRows
'{page}' : c.page + 1,
'{filteredRows}' : c.filteredRows,
'{filteredPages}' : c.filteredPages,
'{totalPages}' : c.totalPages,
'{startRow}' : c.startRow,
'{endRow}' : c.endRow,
'{totalRows}' : c.totalRows
}[m];
});
if (out[0]) {
out[ (out[0].tagName === 'INPUT') ? 'val' : 'html' ](s);
if ( $(c.cssGoto, c.container).length ) {
t = '';
p = Math.min( c.totalPages, c.filteredPages );
for ( i = 1; i <= p; i++ ) {
t += '<option>' + i + '</option>';
}
$(c.cssGoto, c.container).html(t).val(c.page + 1);
}
}
}
pagerArrows(c);
@ -108,7 +132,7 @@
h = $.data(table, 'pagerSavedHeight');
if (h) {
d = h - $b.height();
if (d > 5 && $.data(table, 'pagerLastSize') === c.size && $b.find('tr:visible').length < c.size) {
if ( d > 5 && $.data(table, 'pagerLastSize') === c.size && $b.find('tr:visible').length < c.size ) {
$b.append('<tr class="pagerSavedHeightSpacer remove-me" style="height:' + d + 'px;"></tr>');
}
}
@ -124,23 +148,27 @@
},
hideRows = function(table, c){
var i, rows = $('tr:not(.' + table.config.cssChildRow + ')', table.tBodies),
var i,
rows = $('tr:not(.' + table.config.cssChildRow + ')', table.tBodies),
l = rows.length,
s = (c.page * c.size),
e = (s + c.size);
if (e > l) { e = l; }
for (i = 0; i < l; i++){
rows[i].style.display = (i >= s && i < e) ? '' : 'none';
s = ( c.page * c.size ),
e = s + c.size,
j = 0; // size counter
for ( i = 0; i < l; i++ ){
if (!/filtered/.test(rows[i].className)) {
rows[i].style.display = ( j >= s && j < e ) ? '' : 'none';
j++;
}
}
},
hideRowsSetup = function(table, c){
c.size = parseInt($(c.cssPageSize, c.container).val(), 10) || c.size;
c.size = parseInt( $(c.cssPageSize, c.container).val(), 10 ) || c.size;
$.data(table, 'pagerLastSize', c.size);
pagerArrows(c);
if (!c.removeRows) {
if ( !c.removeRows ) {
hideRows(table, c);
$(table).bind('sortEnd.pager', function(){
$(table).bind('sortEnd.pager filterEnd.pager', function(){
hideRows(table, c);
});
}
@ -148,18 +176,22 @@
renderAjax = function(data, table, c, exception){
// process data
if (typeof(c.ajaxProcessing) === "function") {
if ( typeof(c.ajaxProcessing) === "function" ) {
// ajaxProcessing result: [ total, rows, headers ]
var i, j, k, hsh, $f, $sh, $t = $(table), $b = $(table.tBodies).filter(':not(.' + table.config.cssInfoBlock + ')'),
var i, j, hsh, $f, $sh,
$t = $(table),
$b = $(table.tBodies).filter(':not(.' + table.config.cssInfoBlock + ')'),
hl = $t.find('thead th').length, tds = '',
err = '<tr class="remove-me"><td style="text-align: center;" colspan="' + hl + '">' +
(exception ? exception.message + ' (' + exception.name + ')' : 'No rows found') + '</td></tr>',
result = c.ajaxProcessing(data) || [ 0, [] ],
d = result[1] || [], l = d.length, th = result[2];
if (l > 0) {
for ( i=0; i < l; i++ ) {
d = result[1] || [],
l = d.length,
th = result[2];
if ( l > 0 ) {
for ( i = 0; i < l; i++ ) {
tds += '<tr>';
for (j=0; j < d[i].length; j++) {
for ( j = 0; j < d[i].length; j++ ) {
// build tbody cells
tds += '<td>' + d[i][j] + '</td>';
}
@ -167,34 +199,34 @@
}
}
// only add new header text if the length matches
if (th && th.length === hl) {
if ( th && th.length === hl ) {
hsh = $t.hasClass('hasStickyHeaders');
$sh = $t.find('.' + ((c.widgetOptions && c.widgetOptions.stickyHeaders) || 'tablesorter-stickyheader'));
$f = $t.find('tfoot tr:first').children();
$t.find('thead tr.tablesorter-header th').each(function(j){
var $t = $(this),
// add new test within the first span it finds, or just in the header
tar = ($t.find('span').length) ? $t.find('span:first') : $t;
tar.html(th[j]);
$f.eq(j).html(th[j]);
tar = ( $t.find('span').length ) ? $t.find('span:first') : $t;
tar.html( th[j] );
$f.eq(j).html( th[j] );
// update sticky headers
if (hsh && $sh.length){
if ( hsh && $sh.length ){
tar = $sh.find('th').eq(j);
tar = (tar.find('span').length) ? tar.find('span:first') : tar;
tar.html(th[j]);
tar = ( tar.find('span').length ) ? tar.find('span:first') : tar;
tar.html( th[j] );
}
});
}
if (exception) {
if ( exception ) {
// add error row to thead instead of tbody, or clicking on the header will result in a parser error
$t.find('thead').append(err);
} else {
$b.html(tds); // add tbody
$b.html( tds ); // add tbody
}
c.temp.remove(); // remove loading icon
$t.trigger('update');
c.totalRows = result[0] || 0;
c.totalPages = Math.ceil(c.totalRows / c.size);
c.totalPages = Math.ceil( c.totalRows / c.size );
updatePageDisplay(table, c);
fixHeight(table, c);
$t.trigger('pagerChange', c);
@ -204,14 +236,14 @@
getAjax = function(table, c){
var $t = $(table),
url = c.ajaxUrl.replace(/\{page\}/g, c.page).replace(/\{size\}/g, c.size);
if (url !== '') {
if ( url !== '' ) {
// loading icon
c.temp = $('<div/>', {
id : 'tablesorterPagerLoading',
'class' : 'tablesorter-processing',
width : $t.outerWidth(true),
height: $t.outerHeight(true)
});
$t.before(c.temp);
$t.before( c.temp );
$(document).ajaxError(function(e, xhr, settings, exception) {
renderAjax(null, table, c, exception);
});
@ -225,22 +257,22 @@
var i, j, o,
f = document.createDocumentFragment(),
l = rows.length,
s = (c.page * c.size),
e = (s + c.size);
if (l < 1) { return; } // empty table, abort!
s = ( c.page * c.size ),
e = ( s + c.size );
if ( l < 1 ) { return; } // empty table, abort!
$(table).trigger('pagerChange', c);
if (!c.removeRows) {
if ( !c.removeRows ) {
hideRows(table, c);
} else {
if (e > rows.length ) {
if ( e > rows.length ) {
e = rows.length;
}
$(table.tBodies[0]).addClass('tablesorter-hidden');
$.tablesorter.clearTableBody(table);
for (i = s; i < e; i++) {
for ( i = s; i < e; i++ ) {
o = rows[i];
l = o.length;
for (j = 0; j < l; j++) {
for ( j = 0; j < l; j++ ) {
f.appendChild(o[j]);
}
}
@ -251,12 +283,12 @@
moveToLastPage(table, c);
}
updatePageDisplay(table, c);
if (!c.isDisabled) { fixHeight(table, c); }
if ( !c.isDisabled ) { fixHeight(table, c); }
$(table).trigger('applyWidgets');
},
showAllRows = function(table, c){
if (c.ajax) {
if ( c.ajax ) {
pagerArrows(c, true);
} else {
c.isDisabled = true;
@ -273,12 +305,13 @@
},
moveToPage = function(table, c) {
if (c.isDisabled) { return; }
if (c.page < 0 || c.page > (c.totalPages-1)) {
if ( c.isDisabled ) { return; }
var p = Math.min( c.totalPages, c.filteredPages );
if ( c.page < 0 || c.page > ( p - 1 ) ) {
c.page = 0;
}
$.data(table, 'pagerLastPage', c.page);
if (c.ajax) {
if ( c.ajax ) {
getAjax(table, c);
} else {
renderTable(table, table.config.rowsCopy, c);
@ -289,7 +322,7 @@
c.size = size;
$.data(table, 'pagerLastPage', c.page);
$.data(table, 'pagerLastSize', c.size);
c.totalPages = Math.ceil(c.totalRows / c.size);
c.totalPages = Math.ceil( c.totalRows / c.size );
moveToPage(table, c);
},
@ -299,21 +332,21 @@
},
moveToLastPage = function(table, c) {
c.page = (c.totalPages-1);
c.page = ( Math.min( c.totalPages, c.filteredPages ) - 1 );
moveToPage(table, c);
},
moveToNextPage = function(table, c) {
c.page++;
if (c.page >= (c.totalPages-1)) {
c.page = (c.totalPages-1);
if ( c.page >= ( Math.min( c.totalPages, c.filteredPages ) - 1 ) ) {
c.page = ( Math.min( c.totalPages, c.filteredPages ) - 1 );
}
moveToPage(table, c);
},
moveToPrevPage = function(table, c) {
c.page--;
if (c.page <= 0) {
if ( c.page <= 0 ) {
c.page = 0;
}
moveToPage(table, c);
@ -321,9 +354,9 @@
destroyPager = function(table, c){
showAllRows(table, c);
c.container.hide(); // hide pager
$(c.container).hide(); // hide pager
table.config.appender = null; // remove pager appender function
$(table).unbind('destroy.pager sortEnd.pager enable.pager disable.pager');
$(table).unbind('destroy.pager sortEnd.pager filterEnd.pager enable.pager disable.pager');
},
enablePager = function(table, c, triggered){
@ -331,8 +364,8 @@
c.isDisabled = false;
c.page = $.data(table, 'pagerLastPage') || c.page || 0;
c.size = $.data(table, 'pagerLastSize') || parseInt(p.val(), 10) || c.size;
c.totalPages = Math.ceil(c.totalRows / c.size);
if (triggered) {
c.totalPages = Math.ceil( Math.min( c.totalPages, c.filteredPages ) / c.size);
if ( triggered ) {
$(table).trigger('update');
setPageSize(table, c.size, c);
hideRowsSetup(table, c);
@ -342,7 +375,7 @@
$this.appender = function(table, rows) {
var c = table.config.pager;
if (!c.ajax) {
if ( !c.ajax ) {
table.config.rowsCopy = rows;
c.totalRows = rows.length;
c.size = $.data(table, 'pagerLastSize') || c.size;
@ -354,13 +387,13 @@
$this.construct = function(settings) {
return this.each(function() {
var config = this.config,
c = config.pager = $.extend({}, $.tablesorterPager.defaults, settings),
c = config.pager = $.extend( {}, $.tablesorterPager.defaults, settings ),
table = this,
$t = $(table),
pager = $(c.container).show(); // added in case the pager is reinitialized after being destroyed.
pager = $(c.container).addClass('tablesorter-pager').show(); // added in case the pager is reinitialized after being destroyed.
config.appender = $this.appender;
enablePager(table, c, false);
if (typeof(c.ajaxUrl) === 'string') {
if ( typeof(c.ajaxUrl) === 'string' ) {
// ajax pager; interact with database
c.ajax = true;
getAjax(table, c);
@ -371,33 +404,48 @@
hideRowsSetup(table, c);
}
if ( $(table).hasClass('hasFilters') ) {
$(table).unbind('filterEnd.pager').bind('filterEnd.pager', function() {
c.page = 0;
updatePageDisplay(table, c);
moveToPage(table, c);
changeHeight(table, c);
});
}
if ( $(c.cssGoto, pager).length ) {
$(c.cssGoto, pager).bind('change', function(){
c.page = $(this).val() - 1;
moveToPage(table, c);
});
updatePageDisplay(table, c);
}
$(c.cssFirst,pager).unbind('click.pager').bind('click.pager', function() {
if (!$(this).hasClass(c.cssDisabled)) { moveToFirstPage(table, c); }
if ( !$(this).hasClass(c.cssDisabled) ) { moveToFirstPage(table, c); }
return false;
});
$(c.cssNext,pager).unbind('click.pager').bind('click.pager', function() {
if (!$(this).hasClass(c.cssDisabled)) { moveToNextPage(table, c); }
if ( !$(this).hasClass(c.cssDisabled) ) { moveToNextPage(table, c); }
return false;
});
$(c.cssPrev,pager).unbind('click.pager').bind('click.pager', function() {
if (!$(this).hasClass(c.cssDisabled)) { moveToPrevPage(table, c); }
if ( !$(this).hasClass(c.cssDisabled) ) { moveToPrevPage(table, c); }
return false;
});
$(c.cssLast,pager).unbind('click.pager').bind('click.pager', function() {
if (!$(this).hasClass(c.cssDisabled)) { moveToLastPage(table, c); }
if ( !$(this).hasClass(c.cssDisabled) ) { moveToLastPage(table, c); }
return false;
});
$(c.cssPageSize,pager).unbind('change.pager').bind('change.pager', function() {
$(c.cssPageSize,pager).val( $(this).val() ); // in case there are more than one pagers
if (!$(this).hasClass(c.cssDisabled)) {
setPageSize(table, parseInt($(this).val(), 10), c);
if ( !$(this).hasClass(c.cssDisabled) ) {
setPageSize(table, parseInt( $(this).val(), 10 ), c);
changeHeight(table, c);
}
return false;
});
$t
.unbind('disable.pager enable.pager destroy.pager')
.unbind('disable.pager enable.pager destroy.pager update.pager')
.bind('disable.pager', function(){
showAllRows(table, c);
})
@ -406,11 +454,14 @@
})
.bind('destroy.pager', function(){
destroyPager(table, c);
})
.bind('update.pager', function(){
hideRows(table, c);
});
});
};
}
}()
});
// extend plugin scope
$.fn.extend({

File diff suppressed because one or more lines are too long

View File

@ -1,413 +0,0 @@
/*!
* TableSorter 2.3.11
* https://github.com/Mottie/tablesorter/
*
* Dual licensed: MIT & GPLv2
* Original Copyright (c) 2007 Christian Bach
* Date: Mon Jul 16 23:06:22 UTC 2012
*/
/* =======================================================================
theme.blue.css
========================================================================== */
table.tablesorter-blue {
width: 100%;
font: 11px/18px Arial, Sans-serif;
text-align: left;
background-color: #cdcdcd;
border-spacing: 0;
}
table.tablesorter-blue,
table.tablesorter-blue th,
table.tablesorter-blue td {
border: #cdcdcd 1px solid;
}
table.tablesorter-blue th {
padding: 4px;
font: 12px/18px Arial, Sans-serif;
color: #000;
background-color: #99bfe6;
border-collapse: collapse;
}
table.tablesorter-blue .header,
table.tablesorter-blue .tablesorter-header {
padding: 4px 20px 4px 4px;
cursor: pointer;
/* black double arrow */
background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
/* white double arrow */
/* background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAAP///////yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==); */
/* image */
/* background-image: url(black-bg.gif); */
background-position: center right;
background-repeat: no-repeat;
}
table.tablesorter-blue tbody td {
padding: 4px;
color: #3d3d3d;
vertical-align: top;
background-color: #fff;
}
table.tablesorter-blue th.headerSortUp,
table.tablesorter-blue th.tablesorter-headerSortUp {
background-color: #9fbfdf;
/* black asc arrow */
background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
/* white asc arrow */
/* background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAAP///////yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7); */
/* image */
/* background-image: url(black-asc.gif); */
}
table.tablesorter-blue th.headerSortDown,
table.tablesorter-blue th.tablesorter-headerSortDown {
background-color: #8cb3d9;
/* black desc arrow */
background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);
/* white desc arrow */
/* background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAAP///////yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7); */
/* image */
/* background-image: url(black-desc.gif); */
}
/* hovered row colors */
table.tablesorter-blue tbody tr:hover td,
table.tablesorter-blue tbody tr.even:hover td {
background: #d9d9d9;
}
table.tablesorter-blue tbody tr.odd:hover td {
background: #bfbfbf;
}
/* Zebra Widget - row alternating colors */
table.tablesorter-blue tr.odd td {
background-color: #ebf2fa;
}
table.tablesorter-blue tr.even td {
background-color: #fff;
}
/* Column Widget - column sort colors */
.tablesorter-blue td.primary,
.tablesorter-blue tr.odd td.primary {
background-color: #99b3e6;
}
.tablesorter-blue tr.even td.primary {
background-color: #c2d1f0;
}
.tablesorter-blue td.secondary,
.tablesorter-blue tr.odd td.secondary {
background-color: #c2d1f0;
}
.tablesorter-blue tr.even td.secondary {
background-color: #d6e0f5;
}
.tablesorter-blue td.tertiary,
.tablesorter-blue tr.odd td.tertiary {
background-color: #d6e0f5;
}
.tablesorter-blue tr.even td.tertiary {
background-color: #ebf0fa;
}
/* filter widget */
table.tablesorter-blue input.tablesorter-filter,
table.tablesorter-blue select.tablesorter-filter {
width: 95%;
height: inherit;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
table.tablesorter-blue tr.tablesorter-filter,
table.tablesorter-blue tr.tablesorter-filter td {
text-align: center;
background: #fff;
}
table.tablesorter-blue input.tablesorter-filter.disabled,
table.tablesorter-blue select.tablesorter-filter.disabled {
opacity: 0.5;
filter: alpha(opacity=50);
}
/* ======================================================================= */
/* =======================================================================
theme.green.css
========================================================================== */
table.tablesorter-green {
width: 100%;
font: 12px/16px Arial;
text-align: left;
background-color: #cdcdcd;
border-spacing: 0;
}
table.tablesorter-green,
table.tablesorter-green th,
table.tablesorter-green td {
border: #cdcdcd 1px solid;
}
table.tablesorter-green th {
padding: 5px;
border-collapse: collapse;
}
table.tablesorter-green td {
padding: 5px;
color: #3d3d3d;
}
table.tablesorter-green thead tr,
table.tablesorter-green tfoot tr {
background: url(bkgd.png) center center repeat-x;
}
table.tablesorter-green th.header,
table.tablesorter-green th.tablesorter-header {
height: auto;
padding: 9px;
cursor: pointer;
background: transparent;
border-right: #cdcdcd 1px solid;
}
table.tablesorter-green th.header span:first-child,
table.tablesorter-green th.tablesorter-header .tablesorter-header-inner {
padding: 2px 0 2px 25px;
background: url(none.png) no-repeat;
}
table.tablesorter-green th.headerSortUp span:first-child,
table.tablesorter-green th.tablesorter-headerSortUp .tablesorter-header-inner {
background: url(asc.png) no-repeat;
}
table.tablesorter-green th.headerSortDown span:first-child,
table.tablesorter-green th.tablesorter-headerSortDown .tablesorter-header-inner {
background: url(desc.png) no-repeat;
}
/* hovered row colors */
table.tablesorter-green tbody tr:hover td,
table.tablesorter-green tbody tr.even:hover td {
background: #dfe5d7;
}
table.tablesorter-green tbody tr.odd:hover td {
background: #e9f0e2;
}
/* Zebra Widget - row alternating colors */
table.tablesorter-green tr.odd td {
background-color: #ebfaeb;
}
table.tablesorter-green tr.even td {
background-color: #fff;
}
/* Column Widget - column sort colors */
.tablesorter-green td.primary,
.tablesorter-green tr.odd td.primary {
background-color: #99e6a6;
}
.tablesorter-green tr.even td.primary {
background-color: #c2f0c9;
}
.tablesorter-green td.secondary,
.tablesorter-green tr.odd td.secondary {
background-color: #c2f0c9;
}
.tablesorter-green tr.even td.secondary {
background-color: #d6f5db;
}
.tablesorter-green td.tertiary,
.tablesorter-green tr.odd td.tertiary {
background-color: #d6f5db;
}
.tablesorter-green tr.even td.tertiary {
background-color: #ebfaed;
}
/* Filter Widget */
table.tablesorter-green input.tablesorter-filter,
table.tablesorter-green select.tablesorter-filter {
width: 95%;
height: inherit;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
table.tablesorter-green tr.tablesorter-filter,
table.tablesorter-green tr.tablesorter-filter td {
text-align: center;
background: #fff;
}
table.tablesorter-green input.tablesorter-filter.disabled,
table.tablesorter-green select.tablesorter-filter.disabled {
opacity: 0.5;
filter: alpha(opacity=50);
}
/* ======================================================================= */
/* =======================================================================
theme.ice.css
========================================================================== */
table.tablesorter-ice {
width: 100%;
margin-right: auto;
margin-left: auto;
font: 11px/18px Arial, Sans-serif;
text-align: left;
background-color: #fff;
border-collapse: collapse;
border-spacing: 0;
}
table.tablesorter-ice th {
font: bold 13px/20px Arial, Sans-serif;
color: #000;
text-align: left;
background: #f6f8f9;
border: 1px solid #ccc;
}
table.tablesorter-ice td {
padding: 4px;
color: #333;
vertical-align: top;
border: 1px solid #ccc;
}
table.tablesorter-ice .header,
table.tablesorter-ice .tablesorter-header {
padding: 4px 18px 4px 4px;
cursor: pointer;
background: #f6f8f9 url(ice-none.gif) no-repeat center right;
}
table.tablesorter-ice th.headerSortUp,
table.tablesorter-ice th.tablesorter-headerSortUp {
background: #ebedee url(ice-asc.gif) no-repeat center right;
}
table.tablesorter-ice th.headerSortDown,
table.tablesorter-ice th.tablesorter-headerSortDown {
background: #ebedee url(ice-desc.gif) no-repeat center right;
}
/* hovered row colors */
table.tablesorter-ice tbody tr:hover td,
table.tablesorter-ice tbody tr.even:hover td,
table.tablesorter-ice tbody tr.odd:hover td {
background: #ebf2fa;
}
/* Zebra Widget - row alternating colors */
table.tablesorter-ice tr.odd td {
background-color: #dfdfdf;
}
table.tablesorter-ice tr.even td {
background-color: #efefef;
}
/* Column Widget - column sort colors */
.tablesorter-ice td.primary,
.tablesorter-ice tr.odd td.primary {
background-color: #9ae5e5;
}
.tablesorter-ice tr.even td.primary {
background-color: #c2f0f0;
}
.tablesorter-ice td.secondary,
.tablesorter-ice tr.odd td.secondary {
background-color: #c2f0f0;
}
.tablesorter-ice tr.even td.secondary {
background-color: #d5f5f5;
}
.tablesorter-ice td.tertiary,
.tablesorter-ice tr.odd td.tertiary {
background-color: #d5f5f5;
}
.tablesorter-ice tr.even td.tertiary {
background-color: #ebfafa;
}
/* Filter Widget */
table.tablesorter-ice input.tablesorter-filter {
width: 100%;
height: inherit;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
table.tablesorter-ice tr.tablesorter-filter,
table.tablesorter-ice tr.tablesorter-filter td {
text-align: center;
background: #eee;
}
table.tablesorter-ice input.tablesorter-filter.disabled,
table.tablesorter-ice select.tablesorter-filter.disabled {
opacity: 0.5;
filter:alpha(opacity=50);
}
/* StickyHeaders Widget */
table.tablesorter-ice thead tr.tablesorter-stickyHeader {
padding: 2px 1px;
background-color: #fff;
}
/* fix messed up offset by sticky header calc */
table.tablesorter-ice thead tr.tablesorter-stickyHeader th.tablesorter-header {
padding: 4px 18px 4px 3px;
}
/* ======================================================================= */
/* =======================================================================
uitheme.jui.css
========================================================================== */
table.tablesorter-uitheme {
width: 100%;
font: 11px/18px Arial, Sans-serif;
text-align: left;
padding: 5px;
}
table.tablesorter-uitheme thead tr th,
table.tablesorter-uitheme tfoot tr th {
border-collapse: collapse;
font-size: 8pt;
padding: 4px;
}
table.tablesorter-uitheme thead tr th {
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
white-space: normal;
/* UI hover and active states make the font normal and the table resizes, this fixes it */
font-weight: bold !important;
}
table.tablesorter-uitheme thead tr th .tablesorter-inner {
position: relative;
padding-right: 20px; /* wider than the icon */
}
table.tablesorter-uitheme thead tr th .ui-icon {
position: absolute;
right: 3px;
top: 50%;
margin-top: -8px; /* half the icon height; older IE doesn't like this */
}
table.tablesorter-uitheme tbody td {
padding: 4px;
vertical-align: top;
}
/* This allows you to use ui-state-default as the zebra stripe color */
table.tablesorter-uitheme tr.ui-state-default {
background-image: url();
font-weight: normal;
}
/* Filter Widget */
table.tablesorter-uitheme input.tablesorter-filter,
table.tablesorter-uitheme select.tablesorter-filter {
width: 95%;
height: inherit;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
table.tablesorter-uitheme tr.tablesorter-filter,
table.tablesorter-uitheme tr.tablesorter-filter td {
text-align: center;
}
table.tablesorter-uitheme input.tablesorter-filter.disabled,
table.tablesorter-uitheme select.tablesorter-filter.disabled {
opacity: 0.5;
filter: alpha(opacity=50);
}
/* ======================================================================= */

View File

@ -60,9 +60,9 @@
}
/* hovered row colors */
.tablesorter-blackice tbody tr:hover td,
.tablesorter-blackice tbody tr.even:hover td,
.tablesorter-blackice tbody tr.odd:hover td {
.tablesorter-blackice tbody > tr:hover > td,
.tablesorter-blackice tbody > tr.even:hover > td,
.tablesorter-blackice tbody > tr.odd:hover > td {
background: #000;
}

View File

@ -87,17 +87,17 @@
you'll need to add additional lines for
rows with more than 2 child rows
*/
.tablesorter-blue tbody tr:hover td,
.tablesorter-blue tbody tr:hover + tr.tablesorter-childRow td,
.tablesorter-blue tbody tr:hover + tr.tablesorter-childRow + tr.tablesorter-childRow td,
.tablesorter-blue tbody tr.even:hover td,
.tablesorter-blue tbody tr.even:hover + tr.tablesorter-childRow td,
.tablesorter-blue tbody tr.even:hover + tr.tablesorter-childRow + tr.tablesorter-childRow td {
.tablesorter-blue tbody > tr:hover > td,
.tablesorter-blue tbody > tr:hover + tr.tablesorter-childRow > td,
.tablesorter-blue tbody > tr:hover + tr.tablesorter-childRow + tr.tablesorter-childRow > td,
.tablesorter-blue tbody > tr.even:hover > td,
.tablesorter-blue tbody > tr.even:hover + tr.tablesorter-childRow > td,
.tablesorter-blue tbody > tr.even:hover + tr.tablesorter-childRow + tr.tablesorter-childRow > td {
background: #d9d9d9;
}
.tablesorter-blue tbody tr.odd:hover td,
.tablesorter-blue tbody tr.odd:hover + tr.tablesorter-childRow td,
.tablesorter-blue tbody tr.odd:hover + tr.tablesorter-childRow + tr.tablesorter-childRow td {
.tablesorter-blue tbody > tr.odd:hover > td,
.tablesorter-blue tbody > tr.odd:hover + tr.tablesorter-childRow > td,
.tablesorter-blue tbody > tr.odd:hover + tr.tablesorter-childRow + tr.tablesorter-childRow > td {
background: #bfbfbf;
}

View File

@ -25,10 +25,15 @@
box-shadow: inset 0 1px 0 white;
}
.tablesorter-bootstrap .tablesorter-header-inner {
position: relative;
padding: 4px 18px 4px 4px;
}
/* bootstrap uses <i> for icons */
.tablesorter-bootstrap .tablesorter-header i {
position: absolute;
right: 5px;
right: 2px;
top: 50%;
margin-top: -7px; /* half the icon height; older IE doesn't like this */
width: 14px;
@ -45,8 +50,8 @@
.tablesorter-bootstrap tr.odd td {
background-color: #f9f9f9;
}
.tablesorter-bootstrap .odd:hover td,
.tablesorter-bootstrap .even:hover td {
.tablesorter-bootstrap tbody > .odd:hover > td,
.tablesorter-bootstrap tbody > .even:hover > td {
background-color: #f5f5f5;
}
.tablesorter-bootstrap tr.even td {

View File

@ -55,12 +55,13 @@
padding: 4px;
background-color: #000;
border-bottom: #333 1px solid;
color: #ccc;
}
/* hovered row colors */
.tablesorter-dark tbody tr:hover td,
.tablesorter-dark tbody tr.even:hover td,
.tablesorter-dark tbody tr.odd:hover td {
.tablesorter-dark tbody > tr:hover > td,
.tablesorter-dark tbody > tr.even:hover > td,
.tablesorter-dark tbody > tr.odd:hover > td {
background: #000;
}

View File

@ -61,9 +61,9 @@ Default Theme
}
/* hovered row colors */
.tablesorter-default tbody tr:hover td,
.tablesorter-default tbody tr.even:hover td,
.tablesorter-default tbody tr.odd:hover td {
.tablesorter-default tbody > tr:hover > td,
.tablesorter-default tbody > tr.even:hover > td,
.tablesorter-default tbody > tr.odd:hover > td {
background: #fff;
color: #000;
}

View File

@ -75,9 +75,9 @@
}
/* hovered row colors */
.tablesorter-dropbox tbody tr:hover td,
.tablesorter-dropbox tbody tr.even:hover td,
.tablesorter-dropbox tbody tr.odd:hover td {
.tablesorter-dropbox tbody > tr:hover > td,
.tablesorter-dropbox tbody > tr.even:hover > td,
.tablesorter-dropbox tbody > tr.odd:hover > td {
background-color: rgba(230, 245, 255, 0.3);
border-right: 0;
border-left: 0;

View File

@ -1,87 +0,0 @@
/*************
global css
*************/
.tablesorter {
font: 11px/18px Arial, Sans-serif;
margin: 10px 0 15px;
width: 100%;
text-align: left;
border-spacing: 0;
}
.tablesorter th,
.tablesorter thead td {
border-collapse: collapse;
font: 12px/18px Arial, Sans-serif;
padding: 4px;
}
.tablesorter-header {
cursor: pointer;
white-space: normal;
}
/* needed for Firefox */
.tablesorter .tablesorter-header-inner {
position: relative;
}
.tablesorter tbody td {
padding: 4px;
vertical-align: top;
}
/* table processing indicator */
.tablesorter-processing {
/* background-image: url(icons/loading.gif); */
background-image: url('data:image/gif;base64,R0lGODlhFAAUAKEAAO7u7lpaWgAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQBCgACACwAAAAAFAAUAAACQZRvoIDtu1wLQUAlqKTVxqwhXIiBnDg6Y4eyx4lKW5XK7wrLeK3vbq8J2W4T4e1nMhpWrZCTt3xKZ8kgsggdJmUFACH5BAEKAAIALAcAAAALAAcAAAIUVB6ii7jajgCAuUmtovxtXnmdUAAAIfkEAQoAAgAsDQACAAcACwAAAhRUIpmHy/3gUVQAQO9NetuugCFWAAAh+QQBCgACACwNAAcABwALAAACE5QVcZjKbVo6ck2AF95m5/6BSwEAIfkEAQoAAgAsBwANAAsABwAAAhOUH3kr6QaAcSrGWe1VQl+mMUIBACH5BAEKAAIALAIADQALAAcAAAIUlICmh7ncTAgqijkruDiv7n2YUAAAIfkEAQoAAgAsAAAHAAcACwAAAhQUIGmHyedehIoqFXLKfPOAaZdWAAAh+QQFCgACACwAAAIABwALAAACFJQFcJiXb15zLYRl7cla8OtlGGgUADs=');
background-position: center center;
background-repeat: no-repeat;
/*
position: absolute;
z-index: 1000;
*/
}
/* optional disabled input styling */
.tablesorter-filter-row .disabled {
opacity: 0.5;
filter: alpha(opacity=50);
cursor: not-allowed;
}
/* filter widget */
.tablesorter-filter-row .tablesorter-filter {
width: 95%;
height: inherit;
margin: 0;
padding: 0;
background-color: #fff;
color: #333;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.tablesorter-filter-row td {
background: #eee;
}
.tablesorter-filter-row.hideme td {
margin: 0;
height: 0;
line-height: 0;
overflow: hidden;
-webkit-transition: height 0.2s ease;
-moz-transition: height 0.2s ease;
-o-transition: height 0.2s ease;
transition: height 0.2s ease;
}
.tablesorter-filter-row.hideme .tablesorter-filter {
height: 1px;
min-height: 0;
border: 0;
padding: 0;
margin: 0;
-webkit-transition: height 0.2s ease;
-moz-transition: height 0.2s ease;
-o-transition: height 0.2s ease;
transition: height 0.2s ease;
}

View File

@ -65,17 +65,17 @@
you'll need to add additional lines for
rows with more than 2 child rows
*/
.tablesorter-green tbody tr:hover td,
.tablesorter-green tbody tr:hover + tr.tablesorter-childRow td,
.tablesorter-green tbody tr:hover + tr.tablesorter-childRow + tr.tablesorter-childRow td,
.tablesorter-green tbody tr.even:hover td,
.tablesorter-green tbody tr.even:hover + tr.tablesorter-childRow td,
.tablesorter-green tbody tr.even:hover + tr.tablesorter-childRow + tr.tablesorter-childRow td {
.tablesorter-green tbody > tr:hover > td,
.tablesorter-green tbody > tr:hover + tr.tablesorter-childRow > td,
.tablesorter-green tbody > tr:hover + tr.tablesorter-childRow + tr.tablesorter-childRow > td,
.tablesorter-green tbody > tr.even:hover > td,
.tablesorter-green tbody > tr.even:hover + tr.tablesorter-childRow > td,
.tablesorter-green tbody > tr.even:hover + tr.tablesorter-childRow + tr.tablesorter-childRow > td {
background: #d9d9d9;
}
.tablesorter-green tbody tr.odd:hover td,
.tablesorter-green tbody tr.odd:hover + tr.tablesorter-childRow td,
.tablesorter-green tbody tr.odd:hover + tr.tablesorter-childRow + tr.tablesorter-childRow td {
.tablesorter-green tbody > tr.odd:hover > td,
.tablesorter-green tbody > tr.odd:hover + tr.tablesorter-childRow > td,
.tablesorter-green tbody > tr.odd:hover + tr.tablesorter-childRow + tr.tablesorter-childRow > td {
background: #bfbfbf;
}

View File

@ -41,8 +41,9 @@
width: 18px;
height: 10px;
position: absolute;
right: 5px;
top: 20%;
right: 2px;
top: 50%;
margin-top: -10px;
/* white (unsorted) double arrow */
background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAAP///////yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
background-repeat: no-repeat;
@ -101,17 +102,17 @@
you'll need to add additional lines for
rows with more than 2 child rows
*/
.tablesorter-grey tbody tr:hover td,
.tablesorter-grey tbody tr:hover + tr.tablesorter-childRow td,
.tablesorter-grey tbody tr:hover + tr.tablesorter-childRow + tr.tablesorter-childRow td,
.tablesorter-grey tbody tr.even:hover td,
.tablesorter-grey tbody tr.even:hover + tr.tablesorter-childRow td,
.tablesorter-grey tbody tr.even:hover + tr.tablesorter-childRow + tr.tablesorter-childRow td {
.tablesorter-grey tbody > tr:hover > td,
.tablesorter-grey tbody > tr:hover + tr.tablesorter-childRow > td,
.tablesorter-grey tbody > tr:hover + tr.tablesorter-childRow + tr.tablesorter-childRow > td,
.tablesorter-grey tbody > tr.even:hover > td,
.tablesorter-grey tbody > tr.even:hover + tr.tablesorter-childRow > td,
.tablesorter-grey tbody > tr.even:hover + tr.tablesorter-childRow + tr.tablesorter-childRow > td {
background: #134b78;
}
.tablesorter-grey tbody tr.odd:hover td,
.tablesorter-grey tbody tr.odd:hover + tr.tablesorter-childRow td,
.tablesorter-grey tbody tr.odd:hover + tr.tablesorter-childRow + tr.tablesorter-childRow td {
.tablesorter-grey tbody > tr.odd:hover > td,
.tablesorter-grey tbody > tr.odd:hover + tr.tablesorter-childRow > td,
.tablesorter-grey tbody > tr.odd:hover + tr.tablesorter-childRow + tr.tablesorter-childRow > td {
background: #134b78;
}

View File

@ -63,9 +63,9 @@
}
/* hovered row colors */
.tablesorter-ice tbody tr:hover td,
.tablesorter-ice tbody tr.even:hover td,
.tablesorter-ice tbody tr.odd:hover td {
.tablesorter-ice tbody > tr:hover > td,
.tablesorter-ice tbody > tr.even:hover > td,
.tablesorter-ice tbody > tr.odd:hover > td {
background: #ebf2fa;
}

727
docs/css/bootstrap.min.css vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -15,10 +15,12 @@ table.options .property{width:115px;}
table.options .type{width:80px; }
table.options .defaults{width:200px;}
table.options .examples{width:60px;}
table.compatibility { width: 50%; float: right; font-size: .8em; margin-left: 20px; }
table.compatibility th,table.compatibility td { text-align: center; padding: 2px; }
pre,#display{overflow-x:auto;padding:15px;border:1px solid #ddd;border-left-width:5px;}
pre,#display,code.hilight{background-color:#eee;color:#333;font-size:small;list-style:none;}
code.hilight{padding: 1px 5px;}
a code.hilight {text-decoration:underline;}
pre,#display,code{background-color:#eee;color:#333;font-size:small;list-style:none;}
code{padding: 1px 5px;}
a code {text-decoration:underline;}
pre.normal{background-color:transparent;border:none;border-left-width:0;overflow-x:auto;}
#logo{background:url(images/jq.png);display:block;float:right;height:31px;margin-right:10px;margin-top:10px;width:110px;}
#main{margin:0 20px 20px;padding:0 15px 15px 0;clear:both;}
@ -47,7 +49,7 @@ p.tip em {padding: 2px; background-color: #6cf; color: #fff;}
span.tip em {padding: 0 2px;background-color: #00ce53; color: #fff; font-size:90%; }
div.digg {float: right;}
.next-up { padding-top: 10px; font-size: 90%; }
.narrow-block { width: 50%; margin: 0 auto; }
.narrow-block { width: 50%; margin: 50px auto; }
.spacer { height: 800px; }
.right { text-align:right; }
#pager-demo th.remove { width: 20px; } /* pager demo */
@ -59,3 +61,6 @@ span.deprecated { background: #a00; color: #fff; padding: 1px 3px; }
.clear { clear: both; }
.download { color: #050505; text-decoration: none; padding: 3px 10px; border: 1px solid #ddd; background: -moz-linear-gradient( top, #ddd 0%, #bbb 50%, #aaa 50%, #bbb); background: -webkit-gradient( linear, left top, left bottom, from(#ddd), color-stop(0.50, #bbb), color-stop(0.50, #aaa), to(#bbb)); border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; }
.download:hover { background: -moz-linear-gradient( top, #dddddd 0%, #dddddd 50%, #cccccc 50%, #dddddd); background: -webkit-gradient( linear, left top, left bottom, from(#dddddd), color-stop(0.50, #dddddd), color-stop(0.50, #cccccc), to(#dddddd)); }
.bootstrap_buttons button { margin: 5px 0 0 0; }
#main .ui-accordion-header a { font-size: 14px; margin-left: 24px; }
#main .ui-accordion-content { font-size: 14px; }

View File

@ -14,7 +14,7 @@
<script src="js/docs.js"></script>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/blue/style.css">
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<style>
@ -23,7 +23,7 @@
<script id="js">$(function() {
$("table").tablesorter({ sortList: [[3,1],[0,0]] });
$("table").tablesorter({ theme : 'blue', sortList: [[3,1],[0,0]] });
// Add two new rows using the "addRows" method
// the "update" method doesn't work here because not all

View File

@ -14,12 +14,12 @@
<script src="js/docs.js"></script>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/blue/style.css">
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<script id="js">$(function() {
$("table").tablesorter();
$("table").tablesorter({ theme : 'blue' });
$("#ajax-append").click(function() {

View File

@ -14,13 +14,13 @@
<script src="js/docs.js"></script>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/blue/style.css">
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<script id="js">$(function() {
// call the tablesorter plugin
$("table").tablesorter();
$("table").tablesorter({ theme : 'blue' });
$("button.applyid").click(function(){
// This method needs to be applied after each sort

View File

@ -14,7 +14,7 @@
<script src="js/docs.js"></script>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/blue/style.css">
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<script src="../js/jquery.tablesorter.widgets.js"></script>
@ -22,8 +22,9 @@
$(".tablesorter")
.tablesorter({
theme : 'blue',
// this is the default setting
cssChildRow: "expand-child",
cssChildRow: "tablesorter-childRow",
// initialize zebra and filter widgets
widgets: ["zebra", "filter"],
@ -42,7 +43,7 @@
});
// hide child rows
$('.expand-child td').hide();
$('.tablesorter-childRow td').hide();
// Toggle child row content (td), not hiding the row since we are using rowspan
// Using delegate because the pager plugin rebuilds the table after each page change
@ -51,7 +52,7 @@
// use "nextUntil" to toggle multiple child rows
// toggle table cells instead of the row
$(this).closest('tr').nextUntil('tr:not(.expand-child)').find('td').toggle();
$(this).closest('tr').nextUntil('tr:not(.tablesorter-childRow)').find('td').toggle();
return false;
});
@ -62,8 +63,8 @@
o = !c.filter_childRows;
c.filter_childRows = o;
$('.state').html(o.toString());
// update filter
$('input.tablesorter-filter').trigger('search');
// update filter; include false parameter to force a new search
$('input.tablesorter-filter').trigger('search', false);
});
});</script>
@ -124,230 +125,230 @@
<td>Jul 20, 2007</td>
<td>$972.78</td>
</tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>99700 Bell Road<br>Auburn, California 95603</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>99700 Bell Road<br>Auburn, California 95603</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71775</a></td><td>Cycle Clearance</td><td>PO58159451</td><td>May 6, 2007</td><td>$2,313.13</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>2255 254th Avenue Se<br>Albany, Oregon 97321</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>2255 254th Avenue Se<br>Albany, Oregon 97321</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71776</a></td><td>West Side Mart</td><td>PO19952192051</td><td>May 12, 2007</td><td>$87.09</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>251 The Metro Center<br>Wokingham, England RG41 1QW</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>251 The Metro Center<br>Wokingham, England RG41 1QW</div></td></tr>
<tr><td rowspan="3"><a href="#" class="toggle">SO71777</a></td><td>Demand Distributors</td><td>PO20097113391</td><td>Apr 26, 2007</td><td>$1,267.82</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Judy</div></td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>25102 Springwater<br>Wenatchee, Washington 98801</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Judy</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>25102 Springwater<br>Wenatchee, Washington 98801</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71778</a></td><td>Purchase Mart</td><td>PO19894146890</td><td>Apr 18, 2007</td><td>$1,503.98</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>Wrentham Village<br>Wrentham, Massachusetts 02093</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Wrentham Village<br>Wrentham, Massachusetts 02093</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71779</a></td><td>Initial Bike Company</td><td>PO19633118218</td><td>Dec 20, 2007</td><td>$48,425.55</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>789 West Alameda<br>Westminster, Colorado 80030</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>789 West Alameda<br>Westminster, Colorado 80030</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71780</a></td><td>Nearby Cycle Shop</td><td>PO19604173239</td><td>Aug 29, 2007</td><td>$42,452.65</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>Burgess Hill<br>Edward Way<br>West Sussex, England RH15 9UD</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Burgess Hill<br>Edward Way<br>West Sussex, England RH15 9UD</div></td></tr>
<tr><td rowspan="3"><a href="#" class="toggle">SO71781</a></td><td>Sundry Sporting Goods</td><td>PO19401117806</td><td>Mar 9, 2008</td><td>$29,262.41</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Rudolph</div></td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>595 Burning Street<br>Vancouver, British Columbia V7L 4J4</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Rudolph</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>595 Burning Street<br>Vancouver, British Columbia V7L 4J4</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71782</a></td><td>Professional Sales and Service</td><td>PO19372114749</td><td>Jul 27, 2007</td><td>$43,962.79</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>57251 Serene Blvd<br>Van Nuys, California 91411</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>57251 Serene Blvd<br>Van Nuys, California 91411</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71783</a></td><td>Eastside Department Store</td><td>PO19343113609</td><td>May 15, 2007</td><td>$92,663.56</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>9992 Whipple Rd<br>Union City, California 94587</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>9992 Whipple Rd<br>Union City, California 94587</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71784</a></td><td>Action Bicycle Specialists</td><td>PO19285135919</td><td>Nov 30, 2007</td><td>$119,960.82</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>Warrington Ldc Unit 25/2<br>Woolston, England WA1 4SY</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Warrington Ldc Unit 25/2<br>Woolston, England WA1 4SY</div></td></tr>
<tr><td rowspan="3"><a href="#" class="toggle">SO71785</a></td><td>Metro Cycle Shop</td><td>PO19169115427</td><td>Feb 1, 2008</td><td>$39,805.12</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Henry</div></td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>2507 Pacific Ave S<br>Tacoma, Washington 98403</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Henry</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>2507 Pacific Ave S<br>Tacoma, Washington 98403</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71786</a></td><td>Greater Bike Store</td><td>PO17690128583</td><td>Dec 7, 2007</td><td>$4,657.19</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>55 Lakeshore Blvd East<br>Toronto, Ontario M4B 1V6</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>55 Lakeshore Blvd East<br>Toronto, Ontario M4B 1V6</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71787</a></td><td>Fun Toys and Bikes</td><td>PO18038111279</td><td>Jun 1, 2007</td><td>$38,211.11</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>6500 East Grant Road<br>Tucson, Arizona 85701</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>6500 East Grant Road<br>Tucson, Arizona 85701</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71788</a></td><td>Reliable Retail Center</td><td>PO17951176595</td><td>Jul 10, 2007</td><td>$1,806.12</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>609 Evans Avenue<br>Toronto, Ontario M4B 1V4</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>609 Evans Avenue<br>Toronto, Ontario M4B 1V4</div></td></tr>
<tr><td rowspan="3"><a href="#" class="toggle">SO71789</a></td><td>Eastside Parts Shop</td><td>PO17516128941</td><td>May 22, 2007</td><td>$143.50</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Andrew</div></td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>7000 Victoria Park Avenue<br>Toronto, Ontario M4B 1V4</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Andrew</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>7000 Victoria Park Avenue<br>Toronto, Ontario M4B 1V4</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71790</a></td><td>Successful Sales Company</td><td>PO17487184338</td><td>Apr 15, 2007</td><td>$5,306.48</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>7009 Sw Hall Blvd.<br>Tigard, Oregon 97223</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>7009 Sw Hall Blvd.<br>Tigard, Oregon 97223</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71791</a></td><td>Convenient Sales and Service</td><td>PO17139191080</td><td>Nov 14, 2007</td><td>$26,692.85</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>950 Gateway Street<br>Springfield, Oregon 97477</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>950 Gateway Street<br>Springfield, Oregon 97477</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71792</a></td><td>Corner Bicycle Supply</td><td>PO17545115036</td><td>Mar 17, 2008</td><td>$67,683.32</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>2511 Baker Road<br>Toronto, Ontario M4B 1V7</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>2511 Baker Road<br>Toronto, Ontario M4B 1V7</div></td></tr>
<tr><td rowspan="3"><a href="#" class="toggle">SO71793</a></td><td>Mountain Toy Store</td><td>PO17226152414</td><td>Sep 5, 2007</td><td>$1,943.93</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Marvin</div></td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>First Colony Mall<br>Sugar Land, Texas 77478</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Marvin</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>First Colony Mall<br>Sugar Land, Texas 77478</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71794</a></td><td>Vigorous Exercise Company</td><td>PO17574111985</td><td>Dec 14, 2007</td><td>$87,770.74</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>9950 Ferrand Drive, 9th Floor<br>Toronto, Ontario M4B 1V4</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>9950 Ferrand Drive, 9th Floor<br>Toronto, Ontario M4B 1V4</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71795</a></td><td>Bike Part Wholesalers</td><td>PO17371184627</td><td>Feb 6, 2008</td><td>$41,224.10</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>254a Baker Street<br>Botany<br>Sydney, New South Wales 1002</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>254a Baker Street<br>Botany<br>Sydney, New South Wales 1002</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71796</a></td><td>Extreme Riding Supplies</td><td>PO17052159664</td><td>Jul 13, 2007</td><td>$63,686.27</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>Riverside<br>Sherman Oaks, California 91403</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Riverside<br>Sherman Oaks, California 91403</div></td></tr>
<tr><td rowspan="3"><a href="#" class="toggle">SO71797</a></td><td>Riding Cycles</td><td>PO16501134889</td><td>Dec 2, 2007</td><td>$86,222.81</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Jon</div></td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>Galashiels<br>Liverpool, England L4 4HB</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Jon</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Galashiels<br>Liverpool, England L4 4HB</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71798</a></td><td>Work and Play Association</td><td>PO16994135863</td><td>Jan 20, 2008</td><td>$40,048.63</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>2533 Eureka Rd.<br>Southgate, Michigan 48195</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>2533 Eureka Rd.<br>Southgate, Michigan 48195</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71799</a></td><td>Metro Sports Equipment</td><td>PO15486196616</td><td>Oct 18, 2007</td><td>$23,080.67</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>6, rue des Pyrenees<br>Saint Ouen, Loir et Cher 41100</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>6, rue des Pyrenees<br>Saint Ouen, Loir et Cher 41100</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71800</a></td><td>Quick Parts and Service</td><td>PO15544127760</td><td>Feb 19, 2008</td><td>$37,253.44</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>99954 Boul. Laurier, Local 060, Place<br>Sainte-Foy, Quebec G1W</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>99954 Boul. Laurier, Local 060, Place<br>Sainte-Foy, Quebec G1W</div></td></tr>
<tr><td rowspan="3"><a href="#" class="toggle">SO71801</a></td><td>Getaway Inn</td><td>PO15515173664</td><td>Mar 6, 2008</td><td>$47,720.54</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Min</div></td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>54, avenue des Ternes<br>Saint Ouen, Loir et Cher 41100</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Min</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>54, avenue des Ternes<br>Saint Ouen, Loir et Cher 41100</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71802</a></td><td>Blue-Ribbon Bike Company</td><td>PO15457184141</td><td>Sep 22, 2007</td><td>$42,013.42</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>790 Shelbyville Road<br>Saint Matthews, Kentucky 40207</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>790 Shelbyville Road<br>Saint Matthews, Kentucky 40207</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71803</a></td><td>World of Bikes</td><td>PO15341174104</td><td>Mar 1, 2008</td><td>$43,964.97</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>660 Lindbergh<br>Saint Louis, Missouri 63103</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>660 Lindbergh<br>Saint Louis, Missouri 63103</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71804</a></td><td>Bikes for Two</td><td>PO14906114459</td><td>Aug 18, 2007</td><td>$2,431.21</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>63 West Beaver Creek<br>Richmond Hill, Ontario L4E 3M5</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>63 West Beaver Creek<br>Richmond Hill, Ontario L4E 3M5</div></td></tr>
<tr><td rowspan="3"><a href="#" class="toggle">SO71805</a></td><td>Nationwide Supply</td><td>PO14703194514</td><td>Jun 27, 2007</td><td>$76,535.55</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Pilar</div></td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>4250 Concord Road<br>Rhodes, New South Wales 2138</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Pilar</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>4250 Concord Road<br>Rhodes, New South Wales 2138</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71806</a></td><td>Valley Toy Store</td><td>PO14790111844</td><td>Jun 2, 2007</td><td>$20,261.90</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>252851 Rowan Place<br>Richmond, British Columbia V6B 3P7</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>252851 Rowan Place<br>Richmond, British Columbia V6B 3P7</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71807</a></td><td>Courteous Bicycle Specialists</td><td>PO14935135211</td><td>Oct 28, 2007</td><td>$656.84</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>995 Crescent<br>Richmond Hill, Ontario L4E 3M5</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>995 Crescent<br>Richmond Hill, Ontario L4E 3M5</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71808</a></td><td>Odometers and Accessories Company</td><td>PO14761198562</td><td>Oct 28, 2007</td><td>$42,231.51</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>253711 Mayfield Place, Unit 150<br>Richmond, British Columbia V6B 3P7</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>253711 Mayfield Place, Unit 150<br>Richmond, British Columbia V6B 3P7</div></td></tr>
<tr><td rowspan="3"><a href="#" class="toggle">SO71809</a></td><td>Fitness Bike Accessories</td><td>PO14645153239</td><td>Jan 12, 2008</td><td>$3,743.42</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: John</div></td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>Level 7<br>114 Albert Road<br>Rhodes, New South Wales 2138</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: John</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Level 7<br>114 Albert Road<br>Rhodes, New South Wales 2138</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71810</a></td><td>Two-Seater Bikes</td><td>PO13804148315</td><td>May 27, 2007</td><td>$1,093.53</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>5700 Legacy Dr<br>Plano, Texas 75074</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>5700 Legacy Dr<br>Plano, Texas 75074</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71811</a></td><td>Racing Toys</td><td>PO13717180066</td><td>Feb 26, 2008</td><td>$3,493.04</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>9228 Via Del Sol<br>Phoenix, Arizona 85004</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>9228 Via Del Sol<br>Phoenix, Arizona 85004</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71812</a></td><td>Fashionable Bikes and Accessories</td><td>PO13543115747</td><td>Apr 28, 2007</td><td>$35,146.04</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>Sports Store At Park City<br>Park City, Utah 84098</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Sports Store At Park City<br>Park City, Utah 84098</div></td></tr>
<tr><td rowspan="3"><a href="#" class="toggle">SO71813</a></td><td>Liquidation Sales</td><td>PO13630186295</td><td>Jan 17, 2008</td><td>$12,707.47</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Jenny</div></td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>No. 6<br>Millenium Court<br>Perth, South Australia 6006</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Jenny</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>No. 6<br>Millenium Court<br>Perth, South Australia 6006</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71814</a></td><td>Our Sporting Goods Store</td><td>PO12818173864</td><td>May 31, 2007</td><td>$7,517.54</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>6030 Conroy Road<br>Ottawa, Ontario K4B 1S3</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>6030 Conroy Road<br>Ottawa, Ontario K4B 1S3</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71815</a></td><td>Thrifty Parts and Sales</td><td>PO13021155785</td><td>Jan 1, 2008</td><td>$1,261.44</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>Oxnard Outlet<br>Oxnard, California 93030</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Oxnard Outlet<br>Oxnard, California 93030</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71816</a></td><td>Engineered Bike Systems</td><td>PO12992180445</td><td>Jul 29, 2007</td><td>$3,754.97</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>123 Camelia Avenue<br>Oxnard, California 93030</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>123 Camelia Avenue<br>Oxnard, California 93030</div></td></tr>
<tr><td rowspan="3"><a href="#" class="toggle">SO71817</a></td><td>Home Town Bike Store</td><td>PO12905185178</td><td>May 21, 2007</td><td>$689.96</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Danielle</div></td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>955 Green Valley Crescent<br>Ottawa, Ontario K4B 1S1</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Danielle</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>955 Green Valley Crescent<br>Ottawa, Ontario K4B 1S1</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71818</a></td><td>Utilitarian Sporting Goods</td><td>PO12470139718</td><td>Apr 25, 2007</td><td>$61,356.31</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>4635 S. Harrison Blvd.<br>Ogden, Utah 84401</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>4635 S. Harrison Blvd.<br>Ogden, Utah 84401</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71819</a></td><td>Fabrikam Inc., West</td><td>PO12354153257</td><td>May 19, 2007</td><td>$41,746.15</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>46460 West Oaks Drive<br>Novi, Michigan 48375</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>46460 West Oaks Drive<br>Novi, Michigan 48375</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71820</a></td><td>Racing Sales and Service</td><td>PO12673129941</td><td>Apr 26, 2007</td><td>$68,686.02</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>510, avenue de Villiers<br>Orleans, Loiret 45000</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>510, avenue de Villiers<br>Orleans, Loiret 45000</div></td></tr>
<tr><td rowspan="3"><a href="#" class="toggle">SO71821</a></td><td>Bike Goods </td><td>PO11977190694</td><td>May 25, 2007</td><td>$5,904.88</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Gary</div></td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>254075 Biscayne Blvd.<br>North Miami Beach, Florida 33162</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Gary</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>254075 Biscayne Blvd.<br>North Miami Beach, Florida 33162</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71822</a></td><td>Popular Bike Lines</td><td>PO11774139099</td><td>Dec 19, 2007</td><td>$31,191.60</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>Level 7<br>80 Arthur Street<br>Newcastle, New South Wales 2300</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Level 7<br>80 Arthur Street<br>Newcastle, New South Wales 2300</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71823</a></td><td>Enterprise Center</td><td>PO11310159994</td><td>Sep 7, 2007</td><td>$2,818.81</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>Kurfürstenstr 574<br>München, Hessen 80074</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Kurfürstenstr 574<br>München, Hessen 80074</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71824</a></td><td>Outdoor Equipment Store</td><td>PO11455162600</td><td>Oct 29, 2007</td><td>$115,117.41</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>6 Cotton Road<br>Nashua, New Hampshire 03064</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>6 Cotton Road<br>Nashua, New Hampshire 03064</div></td></tr>
<tr><td rowspan="3"><a href="#" class="toggle">SO71825</a></td><td>One Bike Company</td><td>PO11165197222</td><td>Dec 28, 2007</td><td>$4,824.62</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Shanay</div></td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>5 place Ville-Marie<br>Montreal, Quebec H1Y 2H7</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Shanay</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>5 place Ville-Marie<br>Montreal, Quebec H1Y 2H7</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71826</a></td><td>Rodeway Bike Store</td><td>PO11397155355</td><td>Oct 29, 2007</td><td>$40,083.06</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>Winterfeldtstr 5557<br>Kreditorenbuchhaltung<br>Münster, Saarland 48001</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Winterfeldtstr 5557<br>Kreditorenbuchhaltung<br>Münster, Saarland 48001</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71827</a></td><td>Metal Processing Company</td><td>PO11107195325</td><td>Aug 22, 2007</td><td>$9,247.52</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>770 Notre Datme Quest Bureau 800<br>Montreal, Quebec H1Y 2H7</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>770 Notre Datme Quest Bureau 800<br>Montreal, Quebec H1Y 2H7</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71828</a></td><td>Grand Industries</td><td>PO11194153355</td><td>Aug 10, 2007</td><td>$52,553.87</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>6333 Cote Vertu<br>Montreal, Quebec H1Y 2H7</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>6333 Cote Vertu<br>Montreal, Quebec H1Y 2H7</div></td></tr>
<tr><td rowspan="3"><a href="#" class="toggle">SO71829</a></td><td>Family Cycle Store</td><td>PO10962123279</td><td>Jul 16, 2007</td><td>$40,095.88</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: James</div></td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>660 Saint-Jacques, Bureau 400<br>Montreal, Quebec H1Y 2H8</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: James</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>660 Saint-Jacques, Bureau 400<br>Montreal, Quebec H1Y 2H8</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71830</a></td><td>Petroleum Products Distributors</td><td>PO10875112195</td><td>Nov 8, 2007</td><td>$55,088.00</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>20225 Lansing Ave<br>Montreal, Quebec H1Y 2H7</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>20225 Lansing Ave<br>Montreal, Quebec H1Y 2H7</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71831</a></td><td>Tachometers and Accessories</td><td>PO10295111084</td><td>Aug 8, 2007</td><td>$2,228.06</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>Wymbush<br>Milton Keynes, England MK8 8DF</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Wymbush<br>Milton Keynes, England MK8 8DF</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71832</a></td><td>Closest Bicycle Store</td><td>PO10353140756</td><td>Sep 3, 2007</td><td>$39,531.61</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>Garamonde Drive, Wymbush<br>PO Box 4023<br>Milton Keynes, England MK8 8ZD</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Garamonde Drive, Wymbush<br>PO Box 4023<br>Milton Keynes, England MK8 8ZD</div></td></tr>
<tr><td rowspan="3"><a href="#" class="toggle">SO71833</a></td><td>Another Bicycle Company</td><td>PO10411123072</td><td>Jan 26, 2008</td><td>$70,377.54</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Stanley</div></td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>567 Sw Mcloughlin Blvd<br>Milwaukie, Oregon 97222</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Stanley</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>567 Sw Mcloughlin Blvd<br>Milwaukie, Oregon 97222</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71834</a></td><td>Rustic Bike Store</td><td>PO377116268</td><td>Feb 22, 2008</td><td>$2,310.51</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>Buergermeister-ulrich-str 3000<br>Buchhaltung<br>Augsburg, Bayern 86150</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Buergermeister-ulrich-str 3000<br>Buchhaltung<br>Augsburg, Bayern 86150</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71835</a></td><td>Running and Cycling Gear</td><td>PO870120974</td><td>Jun 13, 2007</td><td>$71,605.92</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>No. 60 Bellis Fair Parkway<br>Bellingham, Washington 98225</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>No. 60 Bellis Fair Parkway<br>Bellingham, Washington 98225</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71836</a></td><td>Safe Cycles Shop</td><td>PO841118259</td><td>Sep 13, 2007</td><td>$90,216.85</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>2681 Eagle Peak<br>Bellevue, Washington 98004</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>2681 Eagle Peak<br>Bellevue, Washington 98004</div></td></tr>
<tr><td rowspan="3"><a href="#" class="toggle">SO71837</a></td><td>Riders Company</td><td>PO1624180133</td><td>Aug 24, 2007</td><td>$39,989.36</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Kim</div></td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>Tanger Factory<br>Branch, Minnesota 55056</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Kim</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Tanger Factory<br>Branch, Minnesota 55056</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71838</a></td><td>Cycles Sales and Repair</td><td>PO1305123041</td><td>Sep 7, 2007</td><td>$15,165.23</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>3387, rue Marbeuf<br>Bobigny, Seine Saint Denis 93000</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>3387, rue Marbeuf<br>Bobigny, Seine Saint Denis 93000</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71839</a></td><td>Front Runner Bikes</td><td>PO1537119063</td><td>Jan 26, 2008</td><td>$75,173.33</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>DeSouth Square<br>Bradenton, Florida 34205</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>DeSouth Square<br>Bradenton, Florida 34205</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71840</a></td><td>Community Department Stores</td><td>PO1450191043</td><td>Oct 2, 2007</td><td>$1,234.39</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>3639, rue des Grands Champs<br>Boulogne-sur-Mer, Pas de Calais 62200</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>3639, rue des Grands Champs<br>Boulogne-sur-Mer, Pas de Calais 62200</div></td></tr>
<tr><td rowspan="3"><a href="#" class="toggle">SO71841</a></td><td>Rural Cycle Emporium</td><td>PO1798133189</td><td>Nov 23, 2007</td><td>$112,758.77</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Kathleen</div></td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>6388 Lake City Way<br>Burnaby, British Columbia V5A 3A6</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Kathleen</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>6388 Lake City Way<br>Burnaby, British Columbia V5A 3A6</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71842</a></td><td>Price-Cutter Discount Bikes</td><td>PO1740169151</td><td>Nov 22, 2007</td><td>$12.91</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>6700 Boul Taschereau<br>Brossard, Quebec J4Z 1C5</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>6700 Boul Taschereau<br>Brossard, Quebec J4Z 1C5</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71843</a></td><td>Future Bikes</td><td>PO2001122796</td><td>Jun 24, 2007</td><td>$7,775.72</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>67255 - 8th Street N.E., Suite 350<br>Calgary, Alberta T2P 2G8</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>67255 - 8th Street N.E., Suite 350<br>Calgary, Alberta T2P 2G8</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71844</a></td><td>Sales and Supply Company</td><td>PO2813198985</td><td>Jun 12, 2007</td><td>$48,077.41</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>Corporate Ofc A/p<br>123 Fourth Ave<br>Chantilly, Virginia 20151</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Corporate Ofc A/p<br>123 Fourth Ave<br>Chantilly, Virginia 20151</div></td></tr>
<tr><td rowspan="3"><a href="#" class="toggle">SO71845</a></td><td>Trailblazing Sports</td><td>PO2697119362</td><td>Mar 4, 2008</td><td>$45,992.37</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Frank</div></td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>251340 E. South St.<br>Cerritos, California 90703</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Frank</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>251340 E. South St.<br>Cerritos, California 90703</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71846</a></td><td>Sports Store</td><td>PO2378131604</td><td>Jul 2, 2007</td><td>$2,711.41</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>Internet House, 3399 Science Park<br>Cambridge, England CB4 4BZ</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Internet House, 3399 Science Park<br>Cambridge, England CB4 4BZ</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71847</a></td><td>Camping and Sports Store</td><td>PO18502143784</td><td>Jul 15, 2007</td><td>$119,981.15</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>400-25155 West Pender St<br>Vancouver, British Columbia V7L 4J4</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>400-25155 West Pender St<br>Vancouver, British Columbia V7L 4J4</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71848</a></td><td>Locks Company</td><td>PO18763153352</td><td>Nov 9, 2007</td><td>$16,667.88</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>70259 West Sunnyview Ave<br>Visalia, California 93291</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>70259 West Sunnyview Ave<br>Visalia, California 93291</div></td></tr>
<tr><td rowspan="3"><a href="#" class="toggle">SO71849</a></td><td>Principal Bike Company</td><td>PO18125130930</td><td>Jan 18, 2008</td><td>$25,746.16</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Alvaro</div></td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>Mountain Square<br>Upland, California 91786</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Alvaro</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Mountain Square<br>Upland, California 91786</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71850</a></td><td>Quitting Business Distributors</td><td>PO18241134627</td><td>Aug 28, 2007</td><td>$10,492.47</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>University Plaza<br>Tampa, Florida 33602</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>University Plaza<br>Tampa, Florida 33602</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71851</a></td><td>Rapid Bikes</td><td>PO18299133687</td><td>Jun 17, 2007</td><td>$51,104.88</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>992 St Clair Ave East<br>Toronto, Ontario M4B 1V7</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>992 St Clair Ave East<br>Toronto, Ontario M4B 1V7</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71852</a></td><td>Painters Bicycle Specialists</td><td>PO20213171866</td><td>Mar 24, 2008</td><td>$10,406.62</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>9975 Union St.<br>Waterbury, Connecticut 06710</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>9975 Union St.<br>Waterbury, Connecticut 06710</div></td></tr>
<tr><td rowspan="3"><a href="#" class="toggle">SO71853</a></td><td>Famous Bike Shop</td><td>PO18531164420</td><td>May 3, 2007</td><td>$4,578.20</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Jim</div></td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>999 West Georgia St.<br>Vancouver, Ontario V5T 1Y9</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Jim</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>999 West Georgia St.<br>Vancouver, Ontario V5T 1Y9</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71854</a></td><td>Helpful Sales and Repair Service </td><td>PO16385143469</td><td>Nov 11, 2007</td><td>$36,819.69</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>Licensing Account<br>Seaford, Victoria 3198</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Licensing Account<br>Seaford, Victoria 3198</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71855</a></td><td>Self-Contained Cycle Parts Company</td><td>PO18589189353</td><td>Jun 23, 2007</td><td>$429.62</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>12, rue des Grands Champs<br>Verrieres Le Buisson, Essonne 91370</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>12, rue des Grands Champs<br>Verrieres Le Buisson, Essonne 91370</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71856</a></td><td>Transport Bikes</td><td>PO16530177647</td><td>Nov 18, 2007</td><td>$665.43</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>25130 South State Street<br>Sandy, Utah 84070</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>25130 South State Street<br>Sandy, Utah 84070</div></td></tr>
<tr><td rowspan="3"><a href="#" class="toggle">SO71857</a></td><td>First Cycle Store</td><td>PO16269151631</td><td>Jan 4, 2008</td><td>$37,400.41</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Mike</div></td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>25250 N 90th St<br>Scottsdale, Arizona 85257</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Mike</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>25250 N 90th St<br>Scottsdale, Arizona 85257</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71858</a></td><td>Thrilling Bike Tours</td><td>PO16153112278</td><td>Oct 6, 2007</td><td>$15,275.20</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>4660 Rodeo Road<br>Santa Fe, New Mexico 87501</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>4660 Rodeo Road<br>Santa Fe, New Mexico 87501</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71859</a></td><td>Bike World</td><td>PO16182112142</td><td>Apr 11, 2007</td><td>$8,654.14</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>60025 Bollinger Canyon Road<br>San Ramon, California 94583</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>60025 Bollinger Canyon Road<br>San Ramon, California 94583</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71860</a></td><td>Vinyl and Plastic Goods Corporation</td><td>PO17835163979</td><td>Feb 20, 2008</td><td>$3,651.79</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>No. 25800-130 King Street West<br>Toronto, Ontario M4B 1V5</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>No. 25800-130 King Street West<br>Toronto, Ontario M4B 1V5</div></td></tr>
<tr><td rowspan="3"><a href="#" class="toggle">SO71861</a></td><td>Two Bike Shops</td><td>PO14152156429</td><td>Nov 30, 2007</td><td>$2,430.32</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Jim</div></td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>35525-9th Street Sw<br>Puyallup, Washington 98371</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Jim</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>35525-9th Street Sw<br>Puyallup, Washington 98371</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71862</a></td><td>Fad Outlet</td><td>PO14065190039</td><td>Feb 19, 2008</td><td>$1,622.62</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>2550 Ne Sandy Blvd<br>Portland, Oregon 97205</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>2550 Ne Sandy Blvd<br>Portland, Oregon 97205</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71863</a></td><td>Sports Products Store</td><td>PO16124166561</td><td>Apr 30, 2007</td><td>$3,673.32</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>Po Box 252525<br>Santa Ana, California 92701</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Po Box 252525<br>Santa Ana, California 92701</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71864</a></td><td>Good Bike Shop</td><td>PO14268188903</td><td>Oct 9, 2007</td><td>$37,623.76</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>99433 S. Greenbay Rd.<br>Racine, Wisconsin 53182</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>99433 S. Greenbay Rd.<br>Racine, Wisconsin 53182</div></td></tr>
<tr><td rowspan="3"><a href="#" class="toggle">SO71865</a></td><td>Neighborhood Bicycle Storehouse</td><td>PO15109136609</td><td>May 30, 2007</td><td>$290.23</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Cecilia</div></td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>69, boulevard Tremblay<br>Roncq, Nord 59223</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Cecilia</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>69, boulevard Tremblay<br>Roncq, Nord 59223</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71866</a></td><td>Exchange Parts Inc.</td><td>PO14297151936</td><td>Jan 27, 2008</td><td>$43,277.65</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>7700 Green Road<br>Raleigh, North Carolina 27603</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>7700 Green Road<br>Raleigh, North Carolina 27603</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71867</a></td><td>Vigorous Sports Store</td><td>PO13050111529</td><td>Jul 29, 2007</td><td>$1,170.54</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>Banbury<br>Oxon, England OX16 8RS</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Banbury<br>Oxon, England OX16 8RS</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71868</a></td><td>Cycle Merchants</td><td>PO14210134527</td><td>Aug 15, 2007</td><td>$1,932.67</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>575 Rue St Amable<br>Quebec, Quebec G1R</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>575 Rue St Amable<br>Quebec, Quebec G1R</div></td></tr>
<tr><td rowspan="3"><a href="#" class="toggle">SO71869</a></td><td>Certified Sports Supply</td><td>PO14877155420</td><td>Feb 21, 2008</td><td>$143.50</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Gabriele</div></td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>250551 Shellbridge Way<br>Richmond, British Columbia V6B 3P7</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Gabriele</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>250551 Shellbridge Way<br>Richmond, British Columbia V6B 3P7</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71870</a></td><td>Accessories Network</td><td>PO13195134898</td><td>Feb 1, 2008</td><td>$1,903.38</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>699bis, rue des Peupliers<br>Paris, Seine (Paris) 75008</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>699bis, rue des Peupliers<br>Paris, Seine (Paris) 75008</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71871</a></td><td>Remote Bicycle Specialists</td><td>PO14239120760</td><td>Aug 10, 2007</td><td>$2,168.53</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>No. 2000-25080 Beaver Hall Hill<br>Quebec, Quebec G1R</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>No. 2000-25080 Beaver Hall Hill<br>Quebec, Quebec G1R</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71872</a></td><td>First Center</td><td>PO13137112099</td><td>Jan 2, 2008</td><td>$215.91</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>22, rue Lafayette<br>Pantin, Seine Saint Denis 93500</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>22, rue Lafayette<br>Pantin, Seine Saint Denis 93500</div></td></tr>
<tr><td rowspan="3"><a href="#" class="toggle">SO71873</a></td><td>Incomparable Bicycle Store</td><td>PO12325121185</td><td>Jul 5, 2007</td><td>$5,941.29</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Faith</div></td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>99 Edgewater Drive<br>Norwood, Massachusetts 02062</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Faith</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>99 Edgewater Drive<br>Norwood, Massachusetts 02062</div></td></tr>
</tbody>
</table>
@ -384,7 +385,7 @@
&lt;td&gt;Jul 20, 2007&lt;/td&gt;
&lt;td&gt;$972.78&lt;/td&gt;
&lt;/tr&gt;
&lt;tr class=&quot;expand-child&quot;&gt;
&lt;tr class=&quot;tablesorter-childRow&quot;&gt;
&lt;td colspan=&quot;4&quot;&gt;
&lt;div class=&quot;bold&quot;&gt;Shipping Address&lt;/div&gt;
&lt;div&gt;99700 Bell Road&lt;br&gt;Auburn, California 95603&lt;/div&gt;
@ -399,7 +400,7 @@
&lt;td&gt;May 6, 2007&lt;/td&gt;
&lt;td&gt;$2,313.13&lt;/td&gt;
&lt;/tr&gt;
&lt;tr class=&quot;expand-child&quot;&gt;
&lt;tr class=&quot;tablesorter-childRow&quot;&gt;
&lt;td colspan=&quot;4&quot;&gt;
&lt;div class=&quot;bold&quot;&gt;Shipping Address&lt;/div&gt;
&lt;div&gt;2255 254th Avenue Se&lt;br&gt;Albany, Oregon 97321&lt;/div&gt;

View File

@ -14,7 +14,7 @@
<script src="js/docs.js"></script>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/blue/style.css">
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<!-- Tablesorter: optional -->
@ -23,12 +23,13 @@
<script id="js">$(function() {
// hide child rows
$('.expand-child td').hide();
$('.tablesorter-childRow td').hide();
$(".tablesorter")
.tablesorter({
theme : 'blue',
// this is the default setting
cssChildRow: "expand-child"
cssChildRow: "tablesorter-childRow"
})
.tablesorterPager({
container: $("#pager"),
@ -36,7 +37,7 @@
})
.bind('pagerChange', function(){
// hide child rows after pager update
$('.expand-child td').hide();
$('.tablesorter-childRow td').hide();
});
// Toggle child row content (td), not hiding the row since we are using rowspan
@ -46,7 +47,7 @@
// use "nextUntil" to toggle multiple child rows
// toggle table cells instead of the row
$(this).closest('tr').nextUntil('tr:not(.expand-child)').find('td').toggle();
$(this).closest('tr').nextUntil('tr:not(.tablesorter-childRow)').find('td').toggle();
return false;
});
@ -65,8 +66,13 @@
<div id="main">
<p class="tip">
<em>NOTE!</em> Click the link in the Order # column to reveal the hidden child row cells
(<a href="http://www.pengoworks.com/workshop/jquery/tablesorter/tablesorter.htm">original demo</a>). This option is available in the original plugin.
<em>NOTE!</em>
<ul>
<li>Click the link in the Order # column to reveal the hidden child row cells
(<a href="http://www.pengoworks.com/workshop/jquery/tablesorter/tablesorter.htm">original demo</a>).</li>
<li>This option is available in the original plugin.</li>
<li>This demo had the default child row class name changed from "expand-child" to "tablesorter-childRow" in v2.4.</li>
</ul>
</p>
<h1>Demo</h1>
@ -98,230 +104,230 @@
<td>Jul 20, 2007</td>
<td>$972.78</td>
</tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>99700 Bell Road<br>Auburn, California 95603</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>99700 Bell Road<br>Auburn, California 95603</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71775</a></td><td>Cycle Clearance</td><td>PO58159451</td><td>May 6, 2007</td><td>$2,313.13</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>2255 254th Avenue Se<br>Albany, Oregon 97321</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>2255 254th Avenue Se<br>Albany, Oregon 97321</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71776</a></td><td>West Side Mart</td><td>PO19952192051</td><td>May 12, 2007</td><td>$87.09</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>251 The Metro Center<br>Wokingham, England RG41 1QW</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>251 The Metro Center<br>Wokingham, England RG41 1QW</div></td></tr>
<tr><td rowspan="3"><a href="#" class="toggle">SO71777</a></td><td>Demand Distributors</td><td>PO20097113391</td><td>Apr 26, 2007</td><td>$1,267.82</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Judy</div></td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>25102 Springwater<br>Wenatchee, Washington 98801</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Judy</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>25102 Springwater<br>Wenatchee, Washington 98801</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71778</a></td><td>Purchase Mart</td><td>PO19894146890</td><td>Apr 18, 2007</td><td>$1,503.98</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>Wrentham Village<br>Wrentham, Massachusetts 02093</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Wrentham Village<br>Wrentham, Massachusetts 02093</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71779</a></td><td>Initial Bike Company</td><td>PO19633118218</td><td>Dec 20, 2007</td><td>$48,425.55</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>789 West Alameda<br>Westminster, Colorado 80030</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>789 West Alameda<br>Westminster, Colorado 80030</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71780</a></td><td>Nearby Cycle Shop</td><td>PO19604173239</td><td>Aug 29, 2007</td><td>$42,452.65</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>Burgess Hill<br>Edward Way<br>West Sussex, England RH15 9UD</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Burgess Hill<br>Edward Way<br>West Sussex, England RH15 9UD</div></td></tr>
<tr><td rowspan="3"><a href="#" class="toggle">SO71781</a></td><td>Sundry Sporting Goods</td><td>PO19401117806</td><td>Mar 9, 2008</td><td>$29,262.41</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Rudolph</div></td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>595 Burning Street<br>Vancouver, British Columbia V7L 4J4</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Rudolph</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>595 Burning Street<br>Vancouver, British Columbia V7L 4J4</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71782</a></td><td>Professional Sales and Service</td><td>PO19372114749</td><td>Jul 27, 2007</td><td>$43,962.79</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>57251 Serene Blvd<br>Van Nuys, California 91411</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>57251 Serene Blvd<br>Van Nuys, California 91411</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71783</a></td><td>Eastside Department Store</td><td>PO19343113609</td><td>May 15, 2007</td><td>$92,663.56</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>9992 Whipple Rd<br>Union City, California 94587</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>9992 Whipple Rd<br>Union City, California 94587</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71784</a></td><td>Action Bicycle Specialists</td><td>PO19285135919</td><td>Nov 30, 2007</td><td>$119,960.82</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>Warrington Ldc Unit 25/2<br>Woolston, England WA1 4SY</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Warrington Ldc Unit 25/2<br>Woolston, England WA1 4SY</div></td></tr>
<tr><td rowspan="3"><a href="#" class="toggle">SO71785</a></td><td>Metro Cycle Shop</td><td>PO19169115427</td><td>Feb 1, 2008</td><td>$39,805.12</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Henry</div></td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>2507 Pacific Ave S<br>Tacoma, Washington 98403</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Henry</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>2507 Pacific Ave S<br>Tacoma, Washington 98403</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71786</a></td><td>Greater Bike Store</td><td>PO17690128583</td><td>Dec 7, 2007</td><td>$4,657.19</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>55 Lakeshore Blvd East<br>Toronto, Ontario M4B 1V6</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>55 Lakeshore Blvd East<br>Toronto, Ontario M4B 1V6</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71787</a></td><td>Fun Toys and Bikes</td><td>PO18038111279</td><td>Jun 1, 2007</td><td>$38,211.11</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>6500 East Grant Road<br>Tucson, Arizona 85701</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>6500 East Grant Road<br>Tucson, Arizona 85701</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71788</a></td><td>Reliable Retail Center</td><td>PO17951176595</td><td>Jul 10, 2007</td><td>$1,806.12</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>609 Evans Avenue<br>Toronto, Ontario M4B 1V4</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>609 Evans Avenue<br>Toronto, Ontario M4B 1V4</div></td></tr>
<tr><td rowspan="3"><a href="#" class="toggle">SO71789</a></td><td>Eastside Parts Shop</td><td>PO17516128941</td><td>May 22, 2007</td><td>$143.50</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Andrew</div></td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>7000 Victoria Park Avenue<br>Toronto, Ontario M4B 1V4</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Andrew</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>7000 Victoria Park Avenue<br>Toronto, Ontario M4B 1V4</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71790</a></td><td>Successful Sales Company</td><td>PO17487184338</td><td>Apr 15, 2007</td><td>$5,306.48</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>7009 Sw Hall Blvd.<br>Tigard, Oregon 97223</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>7009 Sw Hall Blvd.<br>Tigard, Oregon 97223</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71791</a></td><td>Convenient Sales and Service</td><td>PO17139191080</td><td>Nov 14, 2007</td><td>$26,692.85</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>950 Gateway Street<br>Springfield, Oregon 97477</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>950 Gateway Street<br>Springfield, Oregon 97477</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71792</a></td><td>Corner Bicycle Supply</td><td>PO17545115036</td><td>Mar 17, 2008</td><td>$67,683.32</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>2511 Baker Road<br>Toronto, Ontario M4B 1V7</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>2511 Baker Road<br>Toronto, Ontario M4B 1V7</div></td></tr>
<tr><td rowspan="3"><a href="#" class="toggle">SO71793</a></td><td>Mountain Toy Store</td><td>PO17226152414</td><td>Sep 5, 2007</td><td>$1,943.93</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Marvin</div></td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>First Colony Mall<br>Sugar Land, Texas 77478</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Marvin</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>First Colony Mall<br>Sugar Land, Texas 77478</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71794</a></td><td>Vigorous Exercise Company</td><td>PO17574111985</td><td>Dec 14, 2007</td><td>$87,770.74</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>9950 Ferrand Drive, 9th Floor<br>Toronto, Ontario M4B 1V4</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>9950 Ferrand Drive, 9th Floor<br>Toronto, Ontario M4B 1V4</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71795</a></td><td>Bike Part Wholesalers</td><td>PO17371184627</td><td>Feb 6, 2008</td><td>$41,224.10</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>254a Baker Street<br>Botany<br>Sydney, New South Wales 1002</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>254a Baker Street<br>Botany<br>Sydney, New South Wales 1002</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71796</a></td><td>Extreme Riding Supplies</td><td>PO17052159664</td><td>Jul 13, 2007</td><td>$63,686.27</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>Riverside<br>Sherman Oaks, California 91403</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Riverside<br>Sherman Oaks, California 91403</div></td></tr>
<tr><td rowspan="3"><a href="#" class="toggle">SO71797</a></td><td>Riding Cycles</td><td>PO16501134889</td><td>Dec 2, 2007</td><td>$86,222.81</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Jon</div></td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>Galashiels<br>Liverpool, England L4 4HB</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Jon</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Galashiels<br>Liverpool, England L4 4HB</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71798</a></td><td>Work and Play Association</td><td>PO16994135863</td><td>Jan 20, 2008</td><td>$40,048.63</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>2533 Eureka Rd.<br>Southgate, Michigan 48195</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>2533 Eureka Rd.<br>Southgate, Michigan 48195</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71799</a></td><td>Metro Sports Equipment</td><td>PO15486196616</td><td>Oct 18, 2007</td><td>$23,080.67</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>6, rue des Pyrenees<br>Saint Ouen, Loir et Cher 41100</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>6, rue des Pyrenees<br>Saint Ouen, Loir et Cher 41100</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71800</a></td><td>Quick Parts and Service</td><td>PO15544127760</td><td>Feb 19, 2008</td><td>$37,253.44</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>99954 Boul. Laurier, Local 060, Place<br>Sainte-Foy, Quebec G1W</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>99954 Boul. Laurier, Local 060, Place<br>Sainte-Foy, Quebec G1W</div></td></tr>
<tr><td rowspan="3"><a href="#" class="toggle">SO71801</a></td><td>Getaway Inn</td><td>PO15515173664</td><td>Mar 6, 2008</td><td>$47,720.54</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Min</div></td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>54, avenue des Ternes<br>Saint Ouen, Loir et Cher 41100</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Min</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>54, avenue des Ternes<br>Saint Ouen, Loir et Cher 41100</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71802</a></td><td>Blue-Ribbon Bike Company</td><td>PO15457184141</td><td>Sep 22, 2007</td><td>$42,013.42</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>790 Shelbyville Road<br>Saint Matthews, Kentucky 40207</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>790 Shelbyville Road<br>Saint Matthews, Kentucky 40207</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71803</a></td><td>World of Bikes</td><td>PO15341174104</td><td>Mar 1, 2008</td><td>$43,964.97</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>660 Lindbergh<br>Saint Louis, Missouri 63103</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>660 Lindbergh<br>Saint Louis, Missouri 63103</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71804</a></td><td>Bikes for Two</td><td>PO14906114459</td><td>Aug 18, 2007</td><td>$2,431.21</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>63 West Beaver Creek<br>Richmond Hill, Ontario L4E 3M5</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>63 West Beaver Creek<br>Richmond Hill, Ontario L4E 3M5</div></td></tr>
<tr><td rowspan="3"><a href="#" class="toggle">SO71805</a></td><td>Nationwide Supply</td><td>PO14703194514</td><td>Jun 27, 2007</td><td>$76,535.55</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Pilar</div></td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>4250 Concord Road<br>Rhodes, New South Wales 2138</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Pilar</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>4250 Concord Road<br>Rhodes, New South Wales 2138</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71806</a></td><td>Valley Toy Store</td><td>PO14790111844</td><td>Jun 2, 2007</td><td>$20,261.90</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>252851 Rowan Place<br>Richmond, British Columbia V6B 3P7</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>252851 Rowan Place<br>Richmond, British Columbia V6B 3P7</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71807</a></td><td>Courteous Bicycle Specialists</td><td>PO14935135211</td><td>Oct 28, 2007</td><td>$656.84</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>995 Crescent<br>Richmond Hill, Ontario L4E 3M5</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>995 Crescent<br>Richmond Hill, Ontario L4E 3M5</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71808</a></td><td>Odometers and Accessories Company</td><td>PO14761198562</td><td>Oct 28, 2007</td><td>$42,231.51</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>253711 Mayfield Place, Unit 150<br>Richmond, British Columbia V6B 3P7</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>253711 Mayfield Place, Unit 150<br>Richmond, British Columbia V6B 3P7</div></td></tr>
<tr><td rowspan="3"><a href="#" class="toggle">SO71809</a></td><td>Fitness Bike Accessories</td><td>PO14645153239</td><td>Jan 12, 2008</td><td>$3,743.42</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: John</div></td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>Level 7<br>114 Albert Road<br>Rhodes, New South Wales 2138</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: John</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Level 7<br>114 Albert Road<br>Rhodes, New South Wales 2138</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71810</a></td><td>Two-Seater Bikes</td><td>PO13804148315</td><td>May 27, 2007</td><td>$1,093.53</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>5700 Legacy Dr<br>Plano, Texas 75074</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>5700 Legacy Dr<br>Plano, Texas 75074</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71811</a></td><td>Racing Toys</td><td>PO13717180066</td><td>Feb 26, 2008</td><td>$3,493.04</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>9228 Via Del Sol<br>Phoenix, Arizona 85004</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>9228 Via Del Sol<br>Phoenix, Arizona 85004</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71812</a></td><td>Fashionable Bikes and Accessories</td><td>PO13543115747</td><td>Apr 28, 2007</td><td>$35,146.04</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>Sports Store At Park City<br>Park City, Utah 84098</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Sports Store At Park City<br>Park City, Utah 84098</div></td></tr>
<tr><td rowspan="3"><a href="#" class="toggle">SO71813</a></td><td>Liquidation Sales</td><td>PO13630186295</td><td>Jan 17, 2008</td><td>$12,707.47</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Jenny</div></td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>No. 6<br>Millenium Court<br>Perth, South Australia 6006</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Jenny</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>No. 6<br>Millenium Court<br>Perth, South Australia 6006</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71814</a></td><td>Our Sporting Goods Store</td><td>PO12818173864</td><td>May 31, 2007</td><td>$7,517.54</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>6030 Conroy Road<br>Ottawa, Ontario K4B 1S3</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>6030 Conroy Road<br>Ottawa, Ontario K4B 1S3</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71815</a></td><td>Thrifty Parts and Sales</td><td>PO13021155785</td><td>Jan 1, 2008</td><td>$1,261.44</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>Oxnard Outlet<br>Oxnard, California 93030</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Oxnard Outlet<br>Oxnard, California 93030</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71816</a></td><td>Engineered Bike Systems</td><td>PO12992180445</td><td>Jul 29, 2007</td><td>$3,754.97</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>123 Camelia Avenue<br>Oxnard, California 93030</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>123 Camelia Avenue<br>Oxnard, California 93030</div></td></tr>
<tr><td rowspan="3"><a href="#" class="toggle">SO71817</a></td><td>Home Town Bike Store</td><td>PO12905185178</td><td>May 21, 2007</td><td>$689.96</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Danielle</div></td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>955 Green Valley Crescent<br>Ottawa, Ontario K4B 1S1</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Danielle</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>955 Green Valley Crescent<br>Ottawa, Ontario K4B 1S1</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71818</a></td><td>Utilitarian Sporting Goods</td><td>PO12470139718</td><td>Apr 25, 2007</td><td>$61,356.31</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>4635 S. Harrison Blvd.<br>Ogden, Utah 84401</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>4635 S. Harrison Blvd.<br>Ogden, Utah 84401</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71819</a></td><td>Fabrikam Inc., West</td><td>PO12354153257</td><td>May 19, 2007</td><td>$41,746.15</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>46460 West Oaks Drive<br>Novi, Michigan 48375</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>46460 West Oaks Drive<br>Novi, Michigan 48375</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71820</a></td><td>Racing Sales and Service</td><td>PO12673129941</td><td>Apr 26, 2007</td><td>$68,686.02</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>510, avenue de Villiers<br>Orleans, Loiret 45000</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>510, avenue de Villiers<br>Orleans, Loiret 45000</div></td></tr>
<tr><td rowspan="3"><a href="#" class="toggle">SO71821</a></td><td>Bike Goods </td><td>PO11977190694</td><td>May 25, 2007</td><td>$5,904.88</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Gary</div></td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>254075 Biscayne Blvd.<br>North Miami Beach, Florida 33162</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Gary</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>254075 Biscayne Blvd.<br>North Miami Beach, Florida 33162</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71822</a></td><td>Popular Bike Lines</td><td>PO11774139099</td><td>Dec 19, 2007</td><td>$31,191.60</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>Level 7<br>80 Arthur Street<br>Newcastle, New South Wales 2300</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Level 7<br>80 Arthur Street<br>Newcastle, New South Wales 2300</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71823</a></td><td>Enterprise Center</td><td>PO11310159994</td><td>Sep 7, 2007</td><td>$2,818.81</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>Kurfürstenstr 574<br>München, Hessen 80074</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Kurfürstenstr 574<br>München, Hessen 80074</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71824</a></td><td>Outdoor Equipment Store</td><td>PO11455162600</td><td>Oct 29, 2007</td><td>$115,117.41</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>6 Cotton Road<br>Nashua, New Hampshire 03064</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>6 Cotton Road<br>Nashua, New Hampshire 03064</div></td></tr>
<tr><td rowspan="3"><a href="#" class="toggle">SO71825</a></td><td>One Bike Company</td><td>PO11165197222</td><td>Dec 28, 2007</td><td>$4,824.62</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Shanay</div></td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>5 place Ville-Marie<br>Montreal, Quebec H1Y 2H7</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Shanay</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>5 place Ville-Marie<br>Montreal, Quebec H1Y 2H7</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71826</a></td><td>Rodeway Bike Store</td><td>PO11397155355</td><td>Oct 29, 2007</td><td>$40,083.06</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>Winterfeldtstr 5557<br>Kreditorenbuchhaltung<br>Münster, Saarland 48001</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Winterfeldtstr 5557<br>Kreditorenbuchhaltung<br>Münster, Saarland 48001</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71827</a></td><td>Metal Processing Company</td><td>PO11107195325</td><td>Aug 22, 2007</td><td>$9,247.52</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>770 Notre Datme Quest Bureau 800<br>Montreal, Quebec H1Y 2H7</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>770 Notre Datme Quest Bureau 800<br>Montreal, Quebec H1Y 2H7</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71828</a></td><td>Grand Industries</td><td>PO11194153355</td><td>Aug 10, 2007</td><td>$52,553.87</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>6333 Cote Vertu<br>Montreal, Quebec H1Y 2H7</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>6333 Cote Vertu<br>Montreal, Quebec H1Y 2H7</div></td></tr>
<tr><td rowspan="3"><a href="#" class="toggle">SO71829</a></td><td>Family Cycle Store</td><td>PO10962123279</td><td>Jul 16, 2007</td><td>$40,095.88</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: James</div></td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>660 Saint-Jacques, Bureau 400<br>Montreal, Quebec H1Y 2H8</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: James</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>660 Saint-Jacques, Bureau 400<br>Montreal, Quebec H1Y 2H8</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71830</a></td><td>Petroleum Products Distributors</td><td>PO10875112195</td><td>Nov 8, 2007</td><td>$55,088.00</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>20225 Lansing Ave<br>Montreal, Quebec H1Y 2H7</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>20225 Lansing Ave<br>Montreal, Quebec H1Y 2H7</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71831</a></td><td>Tachometers and Accessories</td><td>PO10295111084</td><td>Aug 8, 2007</td><td>$2,228.06</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>Wymbush<br>Milton Keynes, England MK8 8DF</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Wymbush<br>Milton Keynes, England MK8 8DF</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71832</a></td><td>Closest Bicycle Store</td><td>PO10353140756</td><td>Sep 3, 2007</td><td>$39,531.61</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>Garamonde Drive, Wymbush<br>PO Box 4023<br>Milton Keynes, England MK8 8ZD</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Garamonde Drive, Wymbush<br>PO Box 4023<br>Milton Keynes, England MK8 8ZD</div></td></tr>
<tr><td rowspan="3"><a href="#" class="toggle">SO71833</a></td><td>Another Bicycle Company</td><td>PO10411123072</td><td>Jan 26, 2008</td><td>$70,377.54</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Stanley</div></td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>567 Sw Mcloughlin Blvd<br>Milwaukie, Oregon 97222</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Stanley</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>567 Sw Mcloughlin Blvd<br>Milwaukie, Oregon 97222</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71834</a></td><td>Rustic Bike Store</td><td>PO377116268</td><td>Feb 22, 2008</td><td>$2,310.51</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>Buergermeister-ulrich-str 3000<br>Buchhaltung<br>Augsburg, Bayern 86150</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Buergermeister-ulrich-str 3000<br>Buchhaltung<br>Augsburg, Bayern 86150</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71835</a></td><td>Running and Cycling Gear</td><td>PO870120974</td><td>Jun 13, 2007</td><td>$71,605.92</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>No. 60 Bellis Fair Parkway<br>Bellingham, Washington 98225</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>No. 60 Bellis Fair Parkway<br>Bellingham, Washington 98225</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71836</a></td><td>Safe Cycles Shop</td><td>PO841118259</td><td>Sep 13, 2007</td><td>$90,216.85</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>2681 Eagle Peak<br>Bellevue, Washington 98004</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>2681 Eagle Peak<br>Bellevue, Washington 98004</div></td></tr>
<tr><td rowspan="3"><a href="#" class="toggle">SO71837</a></td><td>Riders Company</td><td>PO1624180133</td><td>Aug 24, 2007</td><td>$39,989.36</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Kim</div></td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>Tanger Factory<br>Branch, Minnesota 55056</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Kim</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Tanger Factory<br>Branch, Minnesota 55056</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71838</a></td><td>Cycles Sales and Repair</td><td>PO1305123041</td><td>Sep 7, 2007</td><td>$15,165.23</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>3387, rue Marbeuf<br>Bobigny, Seine Saint Denis 93000</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>3387, rue Marbeuf<br>Bobigny, Seine Saint Denis 93000</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71839</a></td><td>Front Runner Bikes</td><td>PO1537119063</td><td>Jan 26, 2008</td><td>$75,173.33</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>DeSouth Square<br>Bradenton, Florida 34205</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>DeSouth Square<br>Bradenton, Florida 34205</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71840</a></td><td>Community Department Stores</td><td>PO1450191043</td><td>Oct 2, 2007</td><td>$1,234.39</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>3639, rue des Grands Champs<br>Boulogne-sur-Mer, Pas de Calais 62200</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>3639, rue des Grands Champs<br>Boulogne-sur-Mer, Pas de Calais 62200</div></td></tr>
<tr><td rowspan="3"><a href="#" class="toggle">SO71841</a></td><td>Rural Cycle Emporium</td><td>PO1798133189</td><td>Nov 23, 2007</td><td>$112,758.77</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Kathleen</div></td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>6388 Lake City Way<br>Burnaby, British Columbia V5A 3A6</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Kathleen</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>6388 Lake City Way<br>Burnaby, British Columbia V5A 3A6</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71842</a></td><td>Price-Cutter Discount Bikes</td><td>PO1740169151</td><td>Nov 22, 2007</td><td>$12.91</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>6700 Boul Taschereau<br>Brossard, Quebec J4Z 1C5</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>6700 Boul Taschereau<br>Brossard, Quebec J4Z 1C5</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71843</a></td><td>Future Bikes</td><td>PO2001122796</td><td>Jun 24, 2007</td><td>$7,775.72</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>67255 - 8th Street N.E., Suite 350<br>Calgary, Alberta T2P 2G8</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>67255 - 8th Street N.E., Suite 350<br>Calgary, Alberta T2P 2G8</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71844</a></td><td>Sales and Supply Company</td><td>PO2813198985</td><td>Jun 12, 2007</td><td>$48,077.41</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>Corporate Ofc A/p<br>123 Fourth Ave<br>Chantilly, Virginia 20151</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Corporate Ofc A/p<br>123 Fourth Ave<br>Chantilly, Virginia 20151</div></td></tr>
<tr><td rowspan="3"><a href="#" class="toggle">SO71845</a></td><td>Trailblazing Sports</td><td>PO2697119362</td><td>Mar 4, 2008</td><td>$45,992.37</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Frank</div></td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>251340 E. South St.<br>Cerritos, California 90703</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Frank</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>251340 E. South St.<br>Cerritos, California 90703</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71846</a></td><td>Sports Store</td><td>PO2378131604</td><td>Jul 2, 2007</td><td>$2,711.41</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>Internet House, 3399 Science Park<br>Cambridge, England CB4 4BZ</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Internet House, 3399 Science Park<br>Cambridge, England CB4 4BZ</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71847</a></td><td>Camping and Sports Store</td><td>PO18502143784</td><td>Jul 15, 2007</td><td>$119,981.15</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>400-25155 West Pender St<br>Vancouver, British Columbia V7L 4J4</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>400-25155 West Pender St<br>Vancouver, British Columbia V7L 4J4</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71848</a></td><td>Locks Company</td><td>PO18763153352</td><td>Nov 9, 2007</td><td>$16,667.88</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>70259 West Sunnyview Ave<br>Visalia, California 93291</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>70259 West Sunnyview Ave<br>Visalia, California 93291</div></td></tr>
<tr><td rowspan="3"><a href="#" class="toggle">SO71849</a></td><td>Principal Bike Company</td><td>PO18125130930</td><td>Jan 18, 2008</td><td>$25,746.16</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Alvaro</div></td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>Mountain Square<br>Upland, California 91786</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Alvaro</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Mountain Square<br>Upland, California 91786</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71850</a></td><td>Quitting Business Distributors</td><td>PO18241134627</td><td>Aug 28, 2007</td><td>$10,492.47</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>University Plaza<br>Tampa, Florida 33602</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>University Plaza<br>Tampa, Florida 33602</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71851</a></td><td>Rapid Bikes</td><td>PO18299133687</td><td>Jun 17, 2007</td><td>$51,104.88</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>992 St Clair Ave East<br>Toronto, Ontario M4B 1V7</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>992 St Clair Ave East<br>Toronto, Ontario M4B 1V7</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71852</a></td><td>Painters Bicycle Specialists</td><td>PO20213171866</td><td>Mar 24, 2008</td><td>$10,406.62</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>9975 Union St.<br>Waterbury, Connecticut 06710</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>9975 Union St.<br>Waterbury, Connecticut 06710</div></td></tr>
<tr><td rowspan="3"><a href="#" class="toggle">SO71853</a></td><td>Famous Bike Shop</td><td>PO18531164420</td><td>May 3, 2007</td><td>$4,578.20</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Jim</div></td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>999 West Georgia St.<br>Vancouver, Ontario V5T 1Y9</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Jim</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>999 West Georgia St.<br>Vancouver, Ontario V5T 1Y9</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71854</a></td><td>Helpful Sales and Repair Service </td><td>PO16385143469</td><td>Nov 11, 2007</td><td>$36,819.69</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>Licensing Account<br>Seaford, Victoria 3198</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Licensing Account<br>Seaford, Victoria 3198</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71855</a></td><td>Self-Contained Cycle Parts Company</td><td>PO18589189353</td><td>Jun 23, 2007</td><td>$429.62</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>12, rue des Grands Champs<br>Verrieres Le Buisson, Essonne 91370</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>12, rue des Grands Champs<br>Verrieres Le Buisson, Essonne 91370</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71856</a></td><td>Transport Bikes</td><td>PO16530177647</td><td>Nov 18, 2007</td><td>$665.43</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>25130 South State Street<br>Sandy, Utah 84070</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>25130 South State Street<br>Sandy, Utah 84070</div></td></tr>
<tr><td rowspan="3"><a href="#" class="toggle">SO71857</a></td><td>First Cycle Store</td><td>PO16269151631</td><td>Jan 4, 2008</td><td>$37,400.41</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Mike</div></td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>25250 N 90th St<br>Scottsdale, Arizona 85257</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Mike</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>25250 N 90th St<br>Scottsdale, Arizona 85257</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71858</a></td><td>Thrilling Bike Tours</td><td>PO16153112278</td><td>Oct 6, 2007</td><td>$15,275.20</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>4660 Rodeo Road<br>Santa Fe, New Mexico 87501</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>4660 Rodeo Road<br>Santa Fe, New Mexico 87501</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71859</a></td><td>Bike World</td><td>PO16182112142</td><td>Apr 11, 2007</td><td>$8,654.14</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>60025 Bollinger Canyon Road<br>San Ramon, California 94583</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>60025 Bollinger Canyon Road<br>San Ramon, California 94583</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71860</a></td><td>Vinyl and Plastic Goods Corporation</td><td>PO17835163979</td><td>Feb 20, 2008</td><td>$3,651.79</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>No. 25800-130 King Street West<br>Toronto, Ontario M4B 1V5</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>No. 25800-130 King Street West<br>Toronto, Ontario M4B 1V5</div></td></tr>
<tr><td rowspan="3"><a href="#" class="toggle">SO71861</a></td><td>Two Bike Shops</td><td>PO14152156429</td><td>Nov 30, 2007</td><td>$2,430.32</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Jim</div></td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>35525-9th Street Sw<br>Puyallup, Washington 98371</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Jim</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>35525-9th Street Sw<br>Puyallup, Washington 98371</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71862</a></td><td>Fad Outlet</td><td>PO14065190039</td><td>Feb 19, 2008</td><td>$1,622.62</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>2550 Ne Sandy Blvd<br>Portland, Oregon 97205</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>2550 Ne Sandy Blvd<br>Portland, Oregon 97205</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71863</a></td><td>Sports Products Store</td><td>PO16124166561</td><td>Apr 30, 2007</td><td>$3,673.32</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>Po Box 252525<br>Santa Ana, California 92701</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Po Box 252525<br>Santa Ana, California 92701</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71864</a></td><td>Good Bike Shop</td><td>PO14268188903</td><td>Oct 9, 2007</td><td>$37,623.76</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>99433 S. Greenbay Rd.<br>Racine, Wisconsin 53182</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>99433 S. Greenbay Rd.<br>Racine, Wisconsin 53182</div></td></tr>
<tr><td rowspan="3"><a href="#" class="toggle">SO71865</a></td><td>Neighborhood Bicycle Storehouse</td><td>PO15109136609</td><td>May 30, 2007</td><td>$290.23</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Cecilia</div></td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>69, boulevard Tremblay<br>Roncq, Nord 59223</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Cecilia</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>69, boulevard Tremblay<br>Roncq, Nord 59223</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71866</a></td><td>Exchange Parts Inc.</td><td>PO14297151936</td><td>Jan 27, 2008</td><td>$43,277.65</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>7700 Green Road<br>Raleigh, North Carolina 27603</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>7700 Green Road<br>Raleigh, North Carolina 27603</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71867</a></td><td>Vigorous Sports Store</td><td>PO13050111529</td><td>Jul 29, 2007</td><td>$1,170.54</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>Banbury<br>Oxon, England OX16 8RS</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Banbury<br>Oxon, England OX16 8RS</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71868</a></td><td>Cycle Merchants</td><td>PO14210134527</td><td>Aug 15, 2007</td><td>$1,932.67</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>575 Rue St Amable<br>Quebec, Quebec G1R</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>575 Rue St Amable<br>Quebec, Quebec G1R</div></td></tr>
<tr><td rowspan="3"><a href="#" class="toggle">SO71869</a></td><td>Certified Sports Supply</td><td>PO14877155420</td><td>Feb 21, 2008</td><td>$143.50</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Gabriele</div></td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>250551 Shellbridge Way<br>Richmond, British Columbia V6B 3P7</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Gabriele</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>250551 Shellbridge Way<br>Richmond, British Columbia V6B 3P7</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71870</a></td><td>Accessories Network</td><td>PO13195134898</td><td>Feb 1, 2008</td><td>$1,903.38</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>699bis, rue des Peupliers<br>Paris, Seine (Paris) 75008</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>699bis, rue des Peupliers<br>Paris, Seine (Paris) 75008</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71871</a></td><td>Remote Bicycle Specialists</td><td>PO14239120760</td><td>Aug 10, 2007</td><td>$2,168.53</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>No. 2000-25080 Beaver Hall Hill<br>Quebec, Quebec G1R</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>No. 2000-25080 Beaver Hall Hill<br>Quebec, Quebec G1R</div></td></tr>
<tr><td rowspan="2"><a href="#" class="toggle">SO71872</a></td><td>First Center</td><td>PO13137112099</td><td>Jan 2, 2008</td><td>$215.91</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>22, rue Lafayette<br>Pantin, Seine Saint Denis 93500</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>22, rue Lafayette<br>Pantin, Seine Saint Denis 93500</div></td></tr>
<tr><td rowspan="3"><a href="#" class="toggle">SO71873</a></td><td>Incomparable Bicycle Store</td><td>PO12325121185</td><td>Jul 5, 2007</td><td>$5,941.29</td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Faith</div></td></tr>
<tr class="expand-child"><td colspan="4"><div class="bold">Shipping Address</div><div>99 Edgewater Drive<br>Norwood, Massachusetts 02062</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Faith</div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>99 Edgewater Drive<br>Norwood, Massachusetts 02062</div></td></tr>
</tbody>
</table>
@ -374,7 +380,7 @@
&lt;td&gt;Jul 20, 2007&lt;/td&gt;
&lt;td&gt;$972.78&lt;/td&gt;
&lt;/tr&gt;
&lt;tr class=&quot;expand-child&quot;&gt;
&lt;tr class=&quot;tablesorter-childRow&quot;&gt;
&lt;td colspan=&quot;4&quot;&gt;
&lt;div class=&quot;bold&quot;&gt;Shipping Address&lt;/div&gt;
&lt;div&gt;99700 Bell Road&lt;br&gt;Auburn, California 95603&lt;/div&gt;
@ -389,7 +395,7 @@
&lt;td&gt;May 6, 2007&lt;/td&gt;
&lt;td&gt;$2,313.13&lt;/td&gt;
&lt;/tr&gt;
&lt;tr class=&quot;expand-child&quot;&gt;
&lt;tr class=&quot;tablesorter-childRow&quot;&gt;
&lt;td colspan=&quot;4&quot;&gt;
&lt;div class=&quot;bold&quot;&gt;Shipping Address&lt;/div&gt;
&lt;div&gt;2255 254th Avenue Se&lt;br&gt;Albany, Oregon 97321&lt;/div&gt;

View File

@ -14,13 +14,13 @@
<script src="js/docs.js"></script>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/blue/style.css">
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<script id="js">$(function() {
// Set up empty table with second and first columns pre-sorted
$("table").tablesorter({ sortList: [[2,1],[0,0]] });
$("table").tablesorter({ theme : 'blue', sortList: [[2,1],[0,0]] });
$("#append").click(function() {

View File

@ -14,7 +14,7 @@
<script src="js/docs.js"></script>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/blue/style.css">
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<script id="js">$(function() {
@ -26,7 +26,7 @@
$.tablesorter.defaults.sortList = [[0,0]];
// call the tablesorter plugin
$("table").tablesorter();
$("table").tablesorter({ theme : 'blue' });
}); </script>
</head>

View File

@ -14,11 +14,11 @@
<script src="js/docs.js"></script>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/blue/style.css">
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<script id="js">$(function() {
$("table").tablesorter();
$("table").tablesorter({ theme : 'blue' });
});</script>
</head>
<body>
@ -90,7 +90,7 @@
<div class="next-up">
<hr />
Next up: <a href="example-option-digits.html">Dealing with digits! &rsaquo;&rsaquo;</a>
Next up: <a href="example-option-show-processing.html">showProcessing & Filter events &rsaquo;&rsaquo;</a>
</div>
</div>

View File

@ -14,7 +14,7 @@
<script src="js/docs.js"></script>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/blue/style.css">
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<script id="js">$(function() {
@ -51,6 +51,7 @@
});
$("table").tablesorter({
theme : 'blue',
// Enable use of the characterEquivalents reference
sortLocaleCompare : true,
// if false, upper case sorts BEFORE lower case
@ -70,8 +71,8 @@
<p class="tip">
<em>NOTE!</em>
<ul>
<li>Accented characters will get replaced by their character equivalent when the <code class="hilight">sortLocaleCompare</code> option is <code class="hilight">true</code>.</li>
<li>In the javascript code block below you can see the default <code class="hilight">$.tablesorter.characterEquivalents</code> table and an example of how to extend it to include other equivalents.</li>
<li>Accented characters will get replaced by their character equivalent when the <code>sortLocaleCompare</code> option is <code>true</code>.</li>
<li>In the javascript code block below you can see the default <code>$.tablesorter.characterEquivalents</code> table and an example of how to extend it to include other equivalents.</li>
<li>If you have a specific language requirement, please refer to the <a href="https://github.com/Mottie/tablesorter/wiki/Language">Language</a> wiki pages to see if it is there. If not, please consider sharing the code or even just share the character equivalents themselves.</li>
</ul>
</p>

View File

@ -14,7 +14,7 @@
<script src="js/docs.js"></script>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/blue/style.css">
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<!-- Tablesorter: optional -->
@ -28,7 +28,7 @@
<script id="js">$(function() {
// call the tablesorter plugin, the magic happens in the markup
$("table").tablesorter();
$("table").tablesorter({ theme : 'blue' });
});</script>
</head>
<body>

View File

@ -14,14 +14,14 @@
<script src="js/docs.js"></script>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/blue/style.css">
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<script src="../js/jquery.metadata.js"></script>
<script src="../addons/pager/jquery.tablesorter.pager.js"></script>
<script id="js">$(function() {
// call the tablesorter plugin, the magic happens in the markup
$("table").tablesorter();
$("table").tablesorter({ theme : 'blue' });
});</script>
</head>
<body>

View File

@ -14,16 +14,15 @@
<script src="js/docs.js"></script>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/blue/style.css">
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<!-- Tablesorter: optional -->
<script src="../addons/pager/jquery.tablesorter.pager.js"></script>
<!-- Tablesorter: optional (but required for this demo) -->
<script src="../js/jquery.metadata.js"></script>
<script id="js">$(function() {
// call the tablesorter plugin, the magic happens in the markup
$("table").tablesorter();
$("table").tablesorter({ theme : 'blue' });
});</script>
</head>
<body>

View File

@ -14,7 +14,7 @@
<script src="js/docs.js"></script>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/blue/style.css">
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<!-- Tablesorter: widgets (optional) -->
@ -23,6 +23,7 @@
<script id="js">$(function() {
$("table").tablesorter({
theme : 'blue',
cssInfoBlock : "tablesorter-no-sort",
widgets: [ 'zebra', 'stickyHeaders' ]
});

View File

@ -13,19 +13,17 @@
<script src="js/chili/recipes.js"></script>
<script src="js/docs.js"></script>
<!-- custom sorting script -->
<script src="js/naturalSort.js"></script>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/blue/style.css">
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<script id="js">$(function() {
$("table").tablesorter({
theme : 'blue',
// table = table object; get config options from table.config
// column is the column index (zero-based)
textSorter : function(a, b, table, column){
// this is the original sort method from tablesorter 2.0.5b
// this is the original sort method from tablesorter 2.0.3
if (table.config.sortLocaleCompare) { return a.localeCompare(b); }
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
}
@ -45,7 +43,7 @@
<p class="tip">
<em>NOTE!</em>
<ul>
<li>The custom sort used here is from the original tablesorter plugin v2.0.5b. Sort the first column to see how it sorts alphanumeric data.</li>
<li>The custom sort used here is from the original tablesorter plugin v2.0.3. Sort the first column to see how it sorts alphanumeric data.</li>
<li>This option is not part of the original plugin. <span class="tip"><em>New! v2.2</em></span></li>
</ul>
</p>
@ -138,19 +136,6 @@
</tbody>
</table></div>
<h1>Page Head</h1>
<div>
<pre class="html">&lt;!-- jQuery --&gt;
&lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;!-- custom sorting script --&gt;
&lt;script src=&quot;js/naturalSort.js&quot;&gt;&lt;/script&gt;
&lt;!-- Tablesorter: required --&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;../css/blue/style.css&quot;&gt;
&lt;script src=&quot;../js/jquery.tablesorter.js&quot;&gt;&lt;/script&gt;</pre>
</div>
<h1>Javascript</h1>
<div id="javascript">
<pre class="js"></pre>

View File

@ -14,12 +14,13 @@
<script src="js/docs.js"></script>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/blue/style.css">
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<script id="js">$(function() {
// call the tablesorter plugin
$("table").tablesorter({
theme : 'blue',
dateFormat : "mmddyyyy", // set the default date format
@ -46,16 +47,16 @@
<em>NOTE!</em>
<ul>
<li>The dateFormat option was modified in version 2.0.23 (not part of the original plugin).</li>
<li>The dateFormat option will ONLY work with the <code class="hilight">shortDate</code> parser.</li>
<li>The dateFormat option will ONLY work with the <code>shortDate</code> parser.</li>
<li>The date can be separated by any of the following: slash, dash, period, comma, space(s) or tab (/-., ).</li>
<li>This date format parser will only work with a four digit year. You can <a href="example-parsers.html">write your own</a> if you need a two digit year parser.</a>
<li>In versions 2.3+, columns can be disabled using any of the following methods, in order of priority:
<li>In versions 2.3+, columns can be disabled using any of the following methods (they all do the same thing), in order of priority:
<ul>
<li>jQuery data <code class="hilight">data-sorter="false"</code> (see the Javascript block below on how to set it directly).</li>
<li>metadata <code class="hilight">class="{ sorter: false }"</code>. This requires the metadata plugin.</li>
<li>headers option <code class="hilight">headers : { 0 : { sorter: false } }</code>.</li>
<li>header class name <code class="hilight">class="sorter-false"</code>.</li>
<li>overall <code class="hilight">dateFormat</code> option setting.</li>
<li>jQuery data <code>data-date-format="mmddyyyy"</code> (see the Javascript block below on how to set it directly; <code>data-dateFormat</code> is equivalent to <code>data-data-format</code>).</li>
<li>metadata <code>class="{ dateFormat: "mmddyyyy" }"</code>. This requires the metadata plugin.</li>
<li>headers option <code>headers : { 0 : { dateFormat: "mmddyyyy" } }</code>.</li>
<li>header class name <code>class="dateFormat-mmddyyyy"</code>.</li>
<li>overall <code>dateFormat</code> option setting.</li>
</ul>
</li>
</ul>

View File

@ -14,13 +14,14 @@
<script src="js/docs.js"></script>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/blue/style.css">
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<script id="js">$(function() {
// call the tablesorter plugin
$("table").tablesorter({
theme : 'blue',
// enable debug mode
debug: true
});

View File

@ -5,7 +5,7 @@
<title>jQuery plugin: Tablesorter 2.0 - Dealing with Digits</title>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.js"></script>
<!-- Demo stuff -->
<link rel="stylesheet" href="css/jq.css">
@ -14,12 +14,12 @@
<script src="js/docs.js"></script>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/blue/style.css">
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<script id="js">$(function() {
// call the tablesorter plugin
$("table").tablesorter();
$("table").tablesorter({ theme : 'blue' });
});</script>
</head>
<body>
@ -41,7 +41,7 @@
</p>
<h1>Demo</h1>
<div id="demo"><table class="tablesorter">
<div id="demo"><table class="tablesorter" data-sortlist="[[0,0]]">
<thead>
<tr>
<th>Account #</th>

View File

@ -14,7 +14,7 @@
<script src="js/docs.js"></script>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/blue/style.css">
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<!-- Tablesorter: optional -->
@ -35,6 +35,7 @@
<script id="js">$(function() {
// call the tablesorter plugin
$("table").tablesorter({
theme : 'blue',
onRenderHeader: function (index){
// the TH content is wrapped with a div.tablesorter-header-inner by default, so just add the new class
$(this).find('div').addClass('roundedCorners header' + index );

File diff suppressed because it is too large Load Diff

View File

@ -14,7 +14,7 @@
<script src="js/docs.js"></script>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/blue/style.css">
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<!-- Tablesorter: optional -->
@ -23,6 +23,8 @@
<script id="js">$(function() {
// call the tablesorter plugin
$("table").tablesorter({
theme : 'blue',
// add sort on the first column and in ascending order AFTER the selected column
sortAppend: [[0,0]]
});

View File

@ -14,12 +14,14 @@
<script src="js/docs.js"></script>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/blue/style.css">
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<script id="js">$(function() {
// call the tablesorter plugin
$("table").tablesorter({
theme : 'blue',
// default "emptyTo"
emptyTo: 'bottom'
});
@ -47,27 +49,27 @@ $(function(){
<p class="tip">
<em>NOTE!</em>
Set the <code class="hilight">emptyTo</code> selector below:
Set the <code>emptyTo</code> selector below:
<ul>
<li><code class="hilight">top</code> - sort empty table cells to the top.</li>
<li><code class="hilight">bottom</code> - sort empty table cells to the bottom.</li>
<li><code class="hilight">none</code> or <code class="hilight">zero</code> - sort empty table cells as if the cell has the value equal to zero.</li>
<li>Individual columns can be modified by adding the following, set in order of priority:
<li><code>top</code> - sort empty table cells to the top.</li>
<li><code>bottom</code> - sort empty table cells to the bottom.</li>
<li><code>none</code> or <code>zero</code> - sort empty table cells as if the cell has the value equal to zero.</li>
<li>Individual columns can be modified by adding the following (they all do the same thing), set in order of priority:
<ul>
<li>jQuery data <code class="hilight">data-empty="top"</code>.</li>
<li>metadata <code class="hilight">class="{ empty: 'top'}"</code>. This requires the metadata plugin.</li>
<li>headers option <code class="hilight">headers : { 0 : { empty : 'top' } }</code>.</li>
<li>header class name <code class="hilight">class="empty-top"</code>.</li>
<li>jQuery data <code>data-empty="top"</code>.</li>
<li>metadata <code>class="{ empty: 'top'}"</code>. This requires the metadata plugin.</li>
<li>headers option <code>headers : { 0 : { empty : 'top' } }</code>.</li>
<li>header class name <code>class="empty-top"</code>.</li>
<li>Overall <code>emptyTo</code> option.</li>
</ul>
</li>
<li><code class="hilight">emptyToBottom</code> option was added in v2.1.11, then replaced by the <code class="hilight">emptyTo</code> option in v2.1.16.</li>
<li><code>emptyToBottom</code> option was added in v2.1.11, then replaced by the <code>emptyTo</code> option in v2.1.16.</li>
</ul>
</p>
<h1>Demo</h1>
Set <code class="hilight">emptyTo</code> option: <select>
Set <code>emptyTo</code> option: <select>
<option>bottom</option>
<option>top</option>
<option>zero</option>
@ -76,7 +78,7 @@ Set <code class="hilight">emptyTo</code> option: <select>
<div id="demo"><table class="tablesorter">
<thead>
<tr>
<th class="empty-top">Account #</th> <!-- empty-top class has higher priority than the "emptyTo" option -->
<th class="empty-top">*Account #</th> <!-- empty-top class has higher priority than the "emptyTo" option -->
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
@ -160,7 +162,7 @@ Set <code class="hilight">emptyTo</code> option: <select>
</tr>
</tbody>
</table></div>
* Note: The "Account #" column has the "empty-top" class name set which over-rides the <code class="hilight">emptyTo</code> option.
* <strong>Note</strong>: The "Account #" column has the "empty-top" class name set which over-rides the <code>emptyTo</code> option (see the order of priority note above).
<h1>Javascript</h1>
<div id="javascript">

View File

@ -14,7 +14,7 @@
<script src="js/docs.js"></script>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/blue/style.css">
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<!-- Tablesorter: optional -->
@ -24,6 +24,8 @@
// call the tablesorter plugin
$("table").tablesorter({
theme : 'blue',
// sort on the first column and in ascending order PRIOR TO the sort on the selected column
sortForce: [[0,0]]
});

View File

@ -14,13 +14,15 @@
<script src="js/docs.js"></script>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/blue/style.css">
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<script id="js">$(function() {
// call the tablesorter plugin
$("table").tablesorter({
theme : 'blue',
// change the multi sort key from the default shift to alt button
sortMultiSortKey: 'altKey'
});

View File

@ -14,13 +14,15 @@
<script src="js/docs.js"></script>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/blue/style.css">
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<script id="js">$(function() {
// call the tablesorter plugin
$("table").tablesorter({
theme : 'blue',
// sort on the first column and third column in ascending order
sortList: [[0,0],[2,0]]
});

View File

@ -14,13 +14,15 @@
<script src="js/docs.js"></script>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/blue/style.css">
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<script id="js">$(function() {
// call the tablesorter plugin
$("table").tablesorter({
theme : 'blue',
// change the default sorting order from 'asc' to 'desc'
sortInitialOrder: "desc"
});

View File

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Reset/Restart the sort</title>
<!-- jQuery -->
@ -14,19 +14,20 @@
<script src="js/docs.js"></script>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/blue/style.css">
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<script id="js">$(function() {
// call the tablesorter plugin
$("table").tablesorter({
theme : 'blue',
// third click on the header will reset column to default - unsorted
sortReset : true,
// Resets the sort direction so that clicking on an unsorted column will sort in the sortInitialOrder direction.
sortRestart : true,
sortInitialOrder: 'desc',
headers : {
@ -52,10 +53,10 @@
<p class="tip">
<em>NOTE!</em>
<ul>
<li>The default <code class="hilight">sortInitialOrder</code> for the entire table is set to <code class="hilight">desc</code> (descending sort).</li>
<li>The default <code>sortInitialOrder</code> for the entire table is set to <code>desc</code> (descending sort).</li>
<li>The last three columns have the initial sort order set in the ascending direction, using the headers option.</li>
<li>Test the <code class="hilight">sortReset</code> option by clicking on any column at least three times. It should sort in the <code class="hilight">sortInitialOrder</code> direction on the first click, the opposite direction on the second click, then reset to the original sort order on the third click. This cycle repeats on subsequent sorts.</li>
<li>Test the <code class="hilight">sortRestart</code> option by clicking on any unsorted column to see that it will always restart from the <code class="hilight">sortInitialOrder</code>.</li>
<li>Test the <code>sortReset</code> option by clicking on any column at least three times. It should sort in the <code>sortInitialOrder</code> direction on the first click, the opposite direction on the second click, then reset to the original sort order on the third click. This cycle repeats on subsequent sorts.</li>
<li>Test the <code>sortRestart</code> option by clicking on any unsorted column to see that it will always restart from the <code>sortInitialOrder</code>.</li>
</ul>
</p>
@ -125,7 +126,7 @@
<div class="next-up">
<hr />
Next up: <a href="example-option-sort-empty.html">Sorting empty cells &rsaquo;&rsaquo;</a>
Next up: <a href="example-option-selectorsort.html">Using selectorSort &rsaquo;&rsaquo;</a>
</div>
</div>

View File

@ -14,14 +14,14 @@
<script src="js/docs.js"></script>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/blue/style.css">
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<script id="js">$(function() {
// call the tablesorter plugin
$("table").tablesorter({
theme : 'blue',
/*
// define an overall custom text extraction function
textExtraction: function(node, table, cellIndex) {

View File

@ -14,7 +14,7 @@
<script src="js/docs.js"></script>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/blue/style.css">
<link rel="stylesheet" href="../css/theme.blue.css">
<style>
th { width: 10%; }
</style>
@ -23,6 +23,7 @@
<script id="js">$(function() {
// call the tablesorter plugin
$("table").tablesorter({
theme : 'blue',
// default strings setting
stringTo: "max",
// columns 2 & 3 (zero-based index) set using headers option
@ -49,28 +50,28 @@
<em>NOTE!</em>
<ul>
<li>This functionality is new as of version 2.0.10 (not part of the original plugin).</li>
<li>When a column is sorted numerically ( <code class="hilight">sorter:"digit"</code> ) any text in that column will, by default, be given a <em>zero</em> value. Sort the last column (#9) to see the problem with this method.</li>
<li>Overall <code class="hilight">stringTo</code> option added in version 2.1.16.</li>
<li>When a column is sorted numerically ( <code>sorter:"digit"</code> ) any text in that column will, by default, be given a <em>zero</em> value. Sort the last column (#9) to see the problem with this method.</li>
<li>Overall <code>stringTo</code> option added in version 2.1.16.</li>
<li>String options changed in version 2.1.16; setting the value to:
<ul>
<li><code class="hilight">"max"</code> will treat any text in that column as a value greater than the <em>max</em> (more positive) value. Renamed from "max+".</li>
<li><code class="hilight">"min"</code> will treat any text in that column as a value greater than the <em>min</em> (more negative) value. Renamed from "max-".</li>
<li><code class="hilight">"top"</code> will always sort the text to the top of the column.</li>
<li><code class="hilight">"bottom"</code> will always sort the text to the bottom of the column.</li>
<li><code class="hilight">"none"</code> or <code class="hilight">"zero"</code> will treat the text as if it has a value of zero.</li>
<li><code>"max"</code> will treat any text in that column as a value greater than the <em>max</em> (more positive) value. Renamed from "max+".</li>
<li><code>"min"</code> will treat any text in that column as a value greater than the <em>min</em> (more negative) value. Renamed from "max-".</li>
<li><code>"top"</code> will always sort the text to the top of the column.</li>
<li><code>"bottom"</code> will always sort the text to the bottom of the column.</li>
<li><code>"none"</code> or <code>"zero"</code> will treat the text as if it has a value of zero.</li>
</ul>
</li>
<li>Individual columns can be modified by adding the following, set in order of priority:
<li>Individual columns can be modified by adding the following (they all do the same thing), set in order of priority:
<ul>
<li>jQuery data <code class="hilight">data-string="top"</code>.</li>
<li>metadata <code class="hilight">class="{ string: 'top'}"</code>. This requires the metadata plugin.</li>
<li>headers option <code class="hilight">headers : { 0 : { string : 'top' } }</code>.</li>
<li>header class name <code class="hilight">class="string-top"</code>.</li>
<li>Overall <code class="hilight">stringTo</code> option.</li>
<li>jQuery data <code>data-string="top"</code>.</li>
<li>metadata <code>class="{ string: 'top'}"</code>. This requires the metadata plugin.</li>
<li>headers option <code>headers : { 0 : { string : 'top' } }</code>.</li>
<li>header class name <code>class="string-top"</code>.</li>
<li>Overall <code>stringTo</code> option.</li>
</ul>
</li>
<li>Sort columns three through eight to see how the sort has changed. Note that the text is sorted separately from the numeric values.</li>
<li>The <code class="hilight">emptyTo</code> option defaults to bottom, so all empty cells will sort at the bottom of the table, except fo the second column.</li>
<li>The <code>emptyTo</code> option defaults to bottom, so all empty cells will sort at the bottom of the table, except fo the second column.</li>
</ul>
</p>

View File

@ -14,11 +14,12 @@
<script src="js/docs.js"></script>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/blue/style.css">
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<script id="js">$(function(){
$("table").tablesorter({
theme : 'blue',
// pass the headers argument and passing a object
headers: {
0: {
@ -43,12 +44,12 @@
<ul>
<li>This option was part of the original plugin, but it was broken.</li>
<li>Sort the first, third and fifth columns to see how the sort is locked.</li>
<li>Columns can be locked using any of the following methods, in order of priority (v2.3+):
<li>Columns can be locked using any of the following methods (they all do the same thing), in order of priority (v2.3+):
<ul>
<li>jQuery data <code class="hilight">data-lockedorder="asc"</code>. (equivalent to <code class="hilight">data-locked-order="asc"</code>).</li>
<li>metadata <code class="hilight">class="{ lockedOrder: 'asc'}"</code>. This requires the metadata plugin.</li>
<li>headers option <code class="hilight">headers : { 0 : { lockedOrder: 'asc' } }</code>.</li>
<li>header class name <code class="hilight">class="lockedOrder-asc"</code>.</li>
<li>jQuery data <code>data-lockedorder="asc"</code>. (equivalent to <code>data-locked-order="asc"</code>).</li>
<li>metadata <code>class="{ lockedOrder: 'asc'}"</code>. This requires the metadata plugin.</li>
<li>headers option <code>headers : { 0 : { lockedOrder: 'asc' } }</code>.</li>
<li>header class name <code>class="lockedOrder-asc"</code>.</li>
</ul>
</li>
</ul>

View File

@ -14,11 +14,12 @@
<script src="js/docs.js"></script>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/blue/style.css">
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<script id="js">$(function(){
$("table").tablesorter({
theme : 'blue',
// default sortInitialOrder setting
sortInitialOrder: "asc",
@ -45,13 +46,13 @@
<em>NOTE!</em>
<ul>
<li>Adding "sortInitialOrder" inside of the "headers" option was added in version 2.0.8 (not part of the original plugin).</li>
<li>In versions 2.3+, the initial sort order of the columns can be set using any of the following methods, in order of priority:
<li>In versions 2.3+, the initial sort order of the columns can be set using any of the following methods (they all do the same thing), in order of priority:
<ul>
<li>jQuery data <code class="hilight">data-sort-initial-order="desc"</code> (equivalent to <code class="hilight">data-sortinitialorder="desc"</code>).</li>
<li>metadata <code class="hilight">class="{ sortInitialOrder: "desc" }"</code>. This requires the metadata plugin.</li>
<li>headers option <code class="hilight">headers : { 0 : { sortInitialOrder: "desc" } }</code>.</li>
<li>header class name <code class="hilight">class="sortInitialOrder-desc"</code>.</li>
<li>overall <code class="hilight">sortInitialOrder</code> option setting.</li>
<li>jQuery data <code>data-sort-initial-order="desc"</code> (equivalent to <code>data-sortinitialorder="desc"</code>).</li>
<li>metadata <code>class="{ sortInitialOrder: "desc" }"</code>. This requires the metadata plugin.</li>
<li>headers option <code>headers : { 0 : { sortInitialOrder: "desc" } }</code>.</li>
<li>header class name <code>class="sortInitialOrder-desc"</code>.</li>
<li>overall <code>sortInitialOrder</code> option setting.</li>
</ul>
</li>
</ul>
@ -61,12 +62,12 @@
<div id="demo"><table class="tablesorter">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th class="sortInitialOrder-desc">Age</th>
<th>Total</th>
<th data-sortinitialorder="desc">Discount</th> <!-- equivalent to data-sortInitialOrder="desc" or data-sort-initialorder="desc" -->
<th>Date</th>
<th>First Name (desc)</th>
<th>Last Name (asc)</th>
<th class="sortInitialOrder-desc">Age (desc)</th>
<th>Total (asc)</th>
<th data-sortinitialorder="desc">Discount (desc)</th> <!-- equivalent to data-sortInitialOrder="desc" or data-sort-initialorder="desc" -->
<th>Date (asc)</th>
</tr>
</thead>
<tbody>

View File

@ -14,7 +14,7 @@
<script src="js/docs.js"></script>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/blue/style.css">
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<script id="js">$(function(){
@ -24,6 +24,8 @@
$("table thead th:eq(5)").data("sorter", false);
$("table").tablesorter({
theme : 'blue',
headers: {
// disable sorting of the first column (we start counting at zero)
0: {
@ -47,12 +49,12 @@
<em>NOTE!</em>
<ul>
<li>In tablesorter v2.0.5 and older, only the metadata and headers options methods were available.</li>
<li>In versions 2.3+, columns can be disabled using any of the following methods, in order of priority:
<li>In versions 2.3+, columns can be disabled using any of the following methods (they all do the same thing), in order of priority:
<ul>
<li>jQuery data <code class="hilight">data-sorter="false"</code> (see the Javascript block below on how to set it directly).</li>
<li>metadata <code class="hilight">class="{ sorter: false }"</code>. This requires the metadata plugin.</li>
<li>headers option <code class="hilight">headers : { 0 : { sorter: false } }</code>.</li>
<li>header class name <code class="hilight">class="sorter-false"</code>.</li>
<li>jQuery data <code>data-sorter="false"</code> (see the Javascript block below on how to set it directly).</li>
<li>metadata <code>class="{ sorter: false }"</code>. This requires the metadata plugin.</li>
<li>headers option <code>headers : { 0 : { sorter: false } }</code>.</li>
<li>header class name <code>class="sorter-false"</code>.</li>
</ul>
</li>
</ul>

View File

@ -14,7 +14,7 @@
<script src="js/docs.js"></script>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/blue/style.css">
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<!-- Tablesorter pager: required -->
@ -30,6 +30,7 @@
// ***********************
$("table")
.tablesorter({
theme: 'blue',
widthFixed: true,
sortLocaleCompare: true, // needed for accented characters in the data
widgets: ['zebra']
@ -138,9 +139,9 @@
<em>NOTE!</em>:
<ul>
<li>This update to the pager plugin that interacts with a database via ajax was added in version 2.0.32 and can be applied to the original tablesorter.</li>
<li>The <code class="hilight">ajaxUrl</code> and <code class="hilight">ajaxProcessing</code> function are both required options for this interaction to work properly.</li>
<li>The <code class="hilight">ajaxUrl</code> contains a replaceable string to sent the requested page (<code class="hilight">{page}</code>) and block size (<code>{size}</code>).</li>
<li>The <code class="hilight">ajaxProcessing</code> function must* return the data in the following format <code class="hilight">[ total, rows, headers ]</code> - <span class="tip"><em>Modified</em></span> in 2.1.3:
<li>The <code>ajaxUrl</code> and <code>ajaxProcessing</code> function are both required options for this interaction to work properly.</li>
<li>The <code>ajaxUrl</code> contains a replaceable string to sent the requested page (<code>{page}</code>) and block size (<code>{size}</code>).</li>
<li>The <code>ajaxProcessing</code> function must* return the data in the following format <code>[ total, rows, headers ]</code> - <span class="tip"><em>Modified</em></span> in 2.1.3:
<pre class="js"><code>[
// total # rows contained in the database
100,
@ -315,7 +316,7 @@ td.pager {
<div class="next-up">
<hr />
Next up: <a href="example-empty-table.html">Initializing tablesorter on a empty table &rsaquo;&rsaquo;</a>
Next up: <a href="example-pager-filtered.html">Pager plugin + filter widget &rsaquo;&rsaquo;</a>
</div>
</div>

View File

@ -0,0 +1,445 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Pager plugin + Filter widget</title>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<!-- Demo stuff -->
<link rel="stylesheet" href="css/jq.css">
<script src="js/chili/jquery.chili-2.2.js"></script>
<script src="js/chili/recipes.js"></script>
<script src="js/docs.js"></script>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<!-- Tablesorter: optional -->
<link rel="stylesheet" href="../addons/pager/jquery.tablesorter.pager.css">
<script src="../addons/pager/jquery.tablesorter.pager.js"></script>
<script src="../js/jquery.tablesorter.widgets.js"></script>
<script id="js">$(function(){
// Initialize tablesorter
// ***********************
$("table")
.tablesorter({
theme: 'blue',
widthFixed: true,
widgets: ['zebra', 'filter']
})
// initialize the pager plugin
// ****************************
.tablesorterPager({
// target the pager markup - see the HTML block below
container: $(".pager"),
// output string - default is '{page}/{totalPages}'; possible variables: {page}, {totalPages}, {startRow}, {endRow} and {totalRows}
output: '{startRow} - {endRow} / {filteredRows} ({totalRows})',
// if true, the table will remain the same height no matter how many records are displayed. The space is made up by an empty
// table row set to a height to compensate; default is false
fixedHeight: true,
// 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,
// go to page selector - select dropdown that sets the current page
cssGoto: '.gotoPage'
});
// Add two new rows using the "addRows" method
// the "update" method doesn't work here because not all rows are
// present in the table when the pager is applied ("removeRows" is false)
// ***********************************************************************
$('button:contains(Add)').click(function(){
// add two rows
var row = '<tr><td>StudentXX</td><td>Mathematics</td><td>male</td><td>33</td><td>39</td><td>54</td><td>73</td><td><button class="remove" title="Remove this row">X</button></td></tr>' +
'<tr><td>StudentYY</td><td>Mathematics</td><td>female</td><td>83</td><td>89</td><td>84</td><td>83</td><td><button class="remove" title="Remove this row">X</button></td></tr>',
$row = $(row);
$('table')
.find('tbody').append($row)
.trigger('addRows', [$row]);
});
// Delete a row
// *************
$('table').delegate('button.remove', 'click' ,function(){
var t = $('table');
// disabling the pager will restore all table rows
t.trigger('disable.pager');
// remove chosen row
$(this).closest('tr').remove();
// restore pager
t.trigger('enable.pager');
});
// Destroy pager / Restore pager
// **************
$('button:contains(Destroy)').click(function(){
// Exterminate, annhilate, destroy! http://www.youtube.com/watch?v=LOqn8FxuyFs
var $t = $(this);
if (/Destroy/.test( $t.text() )){
$('table').trigger('destroy.pager');
$t.text('Restore Pager');
} else {
$('table').tablesorterPager(pagerOptions);
$t.text('Destroy Pager');
}
});
// Disable / Enable
// **************
$('button:contains(Disable)').click(function(){
var mode = /Disable/.test( $(this).text() );
$('table').trigger( (mode ? 'disable' : 'enable') + '.pager');
$(this).text( (mode ? 'Enable' : 'Disable') + 'Pager');
});
});</script>
</head>
<body id="pager-demo">
<div id="banner">
<h1>table<em>sorter</em></h1>
<h2>Pager plugin + Filter widget</h2>
<h3>Flexible client-side table sorting</h3>
<a href="index.html">Back to documentation</a>
</div>
<div id="main">
<p class="tip">
<em>NOTE!</em> The following are not part of the original plugin:
<ul>
<li>When using this pager plugin with the filter widget, make sure that the <code>removeRows</code> option is set to <code>false</code> or it won't work.</li>
<li>This combination was not possible in tablesorter versions prior to version 2.4.</li>
<li>This combination can not be applied to the original tablesorter.</li>
</ul>
</p>
<h1>Demo</h1>
<br>
<button>Add Rows</button> <button>Disable Pager</button> <button>Destroy Pager</button>
<br><br>
<div class="pager">
Page: <select class="gotoPage"></select>
<img src="../addons/pager/icons/first.png" class="first" alt="First" title="First page" />
<img src="../addons/pager/icons/prev.png" class="prev" alt="Prev" title="Previous page" />
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
<img src="../addons/pager/icons/next.png" class="next" alt="Next" title="Next page" />
<img src="../addons/pager/icons/last.png" class="last" alt="Last" title= "Last page" />
<select class="pagesize">
<option selected="selected" value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
</select>
</div>
<table class="tablesorter">
<thead>
<tr>
<th>Name</th>
<th>Major</th>
<th>Sex</th>
<th>English</th>
<th>Japanese</th>
<th>Calculus</th>
<th>Geometry</th>
<th class="filter-false remove sorter-false"></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>
<th></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>
<td><button class="remove" title="Remove this row">X</button></td>
</tr>
<tr>
<td>Student02</td>
<td>Mathematics</td>
<td>male</td>
<td>90</td>
<td>88</td>
<td>100</td>
<td>90</td>
<td><button class="remove" title="Remove this row">X</button></td>
</tr>
<tr>
<td>Student03</td>
<td>Languages</td>
<td>female</td>
<td>85</td>
<td>95</td>
<td>80</td>
<td>85</td>
<td><button class="remove" title="Remove this row">X</button></td>
</tr>
<tr>
<td>Student04</td>
<td>Languages</td>
<td>male</td>
<td>60</td>
<td>55</td>
<td>100</td>
<td>100</td>
<td><button class="remove" title="Remove this row">X</button></td>
</tr>
<tr>
<td>Student05</td>
<td>Languages</td>
<td>female</td>
<td>68</td>
<td>80</td>
<td>95</td>
<td>80</td>
<td><button class="remove" title="Remove this row">X</button></td>
</tr>
<tr>
<td>Student06</td>
<td>Mathematics</td>
<td>male</td>
<td>100</td>
<td>99</td>
<td>100</td>
<td>90</td>
<td><button class="remove" title="Remove this row">X</button></td>
</tr>
<tr>
<td>Student07</td>
<td>Mathematics</td>
<td>male</td>
<td>85</td>
<td>68</td>
<td>90</td>
<td>90</td>
<td><button class="remove" title="Remove this row">X</button></td>
</tr>
<tr>
<td>Student08</td>
<td>Languages</td>
<td>male</td>
<td>100</td>
<td>90</td>
<td>90</td>
<td>85</td>
<td><button class="remove" title="Remove this row">X</button></td>
</tr>
<tr>
<td>Student09</td>
<td>Mathematics</td>
<td>male</td>
<td>80</td>
<td>50</td>
<td>65</td>
<td>75</td>
<td><button class="remove" title="Remove this row">X</button></td>
</tr>
<tr>
<td>Student10</td>
<td>Languages</td>
<td>male</td>
<td>85</td>
<td>100</td>
<td>100</td>
<td>90</td>
<td><button class="remove" title="Remove this row">X</button></td>
</tr>
<tr>
<td>Student11</td>
<td>Languages</td>
<td>male</td>
<td>86</td>
<td>85</td>
<td>100</td>
<td>100</td>
<td><button class="remove" title="Remove this row">X</button></td>
</tr>
<tr>
<td>Student12</td>
<td>Mathematics</td>
<td>female</td>
<td>100</td>
<td>75</td>
<td>70</td>
<td>85</td>
<td><button class="remove" title="Remove this row">X</button></td>
</tr>
<tr>
<td>Student13</td>
<td>Languages</td>
<td>female</td>
<td>100</td>
<td>80</td>
<td>100</td>
<td>90</td>
<td><button class="remove" title="Remove this row">X</button></td>
</tr>
<tr>
<td>Student14</td>
<td>Languages</td>
<td>female</td>
<td>50</td>
<td>45</td>
<td>55</td>
<td>90</td>
<td><button class="remove" title="Remove this row">X</button></td>
</tr>
<tr>
<td>Student15</td>
<td>Languages</td>
<td>male</td>
<td>95</td>
<td>35</td>
<td>100</td>
<td>90</td>
<td><button class="remove" title="Remove this row">X</button></td>
</tr>
<tr>
<td>Student16</td>
<td>Languages</td>
<td>female</td>
<td>100</td>
<td>50</td>
<td>30</td>
<td>70</td>
<td><button class="remove" title="Remove this row">X</button></td>
</tr>
<tr>
<td>Student17</td>
<td>Languages</td>
<td>female</td>
<td>80</td>
<td>100</td>
<td>55</td>
<td>65</td>
<td><button class="remove" title="Remove this row">X</button></td>
</tr>
<tr>
<td>Student18</td>
<td>Mathematics</td>
<td>male</td>
<td>30</td>
<td>49</td>
<td>55</td>
<td>75</td>
<td><button class="remove" title="Remove this row">X</button></td>
</tr>
<tr>
<td>Student19</td>
<td>Languages</td>
<td>male</td>
<td>68</td>
<td>90</td>
<td>88</td>
<td>70</td>
<td><button class="remove" title="Remove this row">X</button></td>
</tr>
<tr>
<td>Student20</td>
<td>Mathematics</td>
<td>male</td>
<td>40</td>
<td>45</td>
<td>40</td>
<td>80</td>
<td><button class="remove" title="Remove this row">X</button></td>
</tr>
<tr>
<td>Student21</td>
<td>Languages</td>
<td>male</td>
<td>50</td>
<td>45</td>
<td>100</td>
<td>100</td>
<td><button class="remove" title="Remove this row">X</button></td>
</tr>
<tr>
<td>Student22</td>
<td>Mathematics</td>
<td>male</td>
<td>100</td>
<td>99</td>
<td>100</td>
<td>90</td>
<td><button class="remove" title="Remove this row">X</button></td>
</tr>
<tr><td>Student23</td><td>Mathematics</td><td>male</td><td>82</td><td>77</td><td>0</td><td>79</td><td><button class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student24</td><td>Languages</td><td>female</td><td>100</td><td>91</td><td>13</td><td>82</td><td><button class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student25</td><td>Mathematics</td><td>male</td><td>22</td><td>96</td><td>82</td><td>53</td><td><button class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student26</td><td>Languages</td><td>female</td><td>37</td><td>29</td><td>56</td><td>59</td><td><button class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student27</td><td>Mathematics</td><td>male</td><td>86</td><td>82</td><td>69</td><td>23</td><td><button class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student28</td><td>Languages</td><td>female</td><td>44</td><td>25</td><td>43</td><td>1</td><td><button class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student29</td><td>Mathematics</td><td>male</td><td>77</td><td>47</td><td>22</td><td>38</td><td><button class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student30</td><td>Languages</td><td>female</td><td>19</td><td>35</td><td>23</td><td>10</td><td><button class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student31</td><td>Mathematics</td><td>male</td><td>90</td><td>27</td><td>17</td><td>50</td><td><button class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student32</td><td>Languages</td><td>female</td><td>60</td><td>75</td><td>33</td><td>38</td><td><button class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student33</td><td>Mathematics</td><td>male</td><td>4</td><td>31</td><td>37</td><td>15</td><td><button class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student34</td><td>Languages</td><td>female</td><td>77</td><td>97</td><td>81</td><td>44</td><td><button class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student35</td><td>Mathematics</td><td>male</td><td>5</td><td>81</td><td>51</td><td>95</td><td><button class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student36</td><td>Languages</td><td>female</td><td>70</td><td>61</td><td>70</td><td>94</td><td><button class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student37</td><td>Mathematics</td><td>male</td><td>60</td><td>3</td><td>61</td><td>84</td><td><button class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student38</td><td>Languages</td><td>female</td><td>63</td><td>39</td><td>0</td><td>11</td><td><button class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student39</td><td>Mathematics</td><td>male</td><td>50</td><td>46</td><td>32</td><td>38</td><td><button class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student40</td><td>Languages</td><td>female</td><td>51</td><td>75</td><td>25</td><td>3</td><td><button class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student41</td><td>Mathematics</td><td>male</td><td>43</td><td>34</td><td>28</td><td>78</td><td><button class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student42</td><td>Languages</td><td>female</td><td>11</td><td>89</td><td>60</td><td>95</td><td><button class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student43</td><td>Mathematics</td><td>male</td><td>48</td><td>92</td><td>18</td><td>88</td><td><button class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student44</td><td>Languages</td><td>female</td><td>82</td><td>2</td><td>59</td><td>73</td><td><button class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student45</td><td>Mathematics</td><td>male</td><td>91</td><td>73</td><td>37</td><td>39</td><td><button class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student46</td><td>Languages</td><td>female</td><td>4</td><td>8</td><td>12</td><td>10</td><td><button class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student47</td><td>Mathematics</td><td>male</td><td>89</td><td>10</td><td>6</td><td>11</td><td><button class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student48</td><td>Languages</td><td>female</td><td>90</td><td>32</td><td>21</td><td>18</td><td><button class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student49</td><td>Mathematics</td><td>male</td><td>42</td><td>49</td><td>49</td><td>72</td><td><button class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student50</td><td>Languages</td><td>female</td><td>56</td><td>37</td><td>67</td><td>54</td><td><button class="remove" title="Remove this row">X</button></td></tr>
</tbody>
</table>
<div class="pager">
Page: <select class="gotoPage"></select> <img src="../addons/pager/icons/first.png" class="first" alt="First" title="First page" />
<img src="../addons/pager/icons/prev.png" class="prev" alt="Prev" title="Previous page" />
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
<img src="../addons/pager/icons/next.png" class="next" alt="Next" title="Next page" />
<img src="../addons/pager/icons/last.png" class="last" alt="Last" title= "Last page" />
<select class="pagesize">
<option selected="selected" value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
</select>
</div>
<h1>Javascript</h1>
<div id="javascript">
<pre class="js"></pre>
</div>
<div class="next-up">
<hr />
Next up: <a href="example-empty-table.html">Initializing tablesorter on a empty table &rsaquo;&rsaquo;</a>
</div>
</div>
</body>
</html>

View File

@ -5,16 +5,26 @@
<title>jQuery plugin: Tablesorter 2.0 - Pager plugin</title>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<!-- Demo stuff -->
<link rel="stylesheet" href="css/jq.css">
<script src="js/chili/jquery.chili-2.2.js"></script>
<script src="js/chili/recipes.js"></script>
<script src="js/docs.js"></script>
<link class="ui-theme" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(function(){
$('.accordion').accordion({
autoHeight: false,
collapsible : true
});
});
</script>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/blue/style.css">
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<!-- Tablesorter: optional -->
@ -32,7 +42,7 @@
container: $(".pager"),
// use this url format "http:/mydatabase.com?page={page}&size={size}"
ajaxUrl : null,
ajaxUrl: null,
// process ajax so that the data object is returned along with the total number of rows
// example: { "data" : [{ "ID": 1, "Name": "Foo", "Last": "Bar" }], "total_rows" : 100 }
@ -43,7 +53,8 @@
}
},
// output string - default is '{page}/{totalPages}'; possible variables: {page}, {totalPages}, {startRow}, {endRow} and {totalRows}
// output string - default is '{page}/{totalPages}'
// possible variables: {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {totalRows}
output: '{startRow} to {endRow} ({totalRows})',
// apply disabled classname to the pager arrows when the rows at either extreme is visible - default is true
@ -68,6 +79,8 @@
cssPrev: '.prev', // previous page arrow
cssFirst: '.first', // go to first page arrow
cssLast: '.last', // go to last page arrow
cssGoto: '.gotoPage', // select dropdown to allow choosing a page
cssPageDisplay: '.pagedisplay', // location of where the "output" is displayed
cssPageSize: '.pagesize', // page size selector - select dropdown that sets the "size" option
@ -80,6 +93,7 @@
// ***********************
$("table")
.tablesorter({
theme: 'blue',
widthFixed: true,
widgets: ['zebra']
})
@ -114,14 +128,16 @@
// Delete a row
// *************
$('table').delegate('button.remove', 'click' ,function(){
var t = $('table');
// disabling the pager will restore all table rows
t.trigger('disable.pager');
// t.trigger('disable.pager');
// remove chosen row
$(this).closest('tr').remove();
// restore pager
t.trigger('enable.pager');
// t.trigger('enable.pager');
t.trigger('update');
});
// Destroy pager / Restore pager
@ -161,7 +177,7 @@
<p class="tip">
<em>NOTE!</em> The following are not part of the original plugin:
<ul>
<li>This pager plugin can be applied to the original tablesorter, but there is one exception - setting the <code class="hilight">removeRows</code> option to false will break the sort.</li>
<li>This pager plugin can be applied to the original tablesorter, but there is one exception - setting the <code>removeRows</code> option to false will break the sort.</li>
<li>There have been lots of changes made in version 2.1, please check out the <a href="#change-log">change log</a> below.</li>
</ul>
</p>
@ -183,12 +199,13 @@
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
<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">
<select class="pagesize" 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="gotoPage" title="Select page number"></select>
</div>
<table class="tablesorter">
@ -474,12 +491,13 @@
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
<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">
<select class="pagesize" 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="gotoPage" title="Select page number"></select>
</div>
<h1>Javascript</h1>
@ -490,43 +508,45 @@
<h1>CSS</h1>
<div>
<pre class="css">/* pager wrapper, div */
.pager {
.tablesorter-pager {
padding: 5px;
}
/* pager wrapper, in thead/tfoot */
td.pager {
td.tablesorter-pager {
background-color: #e6eeee;
margin: 0; /* needed for bootstrap .pager gets a 18px bottom margin */
}
/* pager navigation arrows */
.pager img {
.tablesorter-pager img {
vertical-align: middle;
margin-right: 2px;
cursor: pointer;
}
/* pager output text */
.pager .pagedisplay {
font-size: 11px;
.tablesorter-pager .pagedisplay {
padding: 0 5px 0 5px;
width: 50px;
text-align: center;
}
/*** loading ajax indeterminate progress indicator ***/
#tablesorterPagerLoading {
background: rgba(255,255,255,0.8) url(icons/loading.gif) center center no-repeat;
position: absolute;
z-index: 1000;
/* pager element reset (needed for bootstrap) */
.tablesorter-pager select {
margin: 0;
padding: 0;
}
/*** css used when "updateArrows" option is true ***/
/* the pager itself gets a disabled class when the number of rows is less than the size */
.pager.disabled {
.tablesorter-pager.disabled {
display: none;
}
/* hide or fade out pager arrows when the first or last row is visible */
.pager img.disabled {
.tablesorter-pager .disabled {
/* visibility: hidden */
opacity: 0.5;
filter: alpha(opacity=50);
cursor: default;
}</pre>
</div>
@ -558,87 +578,121 @@ td.pager {
<a id="change-log"></a>
<h1>Pager Change Log</h1>
<h4>Version 2.2.1 (5/4/2012)</h4>
<ul>
<li>Widgets should now apply properly while the pager is active. Fix for <a href="https://github.com/Mottie/tablesorter/issues/60">issue #60</a>.</li>
</ul>
<div class="accordion">
<h3><a href="#">Changes</a></h3>
<div class="inner">
<div class="accordion">
<h4>Version 2.1.20 (4/28/2012)</h4>
<ul>
<li>Optimized pager table rebuilding to also use document fragments, and by removing two extra calls that reapplied the current widgets.</li>
</ul>
<h3><a href="#">Version 2.4 (8/19/2012)</a></h3>
<div>
<ul>
<li>xxx.</li>
</ul>
</div>
<h4>Version 2.1.6 (3/22/2012)</h4>
<ul>
<li>Updated pager css. It wasn't targeting the pager block correctly.</li>
<li>Moved pager into the thead and/or tfoot in the <a href="example-pager-ajax.html">pager ajax demo</a>.</li>
<li>The pager plugin ajax method should now only target the header column text (not the pager) and first footer row when updating the header text.</li>
</ul>
<h3><a href="#">Version 2.2.1 (5/4/2012)</a></h3>
<div>
<ul>
<li>Widgets should now apply properly while the pager is active. Fix for <a href="https://github.com/Mottie/tablesorter/issues/60">issue #60</a>.</li>
</ul>
</div>
<h4>Version 2.1.3.1 (3/17/2012)</h4>
<ul>
<li><a href="https://github.com/rozwell">Rozwell</a> contributed some <a href="https://github.com/Mottie/tablesorter/pull/35">bug fixes</a> that occur when <code class="hilight">cssPageSize</code> is not set. Thanks for sharing!</li>
</ul>
<h3><a href="#">Version 2.1.20 (4/28/2012)</a></h3>
<div>
<ul>
<li>Optimized pager table rebuilding to also use document fragments, and by removing two extra calls that reapplied the current widgets.</li>
</ul>
</div>
<h4>Version 2.1</h4>
<ul>
<li>Ajax:
<ul>
<li>The pager plugin will now interact with a database via JSON. See <a href="example-pager-ajax.html">demo</a> here.</li>
<li>Added <code class="hilight">ajaxUrl</code> option which contains the variables <code class="hilight">{page}</code> and <code class="hilight">{size}</code> which will be replaced by the plugin to obtain that data.
<pre class="js"><code class="hilight">ajaxUrl : "http:/mydatabase.com?page={page}&size={size}"</code></pre>
</li>
<li>Another option named <code class="hilight">ajaxProcessing</code> was included to process the data before returning it to the pager plugin. Basically the JSON needs to contain the data to match the example below. An additional required variable is the total number of records or rows needs to be returned.
<h3><a href="#">Version 2.1.6 (3/22/2012)</a></h3>
<div>
<ul>
<li>Updated pager css. It wasn't targeting the pager block correctly.</li>
<li>Moved pager into the thead and/or tfoot in the <a href="example-pager-ajax.html">pager ajax demo</a>.</li>
<li>The pager plugin ajax method should now only target the header column text (not the pager) and first footer row when updating the header text.</li>
</ul>
</div>
<pre class="js"><code class="hilight">// process ajax so that the data object is returned along with the total number of rows
// example: { "data" : [{ "ID": 1, "Name": "Foo", "Last": "Bar" }], "total_rows" : 100 }
ajaxProcessing: function(ajax){
if (ajax && ajax.hasOwnProperty('data')) {
// return [ "data", "total_rows" ];
return [ ajax.data, ajax.total_rows ];
}
}</code></pre>
</li>
<li>I tried to make the plugin interact with a database as flexible as possible, but I'm sure I haven't covered every situation. So any and all feedback is welcome!</li>
<li>Also, much thanks to <a href="https://github.com/kachar">kachar</a> for the <a href="https://github.com/Mottie/tablesorter/issues/31">enhancement request</a> and willingness to help test it!</li>
</ul>
</li>
<li>Removed <code class="hilight">positionFixed</code> and <code class="hilight">offset</code> options.</li>
<li>Added <code class="hilight">fixedHeight</code> option which replaces the <code class="hilight">positionFixed</code> and <code class="hilight">offset</code> options.
<h3><a href="#">Version 2.1.3.1 (3/17/2012)</a></h3>
<div>
<ul>
<li><a href="https://github.com/rozwell">Rozwell</a> contributed some <a href="https://github.com/Mottie/tablesorter/pull/35">bug fixes</a> that occur when <code>cssPageSize</code> is not set. Thanks for sharing!</li>
</ul>
</div>
<ul>
<li>If true, it should maintain the height of the table, even when viewing fewer than the set number of records (go to the last page to see this in action).</li>
<li>It works by adding an empty row to make up the differences in height.</li>
<li>There were some <strong>issues</strong> of the height being incorrect when this option is true. The problems occurred if you add/remove rows + change pager size, or just destroy/enable the pager. I think I fixed it, but if you should find a problem, please <a href="https://github.com/Mottie/tablesorter/issues">report the issue</a> and steps on how to duplicate it.</li>
</ul>
</li>
<h3><a href="#">Version 2.1</a></h3>
<div>
<ul>
<li>Ajax:
<ul>
<li>The pager plugin will now interact with a database via JSON. See <a href="example-pager-ajax.html">demo</a> here.</li>
<li>Added <code>ajaxUrl</code> option which contains the variables <code>{page}</code> and <code>{size}</code> which will be replaced by the plugin to obtain that data.
<pre class="js"><code>ajaxUrl : "http:/mydatabase.com?page={page}&size={size}"</code></pre>
</li>
<li>Another option named <code>ajaxProcessing</code> was included to process the data before returning it to the pager plugin. Basically the JSON needs to contain the data to match the example below. An additional required variable is the total number of records or rows needs to be returned.
<li>The pager <code class="hilight">container</code> option will now accept class names. So you can add multiple container blocks to control the pager, just as this page now has two, one above and one below.</li>
<li>The pager now adds all of its options to the table configuration options within an object named "pager". Basically what this means is that instead of add all of the pager options to be mixed in with the tablesorter options, the pager options have been isolated and can be found by typing this into the browser console: <code class="hilight">$('table')[0].config.pager</code>.</li>
</ul>
<pre class="js"><code>// process ajax so that the data object is returned along with the total number of rows
// example: { "data" : [{ "ID": 1, "Name": "Foo", "Last": "Bar" }], "total_rows" : 100 }
ajaxProcessing: function(ajax){
if (ajax && ajax.hasOwnProperty('data')) {
// return [ "data", "total_rows" ];
return [ ajax.data, ajax.total_rows ];
}
}</code></pre>
</li>
<li>I tried to make the plugin interact with a database as flexible as possible, but I'm sure I haven't covered every situation. So any and all feedback is welcome!</li>
<li>Also, much thanks to <a href="https://github.com/kachar">kachar</a> for the <a href="https://github.com/Mottie/tablesorter/issues/31">enhancement request</a> and willingness to help test it!</li>
</ul>
</li>
<li>Removed <code>positionFixed</code> and <code>offset</code> options.</li>
<li>Added <code>fixedHeight</code> option which replaces the <code>positionFixed</code> and <code>offset</code> options.
<h4>Version 2.0.21.2</h4>
<ul>
<li>Added <code class="hilight">"disable.pager"</code> and <code class="hilight">"enable.pager"</code> methods added to make it easier to add or delete rows from the table.</li>
</ul>
<ul>
<li>If true, it should maintain the height of the table, even when viewing fewer than the set number of records (go to the last page to see this in action).</li>
<li>It works by adding an empty row to make up the differences in height.</li>
<li>There were some <strong>issues</strong> of the height being incorrect when this option is true. The problems occurred if you add/remove rows + change pager size, or just destroy/enable the pager. I think I fixed it, but if you should find a problem, please <a href="https://github.com/Mottie/tablesorter/issues">report the issue</a> and steps on how to duplicate it.</li>
</ul>
</li>
<h4>Version 2.0.16</h4>
<ul>
<li>Reduced the number of rows in the demo from 1022 to 50, so you don't have to scroll forever (when the pager is destroyed) to see the code below the table.</li>
<li>Added <code class="hilight">"destroy.pager"</code> method will reveal the entire table, remove the pager functionality, and hide the actual pager.</li>
<li>Added a new <code class="hilight">addRows</code> method to allow adding new rows while the pager is applied to a table. Using <code class="hilight">"update"</code> would remove all non-visible rows.</li>
</ul>
<li>The pager <code>container</code> option will now accept class names. So you can add multiple container blocks to control the pager, just as this page now has two, one above and one below.</li>
<li>The pager now adds all of its options to the table configuration options within an object named "pager". Basically what this means is that instead of add all of the pager options to be mixed in with the tablesorter options, the pager options have been isolated and can be found by typing this into the browser console: <code>$('table')[0].config.pager</code>.</li>
</ul>
</div>
<h4>Version 2.0.9</h4>
<ul>
<li>Added <code class="hilight">cssDisabled</code> and <code class="hilight">pagerArrows</code> options which controls the look of the pager and arrows when the pager is on the first or last page.</li>
<li>Updated pager functions, removed "separator" option, and added output string formatting (e.g. "1 to 10 (50)").</li>
</ul>
<h3><a href="#">Version 2.0.21.2</a></h3>
<div>
<ul>
<li>Added <code>"disable.pager"</code> and <code>"enable.pager"</code> methods added to make it easier to add or delete rows from the table.</li>
</ul>
</div>
<h4>Version 2.0.7</h4>
<ul>
<li>Added <code class="hilight">"pagerChange"</code> and <code class="hilight">"pagerComplete"</code> events in version 2.0.7.</li>
</ul>
<h3><a href="#">Version 2.0.16</a></h3>
<div>
<ul>
<li>Reduced the number of rows in the demo from 1022 to 50, so you don't have to scroll forever (when the pager is destroyed) to see the code below the table.</li>
<li>Added <code>"destroy.pager"</code> method will reveal the entire table, remove the pager functionality, and hide the actual pager.</li>
<li>Added a new <code>addRows</code> method to allow adding new rows while the pager is applied to a table. Using <code>"update"</code> would remove all non-visible rows.</li>
</ul>
</div>
<h3><a href="#">Version 2.0.9</a></h3>
<div>
<ul>
<li>Added <code>cssDisabled</code> and <code>pagerArrows</code> options which controls the look of the pager and arrows when the pager is on the first or last page.</li>
<li>Updated pager functions, removed "separator" option, and added output string formatting (e.g. "1 to 10 (50)").</li>
</ul>
</div>
<h3><a href="#">Version 2.0.7</a></h3>
<div>
<ul>
<li>Added <code>"pagerChange"</code> and <code>"pagerComplete"</code> events in version 2.0.7.</li>
</ul>
</div>
</div>
</div>
</div>
<div class="next-up">
<hr />

View File

@ -14,7 +14,7 @@
<script src="js/docs.js"></script>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/blue/style.css">
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<script id="js">// add parser through the tablesorter addParser method
@ -52,7 +52,8 @@ $(function(){
});
$('table').tablesorter({
headers : {
theme: 'blue',
headers: {
0 : { sorter: 'data' },
2 : { sorter: 'data' }
},
@ -73,6 +74,13 @@ $(function(){
<div id="main">
<p class="tip">
<em>NOTE!</em>
<ul>
<li>This method of writing custom parsers will NOT work with the original tablesorter 2.0.5b plugin because the format function does not consistently provide the <code>cell</code> and <code>cellIndex</code> parameters.</li>
</ul>
</p>
<h1>Demo</h1>
<div id="demo"><table>
<thead>

View File

@ -14,11 +14,11 @@
<script src="js/docs.js"></script>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/blue/style.css">
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<script id="js">$(function(){
$("table").tablesorter();
$("table").tablesorter({ theme: 'blue' });
});</script>
</head>
<body>
@ -35,12 +35,12 @@
<ul>
<li>In tablesorter version 2.0.5 and older, only the metadata and headers options methods were available to set the parsers.</li>
<li>In versions 2.0.11+, parsers could be set using class names.</li>
<li>Currently (versions 2.3+), parsers can be set using any of the following methods, in order of priority:
<li>Currently (versions 2.3+), parsers can be set using any of the following methods (they all do the same thing), in order of priority:
<ul>
<li>jQuery data <code class="hilight">data-sorter="text"</code> (see the Javascript block below on how to set it directly).</li>
<li>metadata <code class="hilight">class="{ sorter: "text" }"</code>. This requires the metadata plugin.</li>
<li>headers option <code class="hilight">headers : { 0 : { sorter: "text" } }</code>.</li>
<li>header class name <code class="hilight">class="sorter-text"</code>.</li>
<li>jQuery data <code>data-sorter="text"</code> (see the Javascript block below on how to set it directly).</li>
<li>metadata <code>class="{ sorter: "text" }"</code>. This requires the metadata plugin.</li>
<li>headers option <code>headers : { 0 : { sorter: "text" } }</code>.</li>
<li>header class name <code>class="sorter-text"</code>.</li>
</ul>
</li>
</ul>

View File

@ -14,11 +14,11 @@
<script src="js/docs.js"></script>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/blue/style.css">
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<script id="js">$(function(){
$("table").tablesorter();
$("table").tablesorter({ theme: 'blue' });
});</script>
</head>
<body>

View File

@ -14,7 +14,7 @@
<script src="js/docs.js"></script>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/blue/style.css">
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<script src="../addons/pager/jquery.tablesorter.pager.js"></script>
@ -39,9 +39,10 @@ $.tablesorter.addParser({
$(function() {
$("table").tablesorter({
theme: 'blue'
// "sorter-grades" added as a class name in the HTML (new in v2.0.11)
// or un-comment out the option below
// headers: { 6: { sorter: 'grades' } }
// ,headers: { 6: { sorter: 'grades' } }
});
});</script>
@ -82,7 +83,7 @@ $(function() {
<td>80</td>
<td>70</td>
<td>75</td>
<td>bad</td>
<td>medium</td>
</tr>
<tr>
<td>Student02</td>
@ -100,8 +101,35 @@ $(function() {
<td>85</td>
<td>95</td>
<td>80</td>
<td>good</td>
</tr>
<tr>
<td>Student04</td>
<td>Languages</td>
<td>male</td>
<td>20</td>
<td>50</td>
<td>65</td>
<td>bad</td>
</tr>
<tr>
<td>Student05</td>
<td>Mathematics</td>
<td>female</td>
<td>70</td>
<td>78</td>
<td>70</td>
<td>medium</td>
</tr>
<tr>
<td>Student06</td>
<td>Mathematics</td>
<td>male</td>
<td>44</td>
<td>65</td>
<td>60</td>
<td>bad</td>
</tr>
</tbody>
</table></div>

View File

@ -14,13 +14,13 @@
<script src="js/docs.js"></script>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/blue/style.css">
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<script src="../addons/pager/jquery.tablesorter.pager.js"></script>
<script id="js">$(function() {
$("table").tablesorter();
$("table").tablesorter({ theme: 'blue' });
$("#trigger-link").click(function() {
// set sorting column and direction, this will sort on the first and third column the column index starts at zero

View File

@ -14,7 +14,7 @@
<script src="js/docs.js"></script>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/blue/style.css">
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<script id="js">$(function(){
@ -23,7 +23,10 @@
// call the tablesorter plugin, the magic happens in the markup
$("table")
.tablesorter()
.tablesorter({
theme: 'blue',
showProcessing : true
})
// assign the sortStart event
.bind("sortStart",function(e, t){

View File

@ -14,7 +14,7 @@
<script src="js/docs.js"></script>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/blue/style.css">
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<style>
@ -23,7 +23,7 @@
<script id="js">$(function() {
$("table").tablesorter({ sortList: [[3,1],[0,0]] });
$("table").tablesorter({ theme: 'blue', sortList: [[3,1],[0,0]] });
$("table tbody td.discount").click(function() {

View File

@ -0,0 +1,286 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - jQuery UITheme Widget (Bootstrap)</title>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<!-- Demo stuff -->
<link rel="stylesheet" href="css/jq.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/chili/jquery.chili-2.2.js"></script>
<script src="js/chili/recipes.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() {
$.extend($.tablesorter.themes.bootstrap, {
// these classes are added to the table. To see other table classes available,
// look here: http://twitter.github.com/bootstrap/base-css.html#tables
table : 'table table-bordered table-striped',
header : 'bootstrap-header', // give the header a gradient background
icons : '', // add "icon-white" to make them white; this icon class is added to the <i> in the header
sortNone : 'bootstrap-icon-unsorted',
sortAsc : 'icon-chevron-up',
sortDesc : 'icon-chevron-down',
active : '', // applied when column is sorted
hover : '', // use custom css here - bootstrap class may not override it
filterRow: '', // filter row class
even : '', // odd row zebra striping
odd : '' // even row zebra striping
});
// call the tablesorter plugin and apply the uitheme widget
$("table").tablesorter({
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)
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",
// set the uitheme widget to use the bootstrap theme class names
uitheme : "bootstrap"
}
})
.tablesorterPager({
// target the pager markup - see the HTML block below
container: $(".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);
// the commented out code below will filter the rows
// without adding text to the filter input
// ******************
// var filter = [];
// filter[col] = txt; // get text to filter
// $('table').trigger('search', [filter]);
});
// toggle zebra widget
$('button.zebra').click(function(){
var t = $(this).find('i').hasClass('icon-ok');
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')[0].config.widgets = (t) ? ["uitheme", "filter"] : ["uitheme", "filter", "zebra"];
$(this)
.toggleClass('btn-danger btn-success')
.find('i')
.toggleClass('icon-ok icon-remove').end()
.find('span')
.text(t ? 'disabled' : 'enabled');
$('table').trigger('applyWidgets');
});
});
</script>
</head>
<body>
<div id="banner">
<h1>table<em>sorter</em></h1>
<h2>jQuery UITheme Widget (Bootstrap)</h2>
<h3>Flexible client-side table sorting</h3>
<a href="index.html">Back to documentation</a>
</div>
<div id="main">
<p class="tip">
<span class="label label-info">NOTE!</span>
<ul>
<li>This widget can be applied to the original plugin. The code is in the "jquery.tablesorter.widgets.js" file.</li>
<li><span class="label label-info">New!</span> 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 <code>uitheme</code> widget option 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-success">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 class="filter btn-primary" data-column="5" data-filter=">80"><i class="icon-white icon-filter"></i> Filter ">80"</button> in the "Calculus" column.</li>
<li>Try other filter searches with the zebra widget disabled, like <button class="filter btn-primary" data-column="2" data-filter="male"><i class="icon-white icon-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 will over-ride the <code>nth-child()</code> styling.</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>
</p>
<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 class="reset btn btn-primary" data-column="0" data-filter=""><i class="icon-white icon-refresh"></i> Reset filters</button>
<br>
Zebra widget : <button class="zebra btn btn-success"><i class="icon-white icon-ok"></i> <span>enabled</span></button>
</div>
<br>
<div id="demo"><table class="tablesorter">
<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="pager form-horizontal">
<button class="btn first"><i class="icon-step-backward"></i></button>
<button class="btn prev"><i class="icon-arrow-left"></i></button>
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
<button class="btn next"><i class="icon-arrow-right"></i></button>
<button class="btn last"><i class="icon-step-forward"></i></button>
<select class="pagesize input-small" 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-small" 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="html">&lt;!-- Bootstrap stylesheet --&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;/css/bootstrap.min.css&quot;&gt;
&lt;!-- bootstrap widget theme --&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;/tablesorter/css/theme.bootstrap.css&quot;&gt;
&lt;!-- tablesorter plugin --&gt;
&lt;script src=&quot;../js/jquery.tablesorter.js&quot;&gt;&lt;/script&gt;
&lt;!-- tablesorter widget file - loaded after the plugin --&gt;
&lt;script src=&quot;../js/jquery.tablesorter.widgets.js&quot;&gt;&lt;/script&gt;</pre>
</div>
<h2>Javascript</h2>
<div id="javascript">
<pre class="js"></pre>
</div>
<div class="next-up">
<hr />
Next up: <a href="example-widget-resizable.html">Resizable Columns widget &rsaquo;&rsaquo;</a>
</div>
</div>
</body>
</html>

View File

@ -5,7 +5,7 @@
<title>jQuery plugin: Tablesorter 2.0 - Columns Style Widget</title>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.min.js"></script>
<!-- Demo stuff -->
<link rel="stylesheet" href="css/jq.css">
@ -14,40 +14,57 @@
<script src="js/docs.js"></script>
<!-- Tablesorter: required -->
<link class="theme" rel="stylesheet" href="../css/blue/style.css">
<link class="theme" rel="stylesheet" href="../css/green/style.css" disabled>
<link rel="stylesheet" href="../css/theme.default.css">
<link rel="stylesheet" href="../css/theme.blue.css">
<link rel="stylesheet" href="../css/theme.green.css">
<link rel="stylesheet" href="../css/theme.grey.css">
<link rel="stylesheet" href="../css/theme.ice.css">
<link rel="stylesheet" href="../css/theme.black-ice.css">
<link rel="stylesheet" href="../css/theme.dark.css">
<link rel="stylesheet" href="../css/theme.dropbox.css">
<script src="../js/jquery.tablesorter.js"></script>
<script src="../js/jquery.tablesorter.widgets.js"></script>
<!-- Tablesorter: optional -->
<!-- <script src="../addons/pager/jquery.tablesorter.pager.js"></script> -->
<script id="js">$(function() {
<script id="js">$(function() {
// call the tablesorter plugin
$("table").tablesorter({
theme : 'blue',
sortList : [[1,0],[2,0],[3,0]],
// initialize zebra striping and column styling of the table
widgets: ["zebra", "columns"],
// change the default column class names
// primary is the first column sorted, secondary is the second, etc
widgetOptions: {
columns: [ "primary", "secondary", "tertiary" ]
// change the default column class names
// primary is the first column sorted, secondary is the second, etc
columns: [ "primary", "secondary", "tertiary" ],
// include thead when adding class names
columns_thead : true,
// include tfoot when adding class names
columns_tfoot : true
}
});
});</script>
<script>
$(function() {
$('select').change(function(){
var theme = $(this).val().toLowerCase(),
files = $('link.theme');
files.each(function(){ this.disabled = true; });
files.filter('[href*="' + theme + '"]')[0].disabled = false;
}).trigger('change');
var themes = 'default blue green grey ice blackice dark dropbox',
i, o = '', t = themes.split(' ');
for (i = 0; i < t.length; i++) {
o += '<option>' + t[i] + '</option>';
}
$('select')
.html(o)
.change(function(){
var theme = $(this).val().toLowerCase();
$('table')
.removeClass('tablesorter-' + t.join(' tablesorter-'))
.addClass('tablesorter-' + theme);
}).trigger('change');
});
</script>
</head>
@ -64,16 +81,15 @@ $(function() {
<em>NOTE!</em>
<ul>
<li>This widget can be applied to the original plugin. The code is in the "jquery.tablesorter.widgets.js" file.</li>
<li>The original "widgetColumns" option has been replaced by "widgetOptions.columns". See the javascript block below for more details. <span class="tip"><em>New! v2.1</em></span></li>
<li>The original "widgetColumns" option has been replaced by "widgetOptions.columns". See the javascript block below for more details (v2.1).</li>
<li>Table header and footer rows now get updated with the columns widget classes. Check out the "grey" theme to see. <span class="tip"><em>New! v2.4</em></span></li>
</ul>
</p>
<h1>Demo</h1>
Choose Theme:
<select>
<option>Blue</option>
<option>Green</option>
</select>
<select></select>
<br><br>
<div id="demo"><table class="tablesorter">
<thead>
@ -86,6 +102,16 @@ $(function() {
<th>Date</th>
</tr>
</thead>
<tfoot>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Total</th>
<th>Discount</th>
<th>Date</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Peter</td>
@ -133,7 +159,7 @@ $(function() {
<h1>Page Header</h1>
<div>
<pre class="html">&lt;!-- blue theme stylesheet with additional css styles added in v2.0.17 --&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;../css/blue/style.css&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;../css/theme.blue.css&quot;&gt;
&lt;!-- tablesorter plugin --&gt;
&lt;script src=&quot;../js/jquery.tablesorter.js&quot;&gt;&lt;/script&gt;
@ -154,25 +180,28 @@ $(function() {
as definitions for the "primary", "secondary" and "tertiary" sorts.
*/
/* Column Widget - column sort colors */
table.tablesorter tbody td.primary, table.tablesorter tbody tr.odd td.primary {
background-color: #c0c0ff;
table.tablesorter-blue td.primary,
table.tablesorter-blue tr.odd td.primary {
background-color: #99b3e6;
}
table.tablesorter tbody tr.even td.primary {
background-color: #e8e8ff;
table.tablesorter-blue tr.even td.primary {
background-color: #c2d1f0;
}
table.tablesorter tbody td.secondary, table.tablesorter tbody tr.odd td.secondary {
background-color: #d6d6ff;
table.tablesorter-blue td.secondary,
table.tablesorter-blue tr.odd td.secondary {
background-color: #c2d1f0;
}
table.tablesorter tbody tr.even td.secondary {
background-color: #e8e8ff;
table.tablesorter-blue tr.even td.secondary {
background-color: #d6e0f5;
}
table.tablesorter tbody td.tertiary, table.tablesorter tbody tr.odd td.tertiary {
background-color: #e5e5ff;
table.tablesorter-blue td.tertiary,
table.tablesorter-blue tr.odd td.tertiary {
background-color: #d6e0f5;
}
table.tablesorter tbody tr.even td.tertiary {
background-color: #f8f8ff;
table.tablesorter-blue tr.even td.tertiary {
background-color: #ebf0fa;
}</pre>
</div>

View File

@ -4,27 +4,65 @@
<meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Custom Filter Widget</title>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<!-- Demo stuff -->
<link class="ui-theme" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/jquery-ui.min.js"></script>
<link rel="stylesheet" href="css/jq.css">
<script src="js/chili/jquery.chili-2.2.js"></script>
<script src="js/chili/recipes.js"></script>
<script src="js/docs.js"></script>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/blue/style.css">
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<script src="../js/jquery.tablesorter.widgets.js"></script>
<!-- Tablesorter: optional -->
<!-- <script src="../addons/pager/jquery.tablesorter.pager.js"></script> -->
<script>
$(function(){
<script id="js">$(function() {
$('.accordion').accordion({
autoHeight: false,
collapsible : true
});
// External search
// buttons set up like this:
// <button class="search" data-filter-column="4" data-filter-text="2?%">Saved Search</button>
$('button.match').click(function(){
// toggle "filter-match" class on first column
var first = $('table').find('th:first').toggleClass('filter-match');
$('#mode').html( '' + first.hasClass('filter-match') );
/*** first method *** data-filter-column="1" data-filter-text="!son"
add search value to Discount column (zero based index) input */
var filters = $('table').find('.tablesorter-filter'),
col = $(this).data('filter-column'), // zero-based index
txt = $(this).data('filter-text'); // text to add to filter
filters.val(''); // clear all filters
filters.eq(col).val(txt).trigger('search', false);
});
});
</script>
<script id="js">$(function() {
// call the tablesorter plugin
$("table").tablesorter({
theme: 'blue',
// hidden filter input/selects will resize the columns, so try to minimize the change
widthFixed : true,
// initialize zebra striping and filter widgets
widgets: ["zebra", "filter"],
@ -34,24 +72,35 @@
widgetOptions : {
// css class applied to the table row containing the filters & the inputs within that row
filter_cssFilter : 'tablesorter-filter',
filter_cssFilter : 'tablesorter-filter',
// If there are child rows in the table (rows with class name from "cssChildRow" option)
// and this option is true and a match is found anywhere in the child row, then it will make that row
// visible; default is false
filter_childRows : false,
filter_childRows : false,
// Set this option to true to use the filter to find text from the start of the column
// So typing in "a" will find "albert" but not "frank", both have a's; default is false
filter_startsWith : false,
// if true, filters are collapsed initially, but can be revealed by hovering over the grey bar immediately
// below the header row. Additionally, tabbing through the document will open the filter row when an input gets focus
filter_hideFilters : false,
// Set this option to false to make the searches case sensitive
filter_ignoreCase : true,
filter_ignoreCase : true,
// jQuery selector string of an element used to reset the filters
filter_reset : '.reset',
// Delay in milliseconds before the filter widget starts searching; This option prevents searching for
// every character while typing and should make searching large tables faster.
filter_searchDelay : 300,
// Set this option to true to use the filter to find text from the start of the column
// So typing in "a" will find "albert" but not "frank", both have a's; default is false
filter_startsWith : false,
// if false, filters are collapsed initially, but can be revealed by hovering over the grey bar immediately
// below the header row. Additionally, tabbing through the document will open the filter row when an input gets focus
filter_hideFilters : false,
// Add select box to 4th column (zero-based index)
// each option has an associated function that returns a boolean
// function variables:
@ -92,32 +141,11 @@
}
}
// ,debug: true
});
});</script>
<script>
$(function(){
// *** widgetfilter_startsWith toggle button ***
$('button.toggle').click(function(){
var c = $('table')[0].config,
// toggle the boolean
fsw = !c.widgetOptions.filter_startsWith,
fic = !c.widgetOptions.filter_ignoreCase;
if ($(this).hasClass('fsw')) {
c.widgetOptions.filter_startsWith = fsw;
$('#start').html(fsw.toString());
} else {
c.widgetOptions.filter_ignoreCase = fic;
$('#case').html(fic.toString());
}
// update search after option change; add false to trigger to skip search delay
$('input.tablesorter-filter:eq(0)').trigger('search', false);
});
});
</script>
</head>
<body>
<div id="banner">
@ -128,62 +156,115 @@ $(function(){
</div>
<div id="main">
<p class="tip">
<em>NOTE!</em>
Custom filter widget option <code class="hilight">filter_functions</code> was added in version 2.3.6:
<ul>
<li><strong>Default Select</strong> - See the "First Name" column below.
<ul>
<li>To enable this type of select, set the <code class="hilight">filter_functions</code> option for the column to <code class="hilight">true</code>, and/or add a "filter-select" class to the column header cell.</li>
<li>The default option text, "Select a name", is obtained from the header <code class="hilight">data-placeholder</code> attribute of the column header cell. And when active, it will show all table rows.</li>
<li>The select is populated by the column text contents with repeated content combined (i.e. There are three "Aaron"'s in the first column, but only one in the dropdown.</li>
<li>Select options are automatically sorted.</li>
</ul>
</li>
<li><strong>Custom Select</strong> - See the "Total" column.
<ul>
<li>To enable this type of select, add your custom options within the <code class="hilight">filter_functions</code> option.</li>
<li>Each option is set as a "key:value" pair where the "key" is the actual text of the option and the "value" is the function associated with the option. See the example below.</li>
<li>See the filter function information below.</li>
</ul>
</li>
<li><strong>Custom Filter Function</strong> - See the "Last Name" column.
<ul>
<li>To enable this type of filter, add your custom function to the <code class="hilight">filter_functions</code> option following the example below.</li>
<li>The example below shows you how to show only exact matches. The problem with this is that you can't see the matches while typing unless you set the <code class="hilight">filter_searchDelay</code> option to be a bit longer.</li>
<li>Also, the example only checks for an exact match (<code class="hilight">===</code>) meaning the <code class="hilight">filter_ignoreCase</code> option is ignored, but other comparisons can be made using regex and the insensitive "i" flag.</li>
<li>See the filter function information below.</li>
</ul>
</li>
<p></p>
<br>
<div class="accordion">
<li><strong>Filter function information</strong>:
<ul>
<li>The custom function must return a boolean value. If <code class="hilight">true</code> is returned, the row will be shown if all other filters match; and if <code class="hilight">false</code> is returned, the row will be hidden.</li>
<li>The <strong>exact text (e)</strong> of the table cell is a variable passed to the function. Note that numbers will need to be parsed to make comparisons.</li>
<li><strong>Normalized table cell data (n)</strong> is the next varibale passed to the function.
<ul>
<li>This data has been parsed by the assigned column parser, so make sure the same type of data is being compared as parsed data may not be what you expect.</li>
<li>Normalized numerical values within the table will be of numeric type and not of string type, as the sorter needs to use mathematical comparisons while sorting.</li>
<li>The data will be in lower-case if the <code class="hilight">filter_ignoreCase</code> option is <code class="hilight">true</code>.</li>
<li>Dates like in the last column of the table below will store the time in seconds since 1970 (using javascript's .getTime() function).</li>
<li>The percentage column will only store the number and not percentage sign.</li>
</ul>
</li>
<li>The <strong>filter input value (f)</strong> is the exact text entered by the user. If numerical, it will need to be parsed using parseFloat() or parseInt() to allow for making comparisons.</li>
<li>The <strong>column index (i)</strong> might be useful for obtaining more information from header, or something.</li>
</ul>
</li>
</ul>
</p>
<h3><a href="#">Notes</a></h3>
<div>
<ul>
<li>Custom filter widget option <code>filter_functions</code> was added in version 2.3.6.</li>
<li>This widget does work with tablesorter v2.0.5.</li>
</ul>
</div>
<h3><a href="#"><strong>Default Select</strong> ("First Name" column)</a></h3>
<div>
<ul>
<li>To enable this type of select, set the <code>filter_functions</code> option for the column to <code>true</code>,<pre>filter_functions : {
// Add select menu to this column
// set the column value to true, and/or add "filter-select" class name to header
0 : true
}</pre>or add a "filter-select" class to the column header cell (see code below).</li>
<li>The default option text, "Select a name", is obtained from the header <code>data-placeholder</code> attribute of the column header cell. And when active, it will show all table rows.<pre>&lt;th class=&quot;filter-select&quot; data-placeholder=&quot;Select a name&quot;&gt;First Name&lt;/th&gt;</pre></li>
<li>Add a "filter-match" class to only match instead of exactly match the selected value. Click on the "Match" button below to see the difference.<pre>&lt;th class=&quot;filter-select filter-match&quot; data-placeholder=&quot;Select a name&quot;&gt;First Name&lt;/th&gt;</pre></li>
<li>The select is populated by the column text contents with repeated content combined (i.e. There are three "Aaron"'s in the first column, but only one in the dropdown.</li>
<li>Select options are automatically alphanumerically (new in v2.4) sorted.</li>
</ul>
</div>
<h3><a href="#"><strong>Custom Filter Function</strong> ("Last Name" column)</a></h3>
<div>
<ul>
<li>To enable this type of filter, add your custom function to the <code>filter_functions</code> option following this example:<pre>filter_functions : {
// Exact match only
1 : function(e, n, f, i) {
return e === f;
}
}</pre></li>
<li>The example shows you how to show only exact matches. The problem with this is that you can't see the matches while typing unless you set the <code>filter_searchDelay</code> option to be a bit longer.</li>
<li>Also, the example only checks for an exact match (<code>===</code>) meaning the <code>filter_ignoreCase</code> option is ignored, but other comparisons can be made using regex and the insensitive "i" flag.</li>
<li>See the filter function information below.</li>
</ul>
</div>
<h3><a href="#"><strong>Custom Select</strong> ("City" or "Total" column)</a></h3>
<div>
<ul>
<li>To enable this type of select, add your custom options within the <code>filter_functions</code> option.</li>
<li>Each option is set as a "key:value" pair where the "key" is the actual text of the option and the "value" is the function associated with the option.</li>
<li>Here is an example using alphabetical comparisons (using regular expressions):<pre>filter_functions : {
// Add these options to the select dropdown (regex example)
2 : {
"A - D" : function(e, n, f, i) { return /^[A-D]/.test(e); },
"E - H" : function(e, n, f, i) { return /^[E-H]/.test(e); },
"I - L" : function(e, n, f, i) { return /^[I-L]/.test(e); },
"M - P" : function(e, n, f, i) { return /^[M-P]/.test(e); },
"Q - T" : function(e, n, f, i) { return /^[Q-T]/.test(e); },
"U - X" : function(e, n, f, i) { return /^[U-X]/.test(e); },
"Y - Z" : function(e, n, f, i) { return /^[Y-Z]/.test(e); }
}
}</pre></li>
<li>Here is an example using numerical comparisons:<pre>filter_functions : {
// Add these options to the select dropdown (numerical comparison example)
// Note that only the normalized (n) value will contain numerical data
// If you use the exact text, you'll need to parse it (parseFloat or parseInt)
4 : {
"< $10" : function(e, n, f, i) { return n < 10; },
"$10 - $100" : function(e, n, f, i) { return n >= 10 && n <=100; },
"> $100" : function(e, n, f, i) { return n > 100; }
}
}</pre></li>
<li>See the "Filter function information" section below.</li>
</ul>
</div>
<h3><a href="#"><strong>Filter function information</strong></a></h3>
<div>
<ul>
<li>The custom function must return a boolean value. If <code>true</code> is returned, the row will be shown if all other filters match; and if <code>false</code> is returned, the row will be hidden.<pre>function(e, n, f, i) { return test; /* test should be a Boolean (true or false) */ }</pre></li>
<li>The <strong>exact text (e)</strong> of the table cell is a variable passed to the function. Note that numbers will need to be parsed to make comparisons.</li>
<li><strong>Normalized table cell data (n)</strong> is the next varibale passed to the function.
<ul>
<li>This data has been parsed by the assigned column parser, so make sure the same type of data is being compared as parsed data may not be what you expect.</li>
<li>Normalized numerical values within the table will be of numeric type and not of string type, as the sorter needs to use mathematical comparisons while sorting.</li>
<li>The data will be in lower-case if the <code>filter_ignoreCase</code> option is <code>true</code>.</li>
<li>Dates like in the last column of the table below will store the time in seconds since 1970 (using javascript's .getTime() function).</li>
<li>The percentage column will only store the number and not percentage sign.</li>
</ul>
</li>
<li>The <strong>filter input value (f)</strong> is the exact text entered by the user. If numerical, it will need to be parsed using parseFloat() or parseInt() to allow for making comparisons.</li>
<li>The <strong>column index (i)</strong> might be useful for obtaining more information from header, or something.</li>
</ul>
</div>
</div>
<h1>Demo</h1>
<button class="toggle fsw">Toggle</button> filter_startsWith : <span id="start">false</span> (if true, search from beginning of cell content only)<br>
<button class="toggle fic">Toggle</button> filter_ignoreCase : <span id="case">true</span> (if false, the search will be case sensitive)
<button class="match" data-filter-column="0" data-filter-text="Denni">Match</button> <span id="mode">false</span> (toggle "filter-match" class on First Name column)<br>
<button class="reset">Reset Search</button>
<div id="demo"><table class="tablesorter">
<thead>
<tr>
<th class="filter-select" data-placeholder="Select a name">First Name</th> <!-- add "filter-select" class or filter_functions : { 0: true } -->
<!-- add "filter-select" class or filter_functions : { 0: true } -->
<!-- add "filter-match" class to just match the content, so selecting "Denni" will also show "Dennis" -->
<th class="filter-select" data-placeholder="Select a name">First Name</th>
<th data-placeholder="Exact matches only">Last Name</th>
<th data-placeholder="Choose a city">City</th>
<th>Age</th>
@ -221,7 +302,7 @@ $(function(){
<td>Oct 13, 2000 1:15 PM</td>
</tr>
<tr>
<td>Peter</td>
<td>Denni</td>
<td>Henry</td>
<td>New York</td>
<td>28</td>
@ -248,7 +329,7 @@ $(function(){
<td>Jan 12, 2003 11:14 AM</td>
</tr>
<tr>
<td>John</td>
<td>Peter</td>
<td>Kent Esq</td>
<td>Seattle</td>
<td>45</td>
@ -325,7 +406,7 @@ $(function(){
<div class="next-up">
<hr />
Next up: <a href="example-widget-ui-theme.html">jQuery UI theme widget &rsaquo;&rsaquo;</a>
Next up: <a href="example-widget-ui-theme.html">UITheme widget - jQuery UI theme &rsaquo;&rsaquo;</a>
</div>
</div>

View File

@ -4,27 +4,40 @@
<meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Filter Widget</title>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js"></script>
<!-- Demo stuff -->
<link class="ui-theme" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/jquery-ui.min.js"></script>
<link rel="stylesheet" href="css/jq.css">
<script src="js/chili/jquery.chili-2.2.js"></script>
<script src="js/chili/recipes.js"></script>
<script src="js/docs.js"></script>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/blue/style.css">
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<script src="../js/jquery.tablesorter.widgets.js"></script>
<!-- Tablesorter: optional -->
<!-- <script src="../addons/pager/jquery.tablesorter.pager.js"></script> -->
<script>
$(function(){
$('.accordion').accordion({
autoHeight: false,
collapsible : true
});
});
</script>
<script id="js">$(function() {
<script id="js">$(function() {
// call the tablesorter plugin
$("table").tablesorter({
theme: 'blue',
// hidden filter input/selects will resize the columns, so try to minimize the change
widthFixed : true,
// initialize zebra striping and filter widgets
widgets: ["zebra", "filter"],
@ -33,36 +46,79 @@
widgetOptions : {
// css class applied to the table row containing the filters & the inputs within that row
filter_cssFilter : 'tablesorter-filter',
// If there are child rows in the table (rows with class name from "cssChildRow" option)
// and this option is true and a match is found anywhere in the child row, then it will make that row
// visible; default is false
filter_childRows : false,
// Set this option to true to use the filter to find text from the start of the column
// So typing in "a" will find "albert" but not "frank", both have a's; default is false
filter_startsWith : false,
// if true, a filter will be added to the top of each table column;
// disabled by using -> headers: { 1: { filter: false } } OR add class="filter-false"
// if you set this to false, make sure you perform a search using the second method below
filter_columnFilters : true,
// css class applied to the table row containing the filters & the inputs within that row
filter_cssFilter : 'tablesorter-filter',
// add custom filter functions using this option
// see the filter widget custom demo for more specifics on how to use this option
filter_functions : null,
// if true, filters are collapsed initially, but can be revealed by hovering over the grey bar immediately
// below the header row. Additionally, tabbing through the document will open the filter row when an input gets focus
filter_hideFilters : true,
// Set this option to false to make the searches case sensitive
filter_ignoreCase : true,
// jQuery selector string of an element used to reset the filters
filter_reset : 'button.reset',
// Delay in milliseconds before the filter widget starts searching; This option prevents searching for
// every character while typing and should make searching large tables faster.
filter_searchDelay : 300,
// See the filter widget advanced demo on how to use these special functions
filter_functions : {}
// Set this option to true to use the filter to find text from the start of the column
// So typing in "a" will find "albert" but not "frank", both have a's; default is false
filter_startsWith : false,
// Filter using parsed content for ALL columns
// be careful on using this on date columns as the date is parsed and stored as time in seconds
filter_useParsedData : false
}
// ,debug: true
});
// External search
// buttons set up like this:
// <button class="search" data-filter-column="4" data-filter-text="2?%">Saved Search</button>
$('button.search').click(function(){
/*** first method *** data-filter-column="1" data-filter-text="!son"
add search value to Discount column (zero based index) input */
var filters = $('table').find('input.tablesorter-filter'),
col = $(this).data('filter-column'), // zero-based index
txt = $(this).data('filter-text'); // text to add to filter
filters.val(''); // clear all filters
filters.eq(col).val(txt).trigger('search', false);
/*** second method ***
this method bypasses the filter inputs, so the "filter_columnFilters"
option can be set to false (no column filters showing)
******/
/*
var columns = [];
columns[4] = '2?%'; // or define the array this way [ '', '', '', '2?%' ]
$('table').trigger('search', [columns]);
*/
});
});</script>
<script>
$(function(){
// *** widgetfilter_startsWith toggle button ***
$('button.toggle').click(function(){
var c = $('table')[0].config,
@ -77,8 +133,9 @@ $(function(){
$('#case').html(fic.toString());
}
// update search after option change; add false to trigger to skip search delay
$('input.tablesorter-filter:eq(0)').trigger('search', false);
$('table').trigger('search', false);
});
});
</script>
@ -92,61 +149,184 @@ $(function(){
</div>
<div id="main">
<p class="tip">
<em>NOTE!</em>
<ul>
<li>In version 2.3.6, these changes were made:
<p></p>
<br>
<div class="accordion">
<h3><a href="#">Notes</a></h3>
<div>
<ul>
<li>Hover over the grey bar below the table header to open the filter row. Disable this by setting <code>filter_hideFilters</code> option to <code>false</code>.</li>
<li>This widget uses jQuery's <code>.nextUntil()</code> function which is only available is jQuery version 1.4+.</li>
<li>This widget does work with tablesorter v2.0.5.</li>
</ul>
</div>
<h3><a href="#">Options</a></h3>
<div>
<h3>Filter widget defaults (added inside of tablesorter <code>widgetOptions</code>)</h3>
<ul>
<li><code>filter_childRows : false</code> - if true, filter includes child row content in the search.</li>
<li><code>filter_columnFilters : true</code> - if true, a filter will be added to the top of each table column.</li>
<li><code>filter_cssFilter : 'tablesorter-filter'</code> - css class name added to the filter row & each input in the row.</li>
<li><code>filter_functions : null</code> - add custom filter functions using this option.</li>
<li><code>filter_hideFilters : false</code> - if true, filters are hidden initially, but can be revealed by clicking on the filter icon.</li>
<li><code>filter_ignoreCase : true</code> - if true, make all searches case-insensitive.</li>
<li><code>filter_reset : null</code> - jQuery selector string of an element used to reset the filters.</li>
<li><code>filter_searchDelay : 300</code> - typing delay in milliseconds before starting a search.</li>
<li><code>filter_startsWith : false</code> - if true, filter start from the beginning of the cell contents.</li>
<li><code>filter_useParsedData : false</code> - filter all data using parsed content.</li>
</ul>
</div>
<h3><a href="#">Classes</a></h3>
<div>
<ul>
<li><code>filter-false</code> - disable the filter for a specific header column.</li>
<li><code>filter-select</code> - build a default select box for a column (shows unique column content). See the <a href="example-widget-filter-custom.html">custom filter widget</a> demo for an example.</li>
<li><code>filter-match</code> - only applies to "filter-select" columns. Makes the select match the column contents instead of exactly matching.</li>
<li><code>filter-parsed</code> - set a column to filter through parsed data instead of the actual table cell content.</li>
</ul>
</div>
<h3><a href="#">Changes</a></h3>
<div class="inner">
<div class="accordion">
<h3><a href="#">v2.4</a></h3>
<div>
<ul>
<li>Include filter input boxes placeholder text by adding <code class="hilight">data-placeholder</code> to the column header cell; e.g. <code class="hilight">data-placeholder="First Name"</code>. See the examples in the HTML code block below.</li>
<li>Exact match added. Add a quote (single or double) to the end of the string to find an exact match. In the first column enter <code class="hilight">Clark"</code> to only find Clark and not Brandon Clark.</li>
<li>Wild cards added:
<li>Added the ability to enter operators into the filter. Added <code>< <= >= > ! =</code>
<ul>
<li><code class="hilight">?</code> (question mark) finds any single non-space character.<br>In the discount column, adding <code class="hilight">1?%</code> in the filter will find all percentages between "10%" and "19%". In the last column, <code class="hilight">J?n</code> will find "Jun" and "Jan".</li>
<li><code class="hilight">*</code> (asterisk) finds multiple non-space characters.<br>In the first column below Enter <code class="hilight">Br*</code> will find multiple names starting with "Br". Now add a space at the end, and "Bruce" will not be included in the results.</li>
<li>Click any of the following buttons to perform a search in the table below. Click and scroll down!</li>
<li>To find values greater than 10, enter <code>&gt;10</code>.</li>
<li>To find letters less than M, enter <button class="search" data-filter-column="1" data-filter-text="<m">&lt;m</button>, but to find letters greater than M, enter <button class="search" data-filter-column="1" data-filter-text=">=n">&gt;=n</button>, because <button class="search" data-filter-column="1" data-filter-text=">m">&gt;m</button> will include <code>ma</code> because <code>ma &gt; m</code>.</li>
<li>To find people that don't have "son" in their name, enter <button class="search" data-filter-column="2" data-filter-text="!son">!son</button> or to only look for males, enter <code>!female</code>.</li>
<li>Exact matches can be done using quotes, as before, or by using an equal sign <code>=</code>, e.g. find the exact number 10 by using <button class="search" data-filter-column="0" data-filter-text="10=">10=</button>.</li>
<li><strong>Note #1</strong> In currency, percent or other numerical columns with numbers, the operators will ignore these extra symbols when parsing the value. So to find values greater than 30%, ignore the percent sign and use <button class="search" data-filter-column="5" data-filter-text=">30">&gt; 30</button>.</li>
<li><strong>Note #2</strong> when using any of the above operators, the child row content is ignored even if <code>filter_childRows</code> is set to <code>true</code>.</li>
</ul>
</li>
<li>Regex method added. Use standard regex within the filter to filter the columns. For example enter <code class="hilight">/20[1-9]\d/</code> or <code class="hilight">/20[^0]\d/</code> in the last column to find all dates greater than 2009.</li>
<li>Added <code class="hilight">filter_functions</code> option which allows you to add a custom filter function for a column or to a dropdown list. Please see the <a href="example-widget-filter-custom.html">jQuery filter widget, advanced</a> demo for more details.</a></li>
<li>Added "filterStart" and "filterEnd" triggered events on the table. This is used by the updated pager plugin to allow it to work with the filter widget.</li>
<li>Added <code>filter_columnFilters</code> option which when <code>true</code> will add a filter to each column. If <code>false</code>, no filter row is added.</li>
<li>Added <code>filter_reset</code> option which will contain a jQuery selector pointing to a reset element (button or link).</li>
<li>Added <code>filter_useParsedData</code> option
<ul>
<li>When <code>true</code>, ALL filter searches will only use parsed data.</li>
<li>To only use parsed data in specific columns, set this option to <code>false</code> and use any of the following (they all do the same thing), set in order of priority:
<ul>
<li>jQuery data <code>data-filter="parsed"</code>.</li>
<li>metadata <code>class="{ filter: 'parsed'}"</code>. This requires the metadata plugin.</li>
<li>headers option <code>headers : { 0 : { filter : 'parsed' } }</code>.</li>
<li>header class name <code>class="filter-parsed"</code>.</li>
</ul>
</li>
<li>Remember that parsed data most likely doesn't match the actual table cell text, <code>20%</code> becomes <code>20</code> and <code>Jan 1, 2013 12:01 AM</code> becomes <code>1357020060000</code>.</li>
</ul>
</li>
<li>Added a method to apply a filter to the table when <code>filter_columnFilters</code> is <code>false</code> by triggering a search on the table.
<h3>Search by columns</h3>
<pre class="js"><code>// *** applies to both basic & advanced filter widgets ***
// search using an array - the index of the array matches the column index
// [ column0, column1, column2, ..., columnN ]
var columns = []; // undefined array elements are treated as an empty search ''
columns[4] = '2?%'; // is equivalent to defining the array this way [ '', '', '', '2?%' ]
$('table').trigger('search', [columns]);
</code></pre>
</li>
</ul>
</li>
<li>In version 2.0.19.1, a filter header option and header class name check was added to allow disabling the filter in a specific column.</li>
<li>In versions 2.3+, the filter widget can be disabled using any of the following methods, in order of priority:
</div>
<h3><a href="#">v2.3.6</a></h3>
<div>
<ul>
<li>jQuery data <code class="hilight">data-filter="false"</code>.</li>
<li>metadata <code class="hilight">class="{ filter: false }"</code>. This requires the metadata plugin.</li>
<li>headers option <code class="hilight">headers : { 0 : { filter: false } }</code>.</li>
<li>header class name <code class="hilight">class="filter-false"</code>.</li>
<li>Include filter input boxes placeholder text by adding <code>data-placeholder</code> to the column header cell; e.g. <code>data-placeholder="First Name"</code>. See the examples in the HTML code block below.</li>
<li>Exact match added. Add a quote (single or double) to the end of the string to find an exact match. In the first column enter <code>Clark"</code> to only find Clark and not Brandon Clark.</li>
<li>Wild cards added:
<ul>
<li><code>?</code> (question mark) finds any single non-space character.<br>In the discount column, adding <code>2?%</code> in the filter will find all percentages between "10%" and "19%". In the last column, <code>J?n</code> will find "Jun" and "Jan".</li>
<li><code>*</code> (asterisk) finds multiple non-space characters.<br>In the first column below Enter <code>B*</code> will find multiple names starting with "B". Now add a space at the end, and "Bruce" will not be included in the results.</li>
</ul>
</li>
<li>Regex method added.
<ul>
<li>Use standard regex within the filter to filter the columns.</li>
<li>For example enter <code>/20[1-9]\d/</code> or <code>/20[^0]\d/</code> in the last column to find all dates greater than 2009.</li>
<li>Another example would be to switch the <code>filter_ignoreCase</code> value to <code>false</code> and then enter <code>/JAN/i</code> to find "Jan" with a case-insenstive regex flag.</li>
</ul>
</li>
<li>Added <code>filter_functions</code> option which allows you to add a custom filter function for a column or to a dropdown list. Please see the <a href="example-widget-filter-custom.html">jQuery filter widget, advanced</a> demo for more details.</li>
</ul>
</li>
<li>Replaced <code class="hilight">widgetFilterChildRows</code> option with <code class="hilight">widgetOptions.filter_childRows</code> (v2.1).</li>
<li>Added <code class="hilight">widgetOptions.filter_startsWith</code> option which when <code class="hilight">true</code>, allows you to search the table from the starting of the table cell text. Use the toggle button to see the difference, and that it can be dynamically changed! (v2.1).</li>
<li>Added <code class="hilight">widgetOptions.filter_cssFilter</code> option which allows you to defined the css class applied to the filter row and each search input. (v2.1).</span></li>
<li>Added <code class="hilight">widgetOptions.filter_ignoreCase</code> option which makes the search case-insensitive, when <code class="hilight">true</code>. <span class="tip"><em>New! v2.3.4</em></span></li>
<li>Added <code class="hilight">widgetOptions.filter_searchDelay</code> option which delays the search giving the user time to type in the search string. <span class="tip"><em>New! v2.3.4</em></span></li>
<li>Additional filter widget specific options are included in the javascript below, with explanations.</li>
<li>Please note that using the pager plugin with this filter widget will have <em>unexpected results</em> - I haven't found a fix for this problem.</li>
<li>This widget uses jQuery's <code class="hilight">.nextUntil()</code> function which is only available is jQuery version 1.4+.</li>
<li><strike>As of tablesorter version 2.3, this widget <strong>can no longer be applied to the original plugin</strong>.</strike>. Fixed in v2.3.3.</li>
</ul>
</p>
</div>
<h3><a href="#">v2.3.4</a></h3>
<div>
<ul>
<li>Added <code>widgetOptions.filter_ignoreCase</code> option which makes the search case-insensitive, when <code>true</code>.</li>
<li>Added <code>widgetOptions.filter_searchDelay</code> option which delays the search giving the user time to type in the search string.</li>
</ul>
</div>
<h3><a href="#">v2.3</a></h3>
<div>
The filter widget can be disabled using any of the following methods (they all do the same thing), in order of priority:
<ul>
<li>jQuery data <code>data-filter="false"</code>.</li>
<li>metadata <code>class="{ filter: false }"</code>. This requires the metadata plugin.</li>
<li>headers option <code>headers : { 0 : { filter: false } }</code>.</li>
<li>header class name <code>class="filter-false"</code>.</li>
<li><strike>As of this version, this widget <strong>can no longer be applied to the original plugin</strong>.</strike>. Fixed in v2.3.3.</li>
</ul>
</div>
<h3><a href="#">v2.1</a></h3>
<div>
<ul>
<li>Replaced <code>widgetFilterChildRows</code> option with <code>widgetOptions.filter_childRows</code>.</li>
<li>Added <code>widgetOptions.filter_startsWith</code> option which when <code>true</code>, allows you to search the table from the starting of the table cell text. Use the toggle button to see the difference, and that it can be dynamically changed!.</li>
<li>Added <code>widgetOptions.filter_cssFilter</code> option which allows you to defined the css class applied to the filter row and each search input.</li>
<li>Additional filter widget specific options are included in the javascript below, with explanations.</li>
<li>Please note that using the pager plugin with this filter widget will have <em>unexpected results</em> - I haven't found a fix for this problem.</li>
</ul>
</div>
<h3><a href="#">v2.0.19.1</a></h3>
<div>
<ul>
<li>A filter header option and header class name check was added to allow disabling the filter in a specific column.</li>
</ul>
</div>
</div>
</div>
</div>
<h1>Demo</h1>
<button class="toggle fsw">Toggle</button> filter_startsWith : <span id="start">false</span> (if true, search from beginning of cell content only)<br>
<button class="toggle fic">Toggle</button> filter_ignoreCase : <span id="case">true</span> (if false, the search will be case sensitive)
<hr>
<div id="demo"><table class="tablesorter">
<div id="demo">
<button class="search" data-filter-column="5" data-filter-text="2?%">Saved Search</button> (search the Discount column for "2?%")<br>
<button class="reset">Reset Search</button> <!-- targetted by the "filter_reset" option -->
<table class="tablesorter">
<thead>
<tr>
<th data-placeholder="Try Br*{space}">First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Total</th>
<th data-placeholder="Try 1?%">Discount</th> <!-- add class="filter-false" to disable the filter in this column -->
<th data-placeholder="" class="filter-false">Rank</th>
<th data-placeholder="Try B*{space}">First Name</th>
<th data-placeholder="Try <d">Last Name</th>
<th data-placeholder="Try >=33">Age</th>
<th data-placeholder="Try <9.99">Total</th>
<th data-placeholder="Try 2?%">Discount</th> <!-- add class="filter-false" to disable the filter in this column -->
<th data-placeholder="Try /20[^0]\d/">Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Philip Aaron</td>
<td>Johnson Sr Esq</td>
<td>25</td>
@ -155,6 +335,7 @@ $(function(){
<td>Jun 26, 2004 7:22 AM</td>
</tr>
<tr>
<td>11</td>
<td>Aaron</td>
<td>Hibert</td>
<td>12</td>
@ -163,6 +344,7 @@ $(function(){
<td>Aug 21, 2009 12:21 PM</td>
</tr>
<tr>
<td>12</td>
<td>Brandon Clark</td>
<td>Henry Jr</td>
<td>51</td>
@ -171,6 +353,7 @@ $(function(){
<td>Oct 13, 2000 1:15 PM</td>
</tr>
<tr>
<td>111</td>
<td>Peter</td>
<td>Parker</td>
<td>28</td>
@ -179,6 +362,7 @@ $(function(){
<td>Jul 6, 2006 8:14 AM</td>
</tr>
<tr>
<td>21</td>
<td>John</td>
<td>Hood</td>
<td>33</td>
@ -187,6 +371,7 @@ $(function(){
<td>Dec 10, 2002 5:14 AM</td>
</tr>
<tr>
<td>013</td>
<td>Clark</td>
<td>Kent Sr.</td>
<td>18</td>
@ -195,6 +380,7 @@ $(function(){
<td>Jan 12, 2003 11:14 AM</td>
</tr>
<tr>
<td>005</td>
<td>Bruce</td>
<td>Almighty Esq</td>
<td>45</td>
@ -203,6 +389,7 @@ $(function(){
<td>Jan 18, 2021 9:12 AM</td>
</tr>
<tr>
<td>10</td>
<td>Alex</td>
<td>Dumass</td>
<td>13</td>
@ -211,6 +398,7 @@ $(function(){
<td>Jan 8, 2012 5:11 PM</td>
</tr>
<tr>
<td>16</td>
<td>Jim</td>
<td>Franco</td>
<td>24</td>
@ -219,6 +407,7 @@ $(function(){
<td>Jan 14, 2004 11:23 AM</td>
</tr>
<tr>
<td>166</td>
<td>Bruce Lee</td>
<td>Evans</td>
<td>22</td>
@ -227,6 +416,7 @@ $(function(){
<td>Jan 18, 2007 9:12 AM</td>
</tr>
<tr>
<td>100</td>
<td>Brenda Lee</td>
<td>McMasters</td>
<td>18</td>
@ -235,6 +425,7 @@ $(function(){
<td>Feb 12, 2010 7:23 PM</td>
</tr>
<tr>
<td>55</td>
<td>Dennis</td>
<td>Bronson</td>
<td>65</td>
@ -243,6 +434,7 @@ $(function(){
<td>Jan 20, 2001 1:12 PM</td>
</tr>
<tr>
<td>9</td>
<td>Martha</td>
<td>delFuego</td>
<td>25</td>
@ -256,7 +448,7 @@ $(function(){
<h1>Page Header</h1>
<div>
<pre class="html">&lt;!-- blue theme stylesheet --&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;../css/blue/style.css&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;../css/theme.blue.css&quot;&gt;
&lt;!-- tablesorter plugin --&gt;
&lt;script src=&quot;../js/jquery.tablesorter.js&quot;&gt;&lt;/script&gt;
@ -271,21 +463,61 @@ $(function(){
<h1>CSS</h1>
<div>
<pre class="css">/* filter widget, added to style.css themes */
table.tablesorter thead tr.filters input {
width: 95%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
table.tablesorter thead tr.filters, table.tablesorter thead tr.filters td {
text-align: center;
background: #fff;
<pre class="css">/* filter row */
.tablesorter-filter-row td {
background: #eee;
line-height: normal;
text-align: center; /* center the input */
-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;
}
/* optional disabled input styling */
table.tablesorter thead tr.filters input.disabled {
opacity: 0.5;
filter: alpha(opacity=50);
.tablesorter-filter-row .disabled {
opacity: 0.5;
filter: alpha(opacity=50);
cursor: not-allowed;
}
/* hidden filter row */
.tablesorter-filter-row.hideme td {
/*** *********************************************** ***/
/*** change this padding to modify the thickness ***/
/*** of the closed filter row (height = padding x 2) ***/
padding: 2px;
/*** *********************************************** ***/
margin: 0;
line-height: 0;
cursor: pointer;
}
.tablesorter-filter-row.hideme .tablesorter-filter {
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);
}
/* filters */
.tablesorter-filter {
width: 95%;
height: inherit;
margin: 4px;
padding: 4px;
background-color: #fff;
border: 1px solid #bbb;
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;
}</pre>
</div>

View File

@ -14,7 +14,7 @@
<script src="js/docs.js"></script>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/blue/style.css">
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<script src="../js/jquery.tablesorter.widgets.js"></script>
@ -25,6 +25,7 @@
// call the tablesorter plugin
$("table").tablesorter({
theme : 'blue',
// initialize zebra striping and resizable widgets on the table
widgets: [ "zebra", "resizable" ]
@ -46,11 +47,11 @@
<em>NOTE!</em>
<ul>
<li>This widget can be applied to the original plugin. The code is in the "jquery.tablesorter.widgets.js" file.</li>
<li>This widget now saves all changed column widths to local storage, or it falls back to a cookie! <span class="tip"><em>New! v2.1</em></span></li>
<li>Column width saving requires the new "$.tablesorter.storage()" function included with the "jquery.tablesorter.widgets.js" file. <span class="tip"><em>New! v2.1</em></span></li>
<li>Fixed the issue where resizing a column would cause a sort of the column to the right in v2.3.5.</li>
<li>Because this widget uses jQuery's <code class="hilight">closest()</code> function, it requires jQuery 1.3+ in order to work.</li>
<li>Because this widget uses jQuery's <code class="hilight">parseJson()</code> function, it requires jQuery version 1.4.1+ in order to save the widths.</li>
<li>This widget now saves all changed column widths to local storage, or it falls back to a cookie! (v2.1)</li>
<li>Column width saving requires the new "$.tablesorter.storage()" function included with the "jquery.tablesorter.widgets.js" file (v2.1).</li>
<li>Right clicking (opening the context menu) will now reset the resized columns. <span class="tip"><em>New! v2.4</em></span></li>
<li>Because this widget uses jQuery's <code>closest()</code> function, it requires jQuery 1.3+ in order to work.</li>
<li>Because this widget uses jQuery's <code>parseJson()</code> function, it requires jQuery version 1.4.1+ in order to save the widths.</li>
</ul>
</p>
@ -113,7 +114,7 @@
<h1>Page Header</h1>
<div>
<pre class="html">&lt;!-- blue theme stylesheet with additional css styles added in v2.0.17 --&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;../css/blue/style.css&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;../css/theme.blue.css&quot;&gt;
&lt;!-- tablesorter plugin --&gt;
&lt;script src=&quot;../js/jquery.tablesorter.js&quot;&gt;&lt;/script&gt;

View File

@ -14,7 +14,7 @@
<script src="js/docs.js"></script>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/blue/style.css">
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<script src="../js/jquery.tablesorter.widgets.js"></script>
@ -22,6 +22,7 @@
// call the tablesorter plugin
$("table").tablesorter({
theme: 'blue',
// use save sort widget
widgets: ["saveSort", "zebra"]
@ -45,7 +46,7 @@
<li>This widget can be applied to the original plugin. The code is in the "jquery.tablesorter.widgets.js" file.</li>
<li>Sort one or more columns, then reload the page to see that this widget remembers the last table sort.</li>
<li>Sort saving requires the new "$.tablesorter.storage()" function included with the "jquery.tablesorter.widgets.js" file. <span class="tip"><em>New! v2.1</em></span></li>
<li>Because this widget uses jQuery's <code class="hilight">parseJson()</code> function, it requires jQuery version 1.4.1+.</li>
<li>Because this widget uses jQuery's <code>parseJson()</code> function, it requires jQuery version 1.4.1+.</li>
</ul>
</p>

View File

@ -15,9 +15,15 @@
<!-- Tablesorter: theme -->
<link class="ui-theme" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css">
<link class="ui-theme" rel="stylesheet" href="../css/ui/style.css">
<link class="theme" rel="stylesheet" href="../css/blue/style.css">
<link class="theme" rel="stylesheet" href="../css/green/style.css" disabled>
<link class="ui-theme" rel="stylesheet" href="../css/theme.jui.css">
<link class="theme" rel="stylesheet" href="../css/theme.default.css">
<link class="theme" rel="stylesheet" href="../css/theme.blue.css">
<link class="theme" rel="stylesheet" href="../css/theme.green.css">
<link class="theme" rel="stylesheet" href="../css/theme.grey.css">
<link class="theme" rel="stylesheet" href="../css/theme.ice.css">
<link class="theme" rel="stylesheet" href="../css/theme.black-ice.css">
<link class="theme" rel="stylesheet" href="../css/theme.dark.css">
<link class="theme" rel="stylesheet" href="../css/theme.dropbox.css">
<!-- Tablesorter script: required -->
<script src="../js/jquery.tablesorter.js"></script>
@ -26,8 +32,11 @@
<script id="js">$(function(){
$("table").tablesorter({
selectorHeaders: '> thead th, > thead td',
widgets: [ 'uitheme', 'zebra', 'stickyHeaders' ],
widthFixed : true,
widgets: ["columns", "filter", "stickyHeaders", "uitheme", "zebra"] , //[ 'uitheme', 'zebra', 'stickyHeaders' ],
widgetOptions: {
// css class name applied to the sticky header row (tr)
@ -37,10 +46,9 @@
// even and odd class names included for this demo to allow switching themes
zebra : ["ui-widget-content even", "ui-state-default odd"],
// change default uitheme icons - find the full list of icons here: http://jqueryui.com/themeroller/ (hover over them for their name)
// default icons: ["ui-icon-arrowthick-2-n-s", "ui-icon-arrowthick-1-s", "ui-icon-arrowthick-1-n"]
// ["up/down arrow (cssHeaders/unsorted)", "down arrow (cssDesc/descending)", "up arrow (cssAsc/ascending)" ]
uitheme : ["ui-icon-carat-2-n-s", "ui-icon-carat-1-s", "ui-icon-carat-1-n"]
// use uitheme widget to apply defauly jquery ui (jui) class names
// see the uitheme demo for more details on how to change the class names
uitheme : 'jui'
}
@ -49,13 +57,24 @@
}); </script>
<script>
$(function() {
$('link.theme').each(function(){ this.disabled = true; });
$('link.theme').each(function(){ this.disabled = true; });
$('select').change(function(){
var themes = 'default blue green grey ice blackice dark dropbox',
i, o = '', t = themes.split(' ');
for (i = 0; i < t.length; i++) {
o += '<option>' + t[i] + '</option>';
}
$('select')
.append(o)
.change(function(){
var theme = $(this).val().toLowerCase(),
files = $('link.theme, link.ui-theme'); // ui-theme is added by the themeswitcher
files.each(function(){ this.disabled = true; });
files.filter('[href*="' + theme + '"]').each(function(){ this.disabled = false; });
files.filter('[href*="' + (theme === 'jui' ? 'ui' : theme) + '"]').each(function(){ this.disabled = false; });
$('table')
.removeClass('tablesorter-' + t.join(' tablesorter-'))
.addClass('tablesorter-' + theme);
});
});
</script>
@ -76,18 +95,19 @@ $(function() {
<ul>
<li>This widget can be applied to the original plugin. The code is in the "jquery.tablesorter.widgets.js" file.</li>
<li>Scroll down the page to see the headers stick. Then sort the columns using the sticky headers!</li>
<li>Added <code class="hilight">widgetOptions.stickyHeader</code> option which contains the css class name applied to the actual sticky header. <span class="tip"><em>New! v2.1</em></span></li>
<li>Added <code>widgetOptions.stickyHeader</code> option which contains the css class name applied to the actual sticky header. <span class="tip"><em>New! v2.1</em></span></li>
<li>Multiple rows in the header will become sticky. <span class="tip"><em>New! v2.1.17</em></span></li>
<li>For the sticky header to work properly if any <code class="hilight">&lt;TD&gt;</code>'s are included within the header:
<li>The filter widget adds a row to the table header, but that row will not be included in the sticky header.</li>
<li>Add the class name <code>sticky-false</code> to any header rows you don't want to become sticky. <span class="tip"><em>New! v2.1.18</em></span></li>
<li><del>Because of an issue with jQuery version 1.3 and older causing an error, this widget needs at least jQuery version 1.4+ in order to work.</del> Now working with jQuery 1.2.6+ again.</li>
<li>Because of the limitations of Internet Explorer version 7 and older, this widget will not work.</li>
<li><del>For the sticky header to work properly if any <code>&lt;TD&gt;</code>'s are included within the header:</del> <span class="tip"><em>Fixed! v2.4</em></span>
<ul>
<li>Set the <code class="hilight">selectorHeaders</code> option to <code class="hilight">thead th, thead td</code>.</li>
<li>The <code class="hilight">&lt;TD&gt;</code> may not be styled properly, so CSS changes may be needed.</li>
<li>To prevent the <code class="hilight">&lt;TD&gt;</code> from being sortable, add a <code class="hilight">sorter-false</code> class name.</li>
<li><del>Set the <code>selectorHeaders</code> option to <code>thead th, thead td</code>.</del></li>
<li><del>The <code>&lt;TD&gt;</code> may not be styled properly, so CSS changes may be needed.</del></li>
<li><del>To prevent the <code>&lt;TD&gt;</code> from being sortable, add a <code>sorter-false</code> class name.</del></li>
</ul>
</li>
<li>Add the class name <code class="hilight">sticky-false</code> to any header rows you don't want to become sticky. <span class="tip"><em>New! v2.1.18</em></span></li>
<li>Because of an issue with jQuery version 1.3 and older causing an error, this widget needs at least jQuery version 1.4+ in order to work.</li>
<li>Because of the limitations of Internet Explorer version 7 and older, this widget will not work.</li>
</ul>
</p>
@ -99,18 +119,18 @@ $(function() {
<h1>Demo</h1>
Choose Theme:
<select>
<option>UI</option>
<option>Blue</option>
<option>Green</option>
<option value="jui">Jquery UI</option>
</select>
<br><br>
<table class="tablesorter">
<caption>Table caption</caption>
<thead>
<tr>
<th colspan="3" class="sorter-false">Personal Information for each person (resize the browser to check expanding height)</th>
<td colspan="4" class="sorter-false">Courses (this is a TD cell)</td>
</tr>
<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>Name</th><th>Major</th><th>Sex</th><th>English</th><th>Japanese</th><th>Calculus</th><th class="filter-false sorter-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>

View File

@ -2,10 +2,10 @@
<html>
<head>
<meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - jQuery UI Theme Widget</title>
<title>jQuery plugin: Tablesorter 2.0 - jQuery UITheme Widget (jQuery UI)</title>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.min.js"></script>
<!-- Demo stuff -->
<link rel="stylesheet" href="css/jq.css">
@ -17,10 +17,8 @@
<script src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
<!-- Tablesorter: required; also include any of the jQuery UI themes -->
<link class="ui-theme" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css">
<link class="ui-theme" rel="stylesheet" href="../css/ui/style.css">
<link class="theme" rel="stylesheet" href="../css/blue/style.css">
<link class="theme" rel="stylesheet" href="../css/green/style.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css">
<link rel="stylesheet" href="../css/theme.jui.css">
<script src="../js/jquery.tablesorter.js"></script>
<script src="../js/jquery.tablesorter.widgets.js"></script>
@ -30,23 +28,37 @@
<script id="js">$(function() {
// Extend the themes to change any of the default class names ## NEW ##
$.extend($.tablesorter.themes.jui, {
// change default jQuery uitheme icons - find the full list of icons here: http://jqueryui.com/themeroller/ (hover over them for their name)
table : 'ui-widget ui-widget-content ui-corner-all', // table classes
header : 'ui-widget-header ui-corner-all ui-state-default', // header classes
icons : 'ui-icon', // icon class added to the <i> in the header
sortNone : 'ui-icon-carat-2-n-s',
sortAsc : 'ui-icon-carat-1-n',
sortDesc : 'ui-icon-carat-1-s',
active : 'ui-state-active', // applied when column is sorted
hover : 'ui-state-hover', // hover class
filterRow: '',
even : 'ui-widget-content', // odd row zebra striping
odd : 'ui-state-default' // even row zebra striping
});
// call the tablesorter plugin and apply the ui theme widget
$("table").tablesorter({
widthFixed: true,
// widget code now contained in the jquery.tablesorter.widgets.js file
widgets : ['uitheme', 'zebra'],
widgets : ['uitheme', 'zebra', 'resizable'],
widgetOptions : {
// adding zebra striping, using content and default styles - the ui css removes the background from default
// even and odd class names included for this demo to allow switching themes
zebra : ["ui-widget-content even", "ui-state-default odd"],
// zebra striping class names - the uitheme widget adds the class names defined in
// $.tablesorter.themes to the zebra widget class names
zebra : ["even", "odd"],
// change default uitheme icons - find the full list of icons here: http://jqueryui.com/themeroller/ (hover over them for their name)
// default icons: ["ui-icon-arrowthick-2-n-s", "ui-icon-arrowthick-1-s", "ui-icon-arrowthick-1-n"]
// ["up/down arrow (cssHeaders/unsorted)", "down arrow (cssDesc/descending)", "up arrow (cssAsc/ascending)" ]
uitheme : ["ui-icon-carat-2-n-s", "ui-icon-carat-1-s", "ui-icon-carat-1-n"]
// set the uitheme widget to use the jQuery UI theme class names ## NEW ##
uitheme : 'jui'
}
});
});</script>
@ -61,15 +73,6 @@
// ********************
$('#switcher').themeswitcher();
$('link.theme').each(function(){ this.disabled = true; });
$('select').change(function(){
var theme = $(this).val().toLowerCase(),
files = $('link.theme, link.ui-theme'); // ui-theme is added by the themeswitcher
files.each(function(){ this.disabled = true; });
files.filter('[href*="' + theme + '"]').each(function(){ this.disabled = false; });
});
});
</script>
</head>
@ -77,7 +80,7 @@
<div id="banner">
<h1>table<em>sorter</em></h1>
<h2>jQuery UI Theme Widget</h2>
<h2>jQuery UITheme Widget (jQuery UI)</h2>
<h3>Flexible client-side table sorting</h3>
<a href="index.html">Back to documentation</a>
</div>
@ -88,23 +91,23 @@
<em>NOTE!</em>
<ul>
<li>This widget can be applied to the original plugin. The code is in the "jquery.tablesorter.widgets.js" file.</li>
<li>The original "widgetUitheme" option has been replaced by "widgetOptions.uitheme". See the javascript block below for more details. <span class="tip"><em>New! v2.1</em></span></li>
<li>If the "widgetUitheme" option exists, it will over-ride this newer "widgetOptions.uitheme" option in order to maintain backwards compatibility.</li>
<li>The latest version of jQuery UI appears to need jQuery 1.4+ or script errors will break the plugin.</li>
<li>The original "widgetUitheme" option has been replaced by "widgetOptions.uitheme". See the javascript block below for more details (v2.1).</li>
<li><span class="tip"><em>New!</em></span> 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 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>
</ul>
</li>
<li>Earlier widget versions required jQuery 1.4+. The UITheme widget for tablesorter 2.4 requires jQuery 1.2.6+.</li>
</ul>
</p>
<h1>Demo</h1>
<br>
jQuery UI Theme:
<div id="switcher"></div>
<br>
Tablesorter Theme:
<select>
<option>UI</option>
<option>Blue</option>
<option>Green</option>
</select>
<div id="demo"><table class="tablesorter">
<thead>
@ -117,6 +120,16 @@
<th>Date</th>
</tr>
</thead>
<tfoot>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Total</th>
<th>Discount</th>
<th>Date</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Peter</td>
@ -165,7 +178,7 @@
<h1>Page Header</h1>
<div>
<pre class="html">&lt;!-- ui theme stylesheet - contents shown below --&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;../css/ui/style.css&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;../css/theme.jui.css&quot;&gt;
&lt;!-- jQuery UI theme (cupertino example here) --&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css&quot;&gt;
@ -180,69 +193,6 @@
<pre class="js"></pre>
</div>
<h1>CSS</h1>
<div>
<pre class="css">/* jQuery UI Theme required css; as seen in css/ui/style.css file */
table.tablesorter {
font-family: arial;
margin: 10px 0pt 15px;
font-size: 8pt;
width: 100%;
text-align: left;
padding: 5px;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
border-collapse: collapse;
font-size: 8pt;
padding: 4px;
}
table.tablesorter thead tr th {
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
white-space: normal;
/* UI hover and active states make the font normal and the table resizes, this fixes it */
font-weight: bold !important;
}
table.tablesorter thead tr th .tablesorter-inner {
position: relative;
padding-right: 20px; /* wider than the icon */
}
table.tablesorter thead tr th .ui-icon {
position: absolute;
right: 3px;
top: 50%;
margin-top: -8px; /* half the icon height; older IE doesn't like this */
}
table.tablesorter tbody td {
padding: 4px;
vertical-align: top;
}
/* This allows you to use ui-state-default as the zebra stripe color */
table.tablesorter tr.ui-state-default {
background-image: url();
}
/* filter widget */
table.tablesorter thead input.tablesorter-filter {
width: 95%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
table.tablesorter thead tr.tablesorter-filter, table.tablesorter thead tr.tablesorter-filter td {
text-align: center;
}
/* optional disabled input styling */
table.tablesorter thead tr.tablesorter-filter input.disabled {
opacity: 0.5;
filter: alpha(opacity=50);
}</pre>
</div>
<h1>HTML</h1>
<div id="html">
<pre class="html"></pre>
@ -250,7 +200,7 @@ table.tablesorter thead tr.tablesorter-filter input.disabled {
<div class="next-up">
<hr />
Next up: <a href="example-widget-resizable.html">Resizable Columns widget &rsaquo;&rsaquo;</a>
Next up: <a href="example-widget-bootstrap-theme.html">UITheme widget - Bootstrap theme &rsaquo;&rsaquo;</a>
</div>
</div>

View File

@ -14,7 +14,7 @@
<script src="js/docs.js"></script>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/blue/style.css">
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<!-- Tablesorter: optional -->
@ -35,6 +35,7 @@ table.tablesorter tbody tr.alt-row td {
// call the tablesorter plugin
$("table").tablesorter({
theme: 'blue',
// initialize zebra striping of the table
widgets: ["zebra"],
// change the default striping class names

View File

@ -5,7 +5,7 @@
<title>jQuery plugin: Tablesorter 2.0 - Writing custom widgets</title>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<!-- Demo stuff -->
<link rel="stylesheet" href="css/jq.css">
@ -14,7 +14,7 @@
<script src="js/docs.js"></script>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/blue/style.css">
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<!-- Tablesorter: optional -->
@ -43,7 +43,7 @@
}
// remove appended headers by classname
$("tr.repeated-header",table).remove();
$(table).find("tr.repeated-header").remove();
// number of rows to skip
skip = 4;
@ -57,12 +57,19 @@
$("<tr></tr>").addClass("repeated-header remove-me").html(this.headers.join(""))
);
}
},
// this remove function is called when using the refreshWidgets method or when destroying the tablesorter plugin
// this function only applies to tablesorter v2.4+
remove: function(table, c, wo){
$(table).find("tr.repeated-header").remove();
}
});
// call the tablesorter plugin and assign widgets with id "zebra" (Default widget in the core) and the newly created "repeatHeaders"
$("table").tablesorter({
theme: 'blue',
// apply both widgets
widgets: ['zebra', 'repeatHeaders']
});

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

File diff suppressed because it is too large Load Diff

View File

@ -167,8 +167,8 @@ ChiliBook.recipes[ "css.js" ] =
}
, url: {
_match: /\b(url\s*\()([^)]+)(\))/
, _replace: "<span class='url'>$1</span>$2<span class='url'>$3</span>"
, _style: "color: fuchsia;"
, _replace: "<span class='url'>$1</span><span class='number'>$2</span><span class='url'>$3</span>"
, _style: "color: #490093;"
}
, block: {
_match: /\{([\w\W]*?)\}/
@ -177,12 +177,12 @@ ChiliBook.recipes[ "css.js" ] =
}
}
, 'class': {
_match: /\.\w+(-\w+)?/
_match: /\.\S+/
, _style: "color: #0069d2; font-weight: bold;"
}
, id: {
_match: /#\w+/
, _style: "color: IndianRed; font-weight: bold;"
_match: /#\S+/
, _style: "color: #75029B; font-weight: bold;"
}
, pseudo: {
_match: /:\w+/
@ -198,19 +198,19 @@ ChiliBook.recipes[ "css.js" ] =
_match: /\/\*[^*]*\*+(?:[^\/][^*]*\*+)*\//
}
, property: {
_match: /\b(?:zoom|z-index|writing-mode|word-wrap|word-spacing|word-break|width|widows|white-space|volume|voice-family|visibility|vertical-align|unicode-bidi|top|text-underline-position|text-transform|text-shadow|text-overflow|text-kashida-space|text-justify|text-indent|text-decoration|text-autospace|text-align-last|text-align|table-layout|stress|speech-rate|speak-punctuation|speak-numeral|speak-header|speak|size|scrollbar-track-color|scrollbar-shadow-color|scrollbar-highlight-color|scrollbar-face-color|scrollbar-dark-shadow-color|scrollbar-base-color|scrollbar-arrow-color|scrollbar-3d-light-color|ruby-position|ruby-overhang|ruby-align|right|richness|quotes|position|play-during|pitch-range|pitch|pause-before|pause-after|pause|page-break-inside|page-break-before|page-break-after|page|padding-top|padding-right|padding-left|padding-bottom|padding|overflow-Y|overflow-X|overflow|outline-width|outline-style|outline-color|outline|orphans|min-width|min-height|max-width|max-height|marks|marker-offset|margin-top|margin-right|margin-left|margin-bottom|margin|list-style-type|list-style-position|list-style-image|list-style|line-height|line-break|letter-spacing|left|layout-grid-type|layout-grid-mode|layout-grid-line|layout-grid-char-spacing|layout-grid-char|layout-grid|layout-flow|layer-background-image|layer-background-color|include-source|ime-mode|height|font-weight|font-variant|font-style|font-stretch|font-size-adjust|font-size|font-family|font|float|filter|empty-cells|elevation|display|direction|cursor|cue-before|cue-after|cue|counter-reset|counter-increment|content|color|clip|clear|caption-side|bottom|border-width|border-top-width|border-top-style|border-top-color|border-top|border-style|border-spacing|border-right-width|border-right-style|border-right-color|border-right|border-left-width|border-left-style|border-left-color|border-left|border-color|border-collapse|border-bottom-width|border-bottom-style|border-bottom-color|border-bottom|border|behavior|background-repeat|background-position-y|background-position-x|background-position|background-image|background-color|background-attachment|background|azimuth|accelerator)\s*:/
_match: /\b(?:zoom|z-index|writing-mode|word-wrap|word-spacing|word-break|width|widows|white-space|volume|voice-family|visibility|vertical-align|unicode-bidi|top|text-underline-position|text-transform|text-shadow|text-overflow|text-kashida-space|text-justify|text-indent|text-decoration|text-autospace|text-align-last|text-align|table-layout|stress|speech-rate|speak-punctuation|speak-numeral|speak-header|speak|size|scrollbar-track-color|scrollbar-shadow-color|scrollbar-highlight-color|scrollbar-face-color|scrollbar-dark-shadow-color|scrollbar-base-color|scrollbar-arrow-color|scrollbar-3d-light-color|ruby-position|ruby-overhang|ruby-align|right|richness|quotes|position|play-during|pitch-range|pitch|pause-before|pause-after|pause|page-break-inside|page-break-before|page-break-after|page|padding-top|padding-right|padding-left|padding-bottom|padding|overflow-Y|overflow-X|overflow|outline-width|outline-style|outline-color|outline|orphans|min-width|min-height|max-width|max-height|marks|marker-offset|margin-top|margin-right|margin-left|margin-bottom|margin|list-style-type|list-style-position|list-style-image|list-style|line-height|line-break|letter-spacing|left|layout-grid-type|layout-grid-mode|layout-grid-line|layout-grid-char-spacing|layout-grid-char|layout-grid|layout-flow|layer-background-image|layer-background-color|include-source|ime-mode|height|font-weight|font-variant|font-style|font-stretch|font-size-adjust|font-size|font-family|font|float|filter|empty-cells|elevation|display|direction|cursor|cue-before|cue-after|cue|counter-reset|counter-increment|content|color|clip|clear|caption-side|bottom|border-width|border-top-width|border-top-style|border-top-color|border-top|border-style|border-spacing|border-right-width|border-right-style|border-right-color|border-right|border-left-width|border-left-style|border-left-color|border-left|border-color|border-collapse|border-bottom-width|border-bottom-style|border-bottom-color|border-bottom|border|behavior|background-repeat|background-position-y|background-position-x|background-position|background-image|background-color|background-attachment|background|azimuth|accelerator|opacity)\s*:/
, _style: "color: #330066;"
}
, special: {
_match: /\b(?:-use-link-source|-set-link-source|-replace|-moz-user-select|-moz-user-modify|-moz-user-input|-moz-user-focus|-moz-outline-width|-moz-outline-style|-moz-outline-color|-moz-outline|-moz-opacity|-moz-border-top-colors|-moz-border-right-colors|-moz-border-radius-topright|-moz-border-radius-topleft|-moz-border-radius-bottomright|-moz-border-radius-bottomleft|-moz-border-radius|-moz-border-left-colors|-moz-border-bottom-colors|-moz-binding)\s*:/
, _style: "color: #330066; text-decoration: underline;"
_match: /\b(?:-use-link-source|-set-link-source|-replace|-moz-user-select|-moz-user-modify|-moz-user-input|-moz-user-focus|-moz-outline-width|-moz-outline-style|-moz-outline-color|-moz-outline|-moz-opacity|-moz-border-top-colors|-moz-border-right-colors|-moz-border-radius-topright|-moz-border-radius-topleft|-moz-border-radius-bottomright|-moz-border-radius-bottomleft|-moz-border-radius|-moz-border-left-colors|-moz-border-bottom-colors|-moz-binding|-webkit-transition|-moz-transition|-o-transition|transition|-webkit-box-sizing|-moz-box-sizing|box-sizing)\s*:/
, _style: "color: #330066;"
}
, url: {
_match: /\b(url\s*\()([^)]+)(\))/
, _replace: "<span class='url'>$1</span>$2<span class='url'>$3</span>"
, _replace: "<span class='url'>$1</span><span class='number'>$2</span><span class='url'>$3</span>"
}
, value: {
_match: /\b(?:xx-small|xx-large|x-soft|x-small|x-slow|x-low|x-loud|x-large|x-high|x-fast|wider|wait|w-resize|visible|url|uppercase|upper-roman|upper-latin|upper-alpha|underline|ultra-expanded|ultra-condensed|tv|tty|transparent|top|thin|thick|text-top|text-bottom|table-row-group|table-row|table-header-group|table-footer-group|table-column-group|table-column|table-cell|table-caption|sw-resize|super|sub|status-bar|static|square|spell-out|speech|solid|soft|smaller|small-caption|small-caps|small|slower|slow|silent|show|separate|semi-expanded|semi-condensed|se-resize|scroll|screen|s-resize|run-in|rtl|rightwards|right-side|right|ridge|rgb|repeat-y|repeat-x|repeat|relative|projection|print|pre|portrait|pointer|overline|outside|outset|open-quote|once|oblique|nw-resize|nowrap|normal|none|no-repeat|no-open-quote|no-close-quote|ne-resize|narrower|n-resize|move|mix|middle|message-box|medium|marker|ltr|lowercase|lower-roman|lower-latin|lower-greek|lower-alpha|lower|low|loud|local|list-item|line-through|lighter|level|leftwards|left-side|left|larger|large|landscape|justify|italic|invert|inside|inset|inline-table|inline|icon|higher|high|hide|hidden|help|hebrew|handheld|groove|format|fixed|faster|fast|far-right|far-left|fantasy|extra-expanded|extra-condensed|expanded|embossed|embed|e-resize|double|dotted|disc|digits|default|decimal-leading-zero|decimal|dashed|cursive|crosshair|cross|crop|counters|counter|continuous|condensed|compact|collapse|code|close-quote|circle|center-right|center-left|center|caption|capitalize|braille|bottom|both|bolder|bold|block|blink|bidi-override|below|behind|baseline|avoid|auto|aural|attr|armenian|always|all|absolute|above)\b/
_match: /\b(?:xx-small|xx-large|x-soft|x-small|x-slow|x-low|x-loud|x-large|x-high|x-fast|wider|wait|w-resize|visible|url|uppercase|upper-roman|upper-latin|upper-alpha|underline|ultra-expanded|ultra-condensed|tv|tty|transparent|top|thin|thick|text-top|text-bottom|table-row-group|table-row|table-header-group|table-footer-group|table-column-group|table-column|table-cell|table-caption|sw-resize|super|sub|status-bar|static|square|spell-out|speech|solid|soft|smaller|small-caption|small-caps|small|slower|slow|silent|show|separate|semi-expanded|semi-condensed|se-resize|scroll|screen|s-resize|run-in|rtl|rightwards|right-side|right|ridge|rgb|repeat-y|repeat-x|repeat|relative|projection|print|pre|portrait|pointer|overline|outside|outset|open-quote|once|oblique|nw-resize|nowrap|normal|none|no-repeat|no-open-quote|no-close-quote|ne-resize|narrower|n-resize|move|mix|middle|message-box|medium|marker|ltr|lowercase|lower-roman|lower-latin|lower-greek|lower-alpha|lower|low|loud|local|list-item|line-through|lighter|level|leftwards|left-side|left|larger|large|landscape|justify|italic|invert|inside|inset|inline-table|inline|icon|higher|high|hide|hidden|help|hebrew|handheld|groove|format|fixed|faster|fast|far-right|far-left|fantasy|extra-expanded|extra-condensed|expanded|embossed|embed|e-resize|double|dotted|disc|digits|default|decimal-leading-zero|decimal|dashed|cursive|crosshair|cross|crop|counters|counter|continuous|condensed|compact|collapse|code|close-quote|circle|center-right|center-left|center|caption|capitalize|braille|bottom|both|bolder|bold|block|blink|bidi-override|below|behind|baseline|avoid|auto|aural|attr|armenian|always|all|absolute|above|not-allowed|inherit)\b/
, _style: "color: #3366FF;"
}
, string: {
@ -218,7 +218,7 @@ ChiliBook.recipes[ "css.js" ] =
, _style: "color: teal;"
}
, number: {
_match: /(?:\b[+-]?(?:\d*\.?\d+|\d+\.?\d*))(?:%|(?:(?:px|pt|em|)\b))/
_match: /(?:\b[+-]?(?:\d*\.?\d+|\d+\.?\d*))(?:%|(?:(?:px|pt}rem|em|s|)\b))/
, _style: "color: maroon;"
}
, color : {

View File

@ -1,10 +1,10 @@
/* Stop IE flicker */
if ($.browser.msie == true) document.execCommand('BackgroundImageCache', false, true);
if ($.browser.msie) { document.execCommand('BackgroundImageCache', false, true); }
jQuery.fn.antispam = function() {
return this.each(function(){
var email = $(this).text().toLowerCase().replace(/\sdot/g,'.').replace(/\sat/g,'@').replace(/\s+/g,'');
var URI = "mailto:" + email;
var email = $(this).text().toLowerCase().replace(/\sdot/g,'.').replace(/\sat/g,'@').replace(/\s+/g,''),
URI = "mailto:" + email;
$(this).hide().before(
$("<a></a>").attr("href",URI).addClass("external").text(email)
);
@ -13,7 +13,7 @@ jQuery.fn.antispam = function() {
$(function(){
$("a.external").each(function() {this.target = '_new'});
$("a.external").each(function(){this.target = '_new';});
$("span.email").antispam();
// get javascript source
@ -28,10 +28,10 @@ $(function(){
}
// hide child rows
$('#root .expand-child').hide();
$('#root .tablesorter-childRow').hide();
// toggle child row content, not hiding the row since we are using rowspan
$('#root .toggle').click(function(){
$(this).closest('tr').nextUntil('tr:not(.expand-child)').toggle();
$(this).closest('tr').nextUntil('tr:not(.tablesorter-childRow)').toggle();
return false;
});
@ -70,19 +70,19 @@ $(function(){
function showProperty(){
var prop, h = window.location.hash;
if (h) {
var prop = $(h);
prop = $(h);
if (prop.length) {
prop.find('.collapsible').show();
if (h === '#csschildrow') {
$('#root .expand-child').show();
$('#root .tablesorter-childRow').show();
}
// move below sticky header
if (/options/.test(prop.closest('table')[0].id)) {
if (/options/.test(prop.closest('table').attr('id') || '')) {
$(window).scrollTop( prop.position().top - 30 );
}
}
}
};
}
$(window).load(function(){
$(".js").chili();

217
docs/themes.html Normal file
View File

@ -0,0 +1,217 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.4 - Themes</title>
<!-- demo css -->
<style>
.minitable {float:left;width:190px;height:260px;margin:5px;}
.minitable table {width:175px;margin:10px auto;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
.minitable table th {font-size:11px;}
.minitable table td {font-size:11px;padding:4px !important;text-align:center;}
.minitable h3 {text-align:center;text-transform:capitalize;}
</style>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css">
<!-- Tablesorter themes -->
<!-- jquery ui -->
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css" rel="stylesheet">
<link href="../css/theme.jui.css" rel="stylesheet">
<!-- bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="../css/theme.bootstrap.css" rel="stylesheet">
<!-- more themes -->
<link href="../css/theme.black-ice.css" rel="stylesheet">
<link href="../css/theme.blue.css" rel="stylesheet">
<link href="../css/theme.dark.css" rel="stylesheet">
<link href="../css/theme.default.css" rel="stylesheet">
<link href="../css/theme.dropbox.css" rel="stylesheet">
<link href="../css/theme.green.css" rel="stylesheet">
<link href="../css/theme.grey.css" rel="stylesheet">
<link href="../css/theme.ice.css" rel="stylesheet">
<!-- Tablesorter: required -->
<script src="../js/jquery.tablesorter.js"></script>
<script src="../js/jquery.tablesorter.widgets.js"></script>
<script>
$(function() {
$('.demo').tablesorter({
widthFixed : true,
widgets : ['zebra','columns'],
sortList : [ [0,0],[1,0],[2,0] ]
});
$('.tablesorter-bootstrap').tablesorter({
widthFixed : true,
widgets : ['zebra','columns', 'uitheme'],
widgetOptions : {
uitheme : 'bootstrap'
},
sortList : [ [0,0],[1,0],[2,0] ]
});
$('.tablesorter-jui').tablesorter({
widthFixed : true,
widgets : ['zebra','columns', 'uitheme'],
widgetOptions : {
uitheme : 'jui'
},
sortList : [ [0,0],[1,0],[2,0] ]
});
});
</script>
</head>
<body>
<div id="main">
<div class="minitable">
<h3>blackice</h3>
<table class="demo tablesorter-blackice">
<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead>
<tbody>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>14</td><td>15</td><td>16</td><td>5</td></tr>
<tr><td>13</td><td>20</td><td>17</td><td>6</td></tr>
<tr><td>12</td><td>19</td><td>18</td><td>7</td></tr>
<tr><td>11</td><td>10</td><td>9</td><td>8</td></tr>
</tbody>
</table>
</div>
<div class="minitable">
<h3>blue</h3>
<table class="demo tablesorter-blue">
<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead>
<tbody>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>14</td><td>15</td><td>16</td><td>5</td></tr>
<tr><td>13</td><td>20</td><td>17</td><td>6</td></tr>
<tr><td>12</td><td>19</td><td>18</td><td>7</td></tr>
<tr><td>11</td><td>10</td><td>9</td><td>8</td></tr>
</tbody>
</table>
</div>
<div class="minitable">
<h3>Bootstrap</h3>
<table class="tablesorter-bootstrap">
<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead>
<tbody>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>14</td><td>15</td><td>16</td><td>5</td></tr>
<tr><td>13</td><td>20</td><td>17</td><td>6</td></tr>
<tr><td>12</td><td>19</td><td>18</td><td>7</td></tr>
<tr><td>11</td><td>10</td><td>9</td><td>8</td></tr>
</tbody>
</table>
</div>
<div class="minitable">
<h3>dark</h3>
<table class="demo tablesorter-dark">
<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead>
<tbody>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>14</td><td>15</td><td>16</td><td>5</td></tr>
<tr><td>13</td><td>20</td><td>17</td><td>6</td></tr>
<tr><td>12</td><td>19</td><td>18</td><td>7</td></tr>
<tr><td>11</td><td>10</td><td>9</td><td>8</td></tr>
</tbody>
</table>
</div>
<div class="minitable">
<h3>default</h3>
<table class="demo tablesorter-default">
<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead>
<tbody>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>14</td><td>15</td><td>16</td><td>5</td></tr>
<tr><td>13</td><td>20</td><td>17</td><td>6</td></tr>
<tr><td>12</td><td>19</td><td>18</td><td>7</td></tr>
<tr><td>11</td><td>10</td><td>9</td><td>8</td></tr>
</tbody>
</table>
</div>
<div class="minitable">
<h3>dropbox</h3>
<table class="demo tablesorter-dropbox">
<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead>
<tbody>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>14</td><td>15</td><td>16</td><td>5</td></tr>
<tr><td>13</td><td>20</td><td>17</td><td>6</td></tr>
<tr><td>12</td><td>19</td><td>18</td><td>7</td></tr>
<tr><td>11</td><td>10</td><td>9</td><td>8</td></tr>
</tbody>
</table>
</div>
<div class="minitable">
<h3>green</h3>
<table class="demo tablesorter-green">
<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead>
<tbody>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>14</td><td>15</td><td>16</td><td>5</td></tr>
<tr><td>13</td><td>20</td><td>17</td><td>6</td></tr>
<tr><td>12</td><td>19</td><td>18</td><td>7</td></tr>
<tr><td>11</td><td>10</td><td>9</td><td>8</td></tr>
</tbody>
</table>
</div>
<div class="minitable">
<h3>grey</h3>
<table class="demo tablesorter-grey">
<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead>
<tbody>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>14</td><td>15</td><td>16</td><td>5</td></tr>
<tr><td>13</td><td>20</td><td>17</td><td>6</td></tr>
<tr><td>12</td><td>19</td><td>18</td><td>7</td></tr>
<tr><td>11</td><td>10</td><td>9</td><td>8</td></tr>
</tbody>
</table>
</div>
<div class="minitable">
<h3>ice</h3>
<table class="demo tablesorter-ice">
<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead>
<tbody>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>14</td><td>15</td><td>16</td><td>5</td></tr>
<tr><td>13</td><td>20</td><td>17</td><td>6</td></tr>
<tr><td>12</td><td>19</td><td>18</td><td>7</td></tr>
<tr><td>11</td><td>10</td><td>9</td><td>8</td></tr>
</tbody>
</table>
</div>
<div class="minitable">
<h3>jQuery UI</h3>
<table class="tablesorter-jui">
<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead>
<tbody>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>14</td><td>15</td><td>16</td><td>5</td></tr>
<tr><td>13</td><td>20</td><td>17</td><td>6</td></tr>
<tr><td>12</td><td>19</td><td>18</td><td>7</td></tr>
<tr><td>11</td><td>10</td><td>9</td><td>8</td></tr>
</tbody>
</table>
</div>
</div>
</body>
</html>

View File

@ -11,7 +11,7 @@
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<!-- Pick a theme, load the plugin & initialize plugin -->
<link href="css/blue/style.css" rel="stylesheet">
<link href="css/theme.default.css" rel="stylesheet">
<script src="js/jquery.tablesorter.min.js"></script>
<script src="js/jquery.tablesorter.widgets.js"></script>
<script>

File diff suppressed because one or more lines are too long

View File

@ -1,4 +1,4 @@
/*! tableSorter 2.4 widgets - updated 8/18/2012
/*! tableSorter 2.4+ widgets - updated 9/27/2012
*
* Column Styles
* Column Filters
@ -6,7 +6,7 @@
* Sticky Header
* UI Theme (generalized)
* Save Sort
* ["zebra", "uitheme", "stickyHeaders", "filter", "columns"]
* ["zebra", "uitheme", "stickyHeaders", "filter", "columns"]
*/
/*jshint browser:true, jquery:true, unused:false */
/*global jQuery: false, localStorage: false, navigator: false */
@ -25,8 +25,8 @@ $.tablesorter.themes = {
active : '', // applied when column is sorted
hover : '', // use custom css here - bootstrap class may not override it
filterRow: '', // filter row class
even : '', // odd row zebra striping
odd : '' // even row zebra striping
even : '', // even row zebra striping
odd : '' // odd row zebra striping
},
"jui" : {
table : 'ui-widget ui-widget-content ui-corner-all', // table classes
@ -38,25 +38,11 @@ $.tablesorter.themes = {
active : 'ui-state-active', // applied when column is sorted
hover : 'ui-state-hover', // hover class
filterRow: '',
even : 'ui-widget-content', // odd row zebra striping
odd : 'ui-state-default' // even row zebra striping
even : 'ui-widget-content', // even row zebra striping
odd : 'ui-state-default' // odd row zebra striping
}
};
// detach tbody but save the position
// added to v2.4 core, but added here to make widgets backwards compatible
$.tablesorter.processTbody = function(table, $tb, getIt){
var t, holdr;
if (getIt) {
$tb.before('<span class="tablesorter-savemyplace"/>');
holdr = ($.fn.detach) ? $tb.detach() : $tb.remove();
return holdr;
}
holdr = $(table).find('span.tablesorter-savemyplace');
$tb.insertAfter( holdr );
holdr.remove();
};
// *** Store data in local storage, with a cookie fallback ***
/* IE7 needs JSON library for JSON.stringify - (http://caniuse.com/#search=json)
if you need it, then include https://github.com/douglascrockford/JSON-js
@ -126,8 +112,9 @@ $.tablesorter.addWidget({
$t = $(table),
c = table.config,
wo = c.widgetOptions,
theme = typeof wo.uitheme === 'object' ? wo.uitheme.name || 'jui' : wo.uitheme || 'jui',
o = (typeof wo.uitheme === 'object' && !$.isArray(wo.uitheme)) ? wo.uitheme : $.tablesorter.themes[ $.tablesorter.themes.hasOwnProperty(theme) ? theme : 'jui'],
theme = typeof wo.uitheme === 'object' ? 'jui' : wo.uitheme || 'jui', // default uitheme is 'jui'
// use Object.prototype.toString.call().test('Array') instead of $.isArray to make this widget compatible with jQuery v1.2.6
o = (typeof wo.uitheme === 'object' && !Object.prototype.toString.call(wo.uitheme).test('Array')) ? wo.uitheme : $.tablesorter.themes[ $.tablesorter.themes.hasOwnProperty(theme) ? theme : 'jui'],
$h = $(c.headerList),
sh = 'tr.' + (wo.stickyHeaders || 'tablesorter-stickyHeader'),
rmv = o.sortNone + ' ' + o.sortDesc + ' ' + o.sortAsc;
@ -140,9 +127,7 @@ $.tablesorter.addWidget({
$t
// remove other selected themes; use widgetOptions.theme_remove
.removeClass( c.theme === '' ? '' : 'tablesorter-' + c.theme )
.addClass('tablesorter-' + theme + ' ' + o.table) // add theme widget class name
.find('tfoot tr')
.addClass(o.header);
.addClass('tablesorter-' + theme + ' ' + o.table); // add theme widget class name
c.theme = ''; // clear out theme option so it doesn't interfere
// update header classes
$h
@ -181,7 +166,7 @@ $.tablesorter.addWidget({
},
remove: function(table, c, wo){
var $t = $(table),
theme = typeof wo.uitheme === 'object' ? wo.uitheme.name || 'custom' : wo.uitheme || 'jui',
theme = typeof wo.uitheme === 'object' ? 'jui' : wo.uitheme || 'jui',
o = typeof wo.uitheme === 'object' ? wo.uitheme : $.tablesorter.themes[ $.tablesorter.themes.hasOwnProperty(theme) ? theme : 'jui'],
$h = $t.children('thead').children(),
rmv = o.sortNone + ' ' + o.sortDesc + ' ' + o.sortAsc;
@ -197,7 +182,8 @@ $.tablesorter.addWidget({
});
// Widget: Column styles
// "columns" option in "widgetOptions"
// "columns", "columns_thead" (true) and
// "columns_tfoot" (true) options in "widgetOptions"
// **************************
$.tablesorter.addWidget({
id: "columns",
@ -244,12 +230,21 @@ $.tablesorter.addWidget({
});
$.tablesorter.processTbody(table, $tb, false);
}
// add tfoot classes
if ($tbl.find('tfoot').length) {
$t = $tbl.find('tfoot tr').children().removeClass('tablesorter-sorted');
if (list) {
for (k = 0; k < list.length; k++) {
$t.eq(list[k][0]).addClass('tablesorter-sorted');
// add classes to thead and tfoot
$tr = wo.columns_thead !== false ? 'thead tr' : '';
if (wo.columns_tfoot !== false) {
$tr += ($tr === '' ? '' : ',') + 'tfoot tr';
}
if ($tr.length) {
$t = $tbl.find($tr).children().removeClass(rmv);
if (list && list[0]){
// primary sort column class
$t.filter('[data-column="' + list[0][0] + '"]').addClass(css[0]);
if (len > 1){
for (i = 1; i < len; i++){
// secondary, tertiary, etc sort column classes
$t.filter('[data-column="' + list[i][0] + '"]').addClass(css[i] || css[last]);
}
}
}
}
@ -268,8 +263,6 @@ $.tablesorter.addWidget({
});
$.tablesorter.processTbody(table, $tb, false); // restore tbody
}
// clear tfoot
$(table).find('.tablesorter-sorted').removeClass('tablesorter-sorted');
}
});
@ -318,10 +311,17 @@ $.tablesorter.addWidget({
// dig fer gold
checkFilters = function(filter){
var arry = $.isArray(filter),
v = (arry) ? filter : $t.find('thead').eq(0).children('tr').find('select.' + css + ', input.' + css).map(function(){
$inpts = $t.find('thead').eq(0).children('tr').find('select.' + css + ', input.' + css),
v = (arry) ? filter : $inpts.map(function(){
return $(this).val() || '';
}).get(),
cv = (v || []).join(''); // combined filter values
// add filter array back into inputs
if (arry) {
$inpts.each(function(i,el){
$(el).val(filter[i] || '');
});
}
if (wo.filter_hideFilters === true){
// show/hide filter row as needed
$t.find('.tablesorter-filter-row').trigger( cv === '' ? 'mouseleave' : 'mouseenter' );
@ -330,11 +330,16 @@ $.tablesorter.addWidget({
// see example-widget-filter.html filter toggle buttons
if (last === cv && filter !== false) { return; }
$t.trigger('filterStart', [v]);
// give it time for the processing icon to kick in
setTimeout(function(){
if (c.showProcessing) {
// give it time for the processing icon to kick in
setTimeout(function(){
findRows(filter, v, cv);
return false;
}, 30);
} else {
findRows(filter, v, cv);
return false;
}, 10);
}
},
findRows = function(filter, v, cv){
var $tb, $tr, $td, cr, r, l, ff, time, arry;
@ -567,7 +572,7 @@ $.tablesorter.addWidget({
}
buildDefault();
$t.find('select.' + css).bind('change', function(){
$t.find('select.' + css).bind('change search', function(){
checkFilters();
});
@ -611,11 +616,11 @@ $.tablesorter.addWidget({
});
}
// show processesing icon
// show processing icon
if (c.showProcessing) {
$t.bind('filterStart filterEnd', function(e, v) {
var fc = (v) ? $t.find('.' + c.cssHeader).filter('[data-column]').filter(function(){
return v[$(this).data().column] !== '';
return v[$(this).data('column')] !== '';
}) : '';
ts.isProcessing($t[0], e.type === 'filterStart', v ? fc : '');
});
@ -624,6 +629,8 @@ $.tablesorter.addWidget({
if (c.debug){
ts.benchmark("Applying Filter widget", time);
}
// filter widget initialized
$t.trigger('filterInit');
}
},
remove: function(table, c, wo){
@ -640,6 +647,7 @@ $.tablesorter.addWidget({
$tb.children().removeClass('filtered').show();
$.tablesorter.processTbody(table, $tb, false); // restore tbody
}
if (wo.filterreset) { $(wo.filter_reset).unbind('click'); }
}
});
@ -656,7 +664,7 @@ $.tablesorter.addWidget({
c = table.config,
wo = c.widgetOptions,
win = $(window),
header = $(table).children('thead:first'),
header = $(table).children('thead:first'), //.add( $(table).find('caption') ),
hdrCells = header.children('tr:not(.sticky-false)').children(),
css = wo.stickyHeaders || 'tablesorter-stickyHeader',
innr = '.tablesorter-header-inner',
@ -724,7 +732,7 @@ $.tablesorter.addWidget({
resizeHdr();
});
// set sticky header cell width and link clicks to real header
hdrCells.each(function(i){
hdrCells.find('*').andSelf().filter(c.selectorSort).each(function(i){
var t = $(this);
stkyCells.eq(i)
// clicking on sticky will trigger sort
@ -790,7 +798,7 @@ $.tablesorter.addWidget({
$target = $next = null;
$(window).trigger('resize'); // will update stickyHeaders, just in case
};
s = ($.tablesorter.storage && wo.resize !== false) ? $.tablesorter.storage(table, 'tablesorter-resizable') : {};
s = ($.tablesorter.storage && wo.resizable !== false) ? $.tablesorter.storage(table, 'tablesorter-resizable') : {};
// process only if table ID or url match
if (s){
for (j in s){
@ -800,7 +808,10 @@ $.tablesorter.addWidget({
}
}
$tbl.children('thead:first').find('tr').each(function(){
$c = $(this).children().not(':last'); // don't include the first column of the row
$c = $(this).children()
// Firefox needs this inner div to position the resizer correctly
.wrapInner('<div class="tablesorter-wrapper" style="position:relative;height:100%;width:100%"></div>')
.not(':last'); // don't include the first column of the row
$cols = $cols ? $cols.add($c) : $c;
});
$cols
@ -808,9 +819,8 @@ $.tablesorter.addWidget({
t = $(this);
j = parseInt(t.css('padding-right'), 10) + 8; // 8 is 1/2 of the 16px wide resizer
t
.append('<div class="tablesorter-resizer" style="cursor:w-resize;position:absolute;height:100%;width:16px;right:-' + j + 'px;top:0;z-index:1;"></div>')
// Firefox needs this inner div to position the resizer correctly
.wrapInner('<div class="tablesorter-wrapper" style="position:relative;height:100%;width:100%"></div>');
.find('.tablesorter-wrapper')
.append('<div class="tablesorter-resizer" style="cursor:w-resize;position:absolute;height:100%;width:16px;right:-' + j + 'px;top:0;z-index:1;"></div>');
})
.bind('mousemove.tsresize', function(e){
// ignore mousemove if no mousedown
@ -825,7 +835,7 @@ $.tablesorter.addWidget({
if ($.tablesorter.storage && $target){
s[$target.index()] = $target.width();
s[$next.index()] = $next.width();
if (wo.resize !== false){
if (wo.resizable !== false){
$.tablesorter.storage(table, 'tablesorter-resizable', s);
}
}
@ -862,9 +872,7 @@ $.tablesorter.addWidget({
$(this).find('.tablesorter-resizer').remove();
$(this).replaceWith( $(this).contents() );
});
$(c.headerList).width('auto');
// clear storage?
// $.tablesorter.storage( table, 'tablesorter-resizable', '' );
$.tablesorter.resizableReset(table);
}
});
$.tablesorter.resizableReset = function(table){

File diff suppressed because one or more lines are too long

View File

@ -1,6 +1,6 @@
{
"name": "tablesorter",
"version": "2.3.11",
"version": "2.4",
"title": "tablesorter",
"author": {
"name": "Christian Bach",
@ -35,7 +35,7 @@
}
],
"files": [
"css/blue/blue.zip",
"css/theme.blue.css",
"js/",
"/addons/pager/"
]