mirror of
https://github.com/Mottie/tablesorter.git
synced 2025-01-12 15:24:21 +00:00
Merge branch 'working'
This commit is contained in:
Mottie
commit
232cfe55a0
71
README.md
71
README.md
@ -60,6 +60,47 @@ tablesorter can successfully parse and sort many types of data including linked
|
||||
|
||||
View the [complete listing here](https://github.com/Mottie/tablesorter/wiki/Change).
|
||||
|
||||
#### <a name="v2.17.6">Version 2.17.6</a> (8/1/2014)
|
||||
|
||||
* Core
|
||||
* Adding a class name of `parser-false` to a column will now automatically set `sorter-false` and `filter-false` behavior.
|
||||
* Add extractor type which allows giving a column two parsers, one to extract content from an input/select and the second to parse the extracted text. Thanks to [TheSin-](https://github.com/TheSin-)!
|
||||
* Ensure custom parsed data adheres to the `ignoreCase` option.
|
||||
* Add a delay to any sort if there is an update in progress. This prevents issues with a sort being applied causing duplicate rows to be added to the table, hopefully.
|
||||
* The `widthFixed` option now finds both visible `th` and `td` cells within the first row of the tbody to set column width percentages.
|
||||
* Ensure all rows have a set role for screen readers (`role="row"`). Fixes [issue #690](https://github.com/Mottie/tablesorter/issues/690).
|
||||
* Redefine `c.$headers` when building headers for new/replaced header cells (not just content). Fixes [issue #683](https://github.com/Mottie/tablesorter/issues/683).
|
||||
* Docs
|
||||
* Fixed lots of minor HTML issues (e.g. missing closing `</li>` & `<p>` tags)
|
||||
* Parsers
|
||||
* Add parser for textareas within the `parser-input-select.js` file.
|
||||
* Modify input & textarea parser to only update the table cache when:
|
||||
* The user presses enter (input) or alt + enter (textarea) within the element.
|
||||
* When the element is blurred.
|
||||
* Or, when the mouse leaves the tbody.
|
||||
* Editable
|
||||
* Add two new options:
|
||||
* `editable_autoAccept`: accepts any changes made to the table cell automatically (`true` by default)
|
||||
* `editable_validate`: a function used to validate the changes; return a valid string (`null` by default)
|
||||
* Modify `editable_columns` type check to prevent javascript errors. See [pull #688](https://github.com/Mottie/tablesorter/issues/688). Thanks [scratcher28](https://github.com/scratcher28)!
|
||||
* Limit the `editable_columns` array value to columns within the table.
|
||||
* Filter
|
||||
* Make all options show within the current select when the `filter-onlyAvail` class is set on a column.
|
||||
* Updated & added docs for `$.tablesorter.filter.buildSelect` function to allow external calls to modify filter select options.
|
||||
* Update `filter_selectSource` to accept arrays instead of a function. This was documented as working, but it wasn't coded until now. Sorry!
|
||||
* Add `filter_selectSourceSeparator` option:
|
||||
* Include a separator within the `filter_selectSource` array (e.g. "a-z|A through Z").
|
||||
* The text that is left of the separator is added to the option value, the the text on the right is added to the option text.
|
||||
* So `"a-z|A through Z"` becomes `<option value="a-z">A through Z</option>`.
|
||||
* Fixes [issue #692](https://github.com/Mottie/tablesorter/issues/692).
|
||||
* Add `role="row"` to the filter row. Fixes [issue #697](https://github.com/Mottie/tablesorter/issues/697).
|
||||
* Any match inputs now follow the `filter_startsWith` setting. See [this Stackoverflow](http://stackoverflow.com/q/25070448/145346) question.
|
||||
* Pager
|
||||
* The `ouput` option can now include user modifiable `startRow` (`{startRow:input}`) or `page` (`{page:input}`) inputs within the output.
|
||||
* Remove selected attribute from page selector options. Fixes [issue #700](https://github.com/Mottie/tablesorter/issues/700).
|
||||
* Resizable
|
||||
* Update `$.tablesorter.addHeaderResizeEvent` function's first parameter `table` to accept table DOM elements as well as jQuery objects. Fixes [issue #687](https://github.com/Mottie/tablesorter/issues/687).
|
||||
|
||||
#### <a name="v2.17.5">Version 2.17.5</a> (7/17/2014)
|
||||
|
||||
* Core
|
||||
@ -123,33 +164,3 @@ View the [complete listing here](https://github.com/Mottie/tablesorter/wiki/Chan
|
||||
* Add `resizable_throttle` option to allow throttling of the mousemove/resize event. Set this option to `true` or a number between 1 and 10 to add a throttling delay. Fixes [issue #662](https://github.com/Mottie/tablesorter/issues/662).
|
||||
|
||||
* UITheme: non-existent columns no longer cause a js error. Fixes [issue #672](https://github.com/Mottie/tablesorter/issues/672).
|
||||
|
||||
#### <a name="v2.17.3">Version 2.17.3</a> (6/28/2014)
|
||||
|
||||
* Docs
|
||||
* Added bold notes to the output widget demo about setting the server content-disposition. Fixes [issue #653](https://github.com/Mottie/tablesorter/issues/653).
|
||||
* Updated to latest Bootstrap (v3.2.0), jQuery UI (v1.11.0) and Cupertino theme.
|
||||
* Embedded gists within the documentation should now work properly.
|
||||
|
||||
* Core
|
||||
* Add "tablesorter-processing" class name to table during processing. Fixes [issue #655](https://github.com/Mottie/tablesorter/issues/655).
|
||||
|
||||
* Filter
|
||||
* When `filter_liveSearch` is set to a number, it now searches when pressing enter. Fixes [issue #654](https://github.com/Mottie/tablesorter/issues/654).
|
||||
* Modify change event so a select searches the table without requiring a carriage return. Fixes [issue #650](https://github.com/Mottie/tablesorter/issues/650).
|
||||
|
||||
* Pager
|
||||
* Objects returned by `ajaxProcessing` can now include a `filteredRows` value. Fixes [issue #649](https://github.com/Mottie/tablesorter/issues/649).
|
||||
* Fix internal use of `selectorRemove` option, to consistently extract out the class name from the selector string.
|
||||
* Previous & Next buttons now disable with zero filtered pages. Fixes [issue #649](https://github.com/Mottie/tablesorter/issues/649).
|
||||
* Changed pager widget `goto` page selector option to `gotoPage`, because `goto` is a reserved word. Fixes [issue #657](https://github.com/Mottie/tablesorter/issues/657).
|
||||
|
||||
* Scroller
|
||||
* Add `scroller_upAfterSort` option to prevent scrolling after clicking a checkbox. Fixes [issue #660](https://github.com/Mottie/tablesorter/issues/660).
|
||||
|
||||
* Static Row
|
||||
* Static rows are now manipulated witin a detached tbody.
|
||||
* Updated demo to allow toggling of static rows using ctrl (or command on Mac) + click.
|
||||
|
||||
* Parsers
|
||||
* Added new Roman numeral parsers. There are three different parsers to cover three different use cases. Please see the [roman numeral parser demo](http://mottie.github.io/tablesorter/docs/example-parsers-roman.html) for details.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
/*!
|
||||
* tablesorter pager plugin
|
||||
* updated 7/17/2014 (v2.17.5)
|
||||
* updated 8/1/2014 (v2.17.6)
|
||||
*/
|
||||
/*jshint browser:true, jquery:true, unused:false */
|
||||
;(function($) {
|
||||
@ -129,7 +129,7 @@
|
||||
},
|
||||
|
||||
updatePageDisplay = function(table, p, completed) {
|
||||
var i, pg, s, out, regex,
|
||||
var i, pg, s, $out, regex,
|
||||
c = table.config,
|
||||
f = c.$table.hasClass('hasFilters'),
|
||||
t = [],
|
||||
@ -159,7 +159,7 @@
|
||||
p.startRow = (t) ? 1 : (p.filteredRows === 0 ? 0 : p.size * p.page + 1);
|
||||
p.page = (t) ? 0 : p.page;
|
||||
p.endRow = Math.min( p.filteredRows, p.totalRows, p.size * ( p.page + 1 ) );
|
||||
out = p.$container.find(p.cssPageDisplay);
|
||||
$out = p.$container.find(p.cssPageDisplay);
|
||||
// form the output string (can now get a new output string from the server)
|
||||
s = ( p.ajaxData && p.ajaxData.output ? p.ajaxData.output || p.output : p.output )
|
||||
// {page} = one-based index; {page+#} = zero based index +/- value
|
||||
@ -168,15 +168,21 @@
|
||||
})
|
||||
// {totalPages}, {extra}, {extra:0} (array) or {extra : key} (object)
|
||||
.replace(/\{\w+(\s*:\s*\w+)?\}/gi, function(m){
|
||||
var str = m.replace(/[{}\s]/g,''),
|
||||
var len, indx,
|
||||
str = m.replace(/[{}\s]/g,''),
|
||||
extra = str.split(':'),
|
||||
data = p.ajaxData,
|
||||
// return zero for default page/row numbers
|
||||
deflt = /(rows?|pages?)$/i.test(str) ? 0 : '';
|
||||
if (/(startRow|page)/.test(extra[0]) && extra[1] === 'input') {
|
||||
len = ('' + (extra[0] === 'page' ? p.totalPages : p.totalRows)).length;
|
||||
indx = extra[0] === 'page' ? p.page + 1 : p.startRow;
|
||||
return '<input type="text" class="ts-' + extra[0] + '" style="max-width:' + len + 'em" value="' + indx + '"/>';
|
||||
}
|
||||
return extra.length > 1 && data && data[extra[0]] ? data[extra[0]][extra[1]] : p[str] || (data ? data[str] : deflt) || deflt;
|
||||
});
|
||||
if (out.length) {
|
||||
out[ (out[0].tagName === 'INPUT') ? 'val' : 'html' ](s);
|
||||
if ($out.length) {
|
||||
$out[ ($out[0].tagName === 'INPUT') ? 'val' : 'html' ](s);
|
||||
if ( p.$goto.length ) {
|
||||
t = '';
|
||||
pg = Math.min( p.totalPages, p.filteredPages );
|
||||
@ -185,6 +191,12 @@
|
||||
}
|
||||
p.$goto.html(t).val( p.page + 1 );
|
||||
}
|
||||
// rebind startRow/page inputs
|
||||
$out.find('.ts-startRow, .ts-page').unbind('change').bind('change', function(){
|
||||
var v = $(this).val(),
|
||||
pg = $(this).hasClass('ts-startRow') ? Math.floor( v/p.size ) + 1 : v;
|
||||
c.$table.trigger('pageSet.pager', [ pg ]);
|
||||
});
|
||||
}
|
||||
}
|
||||
pagerArrows(p);
|
||||
@ -546,7 +558,7 @@
|
||||
}
|
||||
}
|
||||
// disable size selector
|
||||
p.$size.add(p.$goto).each(function(){
|
||||
p.$size.add(p.$goto).add(p.$container.find('.ts-startRow, .ts-page')).each(function(){
|
||||
$(this).attr('aria-disabled', 'true').addClass(p.cssDisabled)[0].disabled = true;
|
||||
});
|
||||
},
|
||||
@ -665,7 +677,10 @@
|
||||
enablePager = function(table, p, triggered){
|
||||
var info,
|
||||
c = table.config;
|
||||
p.$size.add(p.$goto).removeClass(p.cssDisabled).removeAttr('disabled').attr('aria-disabled', 'false');
|
||||
p.$size.add(p.$goto).add(p.$container.find('.ts-startRow, .ts-page'))
|
||||
.removeClass(p.cssDisabled)
|
||||
.removeAttr('disabled')
|
||||
.attr('aria-disabled', 'false');
|
||||
p.isDisabled = false;
|
||||
p.page = $.data(table, 'pagerLastPage') || p.page || 0;
|
||||
p.size = $.data(table, 'pagerLastSize') || parseInt(p.$size.find('option[selected]').val(), 10) || p.size || 10;
|
||||
@ -827,6 +842,8 @@
|
||||
// page size selector
|
||||
p.$size = pager.find(p.cssPageSize);
|
||||
if ( p.$size.length ) {
|
||||
// setting an option as selected appears to cause issues with initial page size
|
||||
p.$size.find('option').removeAttr('selected');
|
||||
p.$size.unbind('change.pager').bind('change.pager', function() {
|
||||
p.$size.val( $(this).val() ); // in case there are more than one pagers
|
||||
if ( !$(this).hasClass(p.cssDisabled) ) {
|
||||
|
||||
4
addons/pager/jquery.tablesorter.pager.min.js
vendored
4
addons/pager/jquery.tablesorter.pager.min.js
vendored
File diff suppressed because one or more lines are too long
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "tablesorter",
|
||||
"version": "2.17.4",
|
||||
"version": "2.17.6",
|
||||
"dependencies": {
|
||||
"jquery": ">=1.2.6"
|
||||
},
|
||||
|
||||
@ -18,7 +18,7 @@ table.tablesorter table.info tbody th,table.tablesorter table.info td {border:#0
|
||||
table.tablesorter table.info tbody th {background:#eee;}
|
||||
table.options {width:100%;}
|
||||
table.options pre {width:95%;}
|
||||
table.options .property, .setWidth {width:115px;}
|
||||
table.options .property, .setwidth {width:115px;}
|
||||
table.options .type {width:100px; }
|
||||
table.options .defaults {width:160px;}
|
||||
table.options .examples {width:60px;}
|
||||
|
||||
@ -63,7 +63,7 @@
|
||||
<li>This example could have used the "update" method to add rows, but to remove rows only the "update" method works.</li>
|
||||
<li>This method is better used for the <a href="example-pager.html">pager plugin</a> when not all of the rows are displayed.</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<br>
|
||||
|
||||
@ -108,11 +108,11 @@
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<br>
|
||||
<div id="demo"><button type="button" class="toggle-option">Toggle Child Row Content</button> : <span class="state">true</span>
|
||||
<button type="button" class="toggle-option">Toggle Child Row Content</button> : <span class="state">true</span>
|
||||
|
||||
<ul>
|
||||
<li>If true, the child row content is included in ALL filters. Enter "cal" (california) in any column filter and the same rows show up.</li>
|
||||
|
||||
@ -86,7 +86,7 @@
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
|
||||
126
docs/example-extractors-parsers.html
Normal file
126
docs/example-extractors-parsers.html
Normal file
@ -0,0 +1,126 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Using extractors with parsers</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.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>
|
||||
<script src="../addons/pager/jquery.tablesorter.pager.js"></script>
|
||||
<script src="../js/parsers/parser-input-select.js"></script>
|
||||
|
||||
<script id="js">// add parser through the tablesorter addParser method
|
||||
$.tablesorter.addParser({
|
||||
// set a unique id
|
||||
id: 'grades',
|
||||
is: function() {
|
||||
// return false so this parser is not auto detected
|
||||
return false;
|
||||
},
|
||||
format: function(s) {
|
||||
return s.toLowerCase()
|
||||
.replace(/good/, 2)
|
||||
.replace(/medium/, 1)
|
||||
.replace(/bad/, 0);
|
||||
},
|
||||
type: 'numeric'
|
||||
});
|
||||
|
||||
$(function() {
|
||||
$("table").tablesorter({
|
||||
theme: 'blue'
|
||||
// "extractor-select" and "sorter-grades" are added as a class name in the HTML
|
||||
// or un-comment out the option below
|
||||
// ,headers: { 6: { extractor: 'select', sorter: 'grades' } }
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Using extractors with parsers</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>
|
||||
<ul>
|
||||
<li>The extractor type was added in <span class="version">v2.17.6</span> and allows you to apply two parsers to a column:
|
||||
<ul>
|
||||
<li>In this demo, the last column contains select dropdowns that have "good", "medium" and "bad" options.</li>
|
||||
<li>So there is a need to use a parser to extract content from the selected option within the select and then use the grades parser to give each grade a sortable value.</li>
|
||||
<li>Thanks to <a href="https://github.com/TheSin-">TheSin-</a> for adding this functionality!</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>The extractor <em>is always</em> used before the parser.</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>data-extractor="select"</code>.</li>
|
||||
<li>metadata <code>class="{ extractor: 'select'}"</code>. This requires the metadata plugin.</li>
|
||||
<li>headers option <code>headers : { 0 : { extractor : 'select' } }</code>.</li>
|
||||
<li>header class name <code>class="extractor-select"</code>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="sorter-text">Name</th>
|
||||
<th>Major</th>
|
||||
<th>Gender</th>
|
||||
<th>English</th>
|
||||
<th>Japanese</th>
|
||||
<th>Calculus</th>
|
||||
<th class="extractor-select sorter-grades">Overall grades</th> <!-- set the column parser using a class name -->
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>Student01</td><td>Languages</td><td>male</td><td>80</td><td>70</td><td>75</td><td><select><option>good</option><option selected="selected">medium</option><option>bad</option></select></td></tr>
|
||||
<tr><td>Student02</td><td>Mathematics</td><td>male</td><td>90</td><td>88</td><td>100</td><td><select><option selected="selected">good</option><option>medium</option><option>bad</option></select></td></tr>
|
||||
<tr><td>Student03</td><td>Languages</td><td>female</td><td>85</td><td>95</td><td>80</td><td><select><option selected="selected">good</option><option>medium</option><option>bad</option></select></td></tr>
|
||||
<tr><td>Student04</td><td>Languages</td><td>male</td><td>20</td><td>50</td><td>65</td><td><select><option>good</option><option>medium</option><option selected="selected">bad</option></select></td></tr>
|
||||
<tr><td>Student05</td><td>Mathematics</td><td>female</td><td>70</td><td>78</td><td>70</td><td><select><option>good</option><option selected="selected">medium</option><option>bad</option></select></td></tr>
|
||||
<tr><td>Student06</td><td>Mathematics</td><td>male</td><td>44</td><td>65</td><td>60</td><td><select><option>good</option><option>medium</option><option selected="selected">bad</option></select></td></tr>
|
||||
<tr><td>Student07</td><td>Languages</td><td>female</td><td>99</td><td>92</td><td>89</td><td><select><option selected="selected">good</option><option>medium</option><option>bad</option></select></td></tr>
|
||||
<tr><td>Student08</td><td>Mathematics</td><td>female</td><td>90</td><td>98</td><td>90</td><td><select><option selected="selected">good</option><option>medium</option><option>bad</option></select></td></tr>
|
||||
<tr><td>Student09</td><td>Mathematics</td><td>male</td><td>55</td><td>72</td><td>66</td><td><select><option>good</option><option selected="selected">medium</option><option>bad</option></select></td></tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-option-date-format.html">Changing the date format ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -36,7 +36,7 @@
|
||||
<li>Clicking on any of the sortable header cells will cause all columns below it to sort.</li>
|
||||
<li>This demo will only work in tablesorter version 2.3+.</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
|
||||
@ -75,7 +75,7 @@
|
||||
<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>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
|
||||
@ -47,7 +47,7 @@
|
||||
<li>Reset the table by triggering a <code>sortReset</code> event on the table (see the javascript code below).</li>
|
||||
<li>This method was added in version 2.4.7.</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<button type="button">Reset</button>
|
||||
|
||||
@ -75,7 +75,8 @@
|
||||
<li>One custom sort used here is from the original tablesorter plugin v2.0.3. Sort the <del>first</del> "Plain Text Sort" column to see how it sorts alphanumeric data.</li>
|
||||
<li>This option is not part of the original plugin (v2.2).</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
|
||||
<div id="demo"><table class="tablesorter">
|
||||
|
||||
@ -49,7 +49,7 @@
|
||||
<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>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>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.</li>
|
||||
<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>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-date-format</code>).</li>
|
||||
@ -60,7 +60,7 @@
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
|
||||
@ -40,7 +40,7 @@
|
||||
<li>This example demonstrates that common table values are auto-detected (including plain text, currency, percentages, and positive & negative numbers), so there is no need to set a specific parser unless you notice an issue with how a column is sorting.</li>
|
||||
<li>Issues may arise if a column contains mixed data, e.g. "N/A" is located at the top of a numeric column; in this case the column will be detected as a text column and not a numeric column. If issues occur, add a <code>sorter-digit</code> class name to that header cell.</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><!-- the data-sortlist won't apply because it is supported by jQuery v1.4+; and this demo is using jQuery v1.2.6 -->
|
||||
|
||||
@ -71,7 +71,7 @@
|
||||
<li>As of <span class="version">v2.16.3</span>, there is a built-in 500 millisecond delay before the processing icon will show. If the sort has completed within that time, the icon will not appear.</li>
|
||||
<li>There is an issue with the processing icon not appearing at all, or the animation appears frozen when processing data in very large tables. This is due to javascript only being able to process one thread at-a-time; If you know of a solution or work-around please <a href="https://github.com/Mottie/tablesorter/issues/158">add a comment</a> or contribute a fix!</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
|
||||
@ -47,7 +47,7 @@
|
||||
<li>Click to sort any column header to see the the first column sort is appended to the selected sort order.</li>
|
||||
<li>This option is part of the original plugin</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
|
||||
@ -65,7 +65,7 @@ $(function(){
|
||||
</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>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
|
||||
|
||||
@ -49,7 +49,7 @@
|
||||
<li>Click to sort any column header to see the forcing of the first column sort.</li>
|
||||
<li>This option is part of the original plugin</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
|
||||
@ -40,7 +40,7 @@
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em> Click to sort any column header, then hold down the alt key and select a second column. Continue selecting columns as desired.
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
|
||||
@ -58,7 +58,7 @@
|
||||
<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>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
|
||||
@ -63,7 +63,7 @@
|
||||
<li>The "First Name" column is sorting by the contents of the <strong> tag (in red).</li>
|
||||
<li>Added "table" and "cellIndex" variables to the textExtraction function (v2.1.2).</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
|
||||
@ -81,7 +81,7 @@
|
||||
<li>Semver example order, from semver.org:<br>1.0.0-alpha < 1.0.0-alpha.1 < 1.0.0-alpha.beta < 1.0.0-beta < 1.0.0-beta.2 < 1.0.0-beta.11 < 1.0.0-rc.1 < 1.0.0</li>
|
||||
<!-- http://jsfiddle.net/Mottie/abkNM/1626/ -->
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
|
||||
@ -67,7 +67,7 @@
|
||||
</li>
|
||||
<li>For alternate <code>thead</code> & <code>tfoot</code> row colors, add the class name <code>dark-row</code>. See the HTML below.</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
|
||||
|
||||
@ -73,7 +73,7 @@
|
||||
<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>emptyTo</code> option defaults to bottom, so all empty cells will sort at the bottom of the table, except for the second column.</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table>
|
||||
|
||||
@ -53,7 +53,7 @@
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
|
||||
@ -56,7 +56,7 @@
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
|
||||
@ -68,7 +68,7 @@
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
|
||||
@ -58,7 +58,7 @@
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
|
||||
@ -139,7 +139,7 @@
|
||||
<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>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<br>
|
||||
@ -153,7 +153,7 @@
|
||||
<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="10">10</option>
|
||||
<option value="20">20</option>
|
||||
<option value="30">30</option>
|
||||
<option value="40">40</option>
|
||||
@ -444,7 +444,7 @@
|
||||
<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="10">10</option>
|
||||
<option value="20">20</option>
|
||||
<option value="30">30</option>
|
||||
<option value="40">40</option>
|
||||
|
||||
@ -49,7 +49,8 @@
|
||||
|
||||
// output string - default is '{page}/{totalPages}'
|
||||
// possible variables: {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {totalRows}
|
||||
output: '{startRow} to {endRow} ({totalRows})',
|
||||
// also {page:input} & {startRow:input} will add a modifiable input in place of the value
|
||||
output: '{startRow:input} to {endRow} ({totalRows})',
|
||||
|
||||
// apply disabled classname to the pager arrows when the rows at either extreme is visible - default is true
|
||||
updateArrows: true,
|
||||
@ -197,11 +198,12 @@
|
||||
<p class="tip">
|
||||
<em>NOTE!</em> The following are not part of the original plugin:
|
||||
<ul>
|
||||
<li>In <span class="version">v2.17.6</span>, added <code>{startRow:input}</code> and <code>{page:input}</code> variables to the <code>output</code> option.</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="https://github.com/Mottie/tablesorter/wiki/Changes">change log</a>.</li>
|
||||
<li>In <span class="version">v2.11</span>, the <code>savePages</code> option was added to saves the current page size and number (requires storage script).</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Triggered Events</h1>
|
||||
<ul id="display">
|
||||
@ -586,7 +588,7 @@ td.tablesorter-pager {
|
||||
<img src="next.png" class="next"/>
|
||||
<img src="last.png" class="last"/>
|
||||
<select class="pagesize">
|
||||
<option selected="selected" value="10">10</option>
|
||||
<option value="10">10</option>
|
||||
<option value="20">20</option>
|
||||
<option value="30">30</option>
|
||||
<option value="40">40</option>
|
||||
|
||||
@ -88,7 +88,7 @@ $(function(){
|
||||
</li>
|
||||
<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>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table>
|
||||
|
||||
@ -44,7 +44,7 @@
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
|
||||
@ -61,8 +61,8 @@
|
||||
<ul>
|
||||
<li>Formats for "mmddyy", "ddmmyy" and "yymmdd" are available</li>
|
||||
<li>Within the parser code is a <code>range</code> variable which is set to <code>50</code> years range, which sets the date be within +/- range of the listed two digit year.</li>
|
||||
<li>So if the current year is <code>2020</code>, and the listed two digit year is <code>80</code> (<code>2080 - 2020 > 50</code>), it becomes <code>1980</code>.</li>
|
||||
<li>If the listed two digit year is <code>50</code> (<code>2050 - 2020 < 50</code>), then it becomes <code>2050</code>. I hope that makes it clearer.</li>
|
||||
<li>So if the current year is <code>2020</code>, and the listed two digit year is <code>80</code> (<code>2080 - 2020 > 50</code>), it becomes <code>1980</code>.</li>
|
||||
<li>If the listed two digit year is <code>50</code> (<code>2050 - 2020 < 50</code>), then it becomes <code>2050</code>. I hope that makes it clearer.</li>
|
||||
<li>Try out the two digit year calculator below the table.</li>
|
||||
<li>In <span class="version">v2.14.0</span>, the range can be set using the <code>dateRange</code> option (see the initialization code below).</li>
|
||||
</ul>
|
||||
@ -71,7 +71,7 @@
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
|
||||
@ -91,7 +91,7 @@ $('table').tablesorter({
|
||||
"hu" : "a, az, egy"
|
||||
};</pre></li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<br>
|
||||
|
||||
@ -68,7 +68,7 @@
|
||||
});</pre>
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<button type="button" class="toggleparsedvalue">Toggle parsed values</button>
|
||||
|
||||
@ -32,7 +32,7 @@
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em> This functionality was added in version 2.2.3 (it is not part of the original plugin).
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
@ -109,7 +109,7 @@
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-option-date-format.html">Changing the date format ››</a>
|
||||
Next up: <a href="example-extractors-parsers.html">Using extractors with parsers ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@ -57,7 +57,7 @@
|
||||
<li>Supported prefixes include: Yotta (10<sup>24</sup>), Zetta (10<sup>21</sup>), Exa (10<sup>18</sup>), Peta (10<sup>15</sup>), Tera (10<sup>12</sup>), Giga (10<sup>9</sup>), Mega (10<sup>6</sup>), kilo (10<sup>3</sup>), hecto (10<sup>2</sup>), deka (10<sup>1</sup>), deci (10<sup>-1</sup>), centi (10<sup>-2</sup>), milli (10<sup>-3</sup>), micro (10<sup>-6</sup>), nano (10<sup>-9</sup>), pico (10<sup>-12</sup>), femto (10<sup>-15</sup>), atto (10<sup>-18</sup>), zepto (10<sup>-21</sup>) and yocto (10<sup>-24</sup>).</li>
|
||||
<li>This demo includes the stored metric values within the table cells, toggle the view using the button below.</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<button type="button" class="toggleparsedvalue">Toggle parsed values</button>
|
||||
@ -91,7 +91,7 @@
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<!-- load metric parser -->
|
||||
<script src="../js/parsers/parser-metric.js"></script>
|
||||
<script src="../js/parsers/parser-metric.js"></script></pre>
|
||||
</div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
|
||||
@ -213,7 +213,7 @@
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<!-- load roman numeral parser -->
|
||||
<script src="../js/parsers/parser-roman.js"></script>
|
||||
<script src="../js/parsers/parser-roman.js"></script></pre>
|
||||
</div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
|
||||
@ -153,7 +153,7 @@ $(function() {
|
||||
<h1>HTML</h1>
|
||||
<p class="tip">
|
||||
<em>NOTE!</em> Assigning the parser using a class name was added in version 2.0.11 (it is not part of the original plugin; use the <code>headers</code> option in older versions).
|
||||
</p>
|
||||
<p>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
@ -102,7 +102,7 @@
|
||||
<li>In <span class="version">v2.17.0</span>, added sorton values (a)scending, (d)escending, (n)ext, (s)ame & (o)pposite. Use the demo below help understand how to use these settings.</li>
|
||||
<li>In v2.9, a "sort" event can be triggered on the header cell to toggle the sort.</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<div id="demo">
|
||||
|
||||
|
||||
@ -68,7 +68,7 @@
|
||||
<li>This method allows you to update the cache with data from both the <code>thead</code> and <code>tbody</code> of the table.</li>
|
||||
<li>The <code>update</code> method only updates the cache from the <code>tbody</code>.</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
|
||||
@ -60,7 +60,7 @@
|
||||
<li>This option is part of the original plugin.</li>
|
||||
<li>Automatic resorting after "updateCell" is triggered was added in version 2.0.14.</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
|
||||
@ -122,13 +122,13 @@ td:nth-child(3) .ts-align-right i {
|
||||
</span>
|
||||
</td></pre>
|
||||
When this option is set with some HTML:
|
||||
<br><pre class="prettyprint lang-js">alignChar_wrap : '<i/>'</pre>
|
||||
<br><pre class="prettyprint lang-js">alignChar_wrap : '<i/>'</pre>
|
||||
it results in this layout:
|
||||
<pre class="prettyprint lang-html"><td>
|
||||
<span class="ts-align-wrap">
|
||||
<span class="ts-align-left" style="min-width:37%">Ox&nbsp;</span>
|
||||
<span class="ts-align-right" style="min-width:63%">
|
||||
<i>=</i>&nbsp;stinky
|
||||
<i>=</i>&nbsp;stinky
|
||||
</span>
|
||||
</span>
|
||||
</td></pre>
|
||||
|
||||
@ -177,7 +177,7 @@
|
||||
</li>
|
||||
<li>This demo uses HTML5 data attributes and therefore needs jQuery 1.4+.</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<!-- use the filter_reset : '.reset' option or include data-filter="" using the filter button demo code to reset the filters -->
|
||||
|
||||
@ -401,7 +401,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
|
||||
|
||||
@ -88,7 +88,7 @@ $(function() {
|
||||
<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 (v2.4).</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
Choose Theme:
|
||||
|
||||
@ -17,9 +17,20 @@
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<link rel="stylesheet" href="../css/theme.ice.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<script src="../js/widgets/widget-editable.js"></script>
|
||||
|
||||
<style>
|
||||
table.info2.tablesorter-ice { table-layout: auto; }
|
||||
.options th.option { width: 150px; }
|
||||
.info2 th { vertical-align: middle; text-align: center; }
|
||||
.info2 th.col { width: 42%; }
|
||||
.color1 { color: purple; }
|
||||
.color2 { color: blue; }
|
||||
.color3 { color: green; }
|
||||
</style>
|
||||
<style id="css">.tablesorter tbody > tr > td[contenteditable=true]:focus {
|
||||
outline: #08f 1px solid;
|
||||
background: #eee;
|
||||
@ -28,10 +39,9 @@
|
||||
td.no-edit, span.no-edit {
|
||||
background-color: rgba(230,191,153,0.5);
|
||||
}</style>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
$("table")
|
||||
$("#table")
|
||||
.tablesorter({
|
||||
theme : 'blue',
|
||||
|
||||
@ -39,14 +49,17 @@ td.no-edit, span.no-edit {
|
||||
widgetOptions: {
|
||||
editable_columns : [0,1,2], // or "0-2" (v2.14.2); point to the columns to make editable (zero-based index)
|
||||
editable_enterToAccept : true, // press enter to accept content, or click outside if false
|
||||
editable_autoAccept : true, // accepts any changes made to the table cell automatically (v2.17.6)
|
||||
editable_autoResort : false, // auto resort after the content has changed.
|
||||
editable_validate : null, // return a valid string: function(text, original){ return text; }
|
||||
editable_noEdit : 'no-edit', // class name of cell that is not editable
|
||||
editable_editComplete : 'editComplete' // event fired after the table content has been edited
|
||||
}
|
||||
})
|
||||
.children('tbody').on('editComplete', 'td', function(){
|
||||
// config event variable new in v2.17.6
|
||||
.children('tbody').on('editComplete', 'td', function(event, config){
|
||||
var $this = $(this),
|
||||
$allRows = $this.closest('table')[0].config.$tbodies.children('tr'),
|
||||
$allRows = config.$tbodies.children('tr'),
|
||||
|
||||
newContent = $this.text(),
|
||||
cellIndex = this.cellIndex, // there shouldn't be any colspans in the tbody
|
||||
@ -80,27 +93,70 @@ td.no-edit, span.no-edit {
|
||||
<div>
|
||||
<ul>
|
||||
<li>This widget can not be applied to the original plugin and requires jQuery 1.7+ and a browser that supports <a href="http://caniuse.com/#feat=contenteditable"><code>contenteditable</code> attributes</a> (almost all modern browsers).</li>
|
||||
<li><span class="label warning">Important</span>: In Internet Explorer, please wrap the cell content with a DIV or SPAN as <a href="http://msdn.microsoft.com/en-us/library/ie/ms533690(v=vs.85).aspx">it is not possible to make table cells directly contenteditable</a>. Wrapping the content in the markup is much more efficient than using javascript to do it for you (especially in IE).</li>
|
||||
<li><span class="label warning">Important</span>: In Internet Explorer, please wrap the cell content with a DIV or SPAN as <a href="http://msdn.microsoft.com/en-us/library/ie/ms533690(v=vs.85).aspx">it is not possible to make table cells directly contenteditable</a>. Wrapping the content in the markup is much more efficient than using javascript to do it for you (especially in IE).<br><br></li>
|
||||
<li>Updated <span class="version">v2.17.6</span>,
|
||||
<ul>
|
||||
<li>Fixed the <code>editable_enterToAccept</code> option to do what it was meant to do, accept when the user presses enter.</li>
|
||||
<li>Added <code>editable_autoAccept</code> option, so that when it is <code>true</code> the original behavior of accepting content changes will be maintained.</li>
|
||||
<li>Added <code>editable_validate</code> option, to allow validating the edited content.</li>
|
||||
<li>Focus is now maintained within the contenteditable element after updating. This makes it easier to tab through the table while editing. This change also fixes <a href="http://stackoverflow.com/q/24947995/145346">this Stackoverflow issue</a>.</li>
|
||||
<li>The <code>editComplete</code> event now passes the table <code>config</code> variable to make it easier to access tablesorter variables.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Updated <span class="version updated">v2.13.2</span>, because of the limitation in IE, if a table cell contains any DIV or SPAN immediately inside the cell, it will be targeted instead of the table cell itself and made content editable. So, if you don't care about IE support, there is no need to include the extra markup.</li>
|
||||
<li>In some browsers, additional CSS is needed to highlight a focused editable table cell. See the CSS block below.</li>
|
||||
<li>Pressing escape while editing will cancel any changes.</li>
|
||||
<li>In the demo below, click in any of the first three columns to edit the content, except for the cell containing <span class="no-edit">"Peter"</span>.</li>
|
||||
<li>To prevent a table cell from becoming editable, add the class name <code>"no-edit"</code> to the cell. Set by the <code>editable_noEdit</code> option.</li>
|
||||
<li>Edited content <em>will be accepted</em> in the following circumstances:
|
||||
<ul>
|
||||
<li>Pressing enter when the <code>editable_enterToAccept</code> option is <code>true</code>.</li>
|
||||
<li>Clicking outside of the current editable content.</li>
|
||||
<li>Moving the mouse outside of the current tbody. This is done because if the content editable is still active when the user clicks on the header to sort the column, all sorts of bad things happen.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Edited content <em>will not be accepted</em> in the following circumstances:
|
||||
<ul>
|
||||
<li>Pressing Escape within the editable content.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">When Content Changes are Accepted</a></h3>
|
||||
<div>
|
||||
<table class="info2 tablesorter-ice">
|
||||
<thead>
|
||||
<tr><th style="width:250px" colspan="2" rowspan="2"></th><th colspan="2">editable_enterToAccept</th></tr>
|
||||
<tr><th class="col">true</th><th class="col">false</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th stlye="width:200px" rowspan="2">editable_autoAccept</th>
|
||||
<th style="width:50px">true</th>
|
||||
<td>
|
||||
<ul>
|
||||
<li class="color1">Pressing alt-enter</li>
|
||||
<li class="color2">Pressing enter</li>
|
||||
<li class="color3">Clicking outside of the current editable content.</li>
|
||||
<li class="color3">Moving the mouse outside of the current tbody (this is done because if the content editable is still active when the user clicks on the header to sort the column, all sorts of bad things happen).</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li class="color1">Pressing alt-enter</li>
|
||||
<li class="color3">Clicking outside of the current editable content.</li>
|
||||
<li class="color3">Moving the mouse outside of the current tbody.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>false</th>
|
||||
<td>
|
||||
<ul>
|
||||
<li class="color1">Pressing alt-enter</li>
|
||||
<li class="color2">Pressing enter</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li class="color1">Pressing alt-enter</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
* <span class="label label-info">Note</span> The content is only accepted when the <code>editable_validation</code> function <em>does not</em> return <code>false</code>.
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Options</a></h3>
|
||||
<div>
|
||||
<h4>Editable widget widget default options (added inside of tablesorter <code>widgetOptions</code>)</h4>
|
||||
@ -109,10 +165,26 @@ td.no-edit, span.no-edit {
|
||||
</div>
|
||||
<table class="options tablesorter-blue" data-sortlist="[[0,0]]">
|
||||
<thead>
|
||||
<tr><th>Option</th><th class="sorter-false">Description</th></tr>
|
||||
<tr><th class="option">Option</th><th class="sorter-false">Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
<tr id="editable-auto-accept">
|
||||
<td><a href="#" class="permalink">editable_autoAccept</a></td>
|
||||
<td>Accepts any changes made to the table cell automatically <span class="version">v2.17.6</span>
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
If the user clicks outside or tabs out of the edited cell, or moves the mouse out of the current tbody, any changes to the cell will be accepted<br>
|
||||
<br>
|
||||
The only time the content is not accepted is if the user presses the escape key.<br>
|
||||
<br>
|
||||
if <code>false</code>, the acceptance behavior follows the <code>editable_enterToAccept</code> setting.<br>
|
||||
<br>
|
||||
Default value: <code>true</code>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="editable-columns">
|
||||
<td><a href="#" class="permalink">editable_columns</a></td>
|
||||
<td>Contains an array (or range string) of columns numbers you want to have editable content (zero-based index).
|
||||
@ -150,7 +222,7 @@ td.no-edit, span.no-edit {
|
||||
|
||||
<tr id="editable-no-edit">
|
||||
<td><a href="#" class="permalink">editable_noEdit</a></td>
|
||||
<td>Class name on table cells to search for that are not to become editable. .</li>
|
||||
<td>Class name on table cells to search for that are not to become editable.
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
The search is only done within the columns set by the <code>editable_columns</code> option.<br>
|
||||
@ -170,15 +242,47 @@ td.no-edit, span.no-edit {
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="editable-validate">
|
||||
<td><a href="#" class="permalink">editable_validate</a></td>
|
||||
<td>Validate the content change.
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
Use this function to validate and/or modify the content before it is accepted.<br>
|
||||
<br>
|
||||
This function must return either a string containing the modified content or <code>false</code> to revert the content back to it's original value. Example:
|
||||
<pre class="prettyprint lang-js">$(function(){
|
||||
|
||||
$('table').tablesorter({
|
||||
widgets : ['editable'],
|
||||
widgetOptions : {
|
||||
editable_validate : function(txt, orig){
|
||||
// only allow one word
|
||||
var t = /\s/.test(txt) ? txt.split(/\s/)[0] : txt;
|
||||
return t ? t : false;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});</pre>
|
||||
Default value: <code>null</code>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</p>
|
||||
<p></p>
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
|
||||
<button class="auto">Toggle</button> <code>editable_autoAccept : <span>true</span></code><br>
|
||||
<button class="enter">Toggle</button> <code>editable_enterToAccept : <span>true</span></code>
|
||||
<br>
|
||||
|
||||
<div id="demo"><table id="table" class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
@ -232,6 +336,7 @@ td.no-edit, span.no-edit {
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
@ -247,6 +352,22 @@ td.no-edit, span.no-edit {
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(function() {
|
||||
$('.options').tablesorter();
|
||||
|
||||
var wo = $('#table')[0].config.widgetOptions;
|
||||
$('.enter').click(function(){
|
||||
var t = wo.editable_enterToAccept = !wo.editable_enterToAccept;
|
||||
$(this).next().find('span').html('' + t);
|
||||
});
|
||||
$('.auto').click(function(){
|
||||
var t = wo.editable_autoAccept = !wo.editable_autoAccept;
|
||||
$(this).next().find('span').html('' + t);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -133,25 +133,26 @@ $(function() {
|
||||
<h3><a href="#">How to add Custom filter types</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>The first step is to decide what you want your filter to do.
|
||||
<li>The first step is to decide what you want your filter to do.</li>
|
||||
<li>Should it look for a symbol at the beginning, middle or end of the filter?</li>
|
||||
<li>Does the designator need spaces around it (e.g. " and " or " or ") to prevent problems? You wouldn't be able to find the country of "Andorra" if the "and" or "or" designators didn't require spaces.</li>
|
||||
<li>Make sure to name your filter so that it doesn't interfere with already existing ones, unless your filter is meant to replace an existing one. See the "Built-in Filters" section for a full list of filter function names.</li>
|
||||
<li>Within your filter, first test for your designator symbol.
|
||||
<ul>
|
||||
<li>Should it look for a symbol at the beginning, middle or end of the filter?</li>
|
||||
<li>Does the designator need spaces around it (e.g. " and " or " or ") to prevent problems? You wouldn't be able to find the country of "Andorra" if the "and" or "or" designators didn't require spaces.</li>
|
||||
<li>Make sure to name your filter so that it doesn't interfere with already existing ones, unless your filter is meant to replace an existing one. See the "Built-in Filters" section for a full list of filter function names.</li>
|
||||
<li>Within your filter, first test for your designator symbol.
|
||||
<li>If it exists within the filter, then do your comparison and return a boolean of <code>true</code> or <code>false</code>.</li>
|
||||
<li>Four arguments are passed to the filter function:
|
||||
<ul>
|
||||
<li>If it exists within the filter, then do your comparison and return a boolean of <code>true</code> or <code>false</code>.</li>
|
||||
<li>Four arguments are passed to the filter function:
|
||||
<ul>
|
||||
<li><code>filter</code> - The exact text from the filter input (e.g. <code>^h</code>).</li>
|
||||
<li><code>iFilter</code> - The text from the filter in all lower case for case insensitive searches.</li>
|
||||
<li><code>exact</code> - The exact (or parsed) text from the current table cell; the parsed text is passed when the column has a <code>"filter-parsed"</code> class name set.</li>
|
||||
<li><code>iExact</code> - The exact (or parsed) text in all lower case for case insensitive searches.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>If your designator doesn't exist, you *must* return <code>null</code> to allow comparisons with other filter types.</li>
|
||||
<li>Here is a basic example with extensive comments:
|
||||
<pre class="prettyprint lang-js">// search for a match from the beginning of a string
|
||||
<li><code>filter</code> - The exact text from the filter input (e.g. <code>^h</code>).</li>
|
||||
<li><code>iFilter</code> - The text from the filter in all lower case for case insensitive searches.</li>
|
||||
<li><code>exact</code> - The exact (or parsed) text from the current table cell; the parsed text is passed when the column has a <code>"filter-parsed"</code> class name set.</li>
|
||||
<li><code>iExact</code> - The exact (or parsed) text in all lower case for case insensitive searches.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>If your designator doesn't exist, you *must* return <code>null</code> to allow comparisons with other filter types.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Here is a basic example with extensive comments:
|
||||
<pre class="prettyprint lang-js">// search for a match from the beginning of a string
|
||||
// "^l" matches "lion" but not "koala"
|
||||
$.tablesorter.filter.types.start = function( filter, iFilter, exact, iExact ) {
|
||||
// test for filter type designator. In this example, "^" must be at the beginning of the filter
|
||||
@ -167,7 +168,8 @@ $.tablesorter.filter.types.start = function( filter, iFilter, exact, iExact ) {
|
||||
}
|
||||
// ALWAYS return null if your custom filter type doesn't match
|
||||
return null;
|
||||
};</pre></li>
|
||||
};</pre>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
@ -237,9 +237,9 @@
|
||||
// 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, $r) { return n < 10; },
|
||||
"$10 - $100" : function(e, n, f, i, $r) { return n >= 10 && n <=100; },
|
||||
"> $100" : function(e, n, f, i, $r) { return n > 100; }
|
||||
"< $10" : function(e, n, f, i, $r) { return n < 10; },
|
||||
"$10 - $100" : function(e, n, f, i, $r) { return n >= 10 && n <=100; },
|
||||
"> $100" : function(e, n, f, i, $r) { return n > 100; }
|
||||
}
|
||||
}</pre></li>
|
||||
<li>See the "Filter function information" section below.</li>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Filter Widget External Inputs</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-1.4.4.min.js"></script>
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
|
||||
@ -81,7 +81,7 @@
|
||||
<li>As of <span class="version">v2.15</span>,
|
||||
<ul>
|
||||
<li>A new filter widget <a href="index.html#widget-filter-external"><code>filter_external</code> option</a> has been added that essentially does the same thing as the <a href="index.html#function-bindsearch"><code>$.tablesorter.bindSearch</code></a> function.</li>
|
||||
</li>Use either to bind external search inputs.</li>
|
||||
<li>Use either to bind external search inputs.</li>
|
||||
<li>To change an input from searching one column (or all columns) to search any other column, call the <code>$.tablesorter.bindSearch</code> function to update the external inputs, even if the inputs are set using the <code>filter_external</code> option. Pass an additional <code>false</code> flag as the last parameter to force the inputs to update.
|
||||
<pre class="prettyprint lang-js">$.tablesorter.bindSearch( $('table'), $('.search'), false );</pre>
|
||||
</li>
|
||||
|
||||
@ -162,7 +162,7 @@
|
||||
max: 100,
|
||||
delayed: true,
|
||||
valueToHeader: true,
|
||||
compare : [ '=', '>=', '<=' ],
|
||||
compare : [ '=', '>=', '<=' ],
|
||||
selected: 1
|
||||
});
|
||||
},
|
||||
@ -175,7 +175,7 @@
|
||||
max: 150,
|
||||
delayed: true,
|
||||
valueToHeader: true,
|
||||
compare : '>='
|
||||
compare : '>='
|
||||
});
|
||||
}
|
||||
|
||||
@ -274,7 +274,7 @@
|
||||
max: 44,
|
||||
delayed: true,
|
||||
addToggle: false,
|
||||
compare: [ '<=', '=', '>=' ],
|
||||
compare: [ '<=', '=', '>=' ],
|
||||
selected: 2
|
||||
});
|
||||
}
|
||||
|
||||
@ -169,7 +169,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><button class="reset">Reset Search</button>
|
||||
|
||||
@ -123,7 +123,7 @@ tr.group-header.collapsed td i {
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
|
||||
@ -139,7 +139,7 @@ tr.group-header.collapsed td i {
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">Good Toys<a></td><td>USA</td><td>80%</td><td></td><td></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">Good Toys</a></td><td>USA</td><td>80%</td><td></td><td></td></tr>
|
||||
<tr class="tablesorter-childRow"><td>1561651</td><td>finish</td><td>0</td><td>$5</td></tr>
|
||||
<tr class="tablesorter-childRow"><td>558815</td><td>finish</td><td>0</td><td>$55</td></tr>
|
||||
|
||||
@ -147,25 +147,25 @@ tr.group-header.collapsed td i {
|
||||
<tr class="tablesorter-childRow"><td>21485213</td><td>in progress</td><td>2</td><td>$7</td></tr>
|
||||
<tr class="tablesorter-childRow"><td>12547854</td><td>finish</td><td>0</td><td>$18</td></tr>
|
||||
|
||||
<tr><td rowspan="5"><a href="#" class="toggle">Cycle Initial Bike Company<a></td><td>USA</td><td>36%</td><td></td><td></td></tr>
|
||||
<tr><td rowspan="5"><a href="#" class="toggle">Cycle Initial Bike Company</a></td><td>USA</td><td>36%</td><td></td><td></td></tr>
|
||||
<tr class="tablesorter-childRow"><td>12574521</td><td>in progress</td><td>1</td><td>$5</td></tr>
|
||||
<tr class="tablesorter-childRow"><td>7895452</td><td>in progress</td><td>2</td><td>$78</td></tr>
|
||||
<tr class="tablesorter-childRow"><td>1542021</td><td>finish</td><td>0</td><td>$28</td></tr>
|
||||
<tr class="tablesorter-childRow"><td>4489885</td><td>finish</td><td>0</td><td>$18</td></tr>
|
||||
|
||||
<tr><td rowspan="5"><a href="#" class="toggle">Sports Store<a></td><td>USA</td><td>90%</td><td></td><td></td></tr>
|
||||
<tr><td rowspan="5"><a href="#" class="toggle">Sports Store</a></td><td>USA</td><td>90%</td><td></td><td></td></tr>
|
||||
<tr class="tablesorter-childRow"><td>18915</td><td>in progress</td><td>2</td><td>$5</td></tr>
|
||||
<tr class="tablesorter-childRow"><td>5402574</td><td>in progress</td><td>2</td><td>$78</td></tr>
|
||||
<tr class="tablesorter-childRow"><td>26478</td><td>finish</td><td>0</td><td>$28</td></tr>
|
||||
<tr class="tablesorter-childRow"><td>25682</td><td>finish</td><td>0</td><td>$18</td></tr>
|
||||
|
||||
<tr><td rowspan="5"><a href="#" class="toggle">Locks Company<a></td><td>UK</td><td>24%</td><td></td><td></td></tr>
|
||||
<tr><td rowspan="5"><a href="#" class="toggle">Locks Company</a></td><td>UK</td><td>24%</td><td></td><td></td></tr>
|
||||
<tr class="tablesorter-childRow"><td>18915</td><td>in progress</td><td>2</td><td>$5</td></tr>
|
||||
<tr class="tablesorter-childRow"><td>5402574</td><td>in progress</td><td>1</td><td>$78</td></tr>
|
||||
<tr class="tablesorter-childRow"><td>26478</td><td>finish</td><td>0</td><td>$28</td></tr>
|
||||
<tr class="tablesorter-childRow"><td>25682</td><td>finish</td><td>0</td><td>$18</td></tr>
|
||||
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">Famous Bike Shop<a></td><td>UK</td><td>12%</td><td></td><td></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">Famous Bike Shop</a></td><td>UK</td><td>12%</td><td></td><td></td></tr>
|
||||
<tr class="tablesorter-childRow"><td>185406</td><td>in progress</td><td>2</td><td>$5</td></tr>
|
||||
<tr class="tablesorter-childRow"><td>541265</td><td>in progress</td><td>2</td><td>$78</td></tr>
|
||||
|
||||
@ -188,5 +188,7 @@ tr.group-header.collapsed td i {
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -395,7 +395,7 @@ group_dateString : function(date) {
|
||||
<td>Group the rows by year.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>"group-date-month"</code><span class="remark">*</span></code></td>
|
||||
<td><code>"group-date-month"</code><span class="remark">*</span></td>
|
||||
<td>Group the rows by month.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
||||
@ -145,7 +145,7 @@
|
||||
<li>This widget adds a title to the table headers when they are sorted.</li>
|
||||
<li>Click on any header. You may have to move the mouse off, then back on the header to see the title appear.</li>
|
||||
<li>This widget will not work with the original tablesorter plugin (v2.0.5).</li>
|
||||
<li>The examples uses the <a href='http://onehackoranother.com/projects/jquery/tipsy/'>tipsy jQuery plugin </a></li>
|
||||
<li>The examples uses the <a href="http://onehackoranother.com/projects/jquery/tipsy/">tipsy jQuery plugin </a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
@ -178,8 +178,7 @@
|
||||
</li>
|
||||
<li>The "ID" column has a default filter setting of ">30" and a descending sort, but neither is applied as this demo is not connected a server (just a basic JSON file).</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
Original Ajax url: <span id="origurl"></span><br>
|
||||
|
||||
@ -37,7 +37,8 @@
|
||||
|
||||
// output default: '{page}/{totalPages}'
|
||||
// possible variables: {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {totalRows}
|
||||
pager_output: '{startRow} to {endRow} of {totalRows} rows', // '{page}/{totalPages}'
|
||||
// also {page:input} & {startRow:input} will add a modifiable input in place of the value
|
||||
pager_output: '{startRow:input} to {endRow} of {totalRows} rows', // '{page}/{totalPages}'
|
||||
|
||||
// apply disabled classname to the pager arrows when the rows at either extreme is visible
|
||||
pager_updateArrows: true,
|
||||
@ -225,8 +226,9 @@
|
||||
<li>See the Javascript code below for a full example.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>In <span class="version">v2.17.6</span>, added <code>{startRow:input}</code> and <code>{page:input}</code> variables to the <code>output</code> option.</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Triggered Events</h1>
|
||||
<ul id="display">
|
||||
@ -623,7 +625,7 @@ td.tablesorter-pager {
|
||||
<img src="next.png" class="next"/>
|
||||
<img src="last.png" class="last"/>
|
||||
<select class="pagesize">
|
||||
<option selected="selected" value="10">10</option>
|
||||
<option value="10">10</option>
|
||||
<option value="20">20</option>
|
||||
<option value="30">30</option>
|
||||
<option value="40">40</option>
|
||||
|
||||
@ -264,7 +264,7 @@ print_callback : function( config, $table, printStyle ) {
|
||||
|
||||
</div>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><button type="button" class="print">Print</button>
|
||||
|
||||
@ -493,7 +493,7 @@ table.ui-table-reflow .ui-table-cell-label.ui-table-cell-label-top {
|
||||
|
||||
</div>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo <small>(Pick a table width or resize the browser window)</small></h1>
|
||||
<div id="demo"><h3>Reflow widget only</h3>
|
||||
|
||||
@ -91,7 +91,7 @@
|
||||
<li>In order to save the resized widths, jQuery version 1.4.1+ should be used because jQuery's <code>parseJson()</code> function is needed.</li>
|
||||
<li>Setting the <code>resizable_addLastColumn</code> widget option to <code>true</code> will add the resizable handle to the last column, see the "non-full" width table below (<span class="version">v2.9.0</span>).</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo">
|
||||
|
||||
@ -57,7 +57,7 @@
|
||||
<li>Because this widget uses jQuery's <code>parseJson()</code> function, it requires jQuery version 1.4.1+.</li>
|
||||
<li>Added a <code>saveSortReset</code> method which only clears the stored information (v2.7.11).</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><button type="button">Reset Sort</button>
|
||||
|
||||
@ -135,7 +135,7 @@ $(function() {
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
|
||||
@ -184,7 +184,7 @@ $(table).trigger('staticRowsRefresh');</pre>
|
||||
<h1>Demo</h1>
|
||||
<span class="label label-info">Note</span> Make any row static or normal by toggling the <code>static</code> class name using <kbd>Ctrl</kbd> + left click (<kbd>⌘</kbd> + click on Mac)<br>
|
||||
<div id="demo"><h3>Single tbody</h3>
|
||||
<p><button class="addrow">Add Row</button> Move "Iguana" row: <button class="move up">up</button> <button class="move">down</button></p>
|
||||
<p><button class="addrow">Add Row</button> Move "Iguana" row: <button class="move up">up</button> <button class="move">down</button><p>
|
||||
<table id="alphimals" class="tablesorter">
|
||||
<thead>
|
||||
<tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr>
|
||||
@ -272,5 +272,7 @@ $(table).trigger('staticRowsRefresh');</pre>
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -148,7 +148,7 @@ $(function() {
|
||||
<li>Add the class name <code>sticky-false</code> to any header rows you don't want to become sticky (v2.1.18).</li>
|
||||
<li>Because of the limitations of Internet Explorer version 7 and older, this widget will not work.</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>CSS</h1>
|
||||
<div id="css">
|
||||
|
||||
@ -112,7 +112,7 @@
|
||||
</li>
|
||||
<li>Earlier widget versions required jQuery 1.4+. The UITheme widget for tablesorter 2.4+ requires jQuery 1.2.6+.</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<br>
|
||||
|
||||
@ -63,7 +63,7 @@ table.tablesorter tbody tr.alt-row td {
|
||||
<li>The original "widgetZebra" option has been replaced by "widgetOptions.zebra". See the javascript block below for more details (v2.1).</li>
|
||||
<li>If the "widgetZebra" option exists, it will over-ride this newer "widgetOptions.zebra" option in order to maintain backwards compatibility.</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
|
||||
183
docs/index.html
183
docs/index.html
@ -118,7 +118,7 @@
|
||||
<strong>Licence:</strong>
|
||||
Dual licensed under <a class="external" href="http://www.opensource.org/licenses/mit-license.php">MIT</a>
|
||||
or <a class="external" href="http://www.opensource.org/licenses/gpl-license.php">GPL</a> licenses.<br>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<a id="Contents"></a>
|
||||
<h1>Contents</h1>
|
||||
@ -145,7 +145,7 @@
|
||||
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.
|
||||
It has many useful features including:
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<ul>
|
||||
<li>Multi-column sorting</li>
|
||||
@ -162,7 +162,7 @@
|
||||
<a id="Demo"></a>
|
||||
<h1>Demo</h1>
|
||||
|
||||
<table id="tablesorter-demo" class="tablesorter" data-sortList="[[0,0],[2,1]]">
|
||||
<table id="tablesorter-demo" class="tablesorter" data-sortlist="[[0,0],[2,1]]">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Account #</th>
|
||||
@ -241,7 +241,7 @@
|
||||
|
||||
<p class="tip">
|
||||
<span class="label label-info">TIP!</span> Sort multiple columns simultaneously by holding down the <kbd>Shift</kbd> key and clicking a second, third or even fourth column header!
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<a id="Getting-Started"></a>
|
||||
<h1>Getting started</h1>
|
||||
@ -249,7 +249,7 @@
|
||||
To use the tablesorter plugin, include the <a class="external" href="http://jquery.com">jQuery</a>
|
||||
library and the tablesorter plugin inside the <code><head></code> tag
|
||||
of your HTML document:
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<pre class="prettyprint lang-html"><!-- choose a theme file -->
|
||||
<link rel="stylesheet" href="/path/to/theme.default.css">
|
||||
@ -261,7 +261,7 @@
|
||||
<script type="text/javascript" src="/path/to/jquery.tablesorter.widgets.js"></script>
|
||||
</pre>
|
||||
|
||||
<p>tablesorter works on standard HTML tables. You must include THEAD and TBODY tags:</p>
|
||||
<p>tablesorter works on standard HTML tables. You must include THEAD and TBODY tags:<p>
|
||||
|
||||
<pre class="prettyprint lang-html"><table id="myTable" class="tablesorter">
|
||||
<thead>
|
||||
@ -305,7 +305,7 @@
|
||||
</tbody>
|
||||
</table></pre>
|
||||
|
||||
<p>Start by telling tablesorter to sort your table when the document is loaded:</p>
|
||||
<p>Start by telling tablesorter to sort your table when the document is loaded:<p>
|
||||
|
||||
<pre class="prettyprint lang-js">$(function(){
|
||||
$("#myTable").tablesorter();
|
||||
@ -315,7 +315,7 @@
|
||||
Click on the headers and you'll see that your table is now sortable! You can
|
||||
also pass in configuration options when you initialize the table. This tells
|
||||
tablesorter to sort on the first and second column in ascending order.
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<pre class="prettyprint lang-js">$(function(){
|
||||
$("#myTable").tablesorter({ sortList: [[0,0], [1,0]] });
|
||||
@ -323,14 +323,14 @@
|
||||
|
||||
<p class="tip">
|
||||
<span class="label label-info">NOTE!</span> tablesorter will auto-detect most data types including numbers, dates, ip-adresses for more information see <a href="#Examples">Examples</a>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<a id="Examples"></a>
|
||||
<h1>Examples</h1>
|
||||
<p>
|
||||
These examples will show what's possible with tablesorter. You need Javascript enabled to
|
||||
run these samples, just like you and your users will need Javascript enabled to use tablesorter.
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<div class="box">
|
||||
<h3>Basic</h3>
|
||||
@ -381,6 +381,7 @@
|
||||
<li><a href="example-options-headers-digits-strings.html">Dealing with text strings in numerical sorts</a> (<a href="#stringto"><code>stringTo</code></a>; v2.0.10)</li>
|
||||
<li><a href="example-parsers-class-name.html">Disable or set the column parser using class names</a> (v2.0.11)</li>
|
||||
<li><a href="example-parsers-jquery-data.html">Disable or set the column parser using jQuery Data</a> (v2.3)</li>
|
||||
<li><a href="example-extractors-parsers.html">Using extractors with parsers</a> (<span class="version">v2.17.6</span>)</li>
|
||||
<li><a href="example-option-date-format.html">Changing the date format</a> (v2.0.23)</li>
|
||||
</ul>
|
||||
|
||||
@ -391,7 +392,7 @@
|
||||
<ul>
|
||||
<li><a href="example-parsers.html">Parser, writing your own</a> (<a href="#function-addparser"><code>addParser</code></a>; <span class="updated version">v2.15.0</span>)</li>
|
||||
<li><a href="example-parsers-advanced.html">Parser, writing your own, advanced use</a> (v2.1; <span class="updated version">v2.15.0</span>)</li>
|
||||
<li><a href="example-option-text-extraction.html">Dealing with markup inside cells (<a href="#textextraction"><code>textExtraction</code></a> function)</a></li>
|
||||
<li><a href="example-option-text-extraction.html">Dealing with markup inside cells</a> (<a href="#textextraction"><code>textExtraction</code></a> function)</li>
|
||||
<li><a href="example-options-headers-parser.html">Skip the parsing of column content</a> (<span class="version">v2.17.1</span>)</li>
|
||||
</ul>
|
||||
|
||||
@ -460,7 +461,6 @@
|
||||
</ul>
|
||||
|
||||
<h4 id="extras">Plugins / Widgets<br>
|
||||
<h4>
|
||||
<span class="xsmall"><span class="results">†</span> these widgets are included in the <code>jquery.tablesorter.widgets.js</code> file (except for extra filter formatter functions)</span>
|
||||
<br>
|
||||
<span class="xsmall"><span class="results">‡</span> this widget is included with the plugin core.</span>
|
||||
@ -521,7 +521,7 @@
|
||||
<li><span class="results">‡</span> <a href="example-widget-zebra.html">Zebra stripe widget</a></li>
|
||||
</ul>
|
||||
|
||||
<h4 id="extras">Custom Parsers</h4>
|
||||
<h4 id="custom-parsers">Custom Parsers</h4>
|
||||
<ul>
|
||||
<li><a href="example-parsers-dates.html">Date parsers</a> (<span class="version">v2.8</span>; <span class="version updated">v2.14</span>; includes weekday, month, two-digit year & <a href="http://sugarjs.com/dates">sugar.js</a> date parsers).</li>
|
||||
<li><a href="example-parsers-file-type.html">File type parser</a> (<span class="version">v2.13</span>).</li>
|
||||
@ -552,7 +552,7 @@
|
||||
<span class="label label-info">TIP!</span> Click on the link in the property column to reveal full details (or <a href="#" class="toggleAll">toggle</a>|<a href="#" class="showAll">show</a>|<a href="#" class="hideAll">hide</a> all) or double click to update the browser location.
|
||||
</div>
|
||||
|
||||
<table id="options" class="tablesorter options" data-sortList="[[0,0]]">
|
||||
<table id="options" class="tablesorter options" data-sortlist="[[0,0]]">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="property">Property</th>
|
||||
@ -1520,7 +1520,7 @@ $(function(){
|
||||
// direction: true = ascending; false = descending
|
||||
// columnIndex: zero-based index of the current table column being sorted
|
||||
// table: table DOM element (access options by using table.config)
|
||||
return a > b ? 1 : (a < b ? -1 : 0);
|
||||
return a > b ? 1 : (a < b ? -1 : 0);
|
||||
},
|
||||
1 : $.tablesorter.sortText, // same as the function in column 0 above (modified in v2.12)
|
||||
2 : $.tablesorter.sortNatural, // renamed v2.12 from $.tablesorter.sortText - performs natural sort
|
||||
@ -1653,6 +1653,8 @@ $(function(){
|
||||
filter_searchFiltered: true,
|
||||
// include a function to return an array of values to be added to the column filter select
|
||||
filter_selectSource : null,
|
||||
// filter_selectSource array text left of the separator is added to the option value, right into the option text
|
||||
filter_selectSourceSeparator : '|',
|
||||
// if true, filter start from the beginning of the cell contents.
|
||||
filter_startsWith : false,
|
||||
// filter all data using parsed content.
|
||||
@ -1858,14 +1860,15 @@ $(function(){
|
||||
<a id="Widget-options"></a>
|
||||
<h1>Widget & Pager Options</h1>
|
||||
|
||||
<table class="tablesorter compatibility" data-sortList="[[0,0]]">
|
||||
<table class="tablesorter compatibility" data-sortlist="[[0,0]]">
|
||||
<thead>
|
||||
<tr><th>Widget Priority</th><th>Name</th><th>Requires jQuery</th><th>Limiting function</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>30</td><td>columns</td><td>v1.2.6</td><td></td></tr>
|
||||
<tr><td>50</td><td>filter</td><td>v1.4.3</td><td>1.4.3 (nextUntil & delegate)</td></tr>
|
||||
<tr><td>Last</td><td>pager</td><td>v1.2.6</td><td></td></tr>
|
||||
<tr><td>Last</td><td>pager plugin</td><td>v1.2.6</td><td></td></tr>
|
||||
<tr><td>55</td><td>pager widget</td><td>v1.7</td><td>1.7 (on)</td></tr>
|
||||
<tr><td>40</td><td>resizable</td><td>v1.4.1*</td><td>1.4 (isEmptyObject); 1.4.1 (parseJSON)*</td></tr>
|
||||
<tr><td>20</td><td>saveSort</td><td>v1.4.1</td><td>1.4.1 (parseJSON)*</td></tr>
|
||||
<tr><td>60</td><td>stickyHeaders</td><td>v1.2.6</td><td></td></tr>
|
||||
@ -1888,7 +1891,7 @@ $(function(){
|
||||
<span class="label label-info">TIP!</span> Click on the link in the property column to reveal full details (or <a href="#" class="toggleAll">toggle</a>|<a href="#" class="showAll">show</a>|<a href="#" class="hideAll">hide</a> all) or double click to update the browser location.
|
||||
</div>
|
||||
|
||||
<table id="widget-options" class="tablesorter options" data-sortList="[[0,0]]">
|
||||
<table id="widget-options" class="tablesorter options" data-sortlist="[[0,0]]">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="property">Property</th>
|
||||
@ -2153,8 +2156,8 @@ $(function(){
|
||||
In <span class="version updated">v2.17.0</span>, the <code>filter_functions</code> column can also be referenced by using a jQuery selector (e.g. class name or ID).<br>
|
||||
<pre class="prettyprint lang-js">filter_functions : {
|
||||
".col-date" : {
|
||||
"< 2004" : function (e, n, f, i) {
|
||||
return n < Date.UTC(2004, 0, 1); // < Jan 1 2004
|
||||
"< 2004" : function (e, n, f, i) {
|
||||
return n < Date.UTC(2004, 0, 1); // < Jan 1 2004
|
||||
},
|
||||
...
|
||||
}
|
||||
@ -2343,9 +2346,11 @@ $(function(){
|
||||
<td>String</td>
|
||||
<td>"filter-onlyAvail"</td>
|
||||
<td>
|
||||
Filter widget: If a header contains a select dropdown and this class name, only the available (visible) options in the column will show (<span class="version">v2.10.1</span>).
|
||||
Filter widget: If a header contains a select dropdown and this class name, only the available (visible) options in the column will show (<span class="version">v2.10.1</span>; <span class="version updated">v2.17.6</span>).
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
In <span class="version">v2.17.6</span>, columns with the only available class name set, that <em>are not</em> currently being filtered will only show the available options. Conversely, the column(s) with a selected option will show all options.<br>
|
||||
<br>
|
||||
This option is useful after one or more columns have been filtered, then the column select filter with this class applied will only show the contents of the column within the dropdown that are currently visible. See the <a href="example-widget-filter-custom.html">custom filter widget</a> demo "Discount" column for an example (sort the "First Name" column first).<br>
|
||||
<br>
|
||||
<span class="label label-warning">Caution:</span> The main issue with this functionality is with keyboard accessibility. If the keyboard is used to select an option, only the first and default options will be available for chosing. The only way to select other options is with the mouse.
|
||||
@ -2513,7 +2518,7 @@ $('table').trigger('search', false);</pre></div>
|
||||
<br>
|
||||
In <span class="version updated">v2.17.0</span>, the <code>filter_selectSource</code> column can also be referenced by using a jQuery selector (e.g. class name or ID).<br>
|
||||
<pre class="prettyprint lang-js">filter_selectSource : {
|
||||
".model-number" : [ "abc", "def", "ghi", "xyz" ]
|
||||
".model-number" : [ "abc", "def", "ghi", "xyz" ]
|
||||
}</pre>
|
||||
A column will have a filter select dropdown when a "filter-select" class name is added to the header cell, or if the <a href="#widget-filter-functions"><code>filter_functions</code></a> column value is set to <code>true</code><br>
|
||||
<br>
|
||||
@ -2565,6 +2570,62 @@ $('table').trigger('search', false);</pre></div>
|
||||
<td><a href="example-widget-filter-formatter-select2.html">Example</a></td>
|
||||
</tr>
|
||||
|
||||
<tr id="widget-filter-selectsource-separator">
|
||||
<td><a href="#" class="permalink">filter_selectSourceSeparator</a></td>
|
||||
<td>String</td>
|
||||
<td>'|'</td>
|
||||
<td>
|
||||
Filter widget: Set this option to be any separator (<span class="version">v2.17.6</span>) that is to be used within the <code>filter_selectSource</code> returned array.
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
Use the <a href="#widget-filter-selectsource-separator"><code>filter_selectSourceSeparator</code></a> option as follows:
|
||||
<pre class="prettyprint lang-js">$(function(){
|
||||
$("table").tablesorter({
|
||||
widgets: ["filter"],
|
||||
widgetOptions : {
|
||||
filter_selectSource : {
|
||||
0 : [ 'en|English', 'fr|French', 'de|German' ]
|
||||
},
|
||||
// filter_selectSource array text left of the separator is added to the option value, right into the option text
|
||||
filter_selectSourceSeparator : '|'
|
||||
}
|
||||
});
|
||||
});</pre>Results in this HTML:
|
||||
<pre class="prettyprint lang-html"><select>
|
||||
<option value=""></option>
|
||||
<option value="en">English</option>
|
||||
<option value="fr">French</option>
|
||||
<option value="de">German</option>
|
||||
</select></pre>This also works for the <code>filter_functions</code>
|
||||
<pre class="prettyprint lang-js">$(function(){
|
||||
$("table").tablesorter({
|
||||
widgets: ["filter"],
|
||||
widgetOptions: {
|
||||
filter_functions: {
|
||||
// Add these options to the select dropdown (regex example)
|
||||
1 : {
|
||||
"<10|Less than 10" : function(e, n, f, i) { return n < 10; },
|
||||
"10 - 100|Between 10 & 100" : function(e, n, f, i) { return n >= 10 && n <=100; },
|
||||
">100|Greater than 100" : function(e, n, f, i) { return n > 100; }
|
||||
}
|
||||
},
|
||||
// filter_selectSource array text left of the separator is added to the option value, right into the option text
|
||||
filter_selectSourceSeparator : '|'
|
||||
}
|
||||
});
|
||||
});</pre>
|
||||
Results in this HTML (this adds a <code>data-function-name</code> attribute to keep a reference to the associated <code>filter_functions</code>.
|
||||
<pre class="prettyprint lang-html"><select>
|
||||
<option value=""></option>
|
||||
<option data-function-name="&lt;10|Less than 10" value="&lt;10">Less than 10</option>
|
||||
<option data-function-name="10 - 100|Between 10 &amp; 100" value="10 - 100">Between 10 & 100</option>
|
||||
<option data-function-name="&gt;100|Greater than 100" value="&gt;100">Greater than 100</option>
|
||||
</select></pre>
|
||||
</div>
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr id="widget-filter-serversidefiltering">
|
||||
<td><a href="#" class="permalink">filter_serversideFiltering</a></td>
|
||||
<td>Boolean</td>
|
||||
@ -2668,7 +2729,7 @@ $('table').trigger('search', false);</pre></div>
|
||||
<td>Sticky Headers widget: This additional CSS class applied to the sticky header row (<span class="version updated">v2.11</span>).
|
||||
<div class="collapsible"><br>
|
||||
Changed to empty string in v2.11, as the <code>"tablesorter-stickyHeader"</code> class will always be added to the sticky header row; this option now contains any additional class names to add.
|
||||
<p>Previously, this option contained the class name to be applied to the sticky header row (tr) (v2.1).<p>
|
||||
<p>Previously, this option contained the class name to be applied to the sticky header row (tr) (v2.1).</p>
|
||||
Use the <a href="#widget-sticky-headers"><code>"stickyHeaders"</code></a> option to add an extra css class name as follows:
|
||||
<pre class="prettyprint lang-js">$(function(){
|
||||
$("table").tablesorter({
|
||||
@ -2926,7 +2987,7 @@ $('table').trigger('search', false);</pre></div>
|
||||
widgets: ["resizable"],
|
||||
widgetOptions : {
|
||||
// set to true for a default 5ms throttling delay
|
||||
// or set to a number < 10 (more than that makes the resizing adjustment unusable
|
||||
// or set to a number < 10 (more than that makes the resizing adjustment unusable
|
||||
resizable_throttle : true
|
||||
}
|
||||
});
|
||||
@ -3071,7 +3132,7 @@ $.extend($.tablesorter.themes.jui, {
|
||||
<img src="next.png" class="next"/>
|
||||
<img src="last.png" class="last"/>
|
||||
<select class="pagesize">
|
||||
<option selected="selected" value="10">10</option>
|
||||
<option value="10">10</option>
|
||||
<option value="20">20</option>
|
||||
<option value="30">30</option>
|
||||
<option value="40">40</option>
|
||||
@ -3462,7 +3523,7 @@ $.extend($.tablesorter.themes.jui, {
|
||||
<td><a href="#" class="permalink">output</a></td>
|
||||
<td>String</td>
|
||||
<td>"{page}/{totalPages}"</td>
|
||||
<td>This option allows you to format the output display which can show the current page, total pages, filtered pages, current start and end rows, total rows and filtered rows (v2.0.9).
|
||||
<td>This option allows you to format the output display which can show the current page, total pages, filtered pages, current start and end rows, total rows and filtered rows (v2.0.9; <span class="version">v2.17.6</span>).
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
<span class="label label-info">Note</span> The pager widget equivalent option is within the <code>widgetOptions</code> and accessed via <code>widgetOptions.pager_output</code><br>
|
||||
@ -3484,9 +3545,11 @@ $.extend($.tablesorter.themes.jui, {
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><code>{page}</code></td><td>The current pager page</td></tr>
|
||||
<tr><td><code>{page:input}</code></td><td>The current pager page within an input (<span class="version">v2.17.6</span>)</td></tr>
|
||||
<tr><td><code>{totalPages}</code></td><td>Total number of pager pages</td></tr>
|
||||
<tr><td><code>{filteredPages}</code></td><td>Total number of pages left after being filtered</td></tr>
|
||||
<tr><td><code>{startRow}</code></td><td>Starting row number currently displayed</td></tr>
|
||||
<tr><td><code>{startRow:input}</code></td><td>Starting row number currently displayed within an input (<span class="version">v2.17.6</span>)</td></tr>
|
||||
<tr><td><code>{endRow}</code></td><td>Ending row number currently displayed</td></tr>
|
||||
<tr><td><code>{filteredRows}</code></td><td>Total number of rows left after being filtered</td></tr>
|
||||
<tr><td><code>{totalRows}</code></td><td>Total number of rows</td></tr>
|
||||
@ -3867,7 +3930,7 @@ $.extend($.tablesorter.themes.jui, {
|
||||
<span class="label label-info">TIP!</span> Click on the link in the method column to reveal full details (or <a href="#" class="toggleAll">toggle</a>|<a href="#" class="showAll">show</a>|<a href="#" class="hideAll">hide</a> all) or double click to update the browser location.
|
||||
</div>
|
||||
|
||||
<table id="method" class="tablesorter options" data-sortList="[[0,0]]">
|
||||
<table id="method" class="tablesorter options" data-sortlist="[[0,0]]">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Method</th>
|
||||
@ -4315,7 +4378,7 @@ $('table').trigger( 'search', [['', '', '', '', 'orange']] ); // find orange in
|
||||
<span class="label label-info">TIP!</span> Click on the link in the event column to reveal full details (or <a href="#" class="toggleAll">toggle</a>|<a href="#" class="showAll">show</a>|<a href="#" class="hideAll">hide</a> all) or double click to update the browser location.
|
||||
</div>
|
||||
|
||||
<table id="event" class="tablesorter options" data-sortList="[[0,0]]">
|
||||
<table id="event" class="tablesorter options" data-sortlist="[[0,0]]">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Event</th>
|
||||
@ -4680,12 +4743,14 @@ $('table').trigger( 'search', [['', '', '', '', 'orange']] ); // find orange in
|
||||
<span class="label label-info">TIP!</span> Click on the link in the variable column to reveal full details (or <a href="#" class="toggleAll">toggle</a>|<a href="#" class="showAll">show</a>|<a href="#" class="hideAll">hide</a> all) or double click to update the browser location.
|
||||
</div>
|
||||
|
||||
<table class="api" data-sortList="[[0,0]]">
|
||||
<table class="api" data-sortlist="[[0,0]]">
|
||||
<thead>
|
||||
<th class="setWidth">Variable</th>
|
||||
<th>Type</th>
|
||||
<th class="sorter-false">Description</th>
|
||||
<th class="sorter-false">Link</th>
|
||||
<tr>
|
||||
<th class="setwidth">Variable</th>
|
||||
<th>Type</th>
|
||||
<th class="sorter-false">Description</th>
|
||||
<th class="sorter-false">Link</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
@ -4767,6 +4832,7 @@ $('table').trigger( 'search', [['', '', '', '', 'orange']] ); // find orange in
|
||||
});</pre>
|
||||
</div>
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
@ -4905,6 +4971,7 @@ $('.tablesorter')[0].config.cache[0].normalized[0];
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
<table class="info"><tbody>
|
||||
<tr><th><code>parser: false</code></th><td>disable parsing for this column (this also disables sorting & filtering for the column; <span class="version updated">v2.17.6</span>).</td></tr>
|
||||
<tr><th><code>sorter: false</code></th><td>disable sort for this column.</td></tr>
|
||||
<tr><th><code>sorter: "text"</code></th><td>Sort alpha-numerically.</td></tr>
|
||||
<tr><th><code>sorter: "digit"</code></th><td>Sort numerically.</td></tr>
|
||||
@ -5165,16 +5232,16 @@ var wo = $('#mytable').data('tablesorter').widgetOptions;
|
||||
<h4>Functions</h4>
|
||||
<span class="label label-info">TIP!</span> Click on the link in the function column to reveal full details (or <a href="#" class="toggleAll">toggle</a>|<a href="#" class="showAll">show</a>|<a href="#" class="hideAll">hide</a> all) or double click to update the browser location.
|
||||
</div>
|
||||
<table id="functions" class="api" data-sortList="[[0,0]]">
|
||||
<table id="functions" class="api" data-sortlist="[[0,0]]">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="setWidth">Function</th>
|
||||
<th class="setwidth">Function</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<!-- non-sorting tbody -->
|
||||
<tbody id="functions-core" class="tablesorter-infoOnly">
|
||||
<tbody id="functions-core2" class="tablesorter-infoOnly">
|
||||
<tr><th colspan="2">Core Functions</th></tr>
|
||||
</tbody>
|
||||
|
||||
@ -5198,7 +5265,7 @@ var wo = $('#mytable').data('tablesorter').widgetOptions;
|
||||
<pre class="prettyprint lang-js">var tbodyIndex, _tbody,
|
||||
table = $('#my-table')[0],
|
||||
tbodies = table.tBodies, // use table.config.$tbodies for all tbodies EXcluding information only tbodies
|
||||
for (tbodyIndex = 0; tbodyIndex < tbodies.length; tbodyIndex++) {
|
||||
for (tbodyIndex = 0; tbodyIndex < tbodies.length; tbodyIndex++) {
|
||||
// detach tbody from table
|
||||
_tbody = $.tablesorter.processTbody( table, tbodies[tbodyIndex], true );
|
||||
// do something magical to the tbody
|
||||
@ -5363,7 +5430,7 @@ myArray.sort(function(a,b) { return $.tablesorter.sortText(a, b); });</pre>
|
||||
</ul>
|
||||
Here is a basic example of how this function is used:
|
||||
<pre class="prettyprint lang-js">$.tablesorter.replaceAccents("áàâãä"); // result: "aaaaa"</pre>
|
||||
This function is used when the <a href="#sortlocalecompare">sortLocaleCompare</code></a> option is set to <code>true</code>. Please refer to the option and <a href="example-locale-sort.html">the demo</a> for more details on the defaults values and how to add more accented characters.
|
||||
This function is used when the <a href="#sortlocalecompare"><code>sortLocaleCompare</code></a> option is set to <code>true</code>. Please refer to the option and <a href="example-locale-sort.html">the demo</a> for more details on the defaults values and how to add more accented characters.
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@ -5496,7 +5563,7 @@ widget.format( table, table.config, table.config.widgetOptions );</pre>
|
||||
<li><code>doAll</code> - optional, boolean flag.</li>
|
||||
<li><code>dontapply</code> - optional, boolean flag.</li>
|
||||
</ul>
|
||||
The <code>doAll</code> flag is set to <code>true</code> if all widgets contained with the global <a href="#variable-widgets">$.tablesorter.widgets</code></a> array are to be removed.<br>
|
||||
The <code>doAll</code> flag is set to <code>true</code> if all widgets contained with the global <a href="#variable-widgets"><code>$.tablesorter.widgets</code></a> array are to be removed.<br>
|
||||
<br>
|
||||
This function is called when the <a href="#refreshwidgets">refreshWidgets</a> method is triggered.
|
||||
</div>
|
||||
@ -5507,7 +5574,7 @@ widget.format( table, table.config, table.config.widgetOptions );</pre>
|
||||
<td><a href="#" class="permalink">getData</a></td>
|
||||
<td>This functions gets the sorter, string, empty, etc options for each column from jQuery data, metadata, header option or header class name ("sorter-false") (v2.1.16).
|
||||
<div class="collapsible"><br>
|
||||
priority = jQuery data > meta > headers option > header class name<br>
|
||||
priority = jQuery data > meta > headers option > header class name<br>
|
||||
<br>
|
||||
Use it as follows:
|
||||
<pre class="prettyprint lang-js">$.tablesorter.getData(headerCell, configHeaders, key);</pre>
|
||||
@ -5542,7 +5609,7 @@ $.tablesorter.getData( headerCell, config.headers[column], "sorter" );
|
||||
<br>
|
||||
This function uses the <a href="#usnumberformat"><code>usNumberFormat</code></a> option to determine if either commas or decimals are removed before converting the value within the <code>string</code> parameter into a number type variable. This function does not use the <a href="#function-isdigit"><code>$.tablesorter.isDigit</code></a> function.<br>
|
||||
<br>
|
||||
Any numbers wrapped within parenthesis are converted into negative numbers; but any other symbols (e.g. currency) are not removed and will cause this function to determine the string as a non-number (e.g. "$1.25" will be returned as a string).<br>
|
||||
Any numbers wrapped within parentheses are converted into negative numbers; but any other symbols (e.g. currency) are not removed and will cause this function to determine the string as a non-number (e.g. "$1.25" will be returned as a string).<br>
|
||||
<br>
|
||||
Use this function as follows:
|
||||
<pre class="prettyprint lang-js">// result: -2345.67 if usNumberFormat option is true
|
||||
@ -5609,8 +5676,8 @@ $.tablesorter.isDigit( "(2,345.67)" );</pre>
|
||||
<ol>
|
||||
<li>Plain string - <code>"table refuses to cooperate"</code></li>
|
||||
<li>HTML row string - <code>'<tr><td colspan="' + table.config.columns + '">yeah, instead of showing your data... I am taking a nap</td></tr>'</code> (the <a href="#variable-columns"><code>table.config.columns</code> variable</a> contains the number of table columns; use as needed)</li>
|
||||
<li>undefined - completely leave out a message parameter <code>$.tablesorter.showError( table );</code> to remove all error rows from the table thead.</li>
|
||||
</ul>
|
||||
<li>undefined - completely leave out a message parameter <code>$.tablesorter.showError( table );</code> to remove all error rows from the table thead.</li>
|
||||
</ol>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@ -5649,6 +5716,30 @@ $.tablesorter.isDigit( "(2,345.67)" );</pre>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="function-buildselect">
|
||||
<td><a href="#" class="permalink">buildSelect</a></td>
|
||||
<td>This filter widget function allows the updating or replacing of filter select options from an external source. (<span class="version">v2.17.5</span>):
|
||||
<div class="collapsible"><br>
|
||||
Access it as follows:
|
||||
<pre class="prettyprint lang-js">$.tablesorter.filter.buildSelect( table, column, options, replace, onlyAvail );</pre>
|
||||
<ul>
|
||||
<li><code>table</code> - table DOM element (or jQuery object) of table.</li>
|
||||
<li><code>column</code> - zero-based column index.</li>
|
||||
<li><code>options</code> - array of options, jQuery object of option elements, or HTML string of option elements to apply to the targetted select.</li>
|
||||
<li><code>replace</code> - a boolean value, which if <code>true</code> all options will be replaced; if <code>false</code> the options will be appended to the current list of options.</li>
|
||||
<li><code>onlyAvail</code> - an optional boolean flag, which will be ignored if the <code>options</code> parameter is defined or is an empty string; otherwise it is the value passed to the function which finds all table column values; if <code>true</code>, only the available options will be diplayed.</li>
|
||||
</ul>
|
||||
Use this function as follows:<br>
|
||||
<pre class="prettyprint lang-js">// replace filter select options for the first column with 1,2,3,4
|
||||
$.tablesorter.filter.buildSelect( $('table'), 0, [ 1, 2, 3, 4 ], true );
|
||||
|
||||
// append "Aaron" and "Fred" to the second column's filter select options. These options will remain unsorted.
|
||||
$.tablesorter.filter.buildSelect( $('table'), 1, $('<option>Aaron</option><option>Fred</option>'), false );</pre>
|
||||
Please be aware that this function will allow you to modify the select options, but as soon as the user filters any column, all of the select options will refresh and obtain options from the table column, or from the <code>filter_selectSource</code> function.
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="function-getfilters">
|
||||
<td><a href="#" class="permalink">getFilters</a></td>
|
||||
<td>This filter widget function allows getting an array of the currently applied filters (<span class="version">v2.9</span>; <span class="version updated">v2.15</span>)
|
||||
@ -5665,7 +5756,7 @@ $.tablesorter.isDigit( "(2,345.67)" );</pre>
|
||||
$.tablesorter.getFilters( $('table') );</pre>
|
||||
This function returns an array of filter values (e.g. <code>[ '', '', '', '', '', '2?%' ]</code>), or <code>false</code> if the selected table does not have a filter row. It will also return an additional parameter if an external input with <code>data-column="all"</code> containing the value used when matching any table column.<br>
|
||||
<br>
|
||||
In <span class="version updated">v2.15</span>, this function will also return values from any external filters (set either by the <a href=#filter-external"><code>filter_external</code> option</a> or using the <a href="#function-bindsearch"><code>bindSearch</code> function</a>) - with or without an internal filter row.<br>
|
||||
In <span class="version updated">v2.15</span>, this function will also return values from any external filters (set either by the <a href="#filter-external"><code>filter_external</code> option</a> or using the <a href="#function-bindsearch"><code>bindSearch</code> function</a>) - with or without an internal filter row.<br>
|
||||
<br>
|
||||
If the second parameter is set to <code>true</code>, it forces the function to get all of the current filter values directly from the inputs. Otherwise, by default, the function returns the last search as found in this stored data <code>$('table').data('lastSearch');</code>.
|
||||
</div>
|
||||
@ -5691,7 +5782,7 @@ $.tablesorter.setFilters( $('table'), [ '', '', '', '', '', '2?%' ] );
|
||||
$.tablesorter.setFilters( $('table'), [ '', '', '', '', '', '2?%' ], true ); // this will now use the search method</pre>
|
||||
This function returns <code>true</code> if the filters were sucessfully applied, or <code>false</code> if the table does not have a filter row.<br>
|
||||
<br>
|
||||
As of <span class="version updated">v2.15</span>, this function will also set values in any external filters (set either by the <a href=#filter-external"><code>filter_external</code> option</a> or using the <a href="#function-bindsearch"><code>bindSearch</code> function</a>). An additional search parameter can be included to match any column, but please include an external input with <code>data-column="all"</code> using the <code>bindSearch</code> function so your users will know that a search has been applied.<br>
|
||||
As of <span class="version updated">v2.15</span>, this function will also set values in any external filters (set either by the <a href="#filter-external"><code>filter_external</code> option</a> or using the <a href="#function-bindsearch"><code>bindSearch</code> function</a>). An additional search parameter can be included to match any column, but please include an external input with <code>data-column="all"</code> using the <code>bindSearch</code> function so your users will know that a search has been applied.<br>
|
||||
<br>
|
||||
Also, changed is that when a <code>true</code> value is passed as a third parameter, the search is forced to refresh on the table; otherwise, if the filters set in the search exactly match the previous search, it would be ignored - this was added to prevent numerous ajax calls with exactly the same search or sort parameters (when using the pager).
|
||||
</div>
|
||||
@ -5876,7 +5967,7 @@ $.tablesorter.addHeaderResizeEvent( table, true );</pre>
|
||||
<li><a href="https://github.com/NickCraver">NickCraver</a></li>
|
||||
<li>and <a href="https://github.com/Mottie/tablesorter/graphs/contributors">all the contributors</a>!</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
<p>
|
||||
<a class="external" href="http://ejohn.org">John Resig</a> for the fantastic <a class="external" href="http://jquery.com">jQuery</a>
|
||||
</p>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
/**!
|
||||
* TableSorter 2.17.5 - Client-side table sorting with ease!
|
||||
* TableSorter 2.17.6 - Client-side table sorting with ease!
|
||||
* @requires jQuery v1.2.6+
|
||||
*
|
||||
* Copyright (c) 2007 Christian Bach
|
||||
@ -24,7 +24,7 @@
|
||||
|
||||
var ts = this;
|
||||
|
||||
ts.version = "2.17.5";
|
||||
ts.version = "2.17.6";
|
||||
|
||||
ts.parsers = [];
|
||||
ts.widgets = [];
|
||||
@ -219,7 +219,7 @@
|
||||
var c = table.config,
|
||||
// update table bodies in case we start with an empty table
|
||||
tb = c.$tbodies = c.$table.children('tbody:not(.' + c.cssInfoBlock + ')'),
|
||||
rows, list, l, i, h, ch, np, p, time,
|
||||
rows, list, l, i, h, ch, np, p, e, time,
|
||||
j = 0,
|
||||
parsersDebug = "",
|
||||
len = tb.length;
|
||||
@ -229,7 +229,10 @@
|
||||
time = new Date();
|
||||
log('Detecting parsers for each column');
|
||||
}
|
||||
list = [];
|
||||
list = {
|
||||
extractors: [],
|
||||
parsers: []
|
||||
};
|
||||
while (j < len) {
|
||||
rows = tb[j].rows;
|
||||
if (rows[j]) {
|
||||
@ -238,7 +241,8 @@
|
||||
h = c.$headers.filter('[data-column="' + i + '"]:last');
|
||||
// get column indexed table cell
|
||||
ch = ts.getColumnData( table, c.headers, i );
|
||||
// get column parser
|
||||
// get column parser/extractor
|
||||
e = ts.getParserById( ts.getData(h, ch, 'extractor') );
|
||||
p = ts.getParserById( ts.getData(h, ch, 'sorter') );
|
||||
np = ts.getData(h, ch, 'parser') === 'false';
|
||||
// empty cells behaviour - keeping emptyToBottom for backwards compatibility
|
||||
@ -248,31 +252,38 @@
|
||||
if (np) {
|
||||
p = ts.getParserById('no-parser');
|
||||
}
|
||||
if (!e) {
|
||||
// For now, maybe detect someday
|
||||
e = false;
|
||||
}
|
||||
if (!p) {
|
||||
p = detectParserForColumn(table, rows, -1, i);
|
||||
}
|
||||
if (c.debug) {
|
||||
parsersDebug += "column:" + i + "; parser:" + p.id + "; string:" + c.strings[i] + '; empty: ' + c.empties[i] + "\n";
|
||||
parsersDebug += "column:" + i + "; extractor:" + e.id + "; parser:" + p.id + "; string:" + c.strings[i] + '; empty: ' + c.empties[i] + "\n";
|
||||
}
|
||||
list[i] = p;
|
||||
list.parsers[i] = p;
|
||||
list.extractors[i] = e;
|
||||
}
|
||||
}
|
||||
j += (list.length) ? len : 1;
|
||||
j += (list.parsers.length) ? len : 1;
|
||||
}
|
||||
if (c.debug) {
|
||||
log(parsersDebug ? parsersDebug : "No parsers detected");
|
||||
benchmark("Completed detecting parsers", time);
|
||||
}
|
||||
c.parsers = list;
|
||||
c.parsers = list.parsers;
|
||||
c.extractors = list.extractors;
|
||||
}
|
||||
|
||||
/* utils */
|
||||
function buildCache(table) {
|
||||
var cc, t, v, i, j, k, $row, rows, cols, cacheTime,
|
||||
var cc, t, tx, v, i, j, k, $row, rows, cols, cacheTime,
|
||||
totalRows, rowData, colMax,
|
||||
c = table.config,
|
||||
$tb = c.$table.children('tbody'),
|
||||
parsers = c.parsers;
|
||||
extractors = c.extractors,
|
||||
parsers = c.parsers;
|
||||
c.cache = {};
|
||||
c.totalRows = 0;
|
||||
// if no parsers found, return - it's an empty table.
|
||||
@ -330,10 +341,16 @@
|
||||
continue;
|
||||
}
|
||||
t = getElementText(table, $row[0].cells[j], j);
|
||||
// do extract before parsing if there is one
|
||||
if (typeof extractors[j].id === 'undefined') {
|
||||
tx = t;
|
||||
} else {
|
||||
tx = extractors[j].format(t, table, $row[0].cells[j], j);
|
||||
}
|
||||
// allow parsing if the string is empty, previously parsing would change it to zero,
|
||||
// in case the parser needs to extract data from the table cell attributes
|
||||
v = parsers[j].id === 'no-parser' ? '' : parsers[j].format(t, table, $row[0].cells[j], j);
|
||||
cols.push(v);
|
||||
v = parsers[j].id === 'no-parser' ? '' : parsers[j].format(tx, table, $row[0].cells[j], j);
|
||||
cols.push( c.ignoreCase && typeof v === 'string' ? v.toLowerCase() : v );
|
||||
if ((parsers[j].type || '').toLowerCase() === "numeric") {
|
||||
// determine column max value (ignore sign)
|
||||
colMax[j] = Math.max(Math.abs(v) || 0, colMax[j] || 0);
|
||||
@ -379,6 +396,7 @@
|
||||
if ($bk.length && !$bk.hasClass(c.cssInfoBlock)) {
|
||||
// get tbody
|
||||
$tb = ts.processTbody(table, $bk, true);
|
||||
$tb.children().detach(); // remove rows
|
||||
n = cc[k].normalized;
|
||||
totalRows = n.length;
|
||||
for (i = 0; i < totalRows; i++) {
|
||||
@ -423,7 +441,8 @@
|
||||
c.columns = ts.computeColumnIndex( c.$table.children('thead, tfoot').children('tr') );
|
||||
// add icon if cssIcon option exists
|
||||
i = c.cssIcon ? '<i class="' + ( c.cssIcon === ts.css.icon ? ts.css.icon : c.cssIcon + ' ' + ts.css.icon ) + '"></i>' : '';
|
||||
c.$headers.each(function(index) {
|
||||
// redefine c.$headers here in case of an updateAll that replaces or adds an entire header cell - see #683
|
||||
c.$headers = $(table).find(c.selectorHeaders).each(function(index) {
|
||||
$t = $(this);
|
||||
// make sure to get header cell & not column indexed cell
|
||||
ch = ts.getColumnData( table, c.headers, index, true );
|
||||
@ -477,11 +496,13 @@
|
||||
}
|
||||
|
||||
function updateHeader(table) {
|
||||
var s, $th,
|
||||
var s, $th, col,
|
||||
c = table.config;
|
||||
c.$headers.each(function(index, th){
|
||||
$th = $(th);
|
||||
s = ts.getData( th, ts.getColumnData( table, c.headers, index, true ), 'sorter' ) === 'false';
|
||||
col = ts.getColumnData( table, c.headers, index, true );
|
||||
// add "sorter-false" class if "parser-false" is set
|
||||
s = ts.getData( th, col, 'sorter' ) === 'false' || ts.getData( th, col, 'parser' ) === 'false';
|
||||
th.sortDisabled = s;
|
||||
$th[ s ? 'addClass' : 'removeClass' ]('sorter-false').attr('aria-disabled', '' + s);
|
||||
// aria-controls - requires table ID
|
||||
@ -544,7 +565,7 @@
|
||||
var colgroup = $('<colgroup>'),
|
||||
overallWidth = $(table).width();
|
||||
// only add col for visible columns - fixes #371
|
||||
$(table.tBodies[0]).find("tr:first").children("td:visible").each(function() {
|
||||
$(table.tBodies[0]).find("tr:first").children(":visible").each(function() {
|
||||
colgroup.append($('<col>').css('width', parseInt(($(this).width()/overallWidth)*1000, 10)/10 + '%'));
|
||||
});
|
||||
$(table).prepend(colgroup);
|
||||
@ -601,6 +622,10 @@
|
||||
}
|
||||
|
||||
function initSort(table, cell, event){
|
||||
if (table.isUpdating) {
|
||||
// let any updates complete before initializing a sort
|
||||
return setTimeout(function(){ initSort(table, cell, event); }, 50);
|
||||
}
|
||||
var arry, indx, col, order, s,
|
||||
c = table.config,
|
||||
key = !event[c.sortMultiSortKey],
|
||||
@ -833,7 +858,7 @@
|
||||
table.isUpdating = true;
|
||||
$table.find(c.selectorRemove).remove();
|
||||
// get position from the dom
|
||||
var v, row, icell,
|
||||
var v, t, row, icell,
|
||||
$tb = $table.find('tbody'),
|
||||
$cell = $(cell),
|
||||
// update cache - format: function(s, table, cell, cellIndex)
|
||||
@ -846,8 +871,14 @@
|
||||
row = $tb.eq(tbdy).find('tr').index( $row );
|
||||
icell = $cell.index();
|
||||
c.cache[tbdy].normalized[row][c.columns].$row = $row;
|
||||
v = c.cache[tbdy].normalized[row][icell] = c.parsers[icell].id === 'no-parser' ? '' :
|
||||
c.parsers[icell].format( getElementText(table, cell, icell), table, cell, icell );
|
||||
if (typeof c.extractors[icell].id === 'undefined') {
|
||||
t = getElementText(table, cell, icell);
|
||||
} else {
|
||||
t = c.extractors[icell].format( getElementText(table, cell, icell), table, cell, icell );
|
||||
}
|
||||
v = c.parsers[icell].id === 'no-parser' ? '' :
|
||||
c.parsers[icell].format( t, table, cell, icell );
|
||||
c.cache[tbdy].normalized[row][icell] = c.ignoreCase && typeof v === 'string' ? v.toLowerCase() : v;
|
||||
if ((c.parsers[icell].type || '').toLowerCase() === "numeric") {
|
||||
// update column max value (ignore sign)
|
||||
c.cache[tbdy].colMax[icell] = Math.max(Math.abs(v) || 0, c.cache[tbdy].colMax[icell] || 0);
|
||||
@ -863,8 +894,8 @@
|
||||
updateHeader(table);
|
||||
commonUpdate(table, resort, callback);
|
||||
} else {
|
||||
$row = $($row); // make sure we're using a jQuery object
|
||||
var i, j, l, rowData, cells,
|
||||
$row = $($row).attr('role', 'row'); // make sure we're using a jQuery object
|
||||
var i, j, l, t, v, rowData, cells,
|
||||
rows = $row.filter('tr').length,
|
||||
tbdy = $table.find('tbody').index( $row.parents('tbody').filter(':first') );
|
||||
// fixes adding rows to an empty table - see issue #179
|
||||
@ -882,8 +913,14 @@
|
||||
};
|
||||
// add each cell
|
||||
for (j = 0; j < l; j++) {
|
||||
cells[j] = c.parsers[j].id === 'no-parser' ? '' :
|
||||
c.parsers[j].format( getElementText(table, $row[i].cells[j], j), table, $row[i].cells[j], j );
|
||||
if (typeof c.extractors[j].id === 'undefined') {
|
||||
t = getElementText(table, $row[i].cells[j], j);
|
||||
} else {
|
||||
t = c.extractors[j].format( getElementText(table, $row[i].cells[j], j), table, $row[i].cells[j], j );
|
||||
}
|
||||
v = c.parsers[j].id === 'no-parser' ? '' :
|
||||
c.parsers[j].format( t, table, $row[i].cells[j], j );
|
||||
cells[j] = c.ignoreCase && typeof v === 'string' ? v.toLowerCase() : v;
|
||||
if ((c.parsers[j].type || '').toLowerCase() === "numeric") {
|
||||
// update column max value (ignore sign)
|
||||
c.cache[tbdy].colMax[j] = Math.max(Math.abs(cells[j]) || 0, c.cache[tbdy].colMax[j] || 0);
|
||||
@ -1019,8 +1056,8 @@
|
||||
c.table = table;
|
||||
c.$table = $table
|
||||
.addClass(ts.css.table + ' ' + c.tableClass + k)
|
||||
.attr({ role : 'grid'});
|
||||
c.$headers = $(table).find(c.selectorHeaders);
|
||||
.attr('role', 'grid');
|
||||
c.$headers = $table.find(c.selectorHeaders);
|
||||
|
||||
// give the table a unique id, which will be used in namespace binding
|
||||
if (!c.namespace) {
|
||||
@ -1030,6 +1067,7 @@
|
||||
c.namespace = '.' + c.namespace.replace(/\W/g,'');
|
||||
}
|
||||
|
||||
c.$table.children().children('tr').attr('role', 'row');
|
||||
c.$tbodies = $table.children('tbody:not(.' + c.cssInfoBlock + ')').attr({
|
||||
'aria-live' : 'polite',
|
||||
'aria-relevant' : 'all'
|
||||
|
||||
4
js/jquery.tablesorter.min.js
vendored
4
js/jquery.tablesorter.min.js
vendored
File diff suppressed because one or more lines are too long
@ -1,4 +1,4 @@
|
||||
/*! tableSorter 2.16+ widgets - updated 7/17/2014 (v2.17.5)
|
||||
/*! tableSorter 2.16+ widgets - updated 8/1/2014 (v2.17.6)
|
||||
*
|
||||
* Column Styles
|
||||
* Column Filters
|
||||
@ -131,6 +131,7 @@ ts.storage = function(table, key, value, options) {
|
||||
// Add a resize event to table headers
|
||||
// **************************
|
||||
ts.addHeaderResizeEvent = function(table, disable, settings) {
|
||||
table = $(table)[0]; // make sure we're usig a dom element
|
||||
var headers,
|
||||
defaults = {
|
||||
timer : 250
|
||||
@ -371,7 +372,8 @@ ts.addWidget({
|
||||
filter_startsWith : false, // if true, filter start from the beginning of the cell contents
|
||||
filter_useParsedData : false, // filter all data using parsed content
|
||||
filter_serversideFiltering : false, // if true, server-side filtering should be performed because client-side filtering will be disabled, but the ui and events will still be used.
|
||||
filter_defaultAttrib : 'data-value' // data attribute in the header cell that contains the default filter value
|
||||
filter_defaultAttrib : 'data-value', // data attribute in the header cell that contains the default filter value
|
||||
filter_selectSourceSeparator : '|' // filter_selectSource array text left of the separator is added to the option value, right into the option text
|
||||
},
|
||||
format: function(table, c, wo) {
|
||||
if (!c.$table.hasClass('hasFilters')) {
|
||||
@ -565,7 +567,7 @@ ts.filter = {
|
||||
and : 'and'
|
||||
}, ts.language);
|
||||
|
||||
var options, string, $header, column, filters, time, fxn,
|
||||
var options, string, txt, $header, column, filters, val, time, fxn, noSelect,
|
||||
regex = ts.filter.regex;
|
||||
if (c.debug) {
|
||||
time = new Date();
|
||||
@ -590,7 +592,7 @@ ts.filter = {
|
||||
});
|
||||
|
||||
// don't build filter row if columnFilters is false or all columns are set to "filter-false" - issue #156
|
||||
if (wo.filter_columnFilters !== false && c.$headers.filter('.filter-false').length !== c.$headers.length) {
|
||||
if (wo.filter_columnFilters !== false && c.$headers.filter('.filter-false, .parser-false').length !== c.$headers.length) {
|
||||
// build filter row
|
||||
ts.filter.buildRow(table, c, wo);
|
||||
}
|
||||
@ -642,17 +644,27 @@ ts.filter = {
|
||||
for (column = 0; column < c.columns; column++) {
|
||||
fxn = ts.getColumnData( table, wo.filter_functions, column );
|
||||
if (fxn) {
|
||||
$header = c.$headers.filter('[data-column="' + column + '"]:last');
|
||||
// remove "filter-select" from header otherwise the options added here are replaced with all options
|
||||
$header = c.$headers.filter('[data-column="' + column + '"]:last').removeClass('filter-select');
|
||||
// don't build select if "filter-false" or "parser-false" set
|
||||
noSelect = !($header.hasClass('filter-false') || $header.hasClass('parser-false'));
|
||||
options = '';
|
||||
if (fxn === true && !$header.hasClass('filter-false')) {
|
||||
if ( fxn === true && noSelect ) {
|
||||
ts.filter.buildSelect(table, column);
|
||||
} else if (typeof fxn === 'object' && !$header.hasClass('filter-false')) {
|
||||
} else if ( typeof fxn === 'object' && noSelect ) {
|
||||
// add custom drop down list
|
||||
for (string in fxn) {
|
||||
if (typeof string === 'string') {
|
||||
options += options === '' ?
|
||||
'<option value="">' + ($header.data('placeholder') || $header.attr('data-placeholder') || wo.filter_placeholder.select || '') + '</option>' : '';
|
||||
options += '<option value="' + string + '">' + string + '</option>';
|
||||
val = string;
|
||||
txt = string;
|
||||
if (string.indexOf(wo.filter_selectSourceSeparator) >= 0) {
|
||||
val = string.split(wo.filter_selectSourceSeparator);
|
||||
txt = val[1];
|
||||
val = val[0];
|
||||
}
|
||||
options += '<option ' + (txt === val ? '' : 'data-function-name="' + string + '" ') + 'value="' + val + '">' + txt + '</option>';
|
||||
}
|
||||
}
|
||||
c.$table.find('thead').find('select.' + ts.css.filter + '[data-column="' + column + '"]').append(options);
|
||||
@ -691,7 +703,7 @@ ts.filter = {
|
||||
ts.benchmark("Applying Filter widget", time);
|
||||
}
|
||||
// add default values
|
||||
c.$table.bind('tablesorter-initialized pagerInitialized', function(e) {
|
||||
c.$table.bind('tablesorter-initialized pagerInitialized', function() {
|
||||
// redefine "wo" as it does not update properly inside this callback
|
||||
var wo = this.config.widgetOptions;
|
||||
filters = ts.filter.setDefaults(table, c, wo) || [];
|
||||
@ -775,10 +787,10 @@ ts.filter = {
|
||||
filter;
|
||||
},
|
||||
buildRow: function(table, c, wo) {
|
||||
var column, $header, buildSelect, disabled, name, ffxn,
|
||||
var col, column, $header, buildSelect, disabled, name, ffxn,
|
||||
// c.columns defined in computeThIndexes()
|
||||
columns = c.columns,
|
||||
buildFilter = '<tr class="' + ts.css.filterRow + '">';
|
||||
buildFilter = '<tr role="row" class="' + ts.css.filterRow + '">';
|
||||
for (column = 0; column < columns; column++) {
|
||||
buildFilter += '<td></td>';
|
||||
}
|
||||
@ -792,7 +804,8 @@ ts.filter = {
|
||||
buildSelect = (wo.filter_functions && ffxn && typeof ffxn !== "function" ) ||
|
||||
$header.hasClass('filter-select');
|
||||
// get data from jQuery data, metadata, headers option or header class name
|
||||
disabled = ts.getData($header[0], ts.getColumnData( table, c.headers, column ), 'filter') === 'false';
|
||||
col = ts.getColumnData( table, c.headers, column );
|
||||
disabled = ts.getData($header[0], col, 'filter') === 'false' || ts.getData($header[0], col, 'parser') === 'false';
|
||||
|
||||
if (buildSelect) {
|
||||
buildFilter = $('<select>').appendTo( c.$filters.eq(column) );
|
||||
@ -983,7 +996,7 @@ ts.filter = {
|
||||
var cached, len, $rows, rowIndex, tbodyIndex, $tbody, $cells, columnIndex,
|
||||
childRow, childRowText, exact, iExact, iFilter, lastSearch, matches, result,
|
||||
notFiltered, searchFiltered, filterMatched, showRow, time, val, indx,
|
||||
anyMatch, iAnyMatch, rowArray, rowText, iRowText, rowCache, fxn,
|
||||
anyMatch, iAnyMatch, rowArray, rowText, iRowText, rowCache, fxn, ffxn,
|
||||
regex = ts.filter.regex,
|
||||
c = table.config,
|
||||
wo = c.widgetOptions,
|
||||
@ -1098,7 +1111,16 @@ ts.filter = {
|
||||
if (filterMatched !== null) {
|
||||
showRow = filterMatched;
|
||||
} else {
|
||||
showRow = (iRowText + childRowText).indexOf(iAnyMatch) >= 0;
|
||||
if (wo.filter_startsWith) {
|
||||
showRow = false;
|
||||
columnIndex = columns;
|
||||
while (!showRow && columnIndex > 0) {
|
||||
columnIndex--;
|
||||
showRow = showRow || rowArray[columnIndex].indexOf(iAnyMatch) === 0;
|
||||
}
|
||||
} else {
|
||||
showRow = (iRowText + childRowText).indexOf(iAnyMatch) >= 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1117,6 +1139,9 @@ ts.filter = {
|
||||
iExact = !regex.type.test(typeof exact) && wo.filter_ignoreCase ? exact.toLocaleLowerCase() : exact;
|
||||
result = showRow; // if showRow is true, show that row
|
||||
|
||||
// in case select filter option has a different value vs text "a - z|A through Z"
|
||||
ffxn = c.$filters.eq(columnIndex).find('select option:selected').attr('data-function-name') || '';
|
||||
|
||||
// replace accents - see #357
|
||||
filters[columnIndex] = c.sortLocaleCompare ? ts.replaceAccents(filters[columnIndex]) : filters[columnIndex];
|
||||
// val = case insensitive, filters[columnIndex] = case sensitive
|
||||
@ -1130,9 +1155,9 @@ ts.filter = {
|
||||
} else if (typeof fxn === 'function') {
|
||||
// filter callback( exact cell content, parser normalized content, filter input value, column index, jQuery row object )
|
||||
result = fxn(exact, cached, filters[columnIndex], columnIndex, $rows.eq(rowIndex));
|
||||
} else if (typeof fxn[filters[columnIndex]] === 'function') {
|
||||
} else if (typeof fxn[ffxn || filters[columnIndex]] === 'function') {
|
||||
// selector option function
|
||||
result = fxn[filters[columnIndex]](exact, cached, filters[columnIndex], columnIndex, $rows.eq(rowIndex));
|
||||
result = fxn[ffxn || filters[columnIndex]](exact, cached, filters[columnIndex], columnIndex, $rows.eq(rowIndex));
|
||||
}
|
||||
} else {
|
||||
filterMatched = null;
|
||||
@ -1189,12 +1214,22 @@ ts.filter = {
|
||||
parsed = [],
|
||||
arry = false,
|
||||
source = wo.filter_selectSource,
|
||||
last = c.$table.data('lastSearch') || [],
|
||||
fxn = $.isFunction(source) ? true : ts.getColumnData( table, source, column );
|
||||
|
||||
if (onlyAvail && last[column] !== '') {
|
||||
onlyAvail = false;
|
||||
}
|
||||
|
||||
// filter select source option
|
||||
if (fxn === true) {
|
||||
// OVERALL source
|
||||
arry = source(table, column, onlyAvail);
|
||||
} else if ( fxn instanceof $ || ($.type(fxn) === 'string' && fxn.indexOf('</option>') >= 0) ) {
|
||||
// selectSource is a jQuery object or string of options
|
||||
return fxn;
|
||||
} else if ($.isArray(fxn)) {
|
||||
arry = fxn;
|
||||
} else if ($.type(source) === 'object' && fxn) {
|
||||
// custom select source function for a SPECIFIC COLUMN
|
||||
arry = fxn(table, column, onlyAvail);
|
||||
@ -1278,46 +1313,73 @@ ts.filter = {
|
||||
}
|
||||
return arry;
|
||||
},
|
||||
buildSelect: function(table, column, updating, onlyAvail) {
|
||||
if (!table.config.cache || $.isEmptyObject(table.config.cache)) { return; }
|
||||
buildSelect: function(table, column, arry, updating, onlyAvail) {
|
||||
table = $(table)[0];
|
||||
column = parseInt(column, 10);
|
||||
var indx, txt, $filters,
|
||||
if (!table.config.cache || $.isEmptyObject(table.config.cache)) { return; }
|
||||
var indx, val, txt, t, $filters, $filter,
|
||||
c = table.config,
|
||||
wo = c.widgetOptions,
|
||||
node = c.$headers.filter('[data-column="' + column + '"]:last'),
|
||||
// t.data('placeholder') won't work in jQuery older than 1.4.3
|
||||
options = '<option value="">' + ( node.data('placeholder') || node.attr('data-placeholder') || wo.filter_placeholder.select || '' ) + '</option>',
|
||||
arry = ts.filter.getOptionSource(table, column, onlyAvail),
|
||||
// Get curent filter value
|
||||
currentValue = c.$table.find('thead').find('select.' + ts.css.filter + '[data-column="' + column + '"]').val();
|
||||
|
||||
// build option list
|
||||
for (indx = 0; indx < arry.length; indx++) {
|
||||
txt = arry[indx].replace(/\"/g, """);
|
||||
// replace quotes - fixes #242 & ignore empty strings - see http://stackoverflow.com/q/14990971/145346
|
||||
options += arry[indx] !== '' ? '<option value="' + txt + '"' + (currentValue === txt ? ' selected="selected"' : '') +
|
||||
'>' + arry[indx] + '</option>' : '';
|
||||
// nothing included in arry (external source), so get the options from filter_selectSource or column data
|
||||
if (typeof arry === 'undefined' || arry === '') {
|
||||
arry = ts.filter.getOptionSource(table, column, onlyAvail);
|
||||
}
|
||||
|
||||
if ($.isArray(arry)) {
|
||||
// build option list
|
||||
for (indx = 0; indx < arry.length; indx++) {
|
||||
txt = arry[indx] = ('' + arry[indx]).replace(/\"/g, """);
|
||||
val = txt;
|
||||
// allow including a symbol in the selectSource array
|
||||
// "a-z|A through Z" so that "a-z" becomes the option value
|
||||
// and "A through Z" becomes the option text
|
||||
if (txt.indexOf(wo.filter_selectSourceSeparator) >= 0) {
|
||||
t = txt.split(wo.filter_selectSourceSeparator);
|
||||
val = t[0];
|
||||
txt = t[1];
|
||||
}
|
||||
// replace quotes - fixes #242 & ignore empty strings - see http://stackoverflow.com/q/14990971/145346
|
||||
options += arry[indx] !== '' ? '<option ' + (val === txt ? '' : 'data-function-name="' + arry[indx] + '" ') + 'value="' + val + '">' + txt + '</option>' : '';
|
||||
}
|
||||
// clear arry so it doesn't get appended twice
|
||||
arry = [];
|
||||
}
|
||||
|
||||
// update all selects in the same column (clone thead in sticky headers & any external selects) - fixes 473
|
||||
$filters = ( c.$filters ? c.$filters : c.$table.children('thead') ).find('.' + ts.css.filter);
|
||||
if (wo.filter_$externalFilters) {
|
||||
$filters = $filters && $filters.length ? $filters.add(wo.filter_$externalFilters) : wo.filter_$externalFilters;
|
||||
}
|
||||
$filters.filter('select[data-column="' + column + '"]')[ updating ? 'html' : 'append' ](options);
|
||||
if (!wo.filter_functions) { wo.filter_functions = {}; }
|
||||
wo.filter_functions[column] = true;
|
||||
$filter = $filters.filter('select[data-column="' + column + '"]');
|
||||
|
||||
// make sure there is a select there!
|
||||
if ($filter.length) {
|
||||
$filter[ updating ? 'html' : 'append' ](options);
|
||||
if (!$.isArray(arry)) {
|
||||
// append options if arry is provided externally as a string or jQuery object
|
||||
// options (default value) was already added
|
||||
$filter.append(arry).val(currentValue);
|
||||
}
|
||||
$filter.val(currentValue);
|
||||
}
|
||||
},
|
||||
buildDefault: function(table, updating) {
|
||||
var columnIndex, $header,
|
||||
var columnIndex, $header, noSelect,
|
||||
c = table.config,
|
||||
wo = c.widgetOptions,
|
||||
columns = c.columns;
|
||||
// build default select dropdown
|
||||
for (columnIndex = 0; columnIndex < columns; columnIndex++) {
|
||||
$header = c.$headers.filter('[data-column="' + columnIndex + '"]:last');
|
||||
noSelect = !($header.hasClass('filter-false') || $header.hasClass('parser-false'));
|
||||
// look for the filter-select class; build/update it if found
|
||||
if (($header.hasClass('filter-select') || ts.getColumnData( table, wo.filter_functions, columnIndex ) === true) && !$header.hasClass('filter-false')) {
|
||||
ts.filter.buildSelect(table, columnIndex, updating, $header.hasClass(wo.filter_onlyAvail));
|
||||
if (($header.hasClass('filter-select') || ts.getColumnData( table, wo.filter_functions, columnIndex ) === true) && noSelect) {
|
||||
ts.filter.buildSelect(table, columnIndex, '', updating, $header.hasClass(wo.filter_onlyAvail));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
28
js/jquery.tablesorter.widgets.min.js
vendored
28
js/jquery.tablesorter.widgets.min.js
vendored
File diff suppressed because one or more lines are too long
@ -71,7 +71,6 @@
|
||||
var date = s.replace(/\s+/g," ").replace(/[\-.,]/g, "/").match(/(\d{4}[\/\s]\d{1,2}[\/\s]\d{1,2}(\s+\d{1,2}:\d{2}(:\d{2})?(\s+[AP]M)?)?)/i);
|
||||
if (date) {
|
||||
date = date[0].replace(/(\d{4})[\/\s](\d{1,2})[\/\s](\d{1,2})/, "$2/$3/$1");
|
||||
console.log(date);
|
||||
return $.tablesorter.formatFloat((new Date(date).getTime() || ''), table) || s;
|
||||
}
|
||||
return s;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
/*! input & select parsers for jQuery 1.7+ & tablesorter 2.7.11+
|
||||
* Updated 7/17/2014 (v2.17.5)
|
||||
* Updated 8/1/2014 (v2.17.6)
|
||||
* Demo: http://mottie.github.com/tablesorter/docs/example-widget-grouping.html
|
||||
*/
|
||||
/*jshint browser: true, jquery:true, unused:false */
|
||||
@ -78,6 +78,20 @@
|
||||
type: "text"
|
||||
});
|
||||
|
||||
// Custom parser for parsing textarea values
|
||||
// updated dynamically using the "change" function below
|
||||
$.tablesorter.addParser({
|
||||
id: "textarea",
|
||||
is: function(){
|
||||
return false;
|
||||
},
|
||||
format: function(s, table, cell) {
|
||||
return $(cell).find('textarea').val() || s;
|
||||
},
|
||||
parsed : true, // filter widget flag
|
||||
type: "text"
|
||||
});
|
||||
|
||||
// update select and all input types in the tablesorter cache when the change event fires.
|
||||
// This method only works with jQuery 1.7+
|
||||
// you can change it to use delegate (v1.4.3+) or live (v1.3+) as desired
|
||||
@ -86,10 +100,36 @@
|
||||
$('table').on('tablesorter-initialized', function(){
|
||||
// this flag prevents the updateCell event from being spammed
|
||||
// it happens when you modify input text and hit enter
|
||||
var alreadyUpdating = false;
|
||||
var focused = false,
|
||||
restoreValue = function(){
|
||||
// focused = false; // uncomment this line to prevent auto-accepting changes
|
||||
// make sure we restore original values
|
||||
$(':focus').blur();
|
||||
return;
|
||||
};
|
||||
// bind to .tablesorter (default class name)
|
||||
$(this).children('tbody').on('change', 'select, input', function(e){
|
||||
if (!alreadyUpdating) {
|
||||
$(this).children('tbody')
|
||||
.on('mouseleave', function(){
|
||||
restoreValue();
|
||||
})
|
||||
.on('focus', 'select, input, textarea', function(){
|
||||
focused = true;
|
||||
$(this).data('ts-original-value', this.value);
|
||||
})
|
||||
.on('blur', 'input, textarea', function(){
|
||||
// restore input value;
|
||||
// "change" is triggered before "blur" so this doesn't replace the new update with the original
|
||||
this.value = $(this).data('ts-original-value');
|
||||
})
|
||||
.on('change keyup', 'select, input, textarea', function(e){
|
||||
if ( e.which === 27 ) {
|
||||
// escape: restore original value
|
||||
this.value = $(this).data('ts-original-value');
|
||||
return;
|
||||
}
|
||||
// Update cell cache using... select: change, input: enter or textarea: alt + enter
|
||||
if ( ( e.type === 'change' && focused ) ||
|
||||
( e.type === 'keyup' && e.which === 13 && ( e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA' && e.altKey ) ) ) {
|
||||
var $tar = $(e.target),
|
||||
$cell = $tar.closest('td'),
|
||||
$table = $cell.closest('table'),
|
||||
@ -98,14 +138,17 @@
|
||||
$hdr = c && c.$headers && c.$headers.eq(indx);
|
||||
// abort if not a tablesorter table, or
|
||||
// don't use updateCell if column is set to "sorter-false" and "filter-false", or column is set to "parser-false"
|
||||
if ( !c || ( $hdr && $hdr.length && ( $hdr.hasClass('parser-false') || ($hdr.hasClass('sorter-false') && $hdr.hasClass('filter-false')) ) ) ){
|
||||
return false;
|
||||
if ( !c || ( $hdr && $hdr.length && ( $hdr.hasClass('parser-false') || ( $hdr.hasClass('sorter-false') && $hdr.hasClass('filter-false') ) ) ) ) {
|
||||
return restoreValue();
|
||||
}
|
||||
// ignore change event if nothing changed
|
||||
if ($tar.val() !== $tar.data('ts-original-value')) {
|
||||
$tar.data('ts-original-value', $tar.val());
|
||||
$table.trigger('updateCell', [ $tar.closest('td'), resort, function(){
|
||||
updateServer(e, $table, $tar);
|
||||
setTimeout(function(){ focused = false; }, 10);
|
||||
} ]);
|
||||
}
|
||||
alreadyUpdating = true;
|
||||
$table.trigger('updateCell', [ $tar.closest('td'), resort, function(){
|
||||
updateServer(e, $table, $tar);
|
||||
setTimeout(function(){ alreadyUpdating = false; }, 10);
|
||||
} ]);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
/*! tablesorter Editable Content widget - updated 1/24/2014 (core v2.15.0)
|
||||
/*! tablesorter Editable Content widget - updated 8/1/2014 (core v2.17.6)
|
||||
* Requires tablesorter v2.8+ and jQuery 1.7+
|
||||
* by Rob Garrison
|
||||
*/
|
||||
@ -12,76 +12,100 @@
|
||||
options : {
|
||||
editable_columns : [],
|
||||
editable_enterToAccept : true,
|
||||
editable_autoAccept : true,
|
||||
editable_autoResort : false,
|
||||
editable_validate : null, // function(text, originalText){ return text; }
|
||||
editable_noEdit : 'no-edit',
|
||||
editable_editComplete : 'editComplete'
|
||||
},
|
||||
init: function(table, thisWidget, c, wo){
|
||||
if (!wo.editable_columns.length) { return; }
|
||||
var indx, tmp, $t, cols = [];
|
||||
if (wo.editable_columns.indexOf('-') >= 0) {
|
||||
if ( !wo.editable_columns.length ) { return; }
|
||||
var indx, tmp, $t,
|
||||
cols = [];
|
||||
if ( $.type(wo.editable_columns) === "string" && wo.editable_columns.indexOf('-') >= 0 ) {
|
||||
// editable_columns can contain a range string (i.e. "2-4" )
|
||||
tmp = wo.editable_columns.split('-');
|
||||
indx = parseInt(tmp[0],10) || 0;
|
||||
tmp = parseInt(tmp[1],10) || (c.columns - 1);
|
||||
if (tmp > c.columns) { tmp = c.columns - 1; }
|
||||
for (; indx <= tmp; indx++) {
|
||||
if ( tmp > c.columns ) { tmp = c.columns - 1; }
|
||||
for ( ; indx <= tmp; indx++ ) {
|
||||
cols.push('td:nth-child(' + (indx + 1) + ')');
|
||||
}
|
||||
} else if ($.isArray(wo.editable_columns)) {
|
||||
} else if ( $.isArray(wo.editable_columns) ) {
|
||||
$.each(wo.editable_columns, function(i, col){
|
||||
cols.push('td:nth-child(' + (col + 1) + ')');
|
||||
if ( col < c.columns ) {
|
||||
cols.push('td:nth-child(' + (col + 1) + ')');
|
||||
}
|
||||
});
|
||||
}
|
||||
// IE does not allow making TR/TH/TD cells directly editable (issue #404)
|
||||
// so add a div or span inside ( it's faster than using wrapInner() )
|
||||
c.$tbodies.find( cols.join(',') ).not('.' + wo.editable_noEdit).each(function(){
|
||||
c.$tbodies.find( cols.join(',') ).not( '.' + wo.editable_noEdit ).each(function(){
|
||||
// test for children, if they exist, then make the children editable
|
||||
$t = $(this);
|
||||
( $t.children().length ? $t.children() : $t ).prop('contenteditable', true);
|
||||
( $t.children().length ? $t.children() : $t ).prop( 'contenteditable', true );
|
||||
});
|
||||
c.$tbodies
|
||||
.on('mouseleave.tseditable', function(){
|
||||
if (c.$table.data('contentFocused')) {
|
||||
if ( c.$table.data('contentFocused') ) {
|
||||
// change to "true" instead of element to allow focusout to process
|
||||
c.$table.data( 'contentFocused', true );
|
||||
$(':focus').trigger('blur');
|
||||
}
|
||||
})
|
||||
.on('focus.tseditable', '[contenteditable]', function(){
|
||||
c.$table.data('contentFocused', true);
|
||||
var $this = $(this), v = $this.html();
|
||||
.on('focus.tseditable', '[contenteditable]', function(e){
|
||||
c.$table.data( 'contentFocused', e.target );
|
||||
var $this = $(this),
|
||||
v = $this.html();
|
||||
if (wo.editable_enterToAccept) {
|
||||
// prevent enter from adding into the content
|
||||
$this.on('keydown.tseditable', function(e){
|
||||
if (e.which === 13) {
|
||||
if ( e.which === 13 ) {
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
}
|
||||
$this.data({ before : v, original: v });
|
||||
})
|
||||
.on('blur focusout keyup '.split(' ').join('.tseditable '), '[contenteditable]', function(e){
|
||||
if (!c.$table.data('contentFocused')) { return; }
|
||||
var $this = $(e.target), t;
|
||||
if (e.which === 27) {
|
||||
.on('blur focusout keydown '.split(' ').join('.tseditable '), '[contenteditable]', function(e){
|
||||
if ( !c.$table.data('contentFocused') ) { return; }
|
||||
var t,
|
||||
valid = false,
|
||||
$this = $(e.target);
|
||||
if ( e.which === 27 ) {
|
||||
// user cancelled
|
||||
$this.html( $this.data('original') ).trigger('blur.tseditable');
|
||||
c.$table.data('contentFocused', false);
|
||||
c.$table.data( 'contentFocused', false );
|
||||
return false;
|
||||
}
|
||||
t = e.type !== 'keyup' || (wo.editable_enterToAccept && e.which === 13);
|
||||
t = e.which === 13 && ( wo.editable_enterToAccept || e.altKey ) || wo.editable_autoAccept && e.type !== 'keydown';
|
||||
// change if new or user hits enter (if option set)
|
||||
if ($this.data('before') !== $this.html() || t) {
|
||||
$this.data('before', $this.html()).trigger('change');
|
||||
if (t) {
|
||||
c.$table
|
||||
.data('contentFocused', false)
|
||||
.trigger('updateCell', [ $this.closest('td'), wo.editable_autoResort, function(table){
|
||||
$this.trigger( wo.editable_editComplete );
|
||||
if ( t && $this.data('before') !== $this.html() ) {
|
||||
valid = $.isFunction(wo.editable_validate) ? wo.editable_validate( $this.html(), $this.data('original') ) : $this.html();
|
||||
if ( t && valid !== false ) {
|
||||
$this
|
||||
.html( valid )
|
||||
.data('before', valid)
|
||||
.trigger('change');
|
||||
c.$table.trigger('updateCell', [ $this.closest('td'), wo.editable_autoResort, function(table){
|
||||
$this.trigger( wo.editable_editComplete, [c] );
|
||||
$this.data( 'original', $this.html() );
|
||||
if ( wo.editable_autoResort && c.sortList.length ) {
|
||||
c.$table.trigger('applyWidgets');
|
||||
} ]);
|
||||
$this.trigger('blur.tseditable');
|
||||
}
|
||||
// restore focus last cell after updating
|
||||
setTimeout(function(){
|
||||
var t = c.$table.data('contentFocused');
|
||||
if ( t instanceof HTMLElement ) { t.focus(); }
|
||||
}, 50);
|
||||
} ]);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
if ( !valid && e.type !== 'keydown' ) {
|
||||
// restore original content on blur
|
||||
$this.html( $this.data('original') );
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
/* Pager widget for TableSorter 7/17/2014 (v2.17.5) */
|
||||
/* Pager widget for TableSorter 8/1/2014 (v2.17.6) */
|
||||
/*jshint browser:true, jquery:true, unused:false */
|
||||
;(function($){
|
||||
"use strict";
|
||||
@ -306,6 +306,8 @@ tsp = ts.pager = {
|
||||
}
|
||||
|
||||
if ( p.$size.length ) {
|
||||
// setting an option as selected appears to cause issues with initial page size
|
||||
p.$size.find('option').removeAttr('selected');
|
||||
p.$size
|
||||
.unbind('change.pager')
|
||||
.bind('change.pager', function() {
|
||||
@ -336,7 +338,7 @@ tsp = ts.pager = {
|
||||
},
|
||||
|
||||
updatePageDisplay: function(table, c, completed) {
|
||||
var i, pg, s, out, regex,
|
||||
var i, pg, s, $out, regex,
|
||||
wo = c.widgetOptions,
|
||||
p = c.pager,
|
||||
f = c.$table.hasClass('hasFilters'),
|
||||
@ -368,7 +370,7 @@ tsp = ts.pager = {
|
||||
p.startRow = (t) ? 1 : (p.filteredRows === 0 ? 0 : p.size * p.page + 1);
|
||||
p.page = (t) ? 0 : p.page;
|
||||
p.endRow = Math.min( p.filteredRows, p.totalRows, p.size * ( p.page + 1 ) );
|
||||
out = p.$container.find(wo.pager_selectors.pageDisplay);
|
||||
$out = p.$container.find(wo.pager_selectors.pageDisplay);
|
||||
// form the output string (can now get a new output string from the server)
|
||||
s = ( p.ajaxData && p.ajaxData.output ? p.ajaxData.output || wo.pager_output : wo.pager_output )
|
||||
// {page} = one-based index; {page+#} = zero based index +/- value
|
||||
@ -377,15 +379,21 @@ tsp = ts.pager = {
|
||||
})
|
||||
// {totalPages}, {extra}, {extra:0} (array) or {extra : key} (object)
|
||||
.replace(/\{\w+(\s*:\s*\w+)?\}/gi, function(m){
|
||||
var str = m.replace(/[{}\s]/g,''),
|
||||
var len, indx,
|
||||
str = m.replace(/[{}\s]/g,''),
|
||||
extra = str.split(':'),
|
||||
data = p.ajaxData,
|
||||
// return zero for default page/row numbers
|
||||
deflt = /(rows?|pages?)$/i.test(str) ? 0 : '';
|
||||
if (/(startRow|page)/.test(extra[0]) && extra[1] === 'input') {
|
||||
len = ('' + (extra[0] === 'page' ? p.totalPages : p.totalRows)).length;
|
||||
indx = extra[0] === 'page' ? p.page + 1 : p.startRow;
|
||||
return '<input type="text" class="ts-' + extra[0] + '" style="max-width:' + len + 'em" value="' + indx + '"/>';
|
||||
}
|
||||
return extra.length > 1 && data && data[extra[0]] ? data[extra[0]][extra[1]] : p[str] || (data ? data[str] : deflt) || deflt;
|
||||
});
|
||||
if (out.length) {
|
||||
out[ (out[0].tagName === 'INPUT') ? 'val' : 'html' ](s);
|
||||
if ($out.length) {
|
||||
$out[ ($out[0].tagName === 'INPUT') ? 'val' : 'html' ](s);
|
||||
if ( p.$goto.length ) {
|
||||
t = '';
|
||||
pg = Math.min( p.totalPages, p.filteredPages );
|
||||
@ -394,6 +402,12 @@ tsp = ts.pager = {
|
||||
}
|
||||
p.$goto.html(t).val( p.page + 1 );
|
||||
}
|
||||
// rebind startRow/page inputs
|
||||
$out.find('.ts-startRow, .ts-page').unbind('change').bind('change', function(){
|
||||
var v = $(this).val(),
|
||||
pg = $(this).hasClass('ts-startRow') ? Math.floor( v/p.size ) + 1 : v;
|
||||
c.$table.trigger('pageSet.pager', [ pg ]);
|
||||
});
|
||||
}
|
||||
}
|
||||
tsp.pagerArrows(c);
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "tablesorter",
|
||||
"title": "tablesorter",
|
||||
"version": "2.17.4",
|
||||
"version": "2.17.6",
|
||||
"description": "tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell.\n\nThis forked version adds lots of new enhancements including: alphanumeric sorting, pager callback functons, multiple widgets providing column styling, ui theme application, sticky headers, column filters and resizer, as well as extended documentation with a lot more demos.",
|
||||
"author": {
|
||||
"name": "Christian Bach",
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "tablesorter",
|
||||
"title": "tablesorter",
|
||||
"version": "2.17.4",
|
||||
"version": "2.17.6",
|
||||
"description": "tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell.\n\nThis forked version adds lots of new enhancements including: alphanumeric sorting, pager callback functons, multiple widgets providing column styling, ui theme application, sticky headers, column filters and resizer, as well as extended documentation with a lot more demos.",
|
||||
"author": {
|
||||
"name": "Christian Bach",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user