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

widget updates & bug fix

Browse Source
This commit is contained in:
Rob Garrison 2011-09-16 10:43:09 -05:00
parent cdc0aca948
commit 0325d3b509
11 changed files with 136 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
README.markdown
View File

@ -28,6 +28,17 @@ Included all original [document pages](http://mottie.github.com/tablesorter/docs
View the [complete listing here](http://mottie.github.com/tablesorter/changelog.txt).
#### Version 2.0.19 (2011-09-16)
* Added code in attempt to clear the table headers between multiple tables - fix for [issue #2](https://github.com/Mottie/tablesorter/issues/2).
* Cleaned up some code and wrapped the widget code to prevent conflicts with other javascript libraries.
* Updated the columns widget:
* Added css examples to the [demo](http://mottie.github.com/tablesorter/docs/example-widget-columns.html).
* Removed the `widgetColumns` option from the core, but it is still used by the widget - the way it is used hasn't changed.
* Updated the uitheme widget:
* Added `widgetUitheme` option - used by the widget, but not included in the core. See the demo for a better example.
* Example added to the [uitheme widget demo](http://mottie.github.com/tablesorter/docs/example-widget-columns.html).
#### Version 2.0.18.1 (2011-09-14)
* Updated the "uitheme" widget with method to add zebra striping and hovered header classes.

12
changelog.txt
View File

@ -1,5 +1,17 @@
TableSorter Change Log
Version 2.0.19 (2011-09-16)
============================
* Added code in attempt to clear the table headers between multiple tables - fix for [issue #2](https://github.com/Mottie/tablesorter/issues/2).
* Cleaned up some code and wrapped the widget code to prevent conflicts with other javascript libraries.
* Updated the columns widget:
* Added css examples to the [demo](http://mottie.github.com/tablesorter/docs/example-widget-columns.html).
* Removed the `widgetColumns` option from the core, but it is still used by the widget - the way it is used hasn't changed.
* Updated the uitheme widget:
* Added `widgetUitheme` option - used by the widget, but not included in the core. See the demo for a better example.
* Example added to the [uitheme widget demo](http://mottie.github.com/tablesorter/docs/example-widget-columns.html).
Version 2.0.18.1 (2011-09-14)
============================

3
docs/css/jq.css
View File

@ -11,6 +11,9 @@ table.tablesorter table.info tbody th,table.tablesorter table.info tbody td{bord
table.tablesorter table.info tbody th{background:#eee;}
#options{width:100%;}
#options pre{width:95%;}
#options .property{width:115px;}
#options .type{width:80px; }
#options .defaults{width:200px;}
#options .examples{width:60px;}
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;}

33
docs/example-widget-columns.html
View File

@ -25,9 +25,12 @@
// call the tablesorter plugin
$("table").tablesorter({
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
widgetColumns: { css: ["primary", "secondary", "tertiary" ] },
@ -120,6 +123,36 @@
<pre class="js"></pre>
</div>
<h1>CSS</h1>
<div>
<pre class="css">/*
This css is part of the blue/style.css theme, shown as an example
To work with the zebra widget, include the .odd and .even color definitions as well
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 tbody tr.even td.primary {
background-color: #e8e8ff;
}
table.tablesorter tbody td.secondary, table.tablesorter tbody tr.odd td.secondary {
background-color: #d6d6ff;
}
table.tablesorter tbody tr.even td.secondary {
background-color: #e8e8ff;
}
table.tablesorter tbody td.tertiary, table.tablesorter tbody tr.odd td.tertiary {
background-color: #e5e5ff;
}
table.tablesorter tbody tr.even td.tertiary {
background-color: #f8f8ff;
}</pre>
</div>
<h1>HTML</h1>
<div id="html">
<pre class="html"></pre>

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

@ -29,10 +29,17 @@
// call the tablesorter plugin and apply the ui theme widget
$("table").tablesorter({
// widget code now contained in the jquery.tablesorter.widgets.js file
widgets : ['uitheme', 'zebra'],
// adding zebra striping, using content and default styles - the ui css removes the background from default
widgetZebra: { css: ["ui-widget-content", "ui-state-default"] }
widgetZebra: { css: ["ui-widget-content", "ui-state-default"] },
// change default uitheme icons - find the full list of icons here: http://jqueryui.com/themeroller/ (hover over them for their name)
// default icons: { css: ["ui-icon-arrowthick-2-n-s", "ui-icon-arrowthick-1-s", "ui-icon-arrowthick-1-n"] }
// { css : ["up/down arrow (cssHeaders/unsorted)", "down arrow (cssDesc/descending)", "up arrow (cssAsc/ascending)" ] }
widgetUitheme: { css: ["ui-icon-carat-2-n-s", "ui-icon-carat-1-s", "ui-icon-carat-1-n"] }
});
});</script>

49
docs/index.html
View File

@ -19,8 +19,8 @@
<script>
$(function() {
$("#tablesorter-demo").tablesorter({sortList:[[0,0],[2,1]],widgets:['zebra']});
$("#options").tablesorter({sortList:[[0,0]],headers:{3:{sorter:false},4:{sorter:false},widthFixed:true}});
$("#methods,#events").tablesorter({sortList: [[0,0]],headers:{1:{sorter:false},2:{sorter:false},widthFixed:true}});
$("#options").tablesorter({sortList:[[0,0]],headers:{3:{sorter:false},4:{sorter:false}}});
$("#methods,#events").tablesorter({sortList: [[0,0]],headers:{1:{sorter:false},2:{sorter:false}}});
});
</script>
</head>
@ -345,10 +345,10 @@
<table id="options" class="tablesorter" border="0" cellpadding="0">
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
<th class="property">Property</th>
<th class="type">Type</th>
<th class="defaults">Default</th>
<th class="descrip">Description</th>
<th class="examples">Link</th>
</tr>
</thead>
@ -701,6 +701,7 @@
Built-in options include <code class="hilight">"simple"</code> and <code class="hilight">"complex"</code>. Use complex if you have data marked up
inside of a table cell like: <code class="hilight">&lt;td&gt;&lt;strong&gt;&lt;em&gt;123 Main Street&lt;/em&gt;&lt;/strong&gt;&lt;/td&gt;</code>.
<div class="collapsible">
<br>
Complex can be slow in large tables so consider writing your own text extraction function "myTextExtraction" which you define like:
<pre class="js">var myTextExtraction = function(node){
// extract data from markup and return it
@ -742,10 +743,11 @@ $(function(){
<tr id="widgetzebra">
<td><a href="#" class="toggle2">widgetZebra</a></td>
<td>Object with Array</td>
<td>{css:["even","odd"]}</td>
<td>{ css: [ "even", "odd" ] }</td>
<td>
When the zebra striping widget is initialized, it automatically applied the default class names of <code class="hilight">"even"</code> and <code class="hilight">"odd"</code>.
<div class="collapsible">
<br>
Use the <a href="#widgetzebra"><code class="hilight">"widgetZebra"</code></a> option to change the css class name as follows:
<pre class="js">$(function(){
$("table").tablesorter({
@ -760,10 +762,11 @@ $(function(){
<tr id="widgetcolumns">
<td><a href="#" class="toggle2">widgetColumns</a></td>
<td>Object with Array</td>
<td>{css:[ "primary", "secondary", "tertiary" ]}</td>
<td>{ css:[ "primary", "secondary", "tertiary" ] }</td>
<td>
When the column styling widget is initialized, it automatically applied the default class names of <code class="hilight">"primary"</code> for the primary sort, <code class="hilight">"secondary"</code> for the next sort, <code class="hilight">"tertiary"</code> for the next sort, and so on (add more as needed)... <span class="tip"><em>New!</em></span> in v2.0.17.
<div class="collapsible">
<br>
Use the <a href="#widgetcolumns"><code class="hilight">"widgetColumns"</code></a> option to change the css class name as follows:
<pre class="js">$(function(){
$("table").tablesorter({
@ -775,6 +778,25 @@ $(function(){
<td><a href="example-widget-columns.html">Example</a></td>
</tr>
<tr id="widgetuitheme">
<td><a href="#" class="toggle2">widgetUitheme</a></td>
<td>Object with Array</td>
<td>{ css: ["ui-icon-arrowthick-2-n-s", "ui-icon-arrowthick-1-s", "ui-icon-arrowthick-1-n"] }</td>
<td>
Used when the ui theme styling widget is initialized. It automatically applies the default class names of <code class="hilight">"ui-icon-arrowthick-2-n-s"</code> for the unsorted column, <code class="hilight">"ui-icon-arrowthick-1-s"</code> for the descending sort and <code class="hilight">"ui-icon-arrowthick-1-n"</code> for the ascending sort. <span class="tip"><em>New!</em></span> in v2.0.9.
<div class="collapsible">
<br>
Use the <a href="#widgetuitheme"><code class="hilight">"widgetUitheme"</code></a> option to change the css class name as follows:
<pre class="js">$(function(){
$("table").tablesorter({
widgets: ["uitheme"], // initialize ui theme styling widget of the table
widgetUitheme: { css: ["ui-icon-carat-2-n-s", "ui-icon-carat-1-s", "ui-icon-carat-1-n"] }
});
});</pre></div>
</td>
<td><a href="example-widget-columns.html">Example</a></td>
</tr>
<tr id="widthfixed">
<td>widthFixed</td>
<td>Boolean</td>
@ -1067,17 +1089,10 @@ $(table)
<ul>
<li><a class="external" href="http://plugins.jquery.com/files/jquery.metadata.2.1.zip">jQuery Metadata 2.1</a> (3,7kb <strong>Required for setting <a href="#Examples">inline options</a></strong>)</li>
<li><a href="../js/jquery.tablesorter.js">jquery.tablesorter.js</a> (31kb, for development)</li>
<li><a href="../addons/pager/jquery.tablesorter.pager.js">jquery.tablesorter.pager.js</a> (3,6kb, <a href="example-pager.html">tablesorter pagination plugin</a>)</li>
<li><a href="../js/jquery.tablesorter.widgets.js">jquery.tablesorter.widgets.js</a> (2,12kb, includes the jQuery UI theme 'uitheme' and columns styling 'columns' widgets. <span class="tip"><em>New!</em></span> in v2.0.17.)</li>
<li><a href="../addons/pager/jquery.tablesorter.pager.js">jquery.tablesorter.pager.js</a> (5,6kb, <a href="example-pager.html">tablesorter pagination plugin</a>)</li>
<li><a href="../js/jquery.tablesorter.widgets.js">jquery.tablesorter.widgets.js</a> (4,1kb, includes the jQuery UI theme 'uitheme', columns styling 'columns' widget and row 'filter' widgets. <span class="tip"><em>New!</em></span> in v2.0.17.)</li>
</ul>
<!--
<strong id="Download-Widgets">Widgets:</strong>
<ul>
<li><a class="external" href="http://www.jdempster.com/category/code/jquery/tablesortercookiewidget/">Cookie Widget</a>, By <a class="external" href="http://www.jdempster.com/">James Dempster</a></li>
</ul>
-->
<strong id="Download-Themes">Themes:</strong>
<ul>
<li><a href="../css/green/green.zip">Green Skin</a> - Images and CSS styles for green themed headers</li>

2
docs/js/chili/css.js
View File

@ -79,7 +79,7 @@ WEBSITE: http://noteslog.com/chili/
}
, color : {
_match: /(?:\#[a-fA-F0-9]{3,6})|\b(?:yellow|white|teal|silver|red|purple|olive|navy|maroon|lime|green|gray|fuchsia|blue|black|aqua|YellowGreen|Yellow|WhiteSmoke|White|Wheat|Violet|Turquoise|Tomato|Thistle|Teal|Tan|SteelBlue|SpringGreen|Snow|SlateGrey|SlateGray|SlateBlue|SkyBlue|Silver|Sienna|SeaShell|SeaGreen|SandyBrown|Salmon|SaddleBrown|RoyalBlue|RosyBrown|Red|Purple|PowderBlue|Plum|Pink|Peru|PeachPuff|PapayaWhip|PaleVioletRed|PaleTurquoise|PaleGreen|PaleGoldenRod|Orchid|OrangeRed|Orange|OliveDrab|Olive|OldLace|Navy|NavajoWhite|Moccasin|MistyRose|MintCream|MidnightBlue|MediumVioletRed|MediumTurquoise|MediumSpringGreen|MediumSlateBlue|MediumSeaGreen|MediumPurple|MediumOrchid|MediumBlue|MediumAquaMarine|Maroon|Magenta|Linen|LimeGreen|Lime|LightYellow|LightSteelBlue|LightSlateGrey|LightSlateGray|LightSkyBlue|LightSeaGreen|LightSalmon|LightPink|LightGrey|LightGreen|LightGray|LightGoldenRodYellow|LightCyan|LightCoral|LightBlue|LemonChiffon|LawnGreen|LavenderBlush|Lavender|Khaki|Ivory|Indigo|IndianRed|HotPink|HoneyDew|Grey|GreenYellow|Green|Gray|GoldenRod|Gold|GhostWhite|Gainsboro|Fuchsia|ForestGreen|FloralWhite|FireBrick|DodgerBlue|DimGrey|DimGray|DeepSkyBlue|DeepPink|Darkorange|DarkViolet|DarkTurquoise|DarkSlateGrey|DarkSlateGray|DarkSlateBlue|DarkSeaGreen|DarkSalmon|DarkRed|DarkOrchid|DarkOliveGreen|DarkMagenta|DarkKhaki|DarkGrey|DarkGreen|DarkGray|DarkGoldenRod|DarkCyan|DarkBlue|Cyan|Crimson|Cornsilk|CornflowerBlue|Coral|Chocolate|Chartreuse|CadetBlue|BurlyWood|Brown|BlueViolet|Blue|BlanchedAlmond|Black|Bisque|Beige|Azure|Aquamarine|Aqua|AntiqueWhite|AliceBlue)\b/
, _style: "color: green;"
, _style: "color: navy;"
}
}
}

4
docs/js/chili/js.js
View File

@ -19,7 +19,7 @@ WEBSITE: http://noteslog.com/chili/
}
, sl_comment: {
_match: /\/\/.*/
, _style: 'color: green;'
, _style: 'color: olive;'
}
, string: {
_match: /(?:\'[^\'\\\n]*(?:\\.[^\'\\\n]*)*\')|(?:\"[^\"\\\n]*(?:\\.[^\"\\\n]*)*\")/
@ -61,7 +61,7 @@ WEBSITE: http://noteslog.com/chili/
}
, 'function': {
_match: /\b(parseInt|parseFloat|isNaN|isFinite|eval|encodeURIComponent|encodeURI|decodeURIComponent|decodeURI)\b/
, _style: 'color: olive;'
, _style: 'color: green;'
}
, operator: {
_match: /\b(void|typeof|this|new|instanceof|in|function|delete)\b/

43
js/jquery.tablesorter.js
View File

@ -1,6 +1,6 @@
/*
* TableSorter 2.0 - Client-side table sorting with ease!
* Version 2.0.18
* Version 2.0.19
* @requires jQuery v1.2.3
*
* Copyright (c) 2007 Christian Bach
@ -94,7 +94,6 @@
parsers: {},
widgets: [],
widgetZebra: { css: ["even", "odd"] },
widgetColumns: { css: ["primary", "secondary", "tertiary" ] },
headers: {},
widthFixed: false,
cancelSelection: true,
@ -288,32 +287,31 @@
}
function appendToTable(table, cache) {
var c = cache,
r = c.row,
n = c.normalized,
var c = table.config,
r = cache.row,
n = cache.normalized,
totalRows = n.length,
checkCell = totalRows ? (n[0].length - 1) : 0,
tableBody = $(table.tBodies[0]),
rows = [],
i, j, l, pos, appendTime;
if (table.config.debug) {
if (c.debug) {
appendTime = new Date();
}
for (i = 0; i < totalRows; i++) {
pos = n[i][checkCell];
rows.push(r[pos]);
if (!table.config.appender) {
if (!c.appender) {
l = r[pos].length;
for (j = 0; j < l; j++) {
tableBody[0].appendChild(r[pos][j]);
table.tBodies[0].appendChild(r[pos][j]);
}
}
}
if (table.config.appender) {
table.config.appender(table, rows);
if (c.appender) {
c.appender(table, rows);
}
rows = null;
if (table.config.debug) {
if (c.debug) {
benchmark("Rebuilt table:", appendTime);
}
// apply table widgets
@ -396,15 +394,15 @@
function buildHeaders(table) {
var meta = ($.metadata) ? true : false,
header_index = computeTableHeaderCellIndexes(table),
$th, lock, time, $tableHeaders;
if (table.config.debug) {
$th, lock, time, $tableHeaders, c = table.config;
c.headerList = [];
if (c.debug) {
time = new Date();
}
$tableHeaders = $(table.config.selectorHeaders, table)
$tableHeaders = $(c.selectorHeaders, table)
.wrapInner("<span/>")
.each(function (index) {
this.column = header_index[this.parentNode.rowIndex + "-" + this.cellIndex];
// this.column = index;
this.order = formatSortingOrder( checkHeaderOrder(table, index) );
this.count = this.order;
if (checkHeaderMetadata(this) || checkHeaderOptions(table, index) || $(this).is('.sorter-false')) { this.sortDisabled = true; }
@ -412,13 +410,13 @@
lock = checkHeaderLocked(table, index);
if (typeof(lock) !== 'undefined' && lock !== false) { this.order = this.lockedOrder = formatSortingOrder(lock); }
if (!this.sortDisabled) {
$th = $(this).addClass(table.config.cssHeader);
if (table.config.onRenderHeader) { table.config.onRenderHeader.apply($th, [index]); }
$th = $(this).addClass(c.cssHeader);
if (c.onRenderHeader) { c.onRenderHeader.apply($th, [index]); }
}
// add cell to headerList
table.config.headerList[index] = this;
c.headerList[index] = this;
});
if (table.config.debug) {
if (c.debug) {
benchmark("Built headers:", time);
log($tableHeaders);
}
@ -468,9 +466,8 @@
}
function fixColumnWidth(table, $headers) {
var c = table.config, colgroup;
if (c.widthFixed) {
colgroup = $('<colgroup>');
if (table.config.widthFixed) {
var colgroup = $('<colgroup>');
$("tr:first td", table.tBodies[0]).each(function () {
colgroup.append($('<col>').css('width', $(this).width()));
});

4
js/jquery.tablesorter.min.js vendored
View File

File diff suppressed because one or more lines are too long

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

@ -1,14 +1,15 @@
/* TableSorter 2.0 Widgets */
(function($){
// Add jQuery UI theme widget
// **************************
$.tablesorter.addWidget({
id: "uitheme",
format: function(table) {
var time, c = table.config,
var time, klass, rmv, c = table.config,
// ["up/down arrow (cssHeaders, unsorted)", "down arrow (cssDesc, descending)", "up arrow (cssAsc, ascending)" ]
icons = c.uitheme || ["ui-icon-arrowthick-2-n-s", "ui-icon-arrowthick-1-s", "ui-icon-arrowthick-1-n"],
klass, rmv = icons.join(' ');
icons = ["ui-icon-arrowthick-2-n-s", "ui-icon-arrowthick-1-s", "ui-icon-arrowthick-1-n"];
if (c.widgetUitheme && c.widgetUitheme.hasOwnProperty('css')) { icons = c.widgetUitheme.css || icons; }
rmv = icons.join(' ');
if (c.debug) {
time = new Date();
}
@ -23,7 +24,7 @@ $.tablesorter.addWidget({
$(this).addClass('ui-state-hover');
}, function(){
$(this).removeClass('ui-state-hover');
})
});
});
}
$.each(c.headerList, function(i){
@ -47,12 +48,13 @@ $.tablesorter.addWidget({
$.tablesorter.addWidget({
id: "columns",
format: function(table) {
var $td, time, i,
var $td, time, i, last, rmv,
c = table.config,
list = c.sortList,
len = list.length,
css = c.widgetColumns.css,
last = css.length-1,
css = [ "primary", "secondary", "tertiary" ];
if (c.widgetColumns && c.widgetColumns.hasOwnProperty('css')) { css = c.widgetColumns.css || css; }
last = css.length-1;
rmv = css.join(' ');
if (c.debug) {
time = new Date();
@ -87,7 +89,6 @@ $.tablesorter.addWidget({
if (!table.config.filtering) {
var i, v, r, t, $td, c = table.config,
cols = c.headerList.length,
cache = c.cache.normalized,
tbl = $(table),
fr = '<tr class="filters">',
time;
@ -126,3 +127,5 @@ $.tablesorter.addWidget({
}
}
});
})(jQuery);