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

Docs: Add built-in parsers demo. See #1571

Browse Source
This commit is contained in:
Rob Garrison 2018-07-27 18:46:06 -05:00
parent 4eea3898c0
commit f0ad41091a
6 changed files with 100 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
docs/example-option-built-in-parsers.html Normal file
View File

@ -0,0 +1,95 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery tablesorter 2.0 - Built-in parsers</title>
<!-- jQuery -->
<script src="js/jquery-latest.min.js"></script>
<!-- Demo stuff -->
<link href="css/jq.css" rel="stylesheet">
<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>
<style>th, tr td:nth-child(8) { text-align:center; } td img { width:20px; }</style>
<script id="js">$(function() {
// call the tablesorter plugin
$("table").tablesorter({
theme : 'blue',
imgAttr: 'title' // image attribute used by "image" parser
});
});</script>
</head>
<body>
<div id="banner">
<h1>table<em>sorter</em></h1>
<h2>Built-in 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>
</p>
<ul>
<li>This demo is showing all of the built-in parsers (included with tablesorter's core).</li>
<li><a href="index.html#custom-parsers">Additional parsers</a> are available, but must be loaded after the core.</li>
<li>Or, you have the option of writing a <a href="example-parsers.html">custom parser</a> by using the <a href="index.html#function-addparser"><code>addParser</code></a> function.</li>
<li>The built-in <code>metadata</code> parser requires the metadata plugin; maintained for backwards compatibility. An example is not included in this demo.</li>
</ul>
<h1>Demo</h1>
<div id="demo">
<table class="tablesorter">
<thead>
<tr>
<th class="sorter-no-parser">"no-parser"<br>will not sort</th>
<th class="sorter-text">"text"</th>
<th class="sorter-digit">"digit"</th>
<th class="sorter-currency">"currency"</th>
<th class="sorter-url">"url"</th>
<th class="sorter-isoDate">"isoDate"</th>
<th class="sorter-percent">"percent"</th>
<th class="sorter-image">"image"</th>
<th class="sorter-usLongDate">"usLongDate"</th>
<th class="sorter-shortDate" data-date-format="mmddyyyy">"shortDate"<br>(mmddyyyy)</th>
<th class="sorter-shortDate" data-date-format="ddmmyyyy">"shortDate"<br>(ddmmyyyy)</th>
<th class="sorter-shortDate" data-date-format="yyyymmdd">"shortDate"<br>(yyyymmdd)</th>
<th class="sorter-time">"time"</th>
</tr>
</thead>
<tbody>
<tr><td>1</td><td>abc</td><td>02</td><td>$10.00</td><td>https://google.com</td><td>2018-07-26</td><td>9.8%</td><td><img src="img/cat.gif" title="Cat"/></td><td>Jul 6, 2006 8:14 AM</td><td>12-31-2017</td><td>31-12-2017</td><td>2017-12-31</td><td>10:00 PM</td></tr>
<tr><td>4</td><td>xyz</td><td>04</td><td>$9.99</td><td>https://yahoo.com</td><td>2017-07-24</td><td>9.9%</td><td><img src="img/x.gif" title="X marks the spot"/></td><td>Dec 10, 2002 5:14 AM</td><td>12.11.2017</td><td>11.12.2017</td><td>2017.12.11</td><td>10:23 AM</td></tr>
<tr><td>2</td><td>def</td><td>03</td><td>$01.99</td><td>https://github.com</td><td>2018-08-24</td><td>10%</td><td><img src="img/fish.gif" title="Fish"/></td><td>Jan 18, 2007 9:12 AM</td><td>12/16/2017</td><td>16/12/2017</td><td>2017/12/16</td><td>10:04 PM</td></tr>
<tr><td>3</td><td>hij</td><td>01</td><td>$00.99</td><td>https://gitlab.com</td><td>2018-07-28</td><td>1%</td><td><img src="img/octopus.gif" title="Octopus"/></td><td>Jul 6, 2006 8:14 AM</td><td>12-04.2017</td><td>4/12 2017</td><td>2017, 12 4</td><td>9:56 PM</td></tr>
</tbody>
</table></div>
<h1>Javascript</h1>
<div id="javascript">
<pre class="prettyprint lang-javascript"></pre>
</div>
<h1>Page Header</h1>
<div>
<pre class="prettyprint lang-html">
&lt;link href="css/theme.blue.css" rel="stylesheet"&gt;
&lt;script src="js/jquery.tablesorter.js"&gt;&lt;/script&gt;</pre>
</div>
<h1>HTML</h1>
<div id="html">
<pre class="prettyprint lang-html"></pre>
</div>
</div>
</body>
</html>

BIN
docs/img/cat.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 139 B

BIN
docs/img/fish.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 130 B

BIN
docs/img/octopus.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 200 B

BIN
docs/img/x.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 147 B

8
docs/index.html
View File

@ -368,6 +368,7 @@
<h4>Using Parsers / Extracting Content</h4>
<ul>
<li><a href=example-option-built-in-parsers.html">Built-in parsers</a>(full list)</li>
<li><a href="example-option-digits.html">Dealing with digits!</a></li>
<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 sorting or set the column parser using class names</a> (v2.0.11).</li>
@ -1005,7 +1006,7 @@
For example, to disable sorting on the first two columns of a table: <code>headers: { 0: { sorter: false}, 1: {sorter: false} }</code>.<br>
<br>
The plugin attempts to detect the type of data that is contained in a column, but if it can't figure it out then it defaults to alphanumeric. You can easily override this by setting the header argument (or column parser).
See the full list of <a href="#parsers">default parsers</a> here or <a href="example-parsers.html">write your own</a>.
See the full list of <a href="#parsers">default parsers here</a> or <a href="example-option-built-in-parsers.html">here</a>, or <a href="example-parsers.html">write your own</a>.
<pre class="prettyprint lang-js">$(function() {
$("table").tablesorter({
headers: {
@ -6628,13 +6629,14 @@ $('.tablesorter')[0].config.cache[0].normalized[0];
<tr><th><code>sorter: &quot;metadata&quot;</code></th><td>Sort by the sorter value in the metadata - requires the metadata plugin.</td></tr>
</tbody></table>
<p>Check out the <a href="#headers"><code>headers</code></a> option to see how to use these parsers in your table (example #1).</p>
Or add a header class name using "sorter-" plus the parser name (example #2), this includes custom parsers (example #3).
Or add a header class name using "sorter-" plus the parser name (example #2 & #3), this includes custom parsers (example #4).
</div>
</td>
<td>
<a href="example-options-headers-digits-strings.html">1</a>
<a href="example-parsers-class-name.html">2</a>
<a href="example-parsers.html">3</a>
<a href="example-option-built-in-parsers.html">3</a>
<a href="example-parsers.html">4</a>
</td>
</tr>