158 lines
4.8 KiB
HTML
158 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<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>
|
|
<li>Added <span class="version">v2.21.0</span>, this parser will allow sorting & 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"><link href="css/theme.blue.css" rel="stylesheet">
|
|
|
|
<script src="js/jquery-latest.min.js"></script>
|
|
<script src="js/jquery.tablesorter.js"></script>
|
|
<!-- date range parsers -->
|
|
<script src="js/parsers/parser-date-range.js"></script>
|
|
<!-- filter widget & inside range type -->
|
|
<script src="js/widgets/widget-filter.js"></script>
|
|
<script src="js/widgets/widget-filter-type-insideRange.js"></script></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>
|