Permalink
Browse files

filter widget & doc updates

  • Loading branch information...
1 parent 7b70cea commit 09752c6ab53b8bbd0c731f09586a2c0c18998950 @Mottie committed Nov 8, 2011
View
@@ -1,12 +1,18 @@
tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes.
tablesorter can successfully parse and sort many types of data including linked data in a cell.
-See [Alpha-numeric sort Demo](http://mottie.github.com/tablesorter/) & [Full Documentation](http://mottie.github.com/tablesorter/docs/)
+See the [full documentation](http://mottie.github.com/tablesorter/docs/)
+
+###Demos
+
+* [Basic alpha-numeric sort Demo](http://mottie.github.com/tablesorter/)
+* More demos can be found in the [documentation](http://mottie.github.com/tablesorter/docs/)
+* Demos & playgrounds - updated in the [wiki pages](https://github.com/Mottie/tablesorter/wiki).
###Features
* Multi-column sorting.
-* Parsers for sorting text, alphanumeric text, URIs, integers, currency, floats, IP addresses, dates (ISO, long and short formats), time. [Add your own easily](http://mottie.github.com/tablesorter/docs/example-parsers.html)
+* Parsers for sorting text, alphanumeric text, URIs, integers, currency, floats, IP addresses, dates (ISO, long and short formats) & time. [Add your own easily](http://mottie.github.com/tablesorter/docs/example-parsers.html)
* Support for ROWSPAN and COLSPAN on TH elements.
* Support secondary "hidden" sorting (e.g., maintain alphabetical sort when sorting on other criteria).
* Extensibility via [widget system](http://mottie.github.com/tablesorter/docs/example-widgets.html).
@@ -28,6 +34,16 @@ 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.23.3 (2011-11-7)
+
+* Updated the filter widget:
+ * Changed filter input from visibility hidden to display none. Fix/enhancement from [issue #7](https://github.com/Mottie/tablesorter/issues/7).
+ * Modified the widget to better work with child rows. Added the `widgetFilterChildRows` option. Fix for [issue #8](https://github.com/Mottie/tablesorter/issues/8).
+ * When `widgetFilterChildRows` is true, all child row content is included in the row filtering; if false, the child row content is ignored.
+* Added `tableClass` to the documents. Apparently I forgot to add it before.
+* Added a note to the filter demo bringing up [issue #6](https://github.com/Mottie/tablesorter/issues/6).
+* Miscellaneous updates to the documents.
+
#### Version 2.0.23.2 (2011-10-28)
* Fixed pager size & total pages not being retained after destroying, then restoring the pager. Thanks to crush123 for reporting the problem!
View
@@ -1,5 +1,16 @@
TableSorter Change Log
+Version 2.0.23.3 (2011-11-7)
+============================
+
+* Updated the filter widget:
+ * Changed filter input from visibility hidden to display none. Fix/enhancement from [issue #7](https://github.com/Mottie/tablesorter/issues/7).
+ * Modified the widget to better work with child rows. Added the `widgetFilterChildRows` option. Fix for [issue #8](https://github.com/Mottie/tablesorter/issues/8).
+ * When `widgetFilterChildRows` is true, all child row content is included in the row filtering; if false, the child row content is ignored.
+* Added `tableClass` to the documents. Apparently I forgot to add it before.
+* Added a note to the filter demo bringing up [issue #6](https://github.com/Mottie/tablesorter/issues/6).
+* Miscellaneous updates to the documents.
+
Version 2.0.23.2 (2011-10-28)
============================

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -416,7 +416,7 @@
<div class="next-up">
<hr />
- Next up: <a href="example-option-sort-order.html">Set an initial sorting order direction &rsaquo;&rsaquo;</a>
+ Next up: <a href="example-child-rows-filtered.html">Child Rows with Filter Widget &rsaquo;&rsaquo;</a>
</div>
</div>
@@ -48,6 +48,7 @@
<li>Added filter header option and class name to allow disabling the filter in a specific column in v2.0.19.1.</li>
<li>The Discount column has the "filter-false" class added to the header - see the HTML on how to add this ability.</li>
<li>The Date column has the "headers" option applied to disable the sort and the filter - see the table options in the javascript for this example.</li>
+ <li>Please note that using the pager plugin with this filter widget will have <em>unexpected results</em> - I haven't figured out how to fix the problem.</li>
</ul>
</p>
View
@@ -295,7 +295,8 @@
<li><a href="example-trigger-sort.html">Sort table using a link outside the table</a></li>
<li><a href="example-option-sort-force.html">Force a default sorting order</a></li>
<li><a href="example-option-sort-append.html">Append a sort to the selected sorting order</a></li>
- <li><a href="example-child-rows.html">How to add rows that sort with their parent row</a></li>
+ <li><a href="example-child-rows.html">Child rows; how to add rows that sort with their parent row</a></li>
+ <li><a href="example-child-rows-filtered.html">Child rows + filter widget; how they work together</a></li>
<li><a href="example-option-sort-order.html">Direction of initial sort</a></li>
<li><a href="example-options-headers.html">Disable sort using headers options</a></li>
<li><a href="example-options-headers-locked.html">Lock sort order using header options</a></li>
@@ -411,7 +412,7 @@
<td>String</td>
<td>"expand-child"</td>
<td>Add this css class to a child row that should always be attached to its parent. Click on the "cssChildRow" link to toggle the view on the attached child row.</td>
- <td><a href="example-child-rows.html">Example</a></td>
+ <td>Ex:<a href="example-child-rows.html">1</a> <a href="example-child-rows-filtered.html">2</a></td>
</tr>
<tr class="expand-child">
<td></td>
@@ -747,6 +748,18 @@
<td><a href="example-option-sort-key.html">Example</a></td>
</tr>
+ <tr id="tableClass">
+ <td>tableClass</td>
+ <td>String</td>
+ <td>"tablesorter"</td>
+ <td>This class was required in the default markup in version 2.0.5. But in version 2.0.6, it was added as an option.
+ <div class="collapsible">
+ <br>Change this option if you are not using the default css, or if you are using a completely custom stylesheet.
+ </div>
+ </td>
+ <td></td>
+ </tr>
+
<tr id="textextraction">
<td><a href="#" class="toggle2">textExtraction</a></td>
<td>String Or Function</td>
@@ -835,17 +848,23 @@
<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>{ 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>
+ Find more jQuery UI class names by hovering over the Framework icons on this page: <a class="external" href="http://jqueryui.com/themeroller/">http://jqueryui.com/themeroller/</a><br>
+ <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"]
+ css: [
+ "ui-icon-carat-2-n-s", // Unsorted icon
+ "ui-icon-carat-1-s", // Sort up (down arrow)
+ "ui-icon-carat-1-n" // Sort down (up arrow)
+ ]
}
});
});</pre></div>
@@ -1,4 +1,4 @@
-/* TableSorter 2.0 Widgets
+/* TableSorter 2.0 Widgets - updated 11/7/2011
*
* jQuery UI Theme
* Column Styles
@@ -95,7 +95,7 @@ $.tablesorter.addWidget({
id: "filter",
format: function(table) {
if (!table.config.filtering) {
- var i, v, r, t, $td, c = table.config,
+ var i, v, r, t, cr, icr, $td, c = table.config,
cols = c.headerList.length,
tbl = $(table),
fr = '<tr class="filters">',
@@ -106,7 +106,7 @@ $.tablesorter.addWidget({
for (i=0; i < cols; i++){
fr += '<td><input type="text" class="filter" data-col="' + i + '" style="';
// use header option - headers: { 1: { filter: false } } OR add class="filter-false"
- fr += ((c.headers[i] && 'filter' in c.headers[i] && c.headers[i].filter === false) || $(c.headerList[i]).is('.filter-false') ) ? 'visibility:hidden' : '';
+ fr += ((c.headers[i] && 'filter' in c.headers[i] && c.headers[i].filter === false) || $(c.headerList[i]).is('.filter-false') ) ? 'display:none' : '';
fr += '"></td>';
}
tbl
@@ -116,17 +116,24 @@ $.tablesorter.addWidget({
if (v.join('') === '') {
tbl.find('tr').show();
} else {
- tbl.find('tbody').find('tr').each(function(){
+
+ tbl.find('tbody').find('tr:not(.expand-child)').each(function(){
r = true;
+ cr = $(this).nextUntil('tr:not(.expand-child)');
+ // so, if icr (table.config.widgetFilterChildRows) is true and there is
+ // a match anywhere in the child row, then it will make the row visible
+ // checked here so the option can be changed dynamically
+ t = (cr.length && (typeof c.widgetFilterChildRows !== 'undefined' ? c.widgetFilterChildRows : true)) ? cr.text() : '';
$td = $(this).find('td');
for (i=0; i < cols; i++){
- if (v[i] !== '' && $td.eq(i).text().toLowerCase().indexOf(v[i]) >= 0) {
+ if (v[i] !== '' && ($td.eq(i).text() + t).toLowerCase().indexOf(v[i]) >= 0) {
r = (r) ? true : false;
} else if (v[i] !== '') {
r = false;
}
}
$(this)[r ? 'show' : 'hide']();
+ if (cr.length) { cr[r ? 'show' : 'hide'](); }
});
}
tbl.trigger('applyWidgets'); // make sure zebra widget is applied

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.

0 comments on commit 09752c6

Please sign in to comment.