tablesorter/docs/example-parsers-date-range.html

158 lines
4.8 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html>
<head>
2016-01-10 22:24:57 +00:00
<meta charset="utf-8">
<title>jQuery tablesorter - Date range 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>
<style>
th.order { width: 4%; }
th { width: 24%; }
</style>
<link href="../css/theme.blue.css" rel="stylesheet">
<script src="../js/jquery.tablesorter.js"></script>
<script src="../js/jquery.tablesorter.widgets.js"></script>
<script src="../js/widgets/widget-filter-type-insideRange.js"></script>
<script src="../js/parsers/parser-date-range.js"></script>
<script id="js">$(function() {
// call the tablesorter plugin
$('table').tablesorter({
theme : 'blue',
widgets : ['zebra', 'filter'],
widgetOptions: {
filter_reset: '.reset'
}
});
// filter buttons
$('button').on('click', function(){
var $this = $(this),
filter = [],
column = $this.attr('data-column');
filter[column] = $this.text();
$('table').trigger('search', [ filter ]);
});
});</script>
</head>
<body>
<div id="banner">
<h1>table<em>sorter</em></h1>
<h2>Date range 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>In <span class="version">v2.24.6</span>, added a new date range parser which uses this format: "dd MMMM yyyy"; added to the last column.</li>
2015-03-05 16:04:59 +00:00
<li>Added <span class="version">v2.21.0</span>, this parser will allow sorting &amp; filtering a date range.</li>
<li>While processing, the parser will rearrange the range so that it is always saved to the cache as "low - high" (note that the "8/12/2014 - 7/10/2014" row sorts correctly, eventhough the later date is first)</li>
<li>This is almost exactly the same demo as <a href="example-widget-filter-custom-search2.html">Custom Filter Widget Search Type (example 2)</a>, but it was added to demonstrate the other supported date formats.</li>
<li>Click on any of the buttons below to test it out.</li>
</ul>
</p>
<h1>Demo</h1>
<div id="demo">Find:<br>
<button type="button" data-column="1">5/4/2014</button> (mm/dd/yyyy; "sorter-date-range-mdy") column<br>
<button type="button" data-column="2">15/7/2014</button> (dd/mm/yyyy; "sorter-date-range-dmy") column<br>
<button type="button" data-column="3">2014/5/20</button> (yyy/mm/dd; "sorter-date-range-ymd") column<br>
<button type="button" data-column="4">18 July 2014</button> (dd MMMM yyyy; "sorter-date-range-dMMMyyyy") column
<p><button type="button" class="reset">Reset</button></p>
<table>
<thead>
<tr>
<th class="order">Order</th>
<th class="sorter-date-range-mdy">Date range (mm/dd/yyyy - mm/dd/yyyy)</th>
<th class="sorter-date-range-dmy">Date range (dd/mm/yyyy - dd/mm/yyyy)</th>
<th class="sorter-date-range-ymd">Date range (yyyy/mm/dd - yyyy/mm/dd)</th>
<th class="sorter-date-range-dMMMyyyy">Date range (dd MMMM yyyy - dd MMMM yyyy)</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>04/28/2014 - 07/18/2014</td>
<td>28/04/2014 - 18/07/2014</td>
<td>2014/04/28 - 2014/07/18</td>
<td>28 April 2014 - 18 Jul 2014</td>
</tr>
<tr>
<td>2</td>
<td>04/30/2014 - 05/21/2014</td>
<td>30/04/2014 - 21/05/2014</td>
<td>2014/04/30 - 2014/05/21</td>
<td>30 Apr 2014 - 21 May 2014</td>
</tr>
<tr>
<td>6</td>
<td>7/15/2014</td>
<td>15/7/2014</td>
<td>2014/7/15</td>
<td>15 Jul 2014</td>
</tr>
<tr>
<td>5</td>
<td>07/12/2014 - 07/23/2014</td>
<td>12/07/2014 - 23/07/2014</td>
<td>2014/07/12 - 2014/07/23</td>
<td>12 Jul 2014 - 23 July 2014</td>
</tr>
<tr>
<td>3</td>
<td>05/20/2014 - 05/23/2014</td>
<td>20/05/2014 - 23/05/2014</td>
<td>2014/05/20 - 2014/05/23</td>
<td>20 May 2014 - 23 May 2014</td>
</tr>
<tr>
<td>4</td>
<td>8/12/2014 - 7/10/2014</td>
<td>12/8/2014 - 10/7/2014</td>
<td>2014/8/12 - 2014/7/10</td>
<td>12 August 2014 - 10 Jul 2014</td>
</tr>
</tbody>
</table></div>
<h1>Header</h1>
<div>
<pre class="prettyprint lang-html">&lt;link href="css/theme.blue.css" rel="stylesheet"&gt;
&lt;script src="js/jquery-latest.min.js"&gt;&lt;/script&gt;
&lt;script src="js/jquery.tablesorter.js"&gt;&lt;/script&gt;
&lt;!-- date range parsers --&gt;
&lt;script src="js/parsers/parser-date-range.js"&gt;&lt;/script&gt;
&lt;!-- filter widget & inside range type --&gt;
&lt;script src="js/widgets/widget-filter.js"&gt;&lt;/script&gt;
&lt;script src="js/widgets/widget-filter-type-insideRange.js"&gt;&lt;/script&gt;</pre>
</div>
<h1>HTML</h1>
<div id="html">
<pre class="prettyprint lang-html"></pre>
</div>
<h1>Javascript</h1>
<div id="javascript">
<pre class="prettyprint lang-javascript"></pre>
</div>
</div>
</body>
</html>