Add html files
This commit is contained in:
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,192 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Column reorder Widget</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="../docs/css/jq.css">
|
||||
<link href="../docs/css/prettify.css" rel="stylesheet">
|
||||
<script src="../docs/js/prettify.js"></script>
|
||||
<script src="../docs/js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: theme -->
|
||||
<link class="theme" rel="stylesheet" href="../css/theme.blue.css">
|
||||
|
||||
<style id="css">.tablesorter-header.tablesorter-reorder-helper {
|
||||
cursor: move;
|
||||
}
|
||||
.tablesorter-reorder-helper-bar {
|
||||
width: 1px;
|
||||
background: #000;
|
||||
}</style>
|
||||
|
||||
<!-- Tablesorter script: required -->
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<script src="widget-reorder.js"></script>
|
||||
|
||||
<script id="js">$(function(){
|
||||
|
||||
$("table").tablesorter({
|
||||
theme : 'blue',
|
||||
widthFixed : true,
|
||||
widgets: [ 'reorder', 'zebra', 'stickyHeaders', 'filter' ],
|
||||
widgetOptions: {
|
||||
reorder_axis : 'x', // 'x' or 'xy'
|
||||
reorder_delay : 300,
|
||||
reorder_helperClass : 'tablesorter-reorder-helper',
|
||||
reorder_helperBar : 'tablesorter-reorder-helper-bar',
|
||||
reorder_noReorder : 'reorder-false',
|
||||
reorder_blocked : 'reorder-block-left reorder-block-end',
|
||||
reorder_complete : null // callback
|
||||
}
|
||||
});
|
||||
|
||||
}); </script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Sticky Header Widget</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>Column reorder - beta testing.</li>
|
||||
<li>Does not yet work properly with sticky headers - reorder second table while top table sticky header is active, then scroll...</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
|
||||
<h1>CSS</h1>
|
||||
<div id="css">
|
||||
<pre class="prettyprint lang-css"></pre>
|
||||
</div>
|
||||
|
||||
<h1>Demo</h1>
|
||||
|
||||
<table class="tablesorter">
|
||||
<caption>Student Grades</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="reorder-false reorder-block-left">Name (0)</th>
|
||||
<th>Major (1)</th>
|
||||
<th>Sex (2)</th>
|
||||
<th>English (3)</th>
|
||||
<th>Japanese (4)</th>
|
||||
<th>Calculus (5)</th>
|
||||
<th class="reorder-block-end">Geometry (6)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr><th>Name</th><th>Major</th><th>Sex</th><th>English</th><th>Japanese</th><th>Calculus</th><th>Geometry</th></tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr><td>Student01 (0)</td><td>Languages (1)</td><td>male (2)</td><td>80 (3)</td><td>70 (4)</td><td>75 (5)</td><td>80 (6)</td></tr>
|
||||
<tr><td>Student02</td><td>Mathematics</td><td>male</td><td>90</td><td>88</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student03</td><td>Languages</td><td>female</td><td>85</td><td>95</td><td>80</td><td>85</td></tr>
|
||||
<tr><td>Student04</td><td>Languages</td><td>male</td><td>60</td><td>55</td><td>100</td><td>100</td></tr>
|
||||
<tr><td>Student05</td><td>Languages</td><td>female</td><td>68</td><td>80</td><td>95</td><td>80</td></tr>
|
||||
<tr><td>Student06</td><td>Mathematics</td><td>male</td><td>100</td><td>99</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student07</td><td>Mathematics</td><td>male</td><td>85</td><td>68</td><td>90</td><td>90</td></tr>
|
||||
<tr><td>Student08</td><td>Languages</td><td>male</td><td>100</td><td>90</td><td>90</td><td>85</td></tr>
|
||||
<tr><td>Student09</td><td>Mathematics</td><td>male</td><td>80</td><td>50</td><td>65</td><td>75</td></tr>
|
||||
<tr><td>Student10</td><td>Languages</td><td>male</td><td>85</td><td>100</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student11</td><td>Languages</td><td>male</td><td>86</td><td>85</td><td>100</td><td>100</td></tr>
|
||||
<tr><td>Student12</td><td>Mathematics</td><td>female</td><td>100</td><td>75</td><td>70</td><td>85</td></tr>
|
||||
<tr><td>Student13</td><td>Languages</td><td>female</td><td>100</td><td>80</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student14</td><td>Languages</td><td>female</td><td>50</td><td>45</td><td>55</td><td>90</td></tr>
|
||||
<tr><td>Student15</td><td>Languages</td><td>male</td><td>95</td><td>35</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student16</td><td>Languages</td><td>female</td><td>100</td><td>50</td><td>30</td><td>70</td></tr>
|
||||
<tr><td>Student17</td><td>Languages</td><td>female</td><td>80</td><td>100</td><td>55</td><td>65</td></tr>
|
||||
<tr><td>Student18</td><td>Mathematics</td><td>male</td><td>30</td><td>49</td><td>55</td><td>75</td></tr>
|
||||
<tr><td>Student19</td><td>Languages</td><td>male</td><td>68</td><td>90</td><td>88</td><td>70</td></tr>
|
||||
<tr><td>Student20</td><td>Mathematics</td><td>male</td><td>40</td><td>45</td><td>40</td><td>80</td></tr>
|
||||
<tr><td>Student21</td><td>Languages</td><td>male</td><td>50</td><td>45</td><td>100</td><td>100</td></tr>
|
||||
<tr><td>Student22</td><td>Mathematics</td><td>male</td><td>100</td><td>99</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student23</td><td>Languages</td><td>female</td><td>85</td><td>80</td><td>80</td><td>80</td></tr>
|
||||
<!--
|
||||
<tr><td>student23</td><td>Mathematics</td><td>male</td><td>82</td><td>77</td><td>0</td><td>79</td></tr>
|
||||
<tr><td>student24</td><td>Languages</td><td>female</td><td>100</td><td>91</td><td>13</td><td>82</td></tr>
|
||||
<tr><td>student25</td><td>Mathematics</td><td>male</td><td>22</td><td>96</td><td>82</td><td>53</td></tr>
|
||||
<tr><td>student26</td><td>Languages</td><td>female</td><td>37</td><td>29</td><td>56</td><td>59</td></tr>
|
||||
<tr><td>student27</td><td>Mathematics</td><td>male</td><td>86</td><td>82</td><td>69</td><td>23</td></tr>
|
||||
<tr><td>student28</td><td>Languages</td><td>female</td><td>44</td><td>25</td><td>43</td><td>1</td></tr>
|
||||
<tr><td>student29</td><td>Mathematics</td><td>male</td><td>77</td><td>47</td><td>22</td><td>38</td></tr>
|
||||
<tr><td>student30</td><td>Languages</td><td>female</td><td>19</td><td>35</td><td>23</td><td>10</td></tr>
|
||||
<tr><td>student31</td><td>Mathematics</td><td>male</td><td>90</td><td>27</td><td>17</td><td>50</td></tr>
|
||||
<tr><td>student32</td><td>Languages</td><td>female</td><td>60</td><td>75</td><td>33</td><td>38</td></tr>
|
||||
<tr><td>student33</td><td>Mathematics</td><td>male</td><td>4</td><td>31</td><td>37</td><td>15</td></tr>
|
||||
<tr><td>student34</td><td>Languages</td><td>female</td><td>77</td><td>97</td><td>81</td><td>44</td></tr>
|
||||
<tr><td>student35</td><td>Mathematics</td><td>male</td><td>5</td><td>81</td><td>51</td><td>95</td></tr>
|
||||
<tr><td>student36</td><td>Languages</td><td>female</td><td>70</td><td>61</td><td>70</td><td>94</td></tr>
|
||||
<tr><td>student37</td><td>Mathematics</td><td>male</td><td>60</td><td>3</td><td>61</td><td>84</td></tr>
|
||||
<tr><td>student38</td><td>Languages</td><td>female</td><td>63</td><td>39</td><td>0</td><td>11</td></tr>
|
||||
<tr><td>student39</td><td>Mathematics</td><td>male</td><td>50</td><td>46</td><td>32</td><td>38</td></tr>
|
||||
<tr><td>student40</td><td>Languages</td><td>female</td><td>51</td><td>75</td><td>25</td><td>3</td></tr>
|
||||
<tr><td>student41</td><td>Mathematics</td><td>male</td><td>43</td><td>34</td><td>28</td><td>78</td></tr>
|
||||
<tr><td>student42</td><td>Languages</td><td>female</td><td>11</td><td>89</td><td>60</td><td>95</td></tr>
|
||||
<tr><td>student43</td><td>Mathematics</td><td>male</td><td>48</td><td>92</td><td>18</td><td>88</td></tr>
|
||||
<tr><td>student44</td><td>Languages</td><td>female</td><td>82</td><td>2</td><td>59</td><td>73</td></tr>
|
||||
<tr><td>student45</td><td>Mathematics</td><td>male</td><td>91</td><td>73</td><td>37</td><td>39</td></tr>
|
||||
<tr><td>student46</td><td>Languages</td><td>female</td><td>4</td><td>8</td><td>12</td><td>10</td></tr>
|
||||
<tr><td>student47</td><td>Mathematics</td><td>male</td><td>89</td><td>10</td><td>6</td><td>11</td></tr>
|
||||
<tr><td>student48</td><td>Languages</td><td>female</td><td>90</td><td>32</td><td>21</td><td>18</td></tr>
|
||||
<tr><td>student49</td><td>Mathematics</td><td>male</td><td>42</td><td>49</td><td>49</td><td>72</td></tr>
|
||||
<tr><td>student50</td><td>Languages</td><td>female</td><td>56</td><td>37</td><td>67</td><td>54</td></tr>
|
||||
-->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="narrow-block">
|
||||
<table class="tablesorter">
|
||||
<thead>
|
||||
<tr><th>Account #</th><th>First Name</th><th>Last Name</th><th>Age</th><th>Total</th><th>Discount</th><th>Diff</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>A43</td><td>Peter</td><td>Parker</td><td>28</td><td>9.99</td><td>20.3%</td><td>+3</td></tr>
|
||||
<tr><td>A255</td><td>John</td><td>Hood</td><td>33</td><td>19.99</td><td>25.1%</td><td>-7</td></tr>
|
||||
<tr><td>A33</td><td>Clark</td><td>Kent</td><td>18</td><td>15.49</td><td>44.2%</td><td>-13</td></tr>
|
||||
<tr><td>A11</td><td>Bruce</td><td>Almighty</td><td>45</td><td>153.19</td><td>44%</td><td>+19</td></tr>
|
||||
<tr><td>A102</td><td>Bruce</td><td>Evans</td><td>56</td><td>153.19</td><td>23%</td><td>+9</td></tr>
|
||||
<tr><td>A23</td><td>Mike</td><td>Peters</td><td>22</td><td>5.69</td><td>20.3%</td><td>+2</td></tr>
|
||||
<tr><td>A55</td><td>Leslie</td><td>Kent</td><td>33</td><td>15.99</td><td>25.1%</td><td>-3</td></tr>
|
||||
<tr><td>A3</td><td>Frank</td><td>Mint</td><td>44</td><td>12.59</td><td>44.2%</td><td>-12</td></tr>
|
||||
<tr><td>A21</td><td>Joe</td><td>Thomas</td><td>45</td><td>15.25</td><td>44%</td><td>+12</td></tr>
|
||||
<tr><td>A12</td><td>Tess</td><td>Evans</td><td>66</td><td>13.59</td><td>23%</td><td>+4</td></tr>
|
||||
<tr><td>A21</td><td>Peter</td><td>Dunn</td><td>12</td><td>2.99</td><td>21.1%</td><td>+2</td></tr>
|
||||
<tr><td>A33</td><td>Harry</td><td>Jones</td><td>13</td><td>19.49</td><td>22.2%</td><td>-6</td></tr>
|
||||
<tr><td>A13</td><td>John</td><td>James</td><td>16</td><td>13.89</td><td>42.1%</td><td>-13</td></tr>
|
||||
<tr><td>A71</td><td>Nick</td><td>Parker</td><td>45</td><td>13.89</td><td>44%</td><td>+29</td></tr>
|
||||
<tr><td>A21</td><td>Charles</td><td>Dunn</td><td>19</td><td>15.49</td><td>22%</td><td>+3</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="spacer"></div>
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-widget-zebra.html">Zebra stripe widget ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,40 @@
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>$153.19</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</td>
|
||||
</tr>
|
||||
144
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-add-rows.html
Executable file
144
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-add-rows.html
Executable file
@@ -0,0 +1,144 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Adding a table row</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>
|
||||
|
||||
<style>
|
||||
.discount { cursor: pointer; }
|
||||
</style>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
$("table").tablesorter({ theme : 'blue', sortList: [[3,1],[0,0]] });
|
||||
|
||||
// Add two new rows using the "addRows" method
|
||||
// the "update" method doesn't work here because not all
|
||||
// rows are present in the table when the pager is applied
|
||||
$('button').click(function(){
|
||||
// add two rows
|
||||
var row = '<tr><td>Frank</td><td>Smith</td><td>53</td><td>$39.95</td><td>22%</td><td>Mar 22, 2011 9:33 AM</td></tr>' +
|
||||
'<tr><td>Inigo</td><td>Montoya</td><td>34</td><td>$19.99</td><td>15%</td><td>Sep 25, 1987 12:00PM</td></tr>',
|
||||
$row = $(row),
|
||||
// resort table using the current sort; set to false to prevent resort, otherwise
|
||||
// any other value in resort will automatically trigger the table resort.
|
||||
resort = true;
|
||||
$('table')
|
||||
.find('tbody').append($row)
|
||||
.trigger('addRows', [$row, resort]);
|
||||
return false;
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Adding table rows</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>Click on the [ Add Rows ] button to add two new rows.</li>
|
||||
<li>The "addRows" method was added in version 2.0.16, and is not part of the original plugin.</li>
|
||||
<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>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<br>
|
||||
<button type="button">Add Rows</button>
|
||||
<br>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td class="discount">$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td class="discount">$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td class="discount">$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td class="discount">$153.19</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td class="discount">$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</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-update-all.html">Update an entire table column (thead and tbody) ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
138
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-ajax.html
Executable file
138
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-ajax.html
Executable file
@@ -0,0 +1,138 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Appending table data with ajax</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 id="js">$(function() {
|
||||
|
||||
$("table").tablesorter({ theme : 'blue' });
|
||||
|
||||
$("#ajax-append").click(function() {
|
||||
|
||||
$.get("assets/ajax-content.html", function(html) {
|
||||
|
||||
// append the "ajax'd" data to the table body
|
||||
$("table tbody").append(html);
|
||||
|
||||
// let the plugin know that we made a update
|
||||
// the resort flag set to anything BUT false (no quotes) will trigger an automatic
|
||||
// table resort using the current sort
|
||||
var resort = true;
|
||||
$("table").trigger("update", [resort]);
|
||||
|
||||
// triggering the "update" function will resort the table using the current sort; since version 2.0.14
|
||||
// use the following code to change the sort; set sorting column and direction, this will sort on the first and third column
|
||||
// var sorting = [[2,1],[0,0]];
|
||||
// $("table").trigger("sorton", [sorting]);
|
||||
});
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Appending table data with ajax</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>$153.19</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<a href="#" id="ajax-append">Append new table data</a></div>
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em> With the latest version of jQuery, this demo will only work when the ajax page is hosted online.
|
||||
</p>
|
||||
|
||||
<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-add-rows.html">Adding a table row ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
131
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-apply-widget.html
Executable file
131
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-apply-widget.html
Executable file
@@ -0,0 +1,131 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - applyWidgetId vs. applyWidgets</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 id="js">$(function() {
|
||||
|
||||
// call the tablesorter plugin
|
||||
$("table").tablesorter({ theme : 'blue' });
|
||||
|
||||
$("button.applyid").click(function(){
|
||||
// This method needs to be applied after each sort
|
||||
$('table').trigger('applyWidgetId', ['zebra']);
|
||||
return false;
|
||||
});
|
||||
|
||||
$("button.apply").click(function(){
|
||||
// Update the list of widgets to apply to the table (add or remove)
|
||||
$("table").data("tablesorter").widgets = ["zebra"];
|
||||
// This method applies the widget - no need to keep updating
|
||||
$('table').trigger('applyWidgets');
|
||||
return false;
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>applyWidgetId versus applyWidgets</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> Click on [ Apply Widget Id ], then sort the table a few times... then click on [ Apply Widgets ] and sort again (these methods <strong>are</strong> part of the original plugin).
|
||||
</p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<br>
|
||||
<div id="demo"><button type="button" class="applyid">Apply Widget Id</button> <button type="button" class="apply">Apply Widgets</button>
|
||||
|
||||
<table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>$153.19</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</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-widget-columns.html">Columns widget ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,477 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Child Rows with Filter Widget</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="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<!-- Tablesorter: pager -->
|
||||
<link rel="stylesheet" href="../addons/pager/jquery.tablesorter.pager.css">
|
||||
<script src="../js/widgets/widget-pager.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
$(".tablesorter")
|
||||
.tablesorter({
|
||||
theme : 'blue',
|
||||
// this is the default setting
|
||||
cssChildRow: "tablesorter-childRow",
|
||||
|
||||
// initialize zebra and filter widgets
|
||||
widgets: ["zebra", "filter", "pager"],
|
||||
|
||||
widgetOptions: {
|
||||
// output default: '{page}/{totalPages}'
|
||||
// possible variables: {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {totalRows}
|
||||
pager_output: '{startRow} - {endRow} / {filteredRows} ({totalRows})', // '{page}/{totalPages}'
|
||||
pager_removeRows: false,
|
||||
|
||||
|
||||
// include child row content while filtering, if true
|
||||
filter_childRows : true,
|
||||
// class name applied to filter row and each input
|
||||
filter_cssFilter : 'tablesorter-filter',
|
||||
// search from beginning
|
||||
filter_startsWith : false,
|
||||
// Set this option to false to make the searches case sensitive
|
||||
filter_ignoreCase : true
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
// hide child rows
|
||||
$('.tablesorter-childRow td').hide();
|
||||
|
||||
// Toggle child row content (td), not hiding the row since we are using rowspan
|
||||
// Using delegate because the pager plugin rebuilds the table after each page change
|
||||
// "delegate" works in jQuery 1.4.2+; use "live" back to v1.3; for older jQuery - SOL
|
||||
$('.tablesorter').delegate('.toggle', 'click' ,function(){
|
||||
|
||||
// use "nextUntil" to toggle multiple child rows
|
||||
// toggle table cells instead of the row
|
||||
$(this).closest('tr').nextUntil('tr.tablesorter-hasChildRow').find('td').toggle();
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
// Toggle widgetFilterChildRows option
|
||||
$('button.toggle-option').click(function(){
|
||||
var c = $('.tablesorter')[0].config.widgetOptions,
|
||||
o = !c.filter_childRows;
|
||||
c.filter_childRows = o;
|
||||
$('.state').html(o.toString());
|
||||
// update filter; include false parameter to force a new search
|
||||
$('table').trigger('search', false);
|
||||
return false;
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Child Rows with Filter Widget</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>Click the link in the Order # column to reveal the hidden child row cells (<a href="http://www.pengoworks.com/workshop/jquery/tablesorter/tablesorter.htm">original demo</a>). This option is available in the original plugin.</li>
|
||||
<li>The filter widget will work with the original tablesorter plugin, just include the jquery.tablesorter.widget.js file and initialize the widget as seen below.</li>
|
||||
<li><del>Combining the filter widget and pager plugin will not work as expected</del>.</li>
|
||||
<li>As of <span class="version updated">v2.15.12</span>,
|
||||
<ul>
|
||||
<li>This demo includes the pager widget.</li>
|
||||
<li>For now, when combining the filter widget with pager, ensure the <code>removeRows</code> option is set to <code>false</code>.</li>
|
||||
<li>Parents of child rows now have a <code>tablesorter-hasChildRow</code> class name added.</li>
|
||||
<li>The last row of each page now includes any child rows. For example, on page 1, click on the "SO71783" row link and the associated child row will now show, as it should</li>
|
||||
<li><span class="label label-info">NOTE!</span> A new css definition was added to every default theme; the "filtered" class name (set by the <code>filter_filteredRow</code> widgetOption) has been added to properly hide/show child rows when filtered.</li>
|
||||
<li>The additional code to always hide child row cells on <code>pagerChange</code> is no longer needed.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<br>
|
||||
<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>
|
||||
<li>When false, child row content is ignored. Enter "cal" and no rows will be found.</li>
|
||||
</ul>
|
||||
|
||||
<div class="pager">
|
||||
<img src="../addons/pager/icons/first.png" class="first" alt="First" />
|
||||
<img src="../addons/pager/icons/prev.png" class="prev" alt="Prev" />
|
||||
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
|
||||
<img src="../addons/pager/icons/next.png" class="next" alt="Next" />
|
||||
<img src="../addons/pager/icons/last.png" class="last" alt="Last" />
|
||||
<select class="pagesize" title="Select page size">
|
||||
<option value="10">10</option>
|
||||
<option value="20">20</option>
|
||||
<option value="30">30</option>
|
||||
<option value="40">40</option>
|
||||
</select>
|
||||
<select class="gotoPage" title="Select page number"></select>
|
||||
</div>
|
||||
|
||||
<table class="tablesorter">
|
||||
<colgroup>
|
||||
<col width="85" />
|
||||
<col width="250" />
|
||||
<col width="100" />
|
||||
<col width="90" />
|
||||
<col width="70" />
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Order #</th>
|
||||
<th>Customer</th>
|
||||
<th>PO</th>
|
||||
<th>Date</th>
|
||||
<th>Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- First row expanded to reveal the layout -->
|
||||
<tr>
|
||||
<td rowspan="2"> <!-- rowspan="2" makes the table look nicer -->
|
||||
<a href="#" class="toggle">SO71774</a> <!-- link to toggle view of the child row -->
|
||||
</td>
|
||||
<td>Good Toys</td>
|
||||
<td>PO348186287</td>
|
||||
<td>Jul 20, 2007</td>
|
||||
<td>$972.78</td>
|
||||
</tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>99700 Bell Road<br>Auburn, California 95603</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71775</a></td><td>Cycle Clearance</td><td>PO58159451</td><td>May 6, 2007</td><td>$2,313.13</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>2255 254th Avenue Se<br>Albany, Oregon 97321</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71776</a></td><td>West Side Mart</td><td>PO19952192051</td><td>May 12, 2007</td><td>$87.09</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>251 The Metro Center<br>Wokingham, England RG41 1QW</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71777</a></td><td>Demand Distributors</td><td>PO20097113391</td><td>Apr 26, 2007</td><td>$1,267.82</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Judy</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>25102 Springwater<br>Wenatchee, Washington 98801</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71778</a></td><td>Purchase Mart</td><td>PO19894146890</td><td>Apr 18, 2007</td><td>$1,503.98</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Wrentham Village<br>Wrentham, Massachusetts 02093</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71779</a></td><td>Initial Bike Company</td><td>PO19633118218</td><td>Dec 20, 2007</td><td>$48,425.55</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>789 West Alameda<br>Westminster, Colorado 80030</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71780</a></td><td>Nearby Cycle Shop</td><td>PO19604173239</td><td>Aug 29, 2007</td><td>$42,452.65</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Burgess Hill<br>Edward Way<br>West Sussex, England RH15 9UD</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71781</a></td><td>Sundry Sporting Goods</td><td>PO19401117806</td><td>Mar 9, 2008</td><td>$29,262.41</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Rudolph</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>595 Burning Street<br>Vancouver, British Columbia V7L 4J4</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71782</a></td><td>Professional Sales and Service</td><td>PO19372114749</td><td>Jul 27, 2007</td><td>$43,962.79</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>57251 Serene Blvd<br>Van Nuys, California 91411</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71783</a></td><td>Eastside Department Store</td><td>PO19343113609</td><td>May 15, 2007</td><td>$92,663.56</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>9992 Whipple Rd<br>Union City, California 94587</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71784</a></td><td>Action Bicycle Specialists</td><td>PO19285135919</td><td>Nov 30, 2007</td><td>$119,960.82</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Warrington Ldc Unit 25/2<br>Woolston, England WA1 4SY</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71785</a></td><td>Metro Cycle Shop</td><td>PO19169115427</td><td>Feb 1, 2008</td><td>$39,805.12</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Henry</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>2507 Pacific Ave S<br>Tacoma, Washington 98403</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71786</a></td><td>Greater Bike Store</td><td>PO17690128583</td><td>Dec 7, 2007</td><td>$4,657.19</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>55 Lakeshore Blvd East<br>Toronto, Ontario M4B 1V6</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71787</a></td><td>Fun Toys and Bikes</td><td>PO18038111279</td><td>Jun 1, 2007</td><td>$38,211.11</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>6500 East Grant Road<br>Tucson, Arizona 85701</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71788</a></td><td>Reliable Retail Center</td><td>PO17951176595</td><td>Jul 10, 2007</td><td>$1,806.12</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>609 Evans Avenue<br>Toronto, Ontario M4B 1V4</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71789</a></td><td>Eastside Parts Shop</td><td>PO17516128941</td><td>May 22, 2007</td><td>$143.50</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Andrew</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>7000 Victoria Park Avenue<br>Toronto, Ontario M4B 1V4</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71790</a></td><td>Successful Sales Company</td><td>PO17487184338</td><td>Apr 15, 2007</td><td>$5,306.48</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>7009 Sw Hall Blvd.<br>Tigard, Oregon 97223</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71791</a></td><td>Convenient Sales and Service</td><td>PO17139191080</td><td>Nov 14, 2007</td><td>$26,692.85</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>950 Gateway Street<br>Springfield, Oregon 97477</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71792</a></td><td>Corner Bicycle Supply</td><td>PO17545115036</td><td>Mar 17, 2008</td><td>$67,683.32</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>2511 Baker Road<br>Toronto, Ontario M4B 1V7</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71793</a></td><td>Mountain Toy Store</td><td>PO17226152414</td><td>Sep 5, 2007</td><td>$1,943.93</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Marvin</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>First Colony Mall<br>Sugar Land, Texas 77478</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71794</a></td><td>Vigorous Exercise Company</td><td>PO17574111985</td><td>Dec 14, 2007</td><td>$87,770.74</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>9950 Ferrand Drive, 9th Floor<br>Toronto, Ontario M4B 1V4</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71795</a></td><td>Bike Part Wholesalers</td><td>PO17371184627</td><td>Feb 6, 2008</td><td>$41,224.10</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>254a Baker Street<br>Botany<br>Sydney, New South Wales 1002</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71796</a></td><td>Extreme Riding Supplies</td><td>PO17052159664</td><td>Jul 13, 2007</td><td>$63,686.27</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Riverside<br>Sherman Oaks, California 91403</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71797</a></td><td>Riding Cycles</td><td>PO16501134889</td><td>Dec 2, 2007</td><td>$86,222.81</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Jon</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Galashiels<br>Liverpool, England L4 4HB</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71798</a></td><td>Work and Play Association</td><td>PO16994135863</td><td>Jan 20, 2008</td><td>$40,048.63</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>2533 Eureka Rd.<br>Southgate, Michigan 48195</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71799</a></td><td>Metro Sports Equipment</td><td>PO15486196616</td><td>Oct 18, 2007</td><td>$23,080.67</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>6, rue des Pyrenees<br>Saint Ouen, Loir et Cher 41100</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71800</a></td><td>Quick Parts and Service</td><td>PO15544127760</td><td>Feb 19, 2008</td><td>$37,253.44</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>99954 Boul. Laurier, Local 060, Place<br>Sainte-Foy, Quebec G1W</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71801</a></td><td>Getaway Inn</td><td>PO15515173664</td><td>Mar 6, 2008</td><td>$47,720.54</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Min</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>54, avenue des Ternes<br>Saint Ouen, Loir et Cher 41100</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71802</a></td><td>Blue-Ribbon Bike Company</td><td>PO15457184141</td><td>Sep 22, 2007</td><td>$42,013.42</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>790 Shelbyville Road<br>Saint Matthews, Kentucky 40207</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71803</a></td><td>World of Bikes</td><td>PO15341174104</td><td>Mar 1, 2008</td><td>$43,964.97</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>660 Lindbergh<br>Saint Louis, Missouri 63103</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71804</a></td><td>Bikes for Two</td><td>PO14906114459</td><td>Aug 18, 2007</td><td>$2,431.21</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>63 West Beaver Creek<br>Richmond Hill, Ontario L4E 3M5</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71805</a></td><td>Nationwide Supply</td><td>PO14703194514</td><td>Jun 27, 2007</td><td>$76,535.55</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Pilar</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>4250 Concord Road<br>Rhodes, New South Wales 2138</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71806</a></td><td>Valley Toy Store</td><td>PO14790111844</td><td>Jun 2, 2007</td><td>$20,261.90</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>252851 Rowan Place<br>Richmond, British Columbia V6B 3P7</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71807</a></td><td>Courteous Bicycle Specialists</td><td>PO14935135211</td><td>Oct 28, 2007</td><td>$656.84</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>995 Crescent<br>Richmond Hill, Ontario L4E 3M5</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71808</a></td><td>Odometers and Accessories Company</td><td>PO14761198562</td><td>Oct 28, 2007</td><td>$42,231.51</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>253711 Mayfield Place, Unit 150<br>Richmond, British Columbia V6B 3P7</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71809</a></td><td>Fitness Bike Accessories</td><td>PO14645153239</td><td>Jan 12, 2008</td><td>$3,743.42</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: John</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Level 7<br>114 Albert Road<br>Rhodes, New South Wales 2138</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71810</a></td><td>Two-Seater Bikes</td><td>PO13804148315</td><td>May 27, 2007</td><td>$1,093.53</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>5700 Legacy Dr<br>Plano, Texas 75074</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71811</a></td><td>Racing Toys</td><td>PO13717180066</td><td>Feb 26, 2008</td><td>$3,493.04</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>9228 Via Del Sol<br>Phoenix, Arizona 85004</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71812</a></td><td>Fashionable Bikes and Accessories</td><td>PO13543115747</td><td>Apr 28, 2007</td><td>$35,146.04</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Sports Store At Park City<br>Park City, Utah 84098</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71813</a></td><td>Liquidation Sales</td><td>PO13630186295</td><td>Jan 17, 2008</td><td>$12,707.47</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Jenny</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>No. 6<br>Millenium Court<br>Perth, South Australia 6006</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71814</a></td><td>Our Sporting Goods Store</td><td>PO12818173864</td><td>May 31, 2007</td><td>$7,517.54</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>6030 Conroy Road<br>Ottawa, Ontario K4B 1S3</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71815</a></td><td>Thrifty Parts and Sales</td><td>PO13021155785</td><td>Jan 1, 2008</td><td>$1,261.44</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Oxnard Outlet<br>Oxnard, California 93030</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71816</a></td><td>Engineered Bike Systems</td><td>PO12992180445</td><td>Jul 29, 2007</td><td>$3,754.97</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>123 Camelia Avenue<br>Oxnard, California 93030</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71817</a></td><td>Home Town Bike Store</td><td>PO12905185178</td><td>May 21, 2007</td><td>$689.96</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Danielle</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>955 Green Valley Crescent<br>Ottawa, Ontario K4B 1S1</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71818</a></td><td>Utilitarian Sporting Goods</td><td>PO12470139718</td><td>Apr 25, 2007</td><td>$61,356.31</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>4635 S. Harrison Blvd.<br>Ogden, Utah 84401</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71819</a></td><td>Fabrikam Inc., West</td><td>PO12354153257</td><td>May 19, 2007</td><td>$41,746.15</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>46460 West Oaks Drive<br>Novi, Michigan 48375</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71820</a></td><td>Racing Sales and Service</td><td>PO12673129941</td><td>Apr 26, 2007</td><td>$68,686.02</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>510, avenue de Villiers<br>Orleans, Loiret 45000</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71821</a></td><td>Bike Goods </td><td>PO11977190694</td><td>May 25, 2007</td><td>$5,904.88</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Gary</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>254075 Biscayne Blvd.<br>North Miami Beach, Florida 33162</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71822</a></td><td>Popular Bike Lines</td><td>PO11774139099</td><td>Dec 19, 2007</td><td>$31,191.60</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Level 7<br>80 Arthur Street<br>Newcastle, New South Wales 2300</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71823</a></td><td>Enterprise Center</td><td>PO11310159994</td><td>Sep 7, 2007</td><td>$2,818.81</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Kurfürstenstr 574<br>München, Hessen 80074</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71824</a></td><td>Outdoor Equipment Store</td><td>PO11455162600</td><td>Oct 29, 2007</td><td>$115,117.41</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>6 Cotton Road<br>Nashua, New Hampshire 03064</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71825</a></td><td>One Bike Company</td><td>PO11165197222</td><td>Dec 28, 2007</td><td>$4,824.62</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Shanay</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>5 place Ville-Marie<br>Montreal, Quebec H1Y 2H7</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71826</a></td><td>Rodeway Bike Store</td><td>PO11397155355</td><td>Oct 29, 2007</td><td>$40,083.06</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Winterfeldtstr 5557<br>Kreditorenbuchhaltung<br>Münster, Saarland 48001</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71827</a></td><td>Metal Processing Company</td><td>PO11107195325</td><td>Aug 22, 2007</td><td>$9,247.52</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>770 Notre Datme Quest Bureau 800<br>Montreal, Quebec H1Y 2H7</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71828</a></td><td>Grand Industries</td><td>PO11194153355</td><td>Aug 10, 2007</td><td>$52,553.87</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>6333 Cote Vertu<br>Montreal, Quebec H1Y 2H7</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71829</a></td><td>Family Cycle Store</td><td>PO10962123279</td><td>Jul 16, 2007</td><td>$40,095.88</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: James</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>660 Saint-Jacques, Bureau 400<br>Montreal, Quebec H1Y 2H8</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71830</a></td><td>Petroleum Products Distributors</td><td>PO10875112195</td><td>Nov 8, 2007</td><td>$55,088.00</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>20225 Lansing Ave<br>Montreal, Quebec H1Y 2H7</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71831</a></td><td>Tachometers and Accessories</td><td>PO10295111084</td><td>Aug 8, 2007</td><td>$2,228.06</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Wymbush<br>Milton Keynes, England MK8 8DF</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71832</a></td><td>Closest Bicycle Store</td><td>PO10353140756</td><td>Sep 3, 2007</td><td>$39,531.61</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Garamonde Drive, Wymbush<br>PO Box 4023<br>Milton Keynes, England MK8 8ZD</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71833</a></td><td>Another Bicycle Company</td><td>PO10411123072</td><td>Jan 26, 2008</td><td>$70,377.54</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Stanley</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>567 Sw Mcloughlin Blvd<br>Milwaukie, Oregon 97222</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71834</a></td><td>Rustic Bike Store</td><td>PO377116268</td><td>Feb 22, 2008</td><td>$2,310.51</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Buergermeister-ulrich-str 3000<br>Buchhaltung<br>Augsburg, Bayern 86150</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71835</a></td><td>Running and Cycling Gear</td><td>PO870120974</td><td>Jun 13, 2007</td><td>$71,605.92</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>No. 60 Bellis Fair Parkway<br>Bellingham, Washington 98225</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71836</a></td><td>Safe Cycles Shop</td><td>PO841118259</td><td>Sep 13, 2007</td><td>$90,216.85</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>2681 Eagle Peak<br>Bellevue, Washington 98004</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71837</a></td><td>Riders Company</td><td>PO1624180133</td><td>Aug 24, 2007</td><td>$39,989.36</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Kim</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Tanger Factory<br>Branch, Minnesota 55056</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71838</a></td><td>Cycles Sales and Repair</td><td>PO1305123041</td><td>Sep 7, 2007</td><td>$15,165.23</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>3387, rue Marbeuf<br>Bobigny, Seine Saint Denis 93000</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71839</a></td><td>Front Runner Bikes</td><td>PO1537119063</td><td>Jan 26, 2008</td><td>$75,173.33</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>DeSouth Square<br>Bradenton, Florida 34205</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71840</a></td><td>Community Department Stores</td><td>PO1450191043</td><td>Oct 2, 2007</td><td>$1,234.39</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>3639, rue des Grands Champs<br>Boulogne-sur-Mer, Pas de Calais 62200</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71841</a></td><td>Rural Cycle Emporium</td><td>PO1798133189</td><td>Nov 23, 2007</td><td>$112,758.77</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Kathleen</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>6388 Lake City Way<br>Burnaby, British Columbia V5A 3A6</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71842</a></td><td>Price-Cutter Discount Bikes</td><td>PO1740169151</td><td>Nov 22, 2007</td><td>$12.91</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>6700 Boul Taschereau<br>Brossard, Quebec J4Z 1C5</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71843</a></td><td>Future Bikes</td><td>PO2001122796</td><td>Jun 24, 2007</td><td>$7,775.72</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>67255 - 8th Street N.E., Suite 350<br>Calgary, Alberta T2P 2G8</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71844</a></td><td>Sales and Supply Company</td><td>PO2813198985</td><td>Jun 12, 2007</td><td>$48,077.41</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Corporate Ofc A/p<br>123 Fourth Ave<br>Chantilly, Virginia 20151</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71845</a></td><td>Trailblazing Sports</td><td>PO2697119362</td><td>Mar 4, 2008</td><td>$45,992.37</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Frank</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>251340 E. South St.<br>Cerritos, California 90703</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71846</a></td><td>Sports Store</td><td>PO2378131604</td><td>Jul 2, 2007</td><td>$2,711.41</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Internet House, 3399 Science Park<br>Cambridge, England CB4 4BZ</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71847</a></td><td>Camping and Sports Store</td><td>PO18502143784</td><td>Jul 15, 2007</td><td>$119,981.15</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>400-25155 West Pender St<br>Vancouver, British Columbia V7L 4J4</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71848</a></td><td>Locks Company</td><td>PO18763153352</td><td>Nov 9, 2007</td><td>$16,667.88</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>70259 West Sunnyview Ave<br>Visalia, California 93291</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71849</a></td><td>Principal Bike Company</td><td>PO18125130930</td><td>Jan 18, 2008</td><td>$25,746.16</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Alvaro</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Mountain Square<br>Upland, California 91786</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71850</a></td><td>Quitting Business Distributors</td><td>PO18241134627</td><td>Aug 28, 2007</td><td>$10,492.47</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>University Plaza<br>Tampa, Florida 33602</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71851</a></td><td>Rapid Bikes</td><td>PO18299133687</td><td>Jun 17, 2007</td><td>$51,104.88</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>992 St Clair Ave East<br>Toronto, Ontario M4B 1V7</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71852</a></td><td>Painters Bicycle Specialists</td><td>PO20213171866</td><td>Mar 24, 2008</td><td>$10,406.62</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>9975 Union St.<br>Waterbury, Connecticut 06710</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71853</a></td><td>Famous Bike Shop</td><td>PO18531164420</td><td>May 3, 2007</td><td>$4,578.20</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Jim</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>999 West Georgia St.<br>Vancouver, Ontario V5T 1Y9</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71854</a></td><td>Helpful Sales and Repair Service </td><td>PO16385143469</td><td>Nov 11, 2007</td><td>$36,819.69</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Licensing Account<br>Seaford, Victoria 3198</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71855</a></td><td>Self-Contained Cycle Parts Company</td><td>PO18589189353</td><td>Jun 23, 2007</td><td>$429.62</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>12, rue des Grands Champs<br>Verrieres Le Buisson, Essonne 91370</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71856</a></td><td>Transport Bikes</td><td>PO16530177647</td><td>Nov 18, 2007</td><td>$665.43</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>25130 South State Street<br>Sandy, Utah 84070</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71857</a></td><td>First Cycle Store</td><td>PO16269151631</td><td>Jan 4, 2008</td><td>$37,400.41</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Mike</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>25250 N 90th St<br>Scottsdale, Arizona 85257</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71858</a></td><td>Thrilling Bike Tours</td><td>PO16153112278</td><td>Oct 6, 2007</td><td>$15,275.20</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>4660 Rodeo Road<br>Santa Fe, New Mexico 87501</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71859</a></td><td>Bike World</td><td>PO16182112142</td><td>Apr 11, 2007</td><td>$8,654.14</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>60025 Bollinger Canyon Road<br>San Ramon, California 94583</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71860</a></td><td>Vinyl and Plastic Goods Corporation</td><td>PO17835163979</td><td>Feb 20, 2008</td><td>$3,651.79</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>No. 25800-130 King Street West<br>Toronto, Ontario M4B 1V5</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71861</a></td><td>Two Bike Shops</td><td>PO14152156429</td><td>Nov 30, 2007</td><td>$2,430.32</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Jim</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>35525-9th Street Sw<br>Puyallup, Washington 98371</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71862</a></td><td>Fad Outlet</td><td>PO14065190039</td><td>Feb 19, 2008</td><td>$1,622.62</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>2550 Ne Sandy Blvd<br>Portland, Oregon 97205</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71863</a></td><td>Sports Products Store</td><td>PO16124166561</td><td>Apr 30, 2007</td><td>$3,673.32</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Po Box 252525<br>Santa Ana, California 92701</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71864</a></td><td>Good Bike Shop</td><td>PO14268188903</td><td>Oct 9, 2007</td><td>$37,623.76</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>99433 S. Greenbay Rd.<br>Racine, Wisconsin 53182</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71865</a></td><td>Neighborhood Bicycle Storehouse</td><td>PO15109136609</td><td>May 30, 2007</td><td>$290.23</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Cecilia</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>69, boulevard Tremblay<br>Roncq, Nord 59223</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71866</a></td><td>Exchange Parts Inc.</td><td>PO14297151936</td><td>Jan 27, 2008</td><td>$43,277.65</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>7700 Green Road<br>Raleigh, North Carolina 27603</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71867</a></td><td>Vigorous Sports Store</td><td>PO13050111529</td><td>Jul 29, 2007</td><td>$1,170.54</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Banbury<br>Oxon, England OX16 8RS</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71868</a></td><td>Cycle Merchants</td><td>PO14210134527</td><td>Aug 15, 2007</td><td>$1,932.67</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>575 Rue St Amable<br>Quebec, Quebec G1R</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71869</a></td><td>Certified Sports Supply</td><td>PO14877155420</td><td>Feb 21, 2008</td><td>$143.50</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Gabriele</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>250551 Shellbridge Way<br>Richmond, British Columbia V6B 3P7</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71870</a></td><td>Accessories Network</td><td>PO13195134898</td><td>Feb 1, 2008</td><td>$1,903.38</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>699bis, rue des Peupliers<br>Paris, Seine (Paris) 75008</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71871</a></td><td>Remote Bicycle Specialists</td><td>PO14239120760</td><td>Aug 10, 2007</td><td>$2,168.53</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>No. 2000-25080 Beaver Hall Hill<br>Quebec, Quebec G1R</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71872</a></td><td>First Center</td><td>PO13137112099</td><td>Jan 2, 2008</td><td>$215.91</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>22, rue Lafayette<br>Pantin, Seine Saint Denis 93500</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71873</a></td><td>Incomparable Bicycle Store</td><td>PO12325121185</td><td>Jul 5, 2007</td><td>$5,941.29</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Faith</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>99 Edgewater Drive<br>Norwood, Massachusetts 02062</div></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
<h1>HTML</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><table class="tablesorter">
|
||||
<colgroup>
|
||||
<col width="85" />
|
||||
<col width="250" />
|
||||
<col width="100" />
|
||||
<col width="90" />
|
||||
<col width="70" />
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Order #</th>
|
||||
<th>Customer</th>
|
||||
<th>PO</th>
|
||||
<th>Date</th>
|
||||
<th>Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td rowspan="2"> <!-- rowspan="2" makes the table look nicer -->
|
||||
<a href="#" class="toggle">SO71774</a> <!-- link to toggle view of the child row -->
|
||||
</td>
|
||||
<td>Good Toys</td>
|
||||
<td>PO348186287</td>
|
||||
<td>Jul 20, 2007</td>
|
||||
<td>$972.78</td>
|
||||
</tr>
|
||||
<tr class="tablesorter-childRow">
|
||||
<td colspan="4">
|
||||
<div class="bold">Shipping Address</div>
|
||||
<div>99700 Bell Road<br>Auburn, California 95603</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="2"> <!-- rowspan="2" makes the table look nicer -->
|
||||
<a href="#" class="toggle">SO71775</a> <!-- link to toggle view of the child row -->
|
||||
</td>
|
||||
<td>Cycle Clearance</td>
|
||||
<td>PO58159451</td>
|
||||
<td>May 6, 2007</td>
|
||||
<td>$2,313.13</td>
|
||||
</tr>
|
||||
<tr class="tablesorter-childRow">
|
||||
<td colspan="4">
|
||||
<div class="bold">Shipping Address</div>
|
||||
<div>2255 254th Avenue Se<br>Albany, Oregon 97321</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- View page source for complete HTML markup -->
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div id="pager" class="pager">
|
||||
<form>
|
||||
<input type="button" value="&lt;&lt;" class="first" />
|
||||
<input type="button" value="&lt;" class="prev" />
|
||||
<input type="text" class="pagedisplay"/>
|
||||
<input type="button" value="&gt;" class="next" />
|
||||
<input type="button" value="&gt;&gt;" class="last" />
|
||||
<select class="pagesize">
|
||||
<option selected="selected" value="10">10</option>
|
||||
<option value="20">20</option>
|
||||
<option value="30">30</option>
|
||||
<option value="40">40</option>
|
||||
</select>
|
||||
</form>
|
||||
</div></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-option-sort-order.html">Set an initial sorting order direction ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
448
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-child-rows.html
Executable file
448
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-child-rows.html
Executable file
@@ -0,0 +1,448 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Child Rows</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>
|
||||
|
||||
<!-- Tablesorter: optional -->
|
||||
<script src="../addons/pager/jquery.tablesorter.pager.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
// hide child rows
|
||||
$('.tablesorter-childRow td').hide();
|
||||
|
||||
$(".tablesorter")
|
||||
.tablesorter({
|
||||
theme : 'blue',
|
||||
// this is the default setting
|
||||
cssChildRow: "tablesorter-childRow"
|
||||
})
|
||||
.tablesorterPager({
|
||||
container: $("#pager"),
|
||||
positionFixed: false
|
||||
});
|
||||
/* no longer needed!
|
||||
.bind('pagerChange', function(){
|
||||
// hide child rows after pager update
|
||||
$('.tablesorter-childRow td').hide();
|
||||
});
|
||||
*/
|
||||
|
||||
// Toggle child row content (td), not hiding the row since we are using rowspan
|
||||
// Using delegate because the pager plugin rebuilds the table after each page change
|
||||
// "delegate" works in jQuery 1.4.2+; use "live" back to v1.3; for older jQuery - SOL
|
||||
$('.tablesorter').delegate('.toggle', 'click' ,function(){
|
||||
|
||||
// use "nextUntil" to toggle multiple child rows
|
||||
// toggle table cells instead of the row
|
||||
$(this).closest('tr').nextUntil('tr:not(.tablesorter-childRow)').find('td').toggle();
|
||||
// in v2.5.12, the parent row now has the class tablesorter-hasChildRow
|
||||
// so you can use this code as well
|
||||
// $(this).closest('tr').nextUntil('tr.tablesorter-hasChildRow').find('td').toggle();
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Working with Child Rows</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>Click the link in the Order # column to reveal the hidden child row cells
|
||||
(<a href="http://www.pengoworks.com/workshop/jquery/tablesorter/tablesorter.htm">original demo</a>).</li>
|
||||
<li>This option is available in the original plugin.</li>
|
||||
<li>This demo had the default child row class name changed from "expand-child" to "tablesorter-childRow" in v2.4.</li>
|
||||
<li>As of <span class="version updated">v2.15.12</span>,
|
||||
<ul>
|
||||
<li>Parents of child rows now have a <code>tablesorter-hasChildRow</code> class name added.</li>
|
||||
<li>The last row of each page now includes any child rows. For example, on page 1, click on the "SO71783" row link and the associated child row will now show, as it should</li>
|
||||
<li><span class="label label-info">NOTE!</span> A new css definition was added to every default theme; the "filtered" class name (set by the <code>filter_filteredRow</code> widgetOption) has been added to properly hide/show child rows when filtered. Please see the <a href="example-child-rows-filtered.html">Child Rows with Filter Widget</a> demo.</li>
|
||||
<li>The additional code to always hide child row cells on <code>pagerChange</code> is no longer needed.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<colgroup>
|
||||
<col width="85" />
|
||||
<col width="250" />
|
||||
<col width="100" />
|
||||
<col width="90" />
|
||||
<col width="70" />
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Order #</th>
|
||||
<th>Customer</th>
|
||||
<th>PO</th>
|
||||
<th>Date</th>
|
||||
<th>Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- First row expanded to reveal the layout -->
|
||||
<tr>
|
||||
<td rowspan="2"> <!-- rowspan="2" makes the table look nicer -->
|
||||
<a href="#" class="toggle">SO71774</a> <!-- link to toggle view of the child row -->
|
||||
</td>
|
||||
<td>Good Toys</td>
|
||||
<td>PO348186287</td>
|
||||
<td>Jul 20, 2007</td>
|
||||
<td>$972.78</td>
|
||||
</tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>99700 Bell Road<br>Auburn, California 95603</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71775</a></td><td>Cycle Clearance</td><td>PO58159451</td><td>May 6, 2007</td><td>$2,313.13</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>2255 254th Avenue Se<br>Albany, Oregon 97321</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71776</a></td><td>West Side Mart</td><td>PO19952192051</td><td>May 12, 2007</td><td>$87.09</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>251 The Metro Center<br>Wokingham, England RG41 1QW</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71777</a></td><td>Demand Distributors</td><td>PO20097113391</td><td>Apr 26, 2007</td><td>$1,267.82</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Judy</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>25102 Springwater<br>Wenatchee, Washington 98801</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71778</a></td><td>Purchase Mart</td><td>PO19894146890</td><td>Apr 18, 2007</td><td>$1,503.98</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Wrentham Village<br>Wrentham, Massachusetts 02093</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71779</a></td><td>Initial Bike Company</td><td>PO19633118218</td><td>Dec 20, 2007</td><td>$48,425.55</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>789 West Alameda<br>Westminster, Colorado 80030</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71780</a></td><td>Nearby Cycle Shop</td><td>PO19604173239</td><td>Aug 29, 2007</td><td>$42,452.65</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Burgess Hill<br>Edward Way<br>West Sussex, England RH15 9UD</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71781</a></td><td>Sundry Sporting Goods</td><td>PO19401117806</td><td>Mar 9, 2008</td><td>$29,262.41</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Rudolph</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>595 Burning Street<br>Vancouver, British Columbia V7L 4J4</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71782</a></td><td>Professional Sales and Service</td><td>PO19372114749</td><td>Jul 27, 2007</td><td>$43,962.79</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>57251 Serene Blvd<br>Van Nuys, California 91411</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71783</a></td><td>Eastside Department Store</td><td>PO19343113609</td><td>May 15, 2007</td><td>$92,663.56</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>9992 Whipple Rd<br>Union City, California 94587</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71784</a></td><td>Action Bicycle Specialists</td><td>PO19285135919</td><td>Nov 30, 2007</td><td>$119,960.82</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Warrington Ldc Unit 25/2<br>Woolston, England WA1 4SY</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71785</a></td><td>Metro Cycle Shop</td><td>PO19169115427</td><td>Feb 1, 2008</td><td>$39,805.12</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Henry</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>2507 Pacific Ave S<br>Tacoma, Washington 98403</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71786</a></td><td>Greater Bike Store</td><td>PO17690128583</td><td>Dec 7, 2007</td><td>$4,657.19</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>55 Lakeshore Blvd East<br>Toronto, Ontario M4B 1V6</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71787</a></td><td>Fun Toys and Bikes</td><td>PO18038111279</td><td>Jun 1, 2007</td><td>$38,211.11</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>6500 East Grant Road<br>Tucson, Arizona 85701</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71788</a></td><td>Reliable Retail Center</td><td>PO17951176595</td><td>Jul 10, 2007</td><td>$1,806.12</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>609 Evans Avenue<br>Toronto, Ontario M4B 1V4</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71789</a></td><td>Eastside Parts Shop</td><td>PO17516128941</td><td>May 22, 2007</td><td>$143.50</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Andrew</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>7000 Victoria Park Avenue<br>Toronto, Ontario M4B 1V4</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71790</a></td><td>Successful Sales Company</td><td>PO17487184338</td><td>Apr 15, 2007</td><td>$5,306.48</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>7009 Sw Hall Blvd.<br>Tigard, Oregon 97223</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71791</a></td><td>Convenient Sales and Service</td><td>PO17139191080</td><td>Nov 14, 2007</td><td>$26,692.85</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>950 Gateway Street<br>Springfield, Oregon 97477</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71792</a></td><td>Corner Bicycle Supply</td><td>PO17545115036</td><td>Mar 17, 2008</td><td>$67,683.32</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>2511 Baker Road<br>Toronto, Ontario M4B 1V7</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71793</a></td><td>Mountain Toy Store</td><td>PO17226152414</td><td>Sep 5, 2007</td><td>$1,943.93</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Marvin</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>First Colony Mall<br>Sugar Land, Texas 77478</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71794</a></td><td>Vigorous Exercise Company</td><td>PO17574111985</td><td>Dec 14, 2007</td><td>$87,770.74</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>9950 Ferrand Drive, 9th Floor<br>Toronto, Ontario M4B 1V4</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71795</a></td><td>Bike Part Wholesalers</td><td>PO17371184627</td><td>Feb 6, 2008</td><td>$41,224.10</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>254a Baker Street<br>Botany<br>Sydney, New South Wales 1002</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71796</a></td><td>Extreme Riding Supplies</td><td>PO17052159664</td><td>Jul 13, 2007</td><td>$63,686.27</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Riverside<br>Sherman Oaks, California 91403</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71797</a></td><td>Riding Cycles</td><td>PO16501134889</td><td>Dec 2, 2007</td><td>$86,222.81</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Jon</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Galashiels<br>Liverpool, England L4 4HB</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71798</a></td><td>Work and Play Association</td><td>PO16994135863</td><td>Jan 20, 2008</td><td>$40,048.63</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>2533 Eureka Rd.<br>Southgate, Michigan 48195</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71799</a></td><td>Metro Sports Equipment</td><td>PO15486196616</td><td>Oct 18, 2007</td><td>$23,080.67</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>6, rue des Pyrenees<br>Saint Ouen, Loir et Cher 41100</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71800</a></td><td>Quick Parts and Service</td><td>PO15544127760</td><td>Feb 19, 2008</td><td>$37,253.44</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>99954 Boul. Laurier, Local 060, Place<br>Sainte-Foy, Quebec G1W</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71801</a></td><td>Getaway Inn</td><td>PO15515173664</td><td>Mar 6, 2008</td><td>$47,720.54</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Min</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>54, avenue des Ternes<br>Saint Ouen, Loir et Cher 41100</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71802</a></td><td>Blue-Ribbon Bike Company</td><td>PO15457184141</td><td>Sep 22, 2007</td><td>$42,013.42</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>790 Shelbyville Road<br>Saint Matthews, Kentucky 40207</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71803</a></td><td>World of Bikes</td><td>PO15341174104</td><td>Mar 1, 2008</td><td>$43,964.97</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>660 Lindbergh<br>Saint Louis, Missouri 63103</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71804</a></td><td>Bikes for Two</td><td>PO14906114459</td><td>Aug 18, 2007</td><td>$2,431.21</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>63 West Beaver Creek<br>Richmond Hill, Ontario L4E 3M5</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71805</a></td><td>Nationwide Supply</td><td>PO14703194514</td><td>Jun 27, 2007</td><td>$76,535.55</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Pilar</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>4250 Concord Road<br>Rhodes, New South Wales 2138</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71806</a></td><td>Valley Toy Store</td><td>PO14790111844</td><td>Jun 2, 2007</td><td>$20,261.90</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>252851 Rowan Place<br>Richmond, British Columbia V6B 3P7</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71807</a></td><td>Courteous Bicycle Specialists</td><td>PO14935135211</td><td>Oct 28, 2007</td><td>$656.84</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>995 Crescent<br>Richmond Hill, Ontario L4E 3M5</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71808</a></td><td>Odometers and Accessories Company</td><td>PO14761198562</td><td>Oct 28, 2007</td><td>$42,231.51</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>253711 Mayfield Place, Unit 150<br>Richmond, British Columbia V6B 3P7</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71809</a></td><td>Fitness Bike Accessories</td><td>PO14645153239</td><td>Jan 12, 2008</td><td>$3,743.42</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: John</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Level 7<br>114 Albert Road<br>Rhodes, New South Wales 2138</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71810</a></td><td>Two-Seater Bikes</td><td>PO13804148315</td><td>May 27, 2007</td><td>$1,093.53</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>5700 Legacy Dr<br>Plano, Texas 75074</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71811</a></td><td>Racing Toys</td><td>PO13717180066</td><td>Feb 26, 2008</td><td>$3,493.04</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>9228 Via Del Sol<br>Phoenix, Arizona 85004</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71812</a></td><td>Fashionable Bikes and Accessories</td><td>PO13543115747</td><td>Apr 28, 2007</td><td>$35,146.04</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Sports Store At Park City<br>Park City, Utah 84098</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71813</a></td><td>Liquidation Sales</td><td>PO13630186295</td><td>Jan 17, 2008</td><td>$12,707.47</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Jenny</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>No. 6<br>Millenium Court<br>Perth, South Australia 6006</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71814</a></td><td>Our Sporting Goods Store</td><td>PO12818173864</td><td>May 31, 2007</td><td>$7,517.54</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>6030 Conroy Road<br>Ottawa, Ontario K4B 1S3</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71815</a></td><td>Thrifty Parts and Sales</td><td>PO13021155785</td><td>Jan 1, 2008</td><td>$1,261.44</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Oxnard Outlet<br>Oxnard, California 93030</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71816</a></td><td>Engineered Bike Systems</td><td>PO12992180445</td><td>Jul 29, 2007</td><td>$3,754.97</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>123 Camelia Avenue<br>Oxnard, California 93030</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71817</a></td><td>Home Town Bike Store</td><td>PO12905185178</td><td>May 21, 2007</td><td>$689.96</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Danielle</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>955 Green Valley Crescent<br>Ottawa, Ontario K4B 1S1</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71818</a></td><td>Utilitarian Sporting Goods</td><td>PO12470139718</td><td>Apr 25, 2007</td><td>$61,356.31</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>4635 S. Harrison Blvd.<br>Ogden, Utah 84401</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71819</a></td><td>Fabrikam Inc., West</td><td>PO12354153257</td><td>May 19, 2007</td><td>$41,746.15</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>46460 West Oaks Drive<br>Novi, Michigan 48375</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71820</a></td><td>Racing Sales and Service</td><td>PO12673129941</td><td>Apr 26, 2007</td><td>$68,686.02</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>510, avenue de Villiers<br>Orleans, Loiret 45000</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71821</a></td><td>Bike Goods </td><td>PO11977190694</td><td>May 25, 2007</td><td>$5,904.88</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Gary</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>254075 Biscayne Blvd.<br>North Miami Beach, Florida 33162</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71822</a></td><td>Popular Bike Lines</td><td>PO11774139099</td><td>Dec 19, 2007</td><td>$31,191.60</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Level 7<br>80 Arthur Street<br>Newcastle, New South Wales 2300</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71823</a></td><td>Enterprise Center</td><td>PO11310159994</td><td>Sep 7, 2007</td><td>$2,818.81</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Kurfürstenstr 574<br>München, Hessen 80074</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71824</a></td><td>Outdoor Equipment Store</td><td>PO11455162600</td><td>Oct 29, 2007</td><td>$115,117.41</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>6 Cotton Road<br>Nashua, New Hampshire 03064</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71825</a></td><td>One Bike Company</td><td>PO11165197222</td><td>Dec 28, 2007</td><td>$4,824.62</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Shanay</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>5 place Ville-Marie<br>Montreal, Quebec H1Y 2H7</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71826</a></td><td>Rodeway Bike Store</td><td>PO11397155355</td><td>Oct 29, 2007</td><td>$40,083.06</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Winterfeldtstr 5557<br>Kreditorenbuchhaltung<br>Münster, Saarland 48001</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71827</a></td><td>Metal Processing Company</td><td>PO11107195325</td><td>Aug 22, 2007</td><td>$9,247.52</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>770 Notre Datme Quest Bureau 800<br>Montreal, Quebec H1Y 2H7</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71828</a></td><td>Grand Industries</td><td>PO11194153355</td><td>Aug 10, 2007</td><td>$52,553.87</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>6333 Cote Vertu<br>Montreal, Quebec H1Y 2H7</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71829</a></td><td>Family Cycle Store</td><td>PO10962123279</td><td>Jul 16, 2007</td><td>$40,095.88</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: James</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>660 Saint-Jacques, Bureau 400<br>Montreal, Quebec H1Y 2H8</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71830</a></td><td>Petroleum Products Distributors</td><td>PO10875112195</td><td>Nov 8, 2007</td><td>$55,088.00</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>20225 Lansing Ave<br>Montreal, Quebec H1Y 2H7</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71831</a></td><td>Tachometers and Accessories</td><td>PO10295111084</td><td>Aug 8, 2007</td><td>$2,228.06</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Wymbush<br>Milton Keynes, England MK8 8DF</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71832</a></td><td>Closest Bicycle Store</td><td>PO10353140756</td><td>Sep 3, 2007</td><td>$39,531.61</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Garamonde Drive, Wymbush<br>PO Box 4023<br>Milton Keynes, England MK8 8ZD</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71833</a></td><td>Another Bicycle Company</td><td>PO10411123072</td><td>Jan 26, 2008</td><td>$70,377.54</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Stanley</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>567 Sw Mcloughlin Blvd<br>Milwaukie, Oregon 97222</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71834</a></td><td>Rustic Bike Store</td><td>PO377116268</td><td>Feb 22, 2008</td><td>$2,310.51</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Buergermeister-ulrich-str 3000<br>Buchhaltung<br>Augsburg, Bayern 86150</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71835</a></td><td>Running and Cycling Gear</td><td>PO870120974</td><td>Jun 13, 2007</td><td>$71,605.92</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>No. 60 Bellis Fair Parkway<br>Bellingham, Washington 98225</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71836</a></td><td>Safe Cycles Shop</td><td>PO841118259</td><td>Sep 13, 2007</td><td>$90,216.85</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>2681 Eagle Peak<br>Bellevue, Washington 98004</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71837</a></td><td>Riders Company</td><td>PO1624180133</td><td>Aug 24, 2007</td><td>$39,989.36</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Kim</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Tanger Factory<br>Branch, Minnesota 55056</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71838</a></td><td>Cycles Sales and Repair</td><td>PO1305123041</td><td>Sep 7, 2007</td><td>$15,165.23</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>3387, rue Marbeuf<br>Bobigny, Seine Saint Denis 93000</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71839</a></td><td>Front Runner Bikes</td><td>PO1537119063</td><td>Jan 26, 2008</td><td>$75,173.33</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>DeSouth Square<br>Bradenton, Florida 34205</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71840</a></td><td>Community Department Stores</td><td>PO1450191043</td><td>Oct 2, 2007</td><td>$1,234.39</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>3639, rue des Grands Champs<br>Boulogne-sur-Mer, Pas de Calais 62200</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71841</a></td><td>Rural Cycle Emporium</td><td>PO1798133189</td><td>Nov 23, 2007</td><td>$112,758.77</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Kathleen</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>6388 Lake City Way<br>Burnaby, British Columbia V5A 3A6</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71842</a></td><td>Price-Cutter Discount Bikes</td><td>PO1740169151</td><td>Nov 22, 2007</td><td>$12.91</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>6700 Boul Taschereau<br>Brossard, Quebec J4Z 1C5</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71843</a></td><td>Future Bikes</td><td>PO2001122796</td><td>Jun 24, 2007</td><td>$7,775.72</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>67255 - 8th Street N.E., Suite 350<br>Calgary, Alberta T2P 2G8</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71844</a></td><td>Sales and Supply Company</td><td>PO2813198985</td><td>Jun 12, 2007</td><td>$48,077.41</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Corporate Ofc A/p<br>123 Fourth Ave<br>Chantilly, Virginia 20151</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71845</a></td><td>Trailblazing Sports</td><td>PO2697119362</td><td>Mar 4, 2008</td><td>$45,992.37</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Frank</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>251340 E. South St.<br>Cerritos, California 90703</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71846</a></td><td>Sports Store</td><td>PO2378131604</td><td>Jul 2, 2007</td><td>$2,711.41</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Internet House, 3399 Science Park<br>Cambridge, England CB4 4BZ</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71847</a></td><td>Camping and Sports Store</td><td>PO18502143784</td><td>Jul 15, 2007</td><td>$119,981.15</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>400-25155 West Pender St<br>Vancouver, British Columbia V7L 4J4</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71848</a></td><td>Locks Company</td><td>PO18763153352</td><td>Nov 9, 2007</td><td>$16,667.88</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>70259 West Sunnyview Ave<br>Visalia, California 93291</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71849</a></td><td>Principal Bike Company</td><td>PO18125130930</td><td>Jan 18, 2008</td><td>$25,746.16</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Alvaro</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Mountain Square<br>Upland, California 91786</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71850</a></td><td>Quitting Business Distributors</td><td>PO18241134627</td><td>Aug 28, 2007</td><td>$10,492.47</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>University Plaza<br>Tampa, Florida 33602</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71851</a></td><td>Rapid Bikes</td><td>PO18299133687</td><td>Jun 17, 2007</td><td>$51,104.88</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>992 St Clair Ave East<br>Toronto, Ontario M4B 1V7</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71852</a></td><td>Painters Bicycle Specialists</td><td>PO20213171866</td><td>Mar 24, 2008</td><td>$10,406.62</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>9975 Union St.<br>Waterbury, Connecticut 06710</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71853</a></td><td>Famous Bike Shop</td><td>PO18531164420</td><td>May 3, 2007</td><td>$4,578.20</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Jim</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>999 West Georgia St.<br>Vancouver, Ontario V5T 1Y9</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71854</a></td><td>Helpful Sales and Repair Service </td><td>PO16385143469</td><td>Nov 11, 2007</td><td>$36,819.69</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Licensing Account<br>Seaford, Victoria 3198</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71855</a></td><td>Self-Contained Cycle Parts Company</td><td>PO18589189353</td><td>Jun 23, 2007</td><td>$429.62</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>12, rue des Grands Champs<br>Verrieres Le Buisson, Essonne 91370</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71856</a></td><td>Transport Bikes</td><td>PO16530177647</td><td>Nov 18, 2007</td><td>$665.43</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>25130 South State Street<br>Sandy, Utah 84070</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71857</a></td><td>First Cycle Store</td><td>PO16269151631</td><td>Jan 4, 2008</td><td>$37,400.41</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Mike</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>25250 N 90th St<br>Scottsdale, Arizona 85257</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71858</a></td><td>Thrilling Bike Tours</td><td>PO16153112278</td><td>Oct 6, 2007</td><td>$15,275.20</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>4660 Rodeo Road<br>Santa Fe, New Mexico 87501</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71859</a></td><td>Bike World</td><td>PO16182112142</td><td>Apr 11, 2007</td><td>$8,654.14</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>60025 Bollinger Canyon Road<br>San Ramon, California 94583</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71860</a></td><td>Vinyl and Plastic Goods Corporation</td><td>PO17835163979</td><td>Feb 20, 2008</td><td>$3,651.79</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>No. 25800-130 King Street West<br>Toronto, Ontario M4B 1V5</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71861</a></td><td>Two Bike Shops</td><td>PO14152156429</td><td>Nov 30, 2007</td><td>$2,430.32</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Jim</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>35525-9th Street Sw<br>Puyallup, Washington 98371</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71862</a></td><td>Fad Outlet</td><td>PO14065190039</td><td>Feb 19, 2008</td><td>$1,622.62</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>2550 Ne Sandy Blvd<br>Portland, Oregon 97205</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71863</a></td><td>Sports Products Store</td><td>PO16124166561</td><td>Apr 30, 2007</td><td>$3,673.32</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Po Box 252525<br>Santa Ana, California 92701</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71864</a></td><td>Good Bike Shop</td><td>PO14268188903</td><td>Oct 9, 2007</td><td>$37,623.76</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>99433 S. Greenbay Rd.<br>Racine, Wisconsin 53182</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71865</a></td><td>Neighborhood Bicycle Storehouse</td><td>PO15109136609</td><td>May 30, 2007</td><td>$290.23</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Cecilia</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>69, boulevard Tremblay<br>Roncq, Nord 59223</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71866</a></td><td>Exchange Parts Inc.</td><td>PO14297151936</td><td>Jan 27, 2008</td><td>$43,277.65</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>7700 Green Road<br>Raleigh, North Carolina 27603</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71867</a></td><td>Vigorous Sports Store</td><td>PO13050111529</td><td>Jul 29, 2007</td><td>$1,170.54</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Banbury<br>Oxon, England OX16 8RS</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71868</a></td><td>Cycle Merchants</td><td>PO14210134527</td><td>Aug 15, 2007</td><td>$1,932.67</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>575 Rue St Amable<br>Quebec, Quebec G1R</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71869</a></td><td>Certified Sports Supply</td><td>PO14877155420</td><td>Feb 21, 2008</td><td>$143.50</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Gabriele</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>250551 Shellbridge Way<br>Richmond, British Columbia V6B 3P7</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71870</a></td><td>Accessories Network</td><td>PO13195134898</td><td>Feb 1, 2008</td><td>$1,903.38</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>699bis, rue des Peupliers<br>Paris, Seine (Paris) 75008</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71871</a></td><td>Remote Bicycle Specialists</td><td>PO14239120760</td><td>Aug 10, 2007</td><td>$2,168.53</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>No. 2000-25080 Beaver Hall Hill<br>Quebec, Quebec G1R</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71872</a></td><td>First Center</td><td>PO13137112099</td><td>Jan 2, 2008</td><td>$215.91</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>22, rue Lafayette<br>Pantin, Seine Saint Denis 93500</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71873</a></td><td>Incomparable Bicycle Store</td><td>PO12325121185</td><td>Jul 5, 2007</td><td>$5,941.29</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Faith</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>99 Edgewater Drive<br>Norwood, Massachusetts 02062</div></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div id="pager" class="pager">
|
||||
<form>
|
||||
<input type="button" value="<<" class="first" />
|
||||
<input type="button" value="<" class="prev" />
|
||||
<input type="text" class="pagedisplay" readonly/>
|
||||
<input type="button" value=">" class="next" />
|
||||
<input type="button" value=">>" class="last" />
|
||||
<select class="pagesize">
|
||||
<option selected="selected" value="10">10</option>
|
||||
<option value="20">20</option>
|
||||
<option value="30">30</option>
|
||||
<option value="40">40</option>
|
||||
</select>
|
||||
</form>
|
||||
</div></div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
<h1>HTML</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><table class="tablesorter">
|
||||
<colgroup>
|
||||
<col width="85" />
|
||||
<col width="250" />
|
||||
<col width="100" />
|
||||
<col width="90" />
|
||||
<col width="70" />
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Order #</th>
|
||||
<th>Customer</th>
|
||||
<th>PO</th>
|
||||
<th>Date</th>
|
||||
<th>Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td rowspan="2"> <!-- rowspan="2" makes the table look nicer -->
|
||||
<a href="#" class="toggle">SO71774</a> <!-- link to toggle view of the child row -->
|
||||
</td>
|
||||
<td>Good Toys</td>
|
||||
<td>PO348186287</td>
|
||||
<td>Jul 20, 2007</td>
|
||||
<td>$972.78</td>
|
||||
</tr>
|
||||
<tr class="tablesorter-childRow">
|
||||
<td colspan="4">
|
||||
<div class="bold">Shipping Address</div>
|
||||
<div>99700 Bell Road<br>Auburn, California 95603</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="2"> <!-- rowspan="2" makes the table look nicer -->
|
||||
<a href="#" class="toggle">SO71775</a> <!-- link to toggle view of the child row -->
|
||||
</td>
|
||||
<td>Cycle Clearance</td>
|
||||
<td>PO58159451</td>
|
||||
<td>May 6, 2007</td>
|
||||
<td>$2,313.13</td>
|
||||
</tr>
|
||||
<tr class="tablesorter-childRow">
|
||||
<td colspan="4">
|
||||
<div class="bold">Shipping Address</div>
|
||||
<div>2255 254th Avenue Se<br>Albany, Oregon 97321</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- View page source for complete HTML markup -->
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div id="pager" class="pager">
|
||||
<form>
|
||||
<input type="button" value="&lt;&lt;" class="first" />
|
||||
<input type="button" value="&lt;" class="prev" />
|
||||
<input type="text" class="pagedisplay"/>
|
||||
<input type="button" value="&gt;" class="next" />
|
||||
<input type="button" value="&gt;&gt;" class="last" />
|
||||
<select class="pagesize">
|
||||
<option selected="selected" value="10">10</option>
|
||||
<option value="20">20</option>
|
||||
<option value="30">30</option>
|
||||
<option value="40">40</option>
|
||||
</select>
|
||||
</form>
|
||||
</div></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-child-rows-filtered.html">Child Rows with Filter Widget ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,97 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Initializing tablesorter on an empty table</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 id="js">$(function() {
|
||||
|
||||
// Set up empty table with second and first columns pre-sorted
|
||||
$("table").tablesorter({ theme : 'blue', sortList: [[2,1],[0,0]] });
|
||||
|
||||
$("#append").click(function() {
|
||||
|
||||
// add some html
|
||||
var html = "<tr><td>Peter</td><td>Parker</td><td>28</td><td>$9.99</td><td>20%</td><td>Jul 6, 2006 8:14 AM</td></tr>" +
|
||||
"<tr><td>John</td><td>Hood</td><td>33</td><td>$19.99</td><td>25%</td><td>Dec 10, 2002 5:14 AM</td></tr><tr><td>Clark</td>" +
|
||||
"<td>Kent</td><td>18</td><td>$15.89</td><td>44%</td><td>Jan 12, 2003 11:14 AM</td></tr>" +
|
||||
"<tr><td>Bruce</td><td>Almighty</td><td>45</td><td>$153.19</td><td>44%</td><td>Jan 18, 2001 9:12 AM</td></tr>";
|
||||
|
||||
// append new html to table body
|
||||
$("table tbody").append(html);
|
||||
|
||||
// let the plugin know that we made a update, then the plugin will
|
||||
// automatically sort the table based on the header settings
|
||||
$("table").trigger("update");
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Initializing tablesorter on an empty table</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> The presorting of an empty table and automatic sorting of appended data was added in version 2.0.14 (not part of the original plugin).
|
||||
</p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<a href="#" id="append">Append new table data</a>
|
||||
</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 class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-ajax.html">Appending table data with ajax ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,117 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Extending default options</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 id="js">$(function() {
|
||||
|
||||
// extend the default setting to always include the zebra widget.
|
||||
$.tablesorter.defaults.widgets = ['zebra'];
|
||||
|
||||
// extend the default setting to always sort on the first column
|
||||
$.tablesorter.defaults.sortList = [[0,0]];
|
||||
|
||||
// call the tablesorter plugin
|
||||
$("table").tablesorter({ theme : 'blue' });
|
||||
|
||||
}); </script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Extending default options</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>$153.19</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</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-debug.html">Enabling debug mode ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -0,0 +1,100 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Sorting Across Multiple Columns</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 id="js">$(function() {
|
||||
$("table").tablesorter({ theme : 'blue' });
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Sorting Across Multiple Columns</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>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>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="5">Sort All Columns</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th rowspan="2">Index</th>
|
||||
<th colspan="2">First Group</th>
|
||||
<th colspan="2">Second Group</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Natural Sort</th>
|
||||
<th>Numeric</th>
|
||||
<th id="test">Animals</th>
|
||||
<th >Url</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Index</th>
|
||||
<th>Natural Sort</th>
|
||||
<th>Numeric</th>
|
||||
<th id="test">Animals</th>
|
||||
<th >Url</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr><td>0</td><td>abc 123</td><td>10</td><td>Koala</td><td>http://www.google.com</td></tr>
|
||||
<tr><td>1</td><td>abc 1</td><td>234</td><td>Ox</td><td>http://www.yahoo.com</td></tr>
|
||||
<tr><td>2</td><td>abc 9</td><td>10</td><td>Girafee</td><td>http://www.facebook.com</td></tr>
|
||||
<tr><td>3</td><td>zyx 24</td><td>767</td><td>Bison</td><td>http://www.whitehouse.gov/</td></tr>
|
||||
<tr><td>4</td><td>abc 11</td><td>3</td><td>Chimp</td><td>http://www.ucla.edu/</td></tr>
|
||||
<tr><td>5</td><td>abc 2</td><td>56</td><td>Elephant</td><td>http://www.wikipedia.org/</td></tr>
|
||||
<tr><td>6</td><td>abc 9</td><td>155</td><td>Lion</td><td>http://www.nytimes.com/</td></tr>
|
||||
<tr><td>7</td><td>ABC 10</td><td>87</td><td>Zebra</td><td>http://www.google.com</td></tr>
|
||||
<tr><td>8</td><td>zyx 1</td><td>999</td><td>Koala</td><td>http://www.mit.edu/</td></tr>
|
||||
<tr><td>9</td><td>zyx 12</td><td>0</td><td>Llama</td><td>http://www.nasa.gov/</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-show-processing.html">showProcessing & Filter events ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
169
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-locale-sort.html
Executable file
169
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-locale-sort.html
Executable file
@@ -0,0 +1,169 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Sorting Accented Characters</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 id="js">$(function() {
|
||||
|
||||
// these default equivalents were obtained from a table of equivalents
|
||||
// provided by sugar.js sorting alogrithms: http://sugarjs.com/sorting
|
||||
/*
|
||||
$.tablesorter.characterEquivalents = {
|
||||
"a" : "\u00e1\u00e0\u00e2\u00e3\u00e4", // áàâãä
|
||||
"A" : "\u00c1\u00c0\u00c2\u00c3\u00c4", // ÁÀÂÃÄ
|
||||
"c" : "\u00e7", // ç
|
||||
"C" : "\u00c7", // Ç
|
||||
"e" : "\u00e9\u00e8\u00ea\u00eb", // éèêë
|
||||
"E" : "\u00c9\u00c8\u00ca\u00cb", // ÉÈÊË
|
||||
"i" : "\u00ed\u00ec\u0130\u00ee\u00ef", // íìIîï
|
||||
"I" : "\u00cd\u00cc\u0130\u00ce\u00cf", // ÍÌIÎÏ
|
||||
"o" : "\u00f3\u00f2\u00f4\u00f5\u00f6", // óòôõö
|
||||
"O" : "\u00d3\u00d2\u00d4\u00d5\u00d6", // ÓÒÔÕÖ
|
||||
"S" : "\u00df", // ß
|
||||
"u" : "\u00fa\u00f9\u00fb\u00fc", // úùûü
|
||||
"U" : "\u00da\u00d9\u00db\u00dc" // ÚÙÛÜ
|
||||
};
|
||||
*/
|
||||
// modify the above defaults as follows
|
||||
$.extend( $.tablesorter.characterEquivalents, {
|
||||
"ae" : "\u00e6", // expanding characters æ Æ
|
||||
"AE" : "\u00c6",
|
||||
"oe" : "\u00f6\u0153", // œ Œ
|
||||
"OE" : "\u00d6\u0152",
|
||||
"d" : "\u00f0", // Eth (ð Ð)
|
||||
"D" : "\u00d0",
|
||||
"o" : "\u00f3\u00f2\u00f4\u00f5", // remove ö because it's in the oe now
|
||||
"O" : "\u00d3\u00d2\u00d4\u00d5" // remove Ö because it's in the OE now
|
||||
});
|
||||
|
||||
$("table").tablesorter({
|
||||
theme : 'blue',
|
||||
// Enable use of the characterEquivalents reference
|
||||
sortLocaleCompare : true,
|
||||
// if false, upper case sorts BEFORE lower case
|
||||
ignoreCase : true
|
||||
});
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Sorting Accented Characters</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>Accented characters will get replaced by their character equivalent when the <code>sortLocaleCompare</code> option is <code>true</code>.</li>
|
||||
<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>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Account #</th>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Location</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>a1a10</td>
|
||||
<td>AnderE</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>Béchar</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>a1a2</td>
|
||||
<td>Ändere</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>Bebington</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A1a1</td>
|
||||
<td>Andére</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>Berlin</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A2b2</td>
|
||||
<td>CotÉ</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>Beckum</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A1d2</td>
|
||||
<td>CÔte</td>
|
||||
<td>Evans</td>
|
||||
<td>56</td>
|
||||
<td>Curaçao</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>a2b11</td>
|
||||
<td>CÔtÉ</td>
|
||||
<td>Clark</td>
|
||||
<td>44</td>
|
||||
<td>Béjaïa</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A2b1</td>
|
||||
<td>Çote</td>
|
||||
<td>Presley</td>
|
||||
<td>24</td>
|
||||
<td>Bekkevoort</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A1b0</td>
|
||||
<td>Andéré</td>
|
||||
<td>Carter</td>
|
||||
<td>40</td>
|
||||
<td>Bègles</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-multiple-tbodies.html">Sorting with Multiple Tbodies ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
129
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-meta-headers.html
Executable file
129
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-meta-headers.html
Executable file
@@ -0,0 +1,129 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Disable headers using metadata</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>
|
||||
|
||||
<!-- Tablesorter: optional -->
|
||||
<script src="../addons/pager/jquery.tablesorter.pager.js"></script>
|
||||
<script src="../js/jquery.metadata.js"></script>
|
||||
|
||||
<script>
|
||||
// not sure why this is here...
|
||||
window.tableFile="table-metadata-disable.html";
|
||||
</script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
// call the tablesorter plugin, the magic happens in the markup
|
||||
$("table").tablesorter({ theme : 'blue' });
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Disable headers using metadata</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="{sorter: false}">First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th class="{sorter: false}">Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>$153.19</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Page Header</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<!-- Tablesorter: optional (but required for this demo) -->
|
||||
<script src="../js/jquery.metadata.js"></script></pre>
|
||||
</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-meta-parsers.html">Setting column parser using metadata ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
121
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-meta-parsers.html
Executable file
121
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-meta-parsers.html
Executable file
@@ -0,0 +1,121 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Setting column parser using metadata</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="../js/jquery.metadata.js"></script>
|
||||
<script src="../addons/pager/jquery.tablesorter.pager.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
// call the tablesorter plugin, the magic happens in the markup
|
||||
$("table").tablesorter({ theme : 'blue' });
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Setting column parser using metadata</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="{sorter: 'text'}">First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th class="{sorter: 'percent'}">Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>$153.19</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Page Header</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<!-- Tablesorter: optional (but required for this demo) -->
|
||||
<script src="../js/jquery.metadata.js"></script></pre>
|
||||
</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 />
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
123
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-meta-sort-list.html
Executable file
123
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-meta-sort-list.html
Executable file
@@ -0,0 +1,123 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Setting initial sorting order with metadata</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>
|
||||
|
||||
<!-- Tablesorter: optional (but required for this demo) -->
|
||||
<script src="../js/jquery.metadata.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
// call the tablesorter plugin, the magic happens in the markup
|
||||
$("table").tablesorter({ theme : 'blue' });
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Setting initial sorting order with metadata</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><!-- sortlist is appended to the table using the class attribute and is picked up by metadata plugin -->
|
||||
<table class="tablesorter {sortlist: [[0,0],[4,0]]}">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>$153.19</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Page Header</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<!-- Tablesorter: optional (but required for this demo) -->
|
||||
<script src="../js/jquery.metadata.js"></script></pre>
|
||||
</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-meta-headers.html">Disable header using metadata ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,156 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - resetting the entire table sort</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-1.4.4.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 id="js">$(function() {
|
||||
// call the tablesorter plugin
|
||||
$("table").tablesorter({
|
||||
theme : 'blue',
|
||||
sortList: [ [0,0],[1,0],[2,0] ]
|
||||
});
|
||||
|
||||
$('button').click(function(){
|
||||
$('table').trigger('sortReset');
|
||||
return false;
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Resetting the entire table sort</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>Click on the reset button to reset the sort. The button can be used at any time.</li>
|
||||
<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>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<button type="button">Reset</button>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Account #</th>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Diff</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>A43</td>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>9.99</td>
|
||||
<td>20.3%</td>
|
||||
<td>+3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A255</td>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>19.99</td>
|
||||
<td>25.1%</td>
|
||||
<td>-7</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A33</td>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>2.89</td>
|
||||
<td>44.2%</td>
|
||||
<td>-15</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A1</td>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>153.19</td>
|
||||
<td>44%</td>
|
||||
<td>+19</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A102</td>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>56</td>
|
||||
<td>$153.19</td>
|
||||
<td>23%</td>
|
||||
<td>+9</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A256</td>
|
||||
<td>John</td>
|
||||
<td>Clark</td>
|
||||
<td>44</td>
|
||||
<td>($19.89)</td>
|
||||
<td>25.1%</td>
|
||||
<td>(5)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A23</td>
|
||||
<td>Elvis</td>
|
||||
<td>Presley</td>
|
||||
<td>24</td>
|
||||
<td>($9.99)</td>
|
||||
<td>50%</td>
|
||||
<td>(22)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A10</td>
|
||||
<td>Frank</td>
|
||||
<td>Carter</td>
|
||||
<td>40</td>
|
||||
<td>-12.99</td>
|
||||
<td>20%</td>
|
||||
<td>(6)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-option-selectorsort.html">Using selectorSort ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,109 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Sorting with Multiple Tbodies</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>
|
||||
|
||||
<!-- Tablesorter: widgets (optional) -->
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
$("table").tablesorter({
|
||||
theme : 'blue',
|
||||
cssInfoBlock : "tablesorter-no-sort",
|
||||
widgets: [ 'zebra', 'stickyHeaders' ]
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Sorting with Multiple Tbodies</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="sortable">
|
||||
<thead>
|
||||
<tr><th>Name</th><th>A-head</th><th>B-head</th><th>C-head</th></tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr><th>Name</th><th>A-foot</th><th>B-foot</th><th>C-foot</th></tr>
|
||||
</tfoot>
|
||||
|
||||
<!-- add "tablesorter-no-sort" class (changed by cssInfoBlock option) to skip sorting of this tbody -->
|
||||
<tbody class="tablesorter-no-sort">
|
||||
<tr><th colspan="4">This row is within the first tbody set as an info block - it is not sorted!</th></tr>
|
||||
</tbody>
|
||||
|
||||
<tbody>
|
||||
<tr><td>DDD</td><td>r1c1</td><td>r1c2</td><td>r1c3</td></tr>
|
||||
<tr><td>AAA</td><td>r2c1</td><td>r2c2</td><td>r2c3</td></tr>
|
||||
<tr><td>CCC</td><td>r3c1</td><td>r3c2</td><td>r3c3</td></tr>
|
||||
<tr><td>BBB</td><td>r4c1</td><td>r4c2</td><td>r4c3</td></tr>
|
||||
</tbody>
|
||||
|
||||
<tbody class="tablesorter-no-sort">
|
||||
<tr><th colspan="4">summary info for the first group</th></tr>
|
||||
<tr><th colspan="4">Another row referring to the first group</th></tr>
|
||||
</tbody>
|
||||
|
||||
<tbody>
|
||||
<tr><td>Zorro</td><td>r5c1</td><td>r5c2</td><td>r5c3</td></tr>
|
||||
<tr><td>Caleb</td><td>r6c1</td><td>r6c2</td><td>r6c3</td></tr>
|
||||
<tr><td>Momo</td><td>r7c1</td><td>r7c2</td><td>r7c3</td></tr>
|
||||
<tr><td>Wolfie</td><td>r8c1</td><td>r8c2</td><td>r8c3</td></tr>
|
||||
</tbody>
|
||||
|
||||
<tbody class="tablesorter-no-sort">
|
||||
<tr><th colspan="4">summary info for the second group</th></tr>
|
||||
</tbody>
|
||||
|
||||
<tbody>
|
||||
<tr><td>Ulysses</td><td>r9c1</td><td>r9c2</td><td>r9c3</td></tr>
|
||||
<tr><td>Penelope</td><td>r10c1</td><td>r10c2</td><td>r10c3</td></tr>
|
||||
<tr><td>Edvald</td><td>r11c1</td><td>r11c2</td><td>r11c3</td></tr>
|
||||
<tr><td>Jan</td><td>r12c1</td><td>r12c2</td><td>r12c3</td></tr>
|
||||
</tbody>
|
||||
|
||||
<tbody class="tablesorter-no-sort">
|
||||
<tr><th colspan="4">summary info for the last group</th></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-header-column-span.html">Sorting Across Multiple Columns ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,150 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Using a Custom Sort Script</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>
|
||||
|
||||
<!-- http://sugarjs.com/dates#comparing_dates -->
|
||||
<script src="js/sugar.min.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
// define sugar.js Icelandic sort order
|
||||
Array.AlphanumericSortOrder = 'AaÁáBbCcDdÐðEeÉéĘęFfGgHhIiÍíJjKkLlMmNnOoÓóPpQqRrSsTtUuÚúVvWwXxYyÝýZzÞþÆæÖö';
|
||||
Array.AlphanumericSortIgnoreCase = true;
|
||||
// see https://github.com/andrewplummer/Sugar/issues/382#issuecomment-41526957
|
||||
Array.AlphanumericSortEquivalents = {};
|
||||
|
||||
$("table").tablesorter({
|
||||
theme : 'blue',
|
||||
// table = table object; get config options from table.config
|
||||
// column is the column index (zero-based)
|
||||
ignoreCase : false,
|
||||
textSorter : {
|
||||
1 : Array.AlphanumericSort, // alphanumeric sort from sugar (http://sugarjs.com/arrays#sorting)
|
||||
// function parameters were previously (a, b, table, column) - *** THEY HAVE CHANGED!!! ***
|
||||
2 : function(a, b, direction, column, table){
|
||||
// this is the original sort method from tablesorter 2.0.3
|
||||
if (table.config.sortLocaleCompare) { return a.localeCompare(b); }
|
||||
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
|
||||
},
|
||||
// no need to set this as it is the default sorter
|
||||
// renamed v2.12 from $.tablesorter.sortText - performs natural sort
|
||||
3 : $.tablesorter.sortNatural,
|
||||
}
|
||||
});
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Using a Custom Sort Script</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>Modified the <code>textSorter</code> option to allow setting the sorter per column <span class="version">v2.12</span>:
|
||||
<ul>
|
||||
<li><span class="alert">*NOTE*</span> The <code>textSorter</code> function parameters have changed! It is now <code>function(a, b, direction, column, table)</code> (previously <code>function(a, b, table, column)</code>).</li>
|
||||
<li>The "Icelandic Alphabet" column is using the <a href="http://sugarjs.com/arrays#sorting">Sugar</a> library to sort:
|
||||
<ul>
|
||||
<li>Solved (4/28/2014)! <del>please note that at the time of this writing, there is an issue with it not sorting properly (<a href="https://github.com/andrewplummer/Sugar/issues/382">ref</a>)</del></li>
|
||||
<li>You can tell it is working properly when you sort the Icelandic Alphabet column and the numeric column numbers are sequential (<span class="lookhere">see row #37</span>).</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>The "Plain Text Sort" column is using a basic alphabetical sort (with localeCompare if set). Sort that column, then the last column to see how it differs from an alphanumeric sort.</li>
|
||||
<li>The sorting of empty cells still occurs regardless of the custom <code>textSorter</code> setting.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<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>
|
||||
|
||||
<h1>Demo</h1>
|
||||
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Numeric</th>
|
||||
<th>Icelandic Alphabet</th>
|
||||
<th>Plain Text Sort</th>
|
||||
<th>Alphanumeric Sort</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>01</td><td>A</td><td>a1a10</td><td>a1a10</td></tr>
|
||||
<tr><td>02</td><td>Á</td><td>a1a1</td><td>a1a1</td></tr>
|
||||
<tr><td>03</td><td>B</td><td>a2b2</td><td>a2b2</td></tr>
|
||||
<tr><td>04</td><td>C</td><td>a1a3</td><td>a1a3</td></tr>
|
||||
<tr><td>05</td><td>D</td><td>a2b10</td><td>a2b10</td></tr>
|
||||
<tr><td>06</td><td>Ð</td><td>a1a20</td><td>a1a20</td></tr>
|
||||
<tr><td>07</td><td>E</td><td>a1b04</td><td>a1b04</td></tr>
|
||||
<tr><td>08</td><td>É</td><td>a1a0</td><td>a1a0</td></tr>
|
||||
<tr><td>09</td><td>Ę</td><td>a1a4</td><td>a1a4</td></tr>
|
||||
<tr><td>10</td><td>F</td><td>a1a6</td><td>a1a6</td></tr>
|
||||
<tr><td>11</td><td>G</td><td>a1b5</td><td>a1b5</td></tr>
|
||||
<tr><td>12</td><td>H</td><td>a1b99</td><td>a1b99</td></tr>
|
||||
<tr><td>13</td><td>I</td><td>a2b5</td><td>a2b5</td></tr>
|
||||
<tr><td>14</td><td>Í</td><td>b10</td><td>b10</td></tr>
|
||||
<tr><td>15</td><td>J</td><td>b3</td><td>b3</td></tr>
|
||||
<tr><td>16</td><td>K</td><td>b5</td><td>b5</td></tr>
|
||||
<tr><td>17</td><td>L</td><td>b7</td><td>b7</td></tr>
|
||||
<tr><td>18</td><td>M</td><td>b9</td><td>b9</td></tr>
|
||||
<tr><td>19</td><td>N</td><td>b12</td><td>b12</td></tr>
|
||||
<tr><td>20</td><td>O</td><td>b30</td><td>b30</td></tr>
|
||||
<tr><td>21</td><td>Ó</td><td>b45</td><td>b45</td></tr>
|
||||
<tr><td>22</td><td>P</td><td>b78</td><td>b78</td></tr>
|
||||
<tr><td>23</td><td>Q</td><td>b67</td><td>b67</td></tr>
|
||||
<tr><td>24</td><td>R</td><td>b62</td><td>b62</td></tr>
|
||||
<tr><td>25</td><td>S</td><td>b01</td><td>b01</td></tr>
|
||||
<tr><td>26</td><td>T</td><td>b0</td><td>b0</td></tr>
|
||||
<tr><td>27</td><td>U</td><td>b77</td><td>b77</td></tr>
|
||||
<tr><td>28</td><td>Ú</td><td>b96</td><td>b96</td></tr>
|
||||
<tr><td>29</td><td>V</td><td>a1b55</td><td>a1b55</td></tr>
|
||||
<tr><td>30</td><td>W</td><td>a1b84</td><td>a1b84</td></tr>
|
||||
<tr><td>31</td><td>X</td><td>b25</td><td>b25</td></tr>
|
||||
<tr><td>32</td><td>Y</td><td>b41</td><td>b41</td></tr>
|
||||
<tr><td>33</td><td>Ý</td><td>b79</td><td>b79</td></tr>
|
||||
<tr><td>34</td><td>Z</td><td>b49</td><td>b49</td></tr>
|
||||
<tr><td>35</td><td>Þ</td><td>b94</td><td>b94</td></tr>
|
||||
<tr><td>36</td><td>Æ</td><td>b118</td><td>b118</td></tr>
|
||||
<tr><td>37</td><td class="lookhere">Ö</td><td>b80</td><td>b80</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-locale-sort.html">Sorting Accented Characters ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,176 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Changing the date format</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 id="js">$(function() {
|
||||
// call the tablesorter plugin
|
||||
$("table").tablesorter({
|
||||
theme : 'blue',
|
||||
|
||||
dateFormat : "mmddyyyy", // set the default date format
|
||||
|
||||
// or to change the format for specific columns, add the dateFormat to the headers option:
|
||||
headers: {
|
||||
0: { sorter: "shortDate" } //, dateFormat will parsed as the default above
|
||||
// 1: { sorter: "shortDate", dateFormat: "ddmmyyyy" }, // set day first format; set using class names
|
||||
// 2: { sorter: "shortDate", dateFormat: "yyyymmdd" } // set year first format; set using data attributes (jQuery data)
|
||||
}
|
||||
|
||||
});
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Changing the date format</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 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.</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>
|
||||
<li>metadata <code>class="{ dateFormat: "mmddyyyy" }"</code>. This requires the metadata plugin.</li>
|
||||
<li>headers option <code>headers : { 0 : { dateFormat: "mmddyyyy" } }</code>.</li>
|
||||
<li>header class name <code>class="dateFormat-mmddyyyy"</code>.</li>
|
||||
<li>overall <code>dateFormat</code> option setting.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Date MMDDYYYY</th>
|
||||
<th class="sorter-shortDate dateFormat-ddmmyyyy">Date DDMMYYYY</th>
|
||||
<th data-sorter="shortDate" data-date-format="yyyymmdd">Date YYYYMMDD</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>8-7-2011</td>
|
||||
<td>7-8-2011</td>
|
||||
<td>2011-8-7</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>11/1/2011 12:34 AM</td>
|
||||
<td>1/11/2011 12:34 AM</td>
|
||||
<td>2011/11/1 12:34 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>12/28/2011</td>
|
||||
<td>28/12/2011</td>
|
||||
<td>2011/12/28</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6 30 2011</td>
|
||||
<td>30 6 2011</td>
|
||||
<td>2011 6 30</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>11/1/2011 12:35 AM</td>
|
||||
<td>1/11/2011 12:35 AM</td>
|
||||
<td>2011/11/1 12:35 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3.4.2011</td>
|
||||
<td>4.3.2011</td>
|
||||
<td>2011.3.4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>07 01-2011 1:15 PM</td>
|
||||
<td>01 7-2011 1:15 PM</td>
|
||||
<td>2011-7 01 1:15 PM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>04/5,2011</td>
|
||||
<td>5/04,2011</td>
|
||||
<td>2011,04/5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>11/1/2011 12:34 PM</td>
|
||||
<td>1/11/2011 12:34 PM</td>
|
||||
<td>2011/11/1 12:34 PM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1/21 2011</td>
|
||||
<td>21.1/2011</td>
|
||||
<td>2011/1.21</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5.24-2011</td>
|
||||
<td>24.5-2011</td>
|
||||
<td>2011-5.24</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>07/01-2011 12:15 PM</td>
|
||||
<td>01-7/2011 12:15 PM</td>
|
||||
<td>2011/7-01 12:15 PM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>10,14,2011</td>
|
||||
<td>14,10,2011</td>
|
||||
<td>2011,10,14</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>09 07 2011</td> <!-- lot of spaces between the numbers -->
|
||||
<td>07 09 2011</td>
|
||||
<td>2011 09 07</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2 27.2011</td>
|
||||
<td>27 2.2011</td>
|
||||
<td>2011 2 27</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8 07 2010</td> <!-- separated by tabs -->
|
||||
<td>07 8 2010</td>
|
||||
<td>2010 8 07</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-parsers.html">Parser, writing your own ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
119
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-option-debug.html
Executable file
119
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-option-debug.html
Executable file
@@ -0,0 +1,119 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Enabling debug mode</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 id="js">$(function() {
|
||||
|
||||
// call the tablesorter plugin
|
||||
$("table").tablesorter({
|
||||
theme : 'blue',
|
||||
// enable debug mode
|
||||
debug: true
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Enabling debug mode</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> If firebug is installed the debuging information will be displayed in the firebug console.
|
||||
</p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>$153.19</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</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-meta-sort-list.html">Set a initial sorting order using metadata ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
3365
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-option-delay-init.html
Executable file
3365
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-option-delay-init.html
Executable file
File diff suppressed because it is too large
Load Diff
153
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-option-digits.html
Executable file
153
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-option-digits.html
Executable file
@@ -0,0 +1,153 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Dealing with Digits</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 id="js">$(function() {
|
||||
// call the tablesorter plugin
|
||||
$("table").tablesorter({ theme : 'blue' });
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Dealing with digits</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>Click on any column header to sort that column.</li>
|
||||
<li>The alphanumeric sort working in the first column was added in version 2.0.6 (not part of the original plugin).</li>
|
||||
<li>The above sort was replaced with a natural sort in version 2.2.</li>
|
||||
<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>
|
||||
|
||||
<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 -->
|
||||
<table class="tablesorter" data-sortlist="[[0,0]]">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Account #</th>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Diff</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>A43</td>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>9.99</td>
|
||||
<td>20.3%</td>
|
||||
<td>+3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A255</td>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>19.99</td>
|
||||
<td>25.1%</td>
|
||||
<td>-7</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A33</td>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>2.89</td>
|
||||
<td>44.2%</td>
|
||||
<td>-15</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A1</td>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>153.19</td>
|
||||
<td>44%</td>
|
||||
<td>+19</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A102</td>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>56</td>
|
||||
<td>$153.19</td>
|
||||
<td>23%</td>
|
||||
<td>+9</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A256</td>
|
||||
<td>John</td>
|
||||
<td>Clark</td>
|
||||
<td>44</td>
|
||||
<td>($19.89)</td>
|
||||
<td>25.1%</td>
|
||||
<td>(5)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A23</td>
|
||||
<td>Elvis</td>
|
||||
<td>Presley</td>
|
||||
<td>24</td>
|
||||
<td>($9.99)</td>
|
||||
<td>50%</td>
|
||||
<td>(22)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A10</td>
|
||||
<td>Frank</td>
|
||||
<td>Carter</td>
|
||||
<td>40</td>
|
||||
<td>-12.99</td>
|
||||
<td>20%</td>
|
||||
<td>(6)</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-options-headers-digits-strings.html">Dealing with text strings in numerical sorts ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,161 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Render Header</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>
|
||||
|
||||
<style id="css">.roundedCorners {
|
||||
border: #000 1px solid;
|
||||
padding: 2px 8px;
|
||||
border-radius: 1em;
|
||||
-moz-border-radius: 1em;
|
||||
-webkit-border-radius: 1em;
|
||||
}
|
||||
.tablesorter-headerDesc .roundedCorners {
|
||||
border-color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script id="js">$(function() {
|
||||
// call the tablesorter plugin
|
||||
$("table").tablesorter({
|
||||
theme : 'blue',
|
||||
headerTemplate: '{content} {icon}',
|
||||
onRenderHeader: function(index){
|
||||
// the TH content is wrapped with a div.tablesorter-header-inner by default, so just add the new class
|
||||
$(this).find('div').addClass('roundedCorners header' + index );
|
||||
}
|
||||
});
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Render Headers</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> The span wrapping the header text and the index variable for the function was added in version 2.0.9 (it is not part of the original plugin, but the "onRenderHeader" option was available).
|
||||
</p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>$153.19</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
<h1>CSS</h1>
|
||||
<div id="css">
|
||||
<pre class="prettyprint lang-css"></pre>
|
||||
</div>
|
||||
<h1>HTML</h1>
|
||||
Before
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead></pre>
|
||||
</div>
|
||||
After
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><thead>
|
||||
<tr class="tablesorter-headerRow">
|
||||
<th class="tablesorter-header"><div class="tablesorter-header-inner roundedCorners header0">First Name <i class="tablesorter-icon"></i></div></th>
|
||||
<th class="tablesorter-header"><div class="tablesorter-header-inner roundedCorners header1">Last Name <i class="tablesorter-icon"></i></div></th>
|
||||
<th class="tablesorter-header"><div class="tablesorter-header-inner roundedCorners header2">Age <i class="tablesorter-icon"></i></div></th>
|
||||
<th class="tablesorter-header"><div class="tablesorter-header-inner roundedCorners header3">Total <i class="tablesorter-icon"></i></div></th>
|
||||
<th class="tablesorter-header"><div class="tablesorter-header-inner roundedCorners header4">Discount <i class="tablesorter-icon"></i></div></th>
|
||||
<th class="tablesorter-header"><div class="tablesorter-header-inner roundedCorners header5">Date <i class="tablesorter-icon"></i></div></th>
|
||||
</tr>
|
||||
</thead></pre>
|
||||
<small>* Note: the tablesorter-icon was only added for emphasis in this demo, it isn't used at all by the blue template.</small>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-option-render-template.html">Header Template & Rendering ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,149 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Header Template & Rendering</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 id="js">$(function() {
|
||||
// call the tablesorter plugin
|
||||
$("table").tablesorter({
|
||||
theme : 'blue',
|
||||
|
||||
// {icon} isn't used by the blue theme; it is optional here
|
||||
headerTemplate : '{icon}{content}',
|
||||
// manipulate the template string after is it created
|
||||
onRenderTemplate : function(i, t){
|
||||
// add the column number to the beginning
|
||||
// it's a zero-based index, so we add one
|
||||
return '<em>' + (i+1) + ':</em> ' + t;
|
||||
}
|
||||
});
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Header Template & Rendering</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> These options were added in version 2.7 (they are not part of the original plugin).
|
||||
</p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>$153.19</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
<h1>HTML</h1>
|
||||
Before
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead></pre>
|
||||
</div>
|
||||
After
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><thead>
|
||||
<tr class="tablesorter-headerRow">
|
||||
<th class="tablesorter-header"><div class="tablesorter-header-inner"><em>1:</em> <i class="tablesorter-icon"></i>First Name</div></th>
|
||||
<th class="tablesorter-header"><div class="tablesorter-header-inner"><em>2:</em> <i class="tablesorter-icon"></i>Last Name</div></th>
|
||||
<th class="tablesorter-header"><div class="tablesorter-header-inner"><em>3:</em> <i class="tablesorter-icon"></i>Age</div></th>
|
||||
<th class="tablesorter-header"><div class="tablesorter-header-inner"><em>4:</em> <i class="tablesorter-icon"></i>Total</div></th>
|
||||
<th class="tablesorter-header"><div class="tablesorter-header-inner"><em>5:</em> <i class="tablesorter-icon"></i>Discount</div></th>
|
||||
<th class="tablesorter-header"><div class="tablesorter-header-inner"><em>6:</em> <i class="tablesorter-icon"></i>Date</div></th>
|
||||
</tr>
|
||||
</thead></pre>
|
||||
<small>* Note: the tablesorter-icon was only added for emphasis in this demo, it isn't used at all by the blue template.</small>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-triggers.html">Triggers sortEnd and sortStart ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,151 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Using selectorSort</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>
|
||||
.search { float: right; }
|
||||
</style>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.default.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
// call the tablesorter plugin
|
||||
$("table").tablesorter({
|
||||
selectorSort : 'a'
|
||||
});
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Using selectorSort</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> Click on any column header <strong>link</strong> to sort that column. Clicking anywhere else within the header will not initiate a sort.
|
||||
</p>
|
||||
|
||||
<h1>Demo</h1><br>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><a href="#">Account #</a> aa</th>
|
||||
<th><a href="#">First Name</a> bb</th>
|
||||
<th><a href="#">Last Name</a> cc</th>
|
||||
<th><a href="#">Age</a> dd</th>
|
||||
<th><a href="#">Total</a> ee</th>
|
||||
<th><a href="#">Discount</a> ff</th>
|
||||
<th class="sorter-false"><a href="#">Diff</a> gg</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>A43</td>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>9.99</td>
|
||||
<td>20.3%</td>
|
||||
<td>+3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A255</td>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>19.99</td>
|
||||
<td>25.1%</td>
|
||||
<td>-7</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A33</td>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>2.89</td>
|
||||
<td>44.2%</td>
|
||||
<td>-15</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A1</td>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>153.19</td>
|
||||
<td>44%</td>
|
||||
<td>+19</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A102</td>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>56</td>
|
||||
<td>$153.19</td>
|
||||
<td>23%</td>
|
||||
<td>+9</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A256</td>
|
||||
<td>John</td>
|
||||
<td>Clark</td>
|
||||
<td>44</td>
|
||||
<td>($19.89)</td>
|
||||
<td>25.1%</td>
|
||||
<td>(5)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A23</td>
|
||||
<td>Elvis</td>
|
||||
<td>Presley</td>
|
||||
<td>24</td>
|
||||
<td>($9.99)</td>
|
||||
<td>50%</td>
|
||||
<td>(22)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A10</td>
|
||||
<td>Frank</td>
|
||||
<td>Carter</td>
|
||||
<td>40</td>
|
||||
<td>-12.99</td>
|
||||
<td>20%</td>
|
||||
<td>(6)</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-sort-empty.html">Sorting empty cells ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,126 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Append a default sorting order</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>
|
||||
|
||||
<!-- Tablesorter: optional -->
|
||||
<script src="../addons/pager/jquery.tablesorter.pager.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
// call the tablesorter plugin
|
||||
$("table").tablesorter({
|
||||
theme : 'blue',
|
||||
|
||||
// add sort on the first column and in ascending order AFTER the selected column
|
||||
sortAppend: [[0,0]]
|
||||
});
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Append to a sort order</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>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>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Evans</td>
|
||||
<td>33</td>
|
||||
<td>$9.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>22</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</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-child-rows.html">Working with Child Rows ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,198 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Sorting empty cells</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 id="js">$(function() {
|
||||
// call the tablesorter plugin
|
||||
$("table").tablesorter({
|
||||
theme : 'blue',
|
||||
|
||||
// default "emptyTo"
|
||||
emptyTo: 'bottom'
|
||||
});
|
||||
});</script>
|
||||
|
||||
<script>
|
||||
$(function(){
|
||||
$('select').change(function(){
|
||||
var t = $('table'),
|
||||
v = $(this).val();
|
||||
t[0].config.emptyTo = v;
|
||||
t.trigger("update");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Sorting empty cells</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></p>
|
||||
<ul>
|
||||
<li>Set the <code>emptyTo</code> selector below:
|
||||
<ul>
|
||||
<li><code>top</code> - sort empty table cells to the top.</li>
|
||||
<li><code>bottom</code> - sort empty table cells to the bottom.</li>
|
||||
<li><code>none</code> or <code>zero</code>
|
||||
<ul>
|
||||
<li>Sort empty table cells as if the cell has the value equal to zero</li>
|
||||
<li>None/zero has a value less than A through Z (in javascript, <code>0 < 'A' && 0 < 'Z'</code>); so in an alphabetical column, empty cells will sort at the top in an ascending sort & at the bottom in a descending sort.</li>
|
||||
<li>In numerical columns, empty cells will sort as if their value was zero.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<br>
|
||||
</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-empty="top"</code>.</li>
|
||||
<li>metadata <code>class="{ empty: 'top'}"</code>. This requires the metadata plugin.</li>
|
||||
<li>headers option <code>headers : { 0 : { empty : 'top' } }</code>.</li>
|
||||
<li>header class name <code>class="empty-top"</code>.</li>
|
||||
<li>Overall <code>emptyTo</code> option.</li>
|
||||
</ul>
|
||||
<br>
|
||||
</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>
|
||||
|
||||
<h1>Demo</h1>
|
||||
|
||||
Set <code>emptyTo</code> option: <select>
|
||||
<option>bottom</option>
|
||||
<option>top</option>
|
||||
<option value="zero">none/zero</option>
|
||||
</select>
|
||||
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="empty-top">*Account #</th> <!-- empty-top class has higher priority than the "emptyTo" option -->
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Diff</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>A43</td>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td></td>
|
||||
<td>20.3%</td>
|
||||
<td>+3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A255</td>
|
||||
<td></td>
|
||||
<td>Hood</td>
|
||||
<td></td>
|
||||
<td>19.99</td>
|
||||
<td>25.1%</td>
|
||||
<td>-7</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Clark</td>
|
||||
<td></td>
|
||||
<td>18</td>
|
||||
<td>15.89</td>
|
||||
<td>44.2%</td>
|
||||
<td>-15</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A1</td>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>153.19</td>
|
||||
<td></td>
|
||||
<td>+19</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A102</td>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>56</td>
|
||||
<td>153.19</td>
|
||||
<td>23%</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A109</td>
|
||||
<td>Larry</td>
|
||||
<td>Stevens</td>
|
||||
<td>56</td>
|
||||
<td>153.19</td>
|
||||
<td>23%</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A99</td>
|
||||
<td>John</td>
|
||||
<td>Smithy</td>
|
||||
<td>56</td>
|
||||
<td>156</td>
|
||||
<td>22%</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A119</td>
|
||||
<td>Mike</td>
|
||||
<td>Rowe</td>
|
||||
<td>55</td>
|
||||
<td>-53.99</td>
|
||||
<td>13%</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
* <span class="label label-info">Note</span> The "Account #" column has the "empty-top" class name set which over-rides the <code>emptyTo</code> option (see the order of priority note above).
|
||||
<p></p>
|
||||
|
||||
<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-sort-key.html">Change the default multi-sorting key ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,128 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Force a default sorting order</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>
|
||||
|
||||
<!-- Tablesorter: optional -->
|
||||
<script src="../addons/pager/jquery.tablesorter.pager.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
// call the tablesorter plugin
|
||||
$("table").tablesorter({
|
||||
theme : 'blue',
|
||||
|
||||
// sort on the first column and in ascending order PRIOR TO the sort on the selected column
|
||||
sortForce: [[0,0]]
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Force a default sorting order</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>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>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>$153.19</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</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-sort-append.html">Append a sort to the selected sorting order ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,119 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Change multi-column sorting key</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 id="js">$(function() {
|
||||
|
||||
// call the tablesorter plugin
|
||||
$("table").tablesorter({
|
||||
theme : 'blue',
|
||||
|
||||
// change the multi sort key from the default shift to alt button
|
||||
sortMultiSortKey: 'altKey'
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Change multi-column sorting key</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> Click to sort any column header, then hold down the alt key and select a second column. Continue selecting columns as desired.
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>$153.19</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</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-custom-sort.html">Using a custom sort script ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,176 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Set an initial table sort</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 id="js">$(function() {
|
||||
|
||||
// initial sort set using sortList option
|
||||
$(".table1").tablesorter({
|
||||
theme : 'blue',
|
||||
// sort on the first column and second column in ascending order
|
||||
sortList: [[0,0],[1,0]]
|
||||
});
|
||||
|
||||
// initial sort set using data-sortlist attribute (see HTML below)
|
||||
$(".table2").tablesorter({
|
||||
theme : 'blue'
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Set an initial sort order</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
<h1>Demo</h1>
|
||||
<h4>Set initial sort using the sortList option</h4>
|
||||
<table class="table1 tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>$153.19</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h4>Set initial sort using a data attribute</h4>
|
||||
<div id="demo"><!-- this data-sortlist method requires jQuery v1.4+ -->
|
||||
<table class="table2" data-sortlist="[[0,0],[2,0]]">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>$153.19</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</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-trigger-sort.html">Sort table using a link outside the table ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,113 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Set an initial sort order direction</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 id="js">$(function() {
|
||||
|
||||
// call the tablesorter plugin
|
||||
$("table").tablesorter({
|
||||
theme : 'blue',
|
||||
|
||||
// change the default sorting order from 'asc' to 'desc'
|
||||
sortInitialOrder: "desc"
|
||||
});
|
||||
|
||||
}); </script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Set an initial sorting order direction</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>$153.19</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</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-options-headers.html">Disable sort using headers options ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,137 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Reset/Restart the sort</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 id="js">$(function() {
|
||||
|
||||
// call the tablesorter plugin
|
||||
$("table").tablesorter({
|
||||
theme : 'blue',
|
||||
|
||||
// third click on the header will reset column to default - unsorted
|
||||
sortReset : true,
|
||||
// Resets the sort direction so that clicking on an unsorted column will sort in the sortInitialOrder direction.
|
||||
sortRestart : true,
|
||||
|
||||
sortInitialOrder: 'desc',
|
||||
|
||||
headers : {
|
||||
// 0 : { lockedOrder: 'asc' }, only allow sorting in one direction
|
||||
3 : { sortInitialOrder: 'asc' },
|
||||
4 : { sortInitialOrder: 'asc' },
|
||||
5 : { sortInitialOrder: 'asc' }
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Reset/Restart the sort</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 default <code>sortInitialOrder</code> for the entire table is set to <code>desc</code> (descending sort).</li>
|
||||
<li>The last three columns have the initial sort order set in the ascending direction, using the headers option.</li>
|
||||
<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>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name (desc)</th>
|
||||
<th>Last Name (desc)</th>
|
||||
<th>Age (desc)</th>
|
||||
<th>Total (asc)</th>
|
||||
<th>Discount (asc)</th>
|
||||
<th>Date (asc)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Robin</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>$153.19</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</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-method-sortreset.html">Resetting the entire table sort ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,142 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Dealing with markup inside cells</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 id="js">$(function() {
|
||||
|
||||
// call the tablesorter plugin
|
||||
$("table").tablesorter({
|
||||
theme : 'blue',
|
||||
/*
|
||||
// define an overall custom text extraction function
|
||||
textExtraction: function(node, table, cellIndex) {
|
||||
return $(node).text();
|
||||
}
|
||||
*/
|
||||
|
||||
// Define a custom text extraction function for each column
|
||||
// In this example, textExtraction 1-5 functions don't really need to
|
||||
// be defined, since they can also be obtained using `$(node).text()`
|
||||
textExtraction: {
|
||||
0: function(node, table, cellIndex){ return $(node).find("strong").text(); },
|
||||
1: function(node, table, cellIndex){ return $(node).find("div").text(); },
|
||||
2: function(node, table, cellIndex){ return $(node).find("span").text(); },
|
||||
3: function(node, table, cellIndex){ return $(node).find("em").text(); },
|
||||
4: function(node, table, cellIndex){ return $(node).find("a").text(); },
|
||||
'.date' : function(node, table, cellIndex){ return $(node).find("u").text(); }
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<strong>sorter</strong></h1>
|
||||
<h2>Dealing with markup inside cells</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 updated">v2.17.0</span>, the <code>textExtraction</code> column can also be referenced by using a jQuery selector (e.g. class name or ID).</li>
|
||||
<li>The textExtraction function setting for each column was added in version 2.0.12 (not part of the original plugin).</li>
|
||||
<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>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th class="date">Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Mr. <strong>Peter</strong></td>
|
||||
<td><div>Parker</div></td>
|
||||
<td><span>28</span></td>
|
||||
<td><em>$9.99</em></td>
|
||||
<td><a href="#">20%</a></td>
|
||||
<td><u>Jul 6, 2006 8:14 AM</u></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dr. <strong>John</strong></td>
|
||||
<td><div>Hood</div></td>
|
||||
<td><span>33</span></td>
|
||||
<td><em>$19.99</em></td>
|
||||
<td><a href="#">25%</a></td>
|
||||
<td><u>Dec 10, 2002 5:14 AM</u></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rep <strong>Clark</strong></td>
|
||||
<td><div>Kent</div></td>
|
||||
<td><span>18</span></td>
|
||||
<td><em>$15.89</em></td>
|
||||
<td><a href="#">44%</a></td>
|
||||
<td><u>Jan 12, 2003 11:14 AM</u></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rev <strong>Bruce</strong></td>
|
||||
<td><div>Almighty</div></td>
|
||||
<td><span>45</span></td>
|
||||
<td><em>$153.19</em></td>
|
||||
<td><a href="#">44%</a></td>
|
||||
<td><u>Jan 18, 2001 9:12 AM</u></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Capt <strong>Bruce</strong></td>
|
||||
<td><div>Evans</div></td>
|
||||
<td><span>22</span></td>
|
||||
<td><em>$13.19</em></td>
|
||||
<td><a href="#">11%</a></td>
|
||||
<td><u>Jan 18, 2007 9:12 AM</u></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-apply-widget.html">Applying widgets ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,125 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Semver Sorting</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="../js/extras/semver-mod.js"></script>
|
||||
|
||||
<style id="css">td.red { color: red; }</style>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
// Set up empty table with second and first columns pre-sorted
|
||||
$("table").tablesorter({
|
||||
theme : 'blue',
|
||||
// sortList: [[1,0]],
|
||||
textSorter : {
|
||||
1 : function(a,b) {
|
||||
if (a === b) { return 0; }
|
||||
if (window.semver && semver.valid(a) !== null && semver.valid(b) !== null) {
|
||||
// valid version numbers, use semver.gt() method (greater than)
|
||||
return semver.gt(a, b) ? 1 : -1;
|
||||
} else {
|
||||
// invalid version number or semver not included -> basic text sort
|
||||
return a > b ? 1 : (a < b ? -1 : 0);
|
||||
}
|
||||
}
|
||||
},
|
||||
// extra code to highlight invalid semver numbers
|
||||
initialized : function(table){
|
||||
var $cell,
|
||||
c = table.config,
|
||||
column = 1; // search second column (zero-based index)
|
||||
if (window.semver) {
|
||||
c.$tbodies.each(function(tbindex, tb){
|
||||
$(tb).children('tr').each(function(rowindex, tr) {
|
||||
$cell = $(tr).children().eq(column);
|
||||
if (semver.valid( $.trim( $cell.text() ) ) === null) {
|
||||
// make invalid semver numbers obvious
|
||||
$cell.addClass('red').append(' (invalid)');
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Semver Sorting</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>This method does not use a parser nor a widget, it uses <code>semver.js</code> to allow the sorting of <a href="http://semver.org/">semantic version numbers</a>.</li>
|
||||
<li>But this method requires a slightly modified version of <a href="https://github.com/isaacs/node-semver">semver.js for node</a>. All modifications are signified within the file to ease updating.</li>
|
||||
<li>The modified semver.js (<a href="../js/extras/semver-mod.js">semver-mod.js</a>) is contained in the new "extras" subfolder. Please include it if you need this specific type of sort.</li>
|
||||
<li>Invalid version numbers be sorted using a basic text sort, so they will be grouped with their similar version numbers, but not sorted properly; this demo has some extra code to highlight invalid version numbers.</li>
|
||||
<li>In this demo, when the semver 2.0.0 compliant version column is sorted, the order column will be in sequential order.</li>
|
||||
<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>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Order</th>
|
||||
<th>SemVer 2.0.0 compliant versioning</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>6</td><td>1.0.0-beta.2</td></tr>
|
||||
<tr><td>8</td><td>1.0.0-rc.1</td></tr>
|
||||
<tr><td>2</td><td>1.0.0-alpha.1</td></tr>
|
||||
<tr><td>1</td><td>1.0.0-alpha</td></tr>
|
||||
<tr><td>10</td><td>1.0.0</td></tr>
|
||||
<tr><td>4</td><td>1.0.0-alpha.beta</td></tr>
|
||||
<tr><td>3</td><td>1.0.0-alpha.2</td></tr>
|
||||
<tr><td>7</td><td>1.0.0-beta.11</td></tr>
|
||||
<tr><td>9</td><td>1.0.0-rc.2</td></tr>
|
||||
<tr><td>5</td><td>1.0.0-beta</td></tr>
|
||||
<tr><td>11</td><td>1.0.0beta</td></tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
<h1>CSS</h1>
|
||||
<div id="css">
|
||||
<pre class="prettyprint lang-css"></pre>
|
||||
</div>
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,194 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Pager plugin</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.metro-dark.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<!-- Tablesorter: optional -->
|
||||
<link rel="stylesheet" href="../addons/pager/jquery.tablesorter.pager.css">
|
||||
<script src="../addons/pager/jquery.tablesorter.pager.js"></script>
|
||||
|
||||
<style id="css">.table-title {
|
||||
margin: 8px 4px;
|
||||
font: bold 16px 'Segoe UI Semilight', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
|
||||
color: #fff;
|
||||
}</style>
|
||||
|
||||
<script id="js">$(function(){
|
||||
|
||||
$("table")
|
||||
.tablesorter({
|
||||
theme: 'metro-dark',
|
||||
sortList: [[0,0],[1,0],[2,0]],
|
||||
widthFixed: true,
|
||||
widgets: ['zebra', 'columns', 'filter']
|
||||
})
|
||||
.tablesorterPager({
|
||||
// target the pager markup - see the HTML block below
|
||||
container: $(".pager"),
|
||||
output: '{startRow} to {endRow} ({totalRows})'
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body id="pager-demo">
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Metro Style</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>Only the Windows Metro Dark theme has been included; for other colors:
|
||||
<ul>
|
||||
<li>Create your own dynamically by modifying <a href="http://codepen.io/Mottie/pen/gCslk">this demo</a>.</li>
|
||||
<li>Change the <code>@headerBackground</code> to any valid color (some styles inspired by <a href="http://www.jtable.org/">JTable</a> have been listed in the comments).</li>
|
||||
<li>If you don't like the look of the style, you might also want to check out <a href="http://jquit.com/builder/">this jQuery UI theme builder</a> which creates metro style themes.</li>
|
||||
</ul>
|
||||
</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>
|
||||
|
||||
<h1>Demo</h1>
|
||||
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr class="dark-row">
|
||||
<th colspan="7" class="sorter-false">
|
||||
<h2 class="table-title">Table Title</h2>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Major</th>
|
||||
<th>Sex</th>
|
||||
<th>English</th>
|
||||
<th>Japanese</th>
|
||||
<th>Calculus</th>
|
||||
<th class="sorter-false">Geometry</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Major</th>
|
||||
<th>Sex</th>
|
||||
<th>English</th>
|
||||
<th>Japanese</th>
|
||||
<th>Calculus</th>
|
||||
<th>Geometry</th>
|
||||
</tr>
|
||||
<tr class="dark-row">
|
||||
<th colspan="7">
|
||||
<div class="pager">
|
||||
<button type="button" class="first"><<</button>
|
||||
<button type="button" class="prev"><</button>
|
||||
<span class="pagedisplay"></span>
|
||||
<button type="button" class="next">></button>
|
||||
<button type="button" class="last">>></button>
|
||||
<select class="pagesize" title="Select page size">
|
||||
<option value="10">10</option>
|
||||
<option value="20">20</option>
|
||||
<option value="30">30</option>
|
||||
<option value="40">40</option>
|
||||
</select>
|
||||
<select class="gotoPage" title="Select page number"></select>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr><td>Student01</td><td>Languages</td><td>male</td><td>80</td><td>70</td><td>75</td><td>80</td></tr>
|
||||
<tr><td>Student02</td><td>Mathematics</td><td>male</td><td>90</td><td>88</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student03</td><td>Languages</td><td>female</td><td>85</td><td>95</td><td>80</td><td>85</td></tr>
|
||||
<tr><td>Student04</td><td>Languages</td><td>male</td><td>60</td><td>55</td><td>100</td><td>100</td></tr>
|
||||
<tr><td>Student05</td><td>Languages</td><td>female</td><td>68</td><td>80</td><td>95</td><td>80</td></tr>
|
||||
<tr><td>Student06</td><td>Mathematics</td><td>male</td><td>100</td><td>99</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student07</td><td>Mathematics</td><td>male</td><td>85</td><td>68</td><td>90</td><td>90</td></tr>
|
||||
<tr><td>Student08</td><td>Languages</td><td>male</td><td>100</td><td>90</td><td>90</td><td>85</td></tr>
|
||||
<tr><td>Student09</td><td>Mathematics</td><td>male</td><td>80</td><td>50</td><td>65</td><td>75</td></tr>
|
||||
<tr><td>Student10</td><td>Languages</td><td>male</td><td>85</td><td>100</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student11</td><td>Languages</td><td>male</td><td>86</td><td>85</td><td>100</td><td>100</td></tr>
|
||||
<tr><td>Student12</td><td>Mathematics</td><td>female</td><td>100</td><td>75</td><td>70</td><td>85</td></tr>
|
||||
<tr><td>Student13</td><td>Languages</td><td>female</td><td>100</td><td>80</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student14</td><td>Languages</td><td>female</td><td>50</td><td>45</td><td>55</td><td>90</td></tr>
|
||||
<tr><td>Student15</td><td>Languages</td><td>male</td><td>95</td><td>35</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student16</td><td>Languages</td><td>female</td><td>100</td><td>50</td><td>30</td><td>70</td></tr>
|
||||
<tr><td>Student17</td><td>Languages</td><td>female</td><td>80</td><td>100</td><td>55</td><td>65</td></tr>
|
||||
<tr><td>Student18</td><td>Mathematics</td><td>male</td><td>30</td><td>49</td><td>55</td><td>75</td></tr>
|
||||
<tr><td>Student19</td><td>Languages</td><td>male</td><td>68</td><td>90</td><td>88</td><td>70</td></tr>
|
||||
<tr><td>Student20</td><td>Mathematics</td><td>male</td><td>40</td><td>45</td><td>40</td><td>80</td></tr>
|
||||
<tr><td>Student21</td><td>Languages</td><td>male</td><td>50</td><td>45</td><td>100</td><td>100</td></tr>
|
||||
<tr><td>Student22</td><td>Mathematics</td><td>male</td><td>100</td><td>99</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student23</td><td>Mathematics</td><td>male</td><td>82</td><td>77</td><td>0</td><td>79</td></tr>
|
||||
<tr><td>Student24</td><td>Languages</td><td>female</td><td>100</td><td>91</td><td>13</td><td>82</td></tr>
|
||||
<tr><td>Student25</td><td>Mathematics</td><td>male</td><td>22</td><td>96</td><td>82</td><td>53</td></tr>
|
||||
<tr><td>Student26</td><td>Languages</td><td>female</td><td>37</td><td>29</td><td>56</td><td>59</td></tr>
|
||||
<tr><td>Student27</td><td>Mathematics</td><td>male</td><td>86</td><td>82</td><td>69</td><td>23</td></tr>
|
||||
<tr><td>Student28</td><td>Languages</td><td>female</td><td>44</td><td>25</td><td>43</td><td>1</td></tr>
|
||||
<tr><td>Student29</td><td>Mathematics</td><td>male</td><td>77</td><td>47</td><td>22</td><td>38</td></tr>
|
||||
<tr><td>Student30</td><td>Languages</td><td>female</td><td>19</td><td>35</td><td>23</td><td>10</td></tr>
|
||||
<tr><td>Student31</td><td>Mathematics</td><td>male</td><td>90</td><td>27</td><td>17</td><td>50</td></tr>
|
||||
<tr><td>Student32</td><td>Languages</td><td>female</td><td>60</td><td>75</td><td>33</td><td>38</td></tr>
|
||||
<tr><td>Student33</td><td>Mathematics</td><td>male</td><td>4</td><td>31</td><td>37</td><td>15</td></tr>
|
||||
<tr><td>Student34</td><td>Languages</td><td>female</td><td>77</td><td>97</td><td>81</td><td>44</td></tr>
|
||||
<tr><td>Student35</td><td>Mathematics</td><td>male</td><td>5</td><td>81</td><td>51</td><td>95</td></tr>
|
||||
<tr><td>Student36</td><td>Languages</td><td>female</td><td>70</td><td>61</td><td>70</td><td>94</td></tr>
|
||||
<tr><td>Student37</td><td>Mathematics</td><td>male</td><td>60</td><td>3</td><td>61</td><td>84</td></tr>
|
||||
<tr><td>Student38</td><td>Languages</td><td>female</td><td>63</td><td>39</td><td>0</td><td>11</td></tr>
|
||||
<tr><td>Student39</td><td>Mathematics</td><td>male</td><td>50</td><td>46</td><td>32</td><td>38</td></tr>
|
||||
<tr><td>Student40</td><td>Languages</td><td>female</td><td>51</td><td>75</td><td>25</td><td>3</td></tr>
|
||||
<tr><td>Student41</td><td>Mathematics</td><td>male</td><td>43</td><td>34</td><td>28</td><td>78</td></tr>
|
||||
<tr><td>Student42</td><td>Languages</td><td>female</td><td>11</td><td>89</td><td>60</td><td>95</td></tr>
|
||||
<tr><td>Student43</td><td>Mathematics</td><td>male</td><td>48</td><td>92</td><td>18</td><td>88</td></tr>
|
||||
<tr><td>Student44</td><td>Languages</td><td>female</td><td>82</td><td>2</td><td>59</td><td>73</td></tr>
|
||||
<tr><td>Student45</td><td>Mathematics</td><td>male</td><td>91</td><td>73</td><td>37</td><td>39</td></tr>
|
||||
<tr><td>Student46</td><td>Languages</td><td>female</td><td>4</td><td>8</td><td>12</td><td>10</td></tr>
|
||||
<tr><td>Student47</td><td>Mathematics</td><td>male</td><td>89</td><td>10</td><td>6</td><td>11</td></tr>
|
||||
<tr><td>Student48</td><td>Languages</td><td>female</td><td>90</td><td>32</td><td>21</td><td>18</td></tr>
|
||||
<tr><td>Student49</td><td>Mathematics</td><td>male</td><td>42</td><td>49</td><td>49</td><td>72</td></tr>
|
||||
<tr><td>Student50</td><td>Languages</td><td>female</td><td>56</td><td>37</td><td>67</td><td>54</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
|
||||
<h1>CSS</h1>
|
||||
<div id="css">
|
||||
<pre class="prettyprint lang-css"></pre>
|
||||
</div>
|
||||
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,225 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Dealing with text strings in numerical sorts</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">
|
||||
<style>
|
||||
th { width: 10%; }
|
||||
</style>
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
// call the tablesorter plugin
|
||||
$("table").tablesorter({
|
||||
theme : 'blue',
|
||||
// default strings setting
|
||||
stringTo: "max",
|
||||
// columns 2 & 3 (zero-based index) set using headers option
|
||||
// columns 4+ set using header class name: "string-max", "string-min", "string-top", "string-bottom" and "string-none"
|
||||
headers: {
|
||||
1: { sorter: "digit", empty : "top" }, // sort empty cells to the top
|
||||
2: { sorter: "digit", string: "max" }, // non-numeric content is treated as a MAX value
|
||||
3: { sorter: "digit", string: "min" } // non-numeric content is treated as a MIN value
|
||||
}
|
||||
|
||||
});
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Dealing with text strings in numerical sorts</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>This functionality is new as of version 2.0.10 (not part of the original plugin).</li>
|
||||
<li>When a column is sorted numerically ( <code>sorter:"digit"</code> ) any text in that column will, by default, be given a <em>zero</em> value. Sort the last column (#9) to see the problem with this method.</li>
|
||||
<li>Overall <code>stringTo</code> option added in version 2.1.16.</li>
|
||||
<li>String options changed in version 2.1.16; setting the value to:
|
||||
<ul>
|
||||
<li><code>"max"</code> will treat any text in that column as a value greater than the <em>max</em> (more positive) value. Renamed from "max+".</li>
|
||||
<li><code>"min"</code> will treat any text in that column as a value greater than the <em>min</em> (more negative) value. Renamed from "max-".</li>
|
||||
<li><code>"top"</code> will always sort the text to the top of the column.</li>
|
||||
<li><code>"bottom"</code> will always sort the text to the bottom of the column.</li>
|
||||
<li><code>"none"</code> or <code>"zero"</code> will treat the text as if it has a value of zero.</li>
|
||||
</ul>
|
||||
</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-string="top"</code>.</li>
|
||||
<li>metadata <code>class="{ string: 'top'}"</code>. This requires the metadata plugin.</li>
|
||||
<li>headers option <code>headers : { 0 : { string : 'top' } }</code>.</li>
|
||||
<li>header class name <code>class="string-top"</code>.</li>
|
||||
<li>Overall <code>stringTo</code> option.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<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>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Account #</th>
|
||||
<th>Difference</th>
|
||||
<th>3: Ratings (max)</th>
|
||||
<th>4: Ratings (min)</th>
|
||||
<th class="string-max">5: Change (max)</th>
|
||||
<th class="string-min">6: Change (min)</th>
|
||||
<th class="string-top">7: Change (top)</th>
|
||||
<th class="string-bottom">8: Change (bottom)</th>
|
||||
<th class="string-none">9: Change (zero)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>A43</td>
|
||||
<td>-35</td>
|
||||
<td>01</td>
|
||||
<td>01</td>
|
||||
<td>-.1</td>
|
||||
<td>-.1</td>
|
||||
<td>-.1</td>
|
||||
<td>-.1</td>
|
||||
<td>-.1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A255</td>
|
||||
<td>33</td>
|
||||
<td>02</td>
|
||||
<td>02</td>
|
||||
<td>N/A #1</td>
|
||||
<td>N/A #1</td>
|
||||
<td>N/A #1</td>
|
||||
<td>N/A #1</td>
|
||||
<td>N/A #1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A33</td>
|
||||
<td>2</td>
|
||||
<td>03</td>
|
||||
<td>03</td>
|
||||
<td>N/A #2</td>
|
||||
<td>N/A #2</td>
|
||||
<td>N/A #2</td>
|
||||
<td>N/A #2</td>
|
||||
<td>N/A #2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A1</td>
|
||||
<td>-5</td>
|
||||
<td>04</td>
|
||||
<td>04</td>
|
||||
<td>-8.4</td>
|
||||
<td>-8.4</td>
|
||||
<td>-8.4</td>
|
||||
<td>-8.4</td>
|
||||
<td>-8.4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A102</td>
|
||||
<td>99</td>
|
||||
<td>05</td>
|
||||
<td>05</td>
|
||||
<td>-2.2</td>
|
||||
<td>-2.2</td>
|
||||
<td>-2.2</td>
|
||||
<td>-2.2</td>
|
||||
<td>-2.2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A10</td>
|
||||
<td>-1</td>
|
||||
<td>06</td>
|
||||
<td>06</td>
|
||||
<td>97.4</td>
|
||||
<td>97.4</td>
|
||||
<td>97.4</td>
|
||||
<td>97.4</td>
|
||||
<td>97.4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A02</td>
|
||||
<td>0</td>
|
||||
<td>07</td>
|
||||
<td>07</td>
|
||||
<td>23.6</td>
|
||||
<td>23.6</td>
|
||||
<td>23.6</td>
|
||||
<td>23.6</td>
|
||||
<td>23.6</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A55</td>
|
||||
<td>44</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td>11.4</td>
|
||||
<td>11.4</td>
|
||||
<td>11.4</td>
|
||||
<td>11.4</td>
|
||||
<td>11.4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A87</td>
|
||||
<td>04</td>
|
||||
<td>NR</td>
|
||||
<td>NR</td>
|
||||
<td>5.2</td>
|
||||
<td>5.2</td>
|
||||
<td>5.2</td>
|
||||
<td>5.2</td>
|
||||
<td>5.2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A012</td>
|
||||
<td></td>
|
||||
<td>NR</td>
|
||||
<td>NR</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></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-parsers-class-name.html">Disable or set the column parser using class names ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,132 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Lock sort order</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 id="js">$(function(){
|
||||
$("table").tablesorter({
|
||||
theme : 'blue',
|
||||
// pass the headers argument and passing a object
|
||||
headers: {
|
||||
0: {
|
||||
// lock the sort order of the first column to ascending (always Bruce to Peter when sorting on that column)
|
||||
lockedOrder: 'asc'
|
||||
}
|
||||
}
|
||||
});
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Lock sort order</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>This option was part of the original plugin, but it was broken.</li>
|
||||
<li>Sort the first, third and fifth columns to see how the sort is locked.</li>
|
||||
<li>Columns can be locked using any of the following methods (they all do the same thing), in order of priority (v2.3+):
|
||||
<ul>
|
||||
<li>jQuery data <code>data-lockedorder="asc"</code>. (equivalent to <code>data-locked-order="asc"</code>).</li>
|
||||
<li>metadata <code>class="{ lockedOrder: 'asc'}"</code>. This requires the metadata plugin.</li>
|
||||
<li>headers option <code>headers : { 0 : { lockedOrder: 'asc' } }</code>.</li>
|
||||
<li>header class name <code>class="lockedOrder-asc"</code>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th data-lockedOrder="desc">Age</th> <!-- added as data-lockedOrder, but the DOM changes it to data-lockedorder -->
|
||||
<th>Total</th>
|
||||
<th class="lockedOrder-desc">Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>$153.19</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</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-options-headers-order.html">Set initial sort order using header options ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,135 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Set initial sort order</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 id="js">$(function(){
|
||||
$("table").tablesorter({
|
||||
theme : 'blue',
|
||||
|
||||
// default sortInitialOrder setting
|
||||
sortInitialOrder: "asc",
|
||||
|
||||
// pass the headers argument and passing a object
|
||||
headers: {
|
||||
// set initial sort order by column, this headers option setting overrides the sortInitialOrder option
|
||||
0: { sortInitialOrder: 'desc' }
|
||||
}
|
||||
|
||||
});
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Set initial sort order</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>Adding "sortInitialOrder" inside of the "headers" option was added in version 2.0.8 (not part of the original plugin).</li>
|
||||
<li>In versions 2.3+, the initial sort order of the columns can be set using any of the following methods (they all do the same thing), in order of priority:
|
||||
<ul>
|
||||
<li>jQuery data <code>data-sort-initial-order="desc"</code> (equivalent to <code>data-sortinitialorder="desc"</code>).</li>
|
||||
<li>metadata <code>class="{ sortInitialOrder: "desc" }"</code>. This requires the metadata plugin.</li>
|
||||
<li>headers option <code>headers : { 0 : { sortInitialOrder: "desc" } }</code>.</li>
|
||||
<li>header class name <code>class="sortInitialOrder-desc"</code>.</li>
|
||||
<li>overall <code>sortInitialOrder</code> option setting.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name (desc)</th>
|
||||
<th>Last Name (asc)</th>
|
||||
<th class="sortInitialOrder-desc">Age (desc)</th>
|
||||
<th>Total (asc)</th>
|
||||
<th data-sortinitialorder="desc">Discount (desc)</th> <!-- equivalent to data-sortInitialOrder="desc" or data-sort-initialorder="desc" -->
|
||||
<th>Date (asc)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>$153.19</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</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-sortreset-sortrestart.html">Using sortReset & sortRestart ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,108 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Skip parsing of content</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>
|
||||
$(function(){
|
||||
$('table').on('tablesorter-initialized', function(){
|
||||
var i, j, t = [],
|
||||
cache = this.config.cache[0].normalized;
|
||||
for (i = 0; i < cache.length; i++) {
|
||||
t += '"' + cache[i].slice(0,3).join('", "') + '"\n';
|
||||
}
|
||||
$('#cache pre').html(t);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<script id="js">$(function(){
|
||||
$("table").tablesorter({
|
||||
theme : 'blue',
|
||||
|
||||
// pass the headers argument and passing a object
|
||||
headers: {
|
||||
// set initial sort order by column, this headers option setting overrides the sortInitialOrder option
|
||||
1: { sorter: false, parser: false }
|
||||
}
|
||||
|
||||
});
|
||||
});</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Skip parsing of content</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.17.1</span>, this parser setting was added to reduce the time needed to process the table content during initialization and updating.</li>
|
||||
<li><em>Disabling of the sorting</em> of the same column should be observed as sorting will not work without the parsed data.</li>
|
||||
<li><em>Disabling of filtering</em> of the same column may be necessary, especially if the data requires parsing when comparisons of data is required (e.g. looking for dates <code><</code>, <code><=</code>, <code>></code> or <code>>=</code> a certain time).</li>
|
||||
<li>Use this setting by following any of these methods (they all do the same thing), in order of priority:
|
||||
<ul>
|
||||
<li>jQuery data <code>data-parser="false"</code>.</li>
|
||||
<li>metadata <code>class="{ parser: "false" }"</code>. This requires the metadata plugin.</li>
|
||||
<li>headers option <code>headers : { 0 : { parser: "false" } }</code>.</li>
|
||||
<li>header class name <code>class="parser-false"</code>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Age</th>
|
||||
<th class="sorter-false parser-false">Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>Peter Parker</td><td>28</td><td>Jul 6, 2006 8:14 AM</td></tr>
|
||||
<tr><td>John Hood</td><td>33</td><td>Dec 10, 2002 5:14 AM</td></tr>
|
||||
<tr><td>Clark Kent</td><td>18</td><td>Jan 12, 2003 11:14 AM</td></tr>
|
||||
<tr><td>Bruce Almighty</td><td>45</td><td>Jan 18, 2001 9:12 AM</td></tr>
|
||||
<tr><td>Bruce Evans</td><td>22</td><td>Jan 18, 2007 9:12 AM</td></tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Cached Data</h1>
|
||||
<div id="cache">
|
||||
<pre class="prettyprint"></pre>
|
||||
</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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,137 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Disable sort</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 id="js">$(function(){
|
||||
|
||||
// BONUS TIP: disable a column using jQuery data directly
|
||||
// but do it before the table initializes
|
||||
$("table thead th:eq(5)").data("sorter", false);
|
||||
|
||||
$("table").tablesorter({
|
||||
theme : 'blue',
|
||||
|
||||
headers: {
|
||||
// disable sorting of the first column (we can use zero or the header class name)
|
||||
'.first-name' : {
|
||||
// disable it by setting the property sorter to false
|
||||
sorter: false
|
||||
}
|
||||
}
|
||||
});
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Disable sort</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 tablesorter v2.0.5 and older, only the metadata and headers options methods were available.</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-sorter="false"</code> (see the Javascript block below on how to set it directly).</li>
|
||||
<li>metadata <code>class="{ sorter: false }"</code>. This requires the metadata plugin.</li>
|
||||
<li>headers option <code>headers : { 0 : { sorter: false } }</code>.</li>
|
||||
<li>header class name <code>class="sorter-false"</code>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="first-name">First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th data-sorter="false">Age</th>
|
||||
<th>Total</th>
|
||||
<th class="sorter-false">Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>$153.19</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</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-options-headers-locked.html">Lock sort order using header options ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
442
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-pager-ajax.html
Executable file
442
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-pager-ajax.html
Executable file
@@ -0,0 +1,442 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Pager plugin - Ajax</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
|
||||
<link href="css/jq.css" rel="stylesheet">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/jquery-ui-latest.min.js"></script>
|
||||
<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>
|
||||
|
||||
<!-- Tablesorter pager: required -->
|
||||
<link rel="stylesheet" href="../addons/pager/jquery.tablesorter.pager.css">
|
||||
<script src="../addons/pager/jquery.tablesorter.pager.js"></script>
|
||||
|
||||
<!-- Tablesorter: optional -->
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<script id="js">$(function(){
|
||||
|
||||
// Initialize tablesorter
|
||||
// ***********************
|
||||
$("table")
|
||||
.tablesorter({
|
||||
theme: 'blue',
|
||||
widthFixed: true,
|
||||
sortLocaleCompare: true, // needed for accented characters in the data
|
||||
sortList: [ [0,1] ],
|
||||
widgets: ['zebra', 'filter']
|
||||
})
|
||||
|
||||
// initialize the pager plugin
|
||||
// ****************************
|
||||
.tablesorterPager({
|
||||
|
||||
// **********************************
|
||||
// Description of ALL pager options
|
||||
// **********************************
|
||||
|
||||
// target the pager markup - see the HTML block below
|
||||
container: $(".pager"),
|
||||
|
||||
// use this format: "http:/mydatabase.com?page={page}&size={size}&{sortList:col}"
|
||||
// where {page} is replaced by the page number (or use {page+1} to get a one-based index),
|
||||
// {size} is replaced by the number of records to show,
|
||||
// {sortList:col} adds the sortList to the url into a "col" array, and {filterList:fcol} adds
|
||||
// the filterList to the url into an "fcol" array.
|
||||
// So a sortList = [[2,0],[3,0]] becomes "&col[2]=0&col[3]=0" in the url
|
||||
// and a filterList = [[2,Blue],[3,13]] becomes "&fcol[2]=Blue&fcol[3]=13" in the url
|
||||
ajaxUrl : 'assets/City{page}.json?{filterList:filter}&{sortList:column}',
|
||||
|
||||
// modify the url after all processing has been applied
|
||||
customAjaxUrl: function(table, url) {
|
||||
// manipulate the url string as you desire
|
||||
// url += '&cPage=' + window.location.pathname;
|
||||
// trigger my custom event
|
||||
$(table).trigger('changingUrl', url);
|
||||
// send the server the current page
|
||||
return url;
|
||||
},
|
||||
|
||||
// add more ajax settings here
|
||||
// see http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings
|
||||
ajaxObject: {
|
||||
dataType: 'json'
|
||||
},
|
||||
|
||||
// process ajax so that the following information is returned:
|
||||
// [ total_rows (number), rows (array of arrays), headers (array; optional) ]
|
||||
// example:
|
||||
// [
|
||||
// 100, // total rows
|
||||
// [
|
||||
// [ "row1cell1", "row1cell2", ... "row1cellN" ],
|
||||
// [ "row2cell1", "row2cell2", ... "row2cellN" ],
|
||||
// ...
|
||||
// [ "rowNcell1", "rowNcell2", ... "rowNcellN" ]
|
||||
// ],
|
||||
// [ "header1", "header2", ... "headerN" ] // optional
|
||||
// ]
|
||||
// OR
|
||||
// return [ total_rows, $rows (jQuery object; optional), headers (array; optional) ]
|
||||
ajaxProcessing: function(data){
|
||||
if (data && data.hasOwnProperty('rows')) {
|
||||
var r, row, c, d = data.rows,
|
||||
// total number of rows (required)
|
||||
total = data.total_rows,
|
||||
// array of header names (optional)
|
||||
headers = data.headers,
|
||||
// all rows: array of arrays; each internal array has the table cell data for that row
|
||||
rows = [],
|
||||
// len should match pager set size (c.size)
|
||||
len = d.length;
|
||||
// this will depend on how the json is set up - see City0.json
|
||||
// rows
|
||||
for ( r=0; r < len; r++ ) {
|
||||
row = []; // new row array
|
||||
// cells
|
||||
for ( c in d[r] ) {
|
||||
if (typeof(c) === "string") {
|
||||
row.push(d[r][c]); // add each table cell data to row array
|
||||
}
|
||||
}
|
||||
rows.push(row); // add new row array to rows array
|
||||
}
|
||||
// in version 2.10, you can optionally return $(rows) a set of table rows within a jQuery object
|
||||
return [ total, rows, headers ];
|
||||
}
|
||||
},
|
||||
|
||||
// output string - default is '{page}/{totalPages}'; possible variables: {page}, {totalPages}, {startRow}, {endRow} and {totalRows}
|
||||
output: '{startRow} to {endRow} ({totalRows})',
|
||||
|
||||
// apply disabled classname to the pager arrows when the rows at either extreme is visible - default is true
|
||||
updateArrows: true,
|
||||
|
||||
// starting page of the pager (zero based index)
|
||||
page: 0,
|
||||
|
||||
// Number of visible rows - default is 10
|
||||
size: 25,
|
||||
|
||||
// if true, the table will remain the same height no matter how many records are displayed. The space is made up by an empty
|
||||
// table row set to a height to compensate; default is false
|
||||
fixedHeight: false,
|
||||
|
||||
// remove rows from the table to speed up the sort of large tables.
|
||||
// setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
|
||||
removeRows: false,
|
||||
|
||||
// css class names of pager arrows
|
||||
cssNext : '.next', // next page arrow
|
||||
cssPrev : '.prev', // previous page arrow
|
||||
cssFirst : '.first', // go to first page arrow
|
||||
cssLast : '.last', // go to last page arrow
|
||||
cssPageDisplay : '.pagedisplay', // location of where the "output" is displayed
|
||||
cssPageSize : '.pagesize', // page size selector - select dropdown that sets the "size" option
|
||||
cssErrorRow : 'tablesorter-errorRow', // error information row
|
||||
|
||||
// class added to arrows when at the extremes (i.e. prev/first arrows are "disabled" when on the first page)
|
||||
cssDisabled : 'disabled' // Note there is no period "." in front of this class name
|
||||
|
||||
});
|
||||
|
||||
});</script>
|
||||
|
||||
</head>
|
||||
<body id="pager-demo">
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Pager plugin - Ajax</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
|
||||
<p></p>
|
||||
<br>
|
||||
<div class="accordion">
|
||||
|
||||
<h3><a href="#">Notes</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>In <span class="version">v2.13.3</span>, 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>
|
||||
<li>In <span class="version">v2.11</span>, the pager now stores any object returned by the `ajaxProcessing` function in `table.config.pager.ajaxData` (see the ajaxProcessing section below for more details).</li>
|
||||
<li>In <span class="version updated">v2.10</span>, the <code>ajaxProcessing</code> function was updated to only require a total number of rows to be returned, also instead of returning an array of table rows, you can build the table yourself and just return the jQuery object containing those rows. The addon triggers an update.</li>
|
||||
<li><code>{filterList:fcol}</code> was added to the <code>ajaxUrl</code> in version 2.6.</li>
|
||||
<li><code>{sortList:col}</code> was added to the <code>ajaxUrl</code> in version 2.4.5.</li>
|
||||
<li>This update to the pager plugin that interacts with a database via ajax was added in version 2.0.32 and can be applied to the original tablesorter.</li>
|
||||
<li>The <code>ajaxUrl</code> and <code>ajaxProcessing</code> function are both required options for this interaction to work properly.</li>
|
||||
<li>The <code>ajaxUrl</code> contains a replaceable string to send the requested page (<code>{page}</code>), block size (<code>{size}</code>) or sort order (<code>{sortList:name}</code>).</li>
|
||||
<li>The table header and footer text will be updated to match the JSON "header column #" text; but there is an issue with the table rendering improperly if the number of columns in the HTML and the number of columns in the JSON don't match.</li>
|
||||
<li><strong>Limitations of this demo</strong>:
|
||||
<ul>
|
||||
<li>This demo will not work when viewing it locally (except in Firefox) due to communication restrictions between the browser and your desktop.</li>
|
||||
<li>The record size is limited to 25 records because this demo is not interacting with an actual database, but with four JSON files containing 25 records each.</li>
|
||||
<li>Sorting of columns is disabled in this demo because no table data is cached when <code>serverSideSorting</code> is enabled. <del>Sorting of columns is enabled in this demo by setting the <code>serverSideSorting</code> option to <code>false</code> after initialization. It only sorts the current table contents because there is no server to return sorted data</del>.</li>
|
||||
<li>The filters will only update the "Current Ajax url" because again, we're just working with JSON files here.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p class="small">* If you have a different JSON format and need help with the processing code, please ask the question on <a href="http://stackoverflow.com/questions/tagged/tablesorter">StackOverflow</a> or message me directly (gmail; wowmotty). Please don't open an issue for help with code.</p>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">ajaxProcessing</a></h3>
|
||||
<div>
|
||||
The <code>ajaxProcessing</code> function is needed to convert your custom JSON format into an array usable by the pager plugin (modified in 2.1.3)<br>
|
||||
<br>
|
||||
So, given this custom JSON format (this is only an example):
|
||||
<pre class="prettyprint lang-javascript">{
|
||||
"total_rows": 80,
|
||||
|
||||
"headers" : [
|
||||
"ID", "Name", "Country Code", "District", "Population"
|
||||
],
|
||||
|
||||
"rows" : [{
|
||||
"ID": 1,
|
||||
"Name": "Kabul",
|
||||
"CountryCode": "AFG",
|
||||
"District": "Kabol",
|
||||
"Population": 1780000
|
||||
}, {
|
||||
"ID": 2,
|
||||
"Name": "Qandahar",
|
||||
"CountryCode": "AFG",
|
||||
"District": "Qandahar",
|
||||
"Population": 237500
|
||||
}, {
|
||||
...
|
||||
}, {
|
||||
"ID": 25,
|
||||
"Name": "Haarlemmermeer",
|
||||
"CountryCode": "NLD",
|
||||
"District": "Noord-Holland",
|
||||
"Population": 110722
|
||||
}]
|
||||
}</pre>
|
||||
<h3>OBJECT returned</h3>
|
||||
<ul>
|
||||
<li>In <span class="version">v2.11</span>, the <code>ajaxProcessing</code> can just return the above object directly (<strong>or don't even bother setting an <code>ajaxProcessing</code> function</strong>).
|
||||
So, if an object is returned by the <code>ajaxProcessing</code> function, the data is stored in <code>table.config.pager.ajaxData</code>:
|
||||
<ul>
|
||||
<li>The object should contain attributes for <code>total</code> (numeric), <code>headers</code> (array) and <code>rows</code> (array of arrays).</li>
|
||||
<li>A replacement <code>output</code> option can also be loaded via this method and must be included in the <code>output</code> attribute (i.e. <code>ajaxData.output</code>).</li>
|
||||
<li>Additional attributes are also available to the output display by using the attribute key wrapped in curly brackets (e.g. <code>{extra}</code> from <code>ajaxData.extra</code>).</li>
|
||||
<li>Additional attributes can also be objects or arrays and can be accessed via the output string as <code>{extra:0}</code> (for arrays) or <code>{extra:key}</code> for objects.</li>
|
||||
<li>The page number is processed first, so it would be possible to use this string <code>{extra:{page}}</code> (<code>{page}</code> is a one-based index), or if you need a different value use <code>{page+1}</code> (zero-based index plus any number), or <code>{page-1}</code> (zero-based index minus any number).</li>
|
||||
<li>For more details, please see <a href="https://github.com/Mottie/tablesorter/issues/326">issue #326</a>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<h3>ARRAY returned</h3>
|
||||
<ul>
|
||||
<li>The <code>ajaxProcessing</code> function can return the data in the following format <code>[ total, rows, headers (optional) ]</code>,
|
||||
<br>or in version 2.9+ <code>[ rows, total, headers (optional) ]</code>,
|
||||
<br>or in <span class="version">v2.10</span>, return a jQuery object within the array <code>[ total, $rows ]</code>, or just <code>[ total ]</code>:
|
||||
<pre class="prettyprint lang-javascript">[
|
||||
// total # rows contained in the database
|
||||
80,
|
||||
// row data: array of arrays; each internal array has the table cell data for that row
|
||||
[
|
||||
[ 1, "Kabul", "AFG", "Kabol", 1780000 ], // [ "row1cell1", "row1cell2", ... "row1cellN" ],
|
||||
[ 2, "Qandahar", "AFG", "Qandahar", 237500 ], // [ "row2cell1", "row2cell2", ... "row2cellN" ],
|
||||
...
|
||||
[ 25, "Haarlemmermeer", "NLD", "Noord-Holland", 110722 ] // [ "rowNcell1", "rowNcell2", ... "rowNcellN" ]
|
||||
],
|
||||
[ "ID", "Name", "Country Code", "District", "Population" ] // [ "Header1", "Header2", ... "HeaderN" ] (optional)
|
||||
]</pre></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<h1>Demo</h1>
|
||||
Original Ajax url: <span id="origurl"></span><br>
|
||||
Current Ajax url: <span id="url"></span>
|
||||
<br>
|
||||
<table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<td class="pager sorter-false" colspan="5">
|
||||
<img src="../addons/pager/icons/first.png" class="first" alt="First" />
|
||||
<img src="../addons/pager/icons/prev.png" class="prev" alt="Prev" />
|
||||
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
|
||||
<img src="../addons/pager/icons/next.png" class="next" alt="Next" />
|
||||
<img src="../addons/pager/icons/last.png" class="last" alt="Last" />
|
||||
<select class="pagesize">
|
||||
<option value="25">25</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th data-value=">30">1</th>
|
||||
<th>2</th>
|
||||
<th>3</th>
|
||||
<th>4</th>
|
||||
<th>5</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>1</th>
|
||||
<th>2</th>
|
||||
<th>3</th>
|
||||
<th>4</th>
|
||||
<th>5</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="pager" colspan="5">
|
||||
<img src="../addons/pager/icons/first.png" class="first" alt="First" />
|
||||
<img src="../addons/pager/icons/prev.png" class="prev" alt="Prev" />
|
||||
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
|
||||
<img src="../addons/pager/icons/next.png" class="next" alt="Next" />
|
||||
<img src="../addons/pager/icons/last.png" class="last" alt="Last" />
|
||||
<select class="pagesize">
|
||||
<option value="25">25</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
|
||||
<h1>CSS</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-css">/* pager wrapper, div */
|
||||
.pager {
|
||||
padding: 5px;
|
||||
}
|
||||
/* pager wrapper, in thead/tfoot */
|
||||
td.pager {
|
||||
background-color: #e6eeee;
|
||||
}
|
||||
/* pager navigation arrows */
|
||||
.pager img {
|
||||
vertical-align: middle;
|
||||
margin-right: 2px;
|
||||
}
|
||||
/* pager output text */
|
||||
.pager .pagedisplay {
|
||||
font-size: 11px;
|
||||
padding: 0 5px 0 5px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*** loading ajax indeterminate progress indicator ***/
|
||||
#tablesorterPagerLoading {
|
||||
background: rgba(255,255,255,0.8) url(icons/loading.gif) center center no-repeat;
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
/*** css used when "updateArrows" option is true ***/
|
||||
/* the pager itself gets a disabled class when the number of rows is less than the size */
|
||||
.pager.disabled {
|
||||
display: none;
|
||||
}
|
||||
/* hide or fade out pager arrows when the first or last row is visible */
|
||||
.pager img.disabled {
|
||||
/* visibility: hidden */
|
||||
opacity: 0.5;
|
||||
filter: alpha(opacity=50);
|
||||
}</pre>
|
||||
</div>
|
||||
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<td class="pager" colspan="5">
|
||||
<img src="../addons/pager/icons/first.png" class="first"/>
|
||||
<img src="../addons/pager/icons/prev.png" class="prev"/>
|
||||
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
|
||||
<img src="../addons/pager/icons/next.png" class="next"/>
|
||||
<img src="../addons/pager/icons/last.png" class="last"/>
|
||||
<select class="pagesize">
|
||||
<option value="25">25</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>1 data-value="&gt;30"</th> <!-- thead text will be updated from the JSON; make sure the number of columns matches the JSON data -->
|
||||
<th>2</th>
|
||||
<th>3</th>
|
||||
<th>4</th>
|
||||
<th>5</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>1</th> <!-- tfoot text will be updated at the same time as the thead -->
|
||||
<th>2</th>
|
||||
<th>3</th>
|
||||
<th>4</th>
|
||||
<th>5</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="pager" colspan="5">
|
||||
<img src="../addons/pager/icons/first.png" class="first"/>
|
||||
<img src="../addons/pager/icons/prev.png" class="prev"/>
|
||||
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
|
||||
<img src="../addons/pager/icons/next.png" class="next"/>
|
||||
<img src="../addons/pager/icons/last.png" class="last"/>
|
||||
<select class="pagesize">
|
||||
<option value="25">25</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody> <!-- tbody will be loaded via JSON -->
|
||||
</tbody>
|
||||
</table></pre>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-pager-filtered.html">Pager plugin + filter widget ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var $url = $('#url');
|
||||
$('table')
|
||||
|
||||
// show current URL for the DEMO ONLY
|
||||
.on('changingUrl', function(e, url){
|
||||
$url.html(url);
|
||||
})
|
||||
|
||||
.on('pagerInitialized', function(){
|
||||
// allow THIS demo to sort the content; this variable is automatically set to true when ajax
|
||||
// is used as there isn't any way to sort the server side data from the client side.
|
||||
this.config.serverSideSorting = false;
|
||||
// show original highlighted URL
|
||||
$('#origurl').html( this.config.pager.ajaxUrl.replace(/(\{.*?\})/g, '<span class="results">$1</span>') );
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
468
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-pager-filtered.html
Executable file
468
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-pager-filtered.html
Executable file
@@ -0,0 +1,468 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Pager plugin + Filter widget</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>
|
||||
|
||||
<!-- Tablesorter: optional -->
|
||||
<link rel="stylesheet" href="../addons/pager/jquery.tablesorter.pager.css">
|
||||
<script src="../addons/pager/jquery.tablesorter.pager.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<script id="js">$(function(){
|
||||
|
||||
// define pager options
|
||||
var pagerOptions = {
|
||||
// target the pager markup - see the HTML block below
|
||||
container: $(".pager"),
|
||||
// output string - default is '{page}/{totalPages}'; possible variables: {page}, {totalPages}, {startRow}, {endRow} and {totalRows}
|
||||
output: '{startRow} - {endRow} / {filteredRows} ({totalRows})',
|
||||
// if true, the table will remain the same height no matter how many records are displayed. The space is made up by an empty
|
||||
// table row set to a height to compensate; default is false
|
||||
fixedHeight: true,
|
||||
// remove rows from the table to speed up the sort of large tables.
|
||||
// setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
|
||||
removeRows: false,
|
||||
// go to page selector - select dropdown that sets the current page
|
||||
cssGoto: '.gotoPage'
|
||||
};
|
||||
|
||||
// Initialize tablesorter
|
||||
// ***********************
|
||||
$("table")
|
||||
.tablesorter({
|
||||
theme: 'blue',
|
||||
headerTemplate : '{content} {icon}', // new in v2.7. Needed to add the bootstrap icon!
|
||||
widthFixed: true,
|
||||
widgets: ['zebra', 'filter']
|
||||
})
|
||||
|
||||
// initialize the pager plugin
|
||||
// ****************************
|
||||
.tablesorterPager(pagerOptions);
|
||||
|
||||
// Add two new rows using the "addRows" method
|
||||
// the "update" method doesn't work here because not all rows are
|
||||
// present in the table when the pager is applied ("removeRows" is false)
|
||||
// ***********************************************************************
|
||||
var r, $row, num = 50,
|
||||
row = '<tr><td>Student{i}</td><td>{m}</td><td>{g}</td><td>{r}</td><td>{r}</td><td>{r}</td><td>{r}</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>' +
|
||||
'<tr><td>Student{j}</td><td>{m}</td><td>{g}</td><td>{r}</td><td>{r}</td><td>{r}</td><td>{r}</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>';
|
||||
$('button:contains(Add)').click(function(){
|
||||
// add two rows of random data!
|
||||
r = row.replace(/\{[gijmr]\}/g, function(m){
|
||||
return {
|
||||
'{i}' : num + 1,
|
||||
'{j}' : num + 2,
|
||||
'{r}' : Math.round(Math.random() * 100),
|
||||
'{g}' : Math.random() > 0.5 ? 'male' : 'female',
|
||||
'{m}' : Math.random() > 0.5 ? 'Mathematics' : 'Languages'
|
||||
}[m];
|
||||
});
|
||||
num = num + 2;
|
||||
$row = $(r);
|
||||
$('table')
|
||||
.find('tbody').append($row)
|
||||
.trigger('addRows', [$row]);
|
||||
return false;
|
||||
});
|
||||
|
||||
// Delete a row
|
||||
// *************
|
||||
$('table').delegate('button.remove', 'click' ,function(){
|
||||
var t = $('table');
|
||||
// disabling the pager will restore all table rows
|
||||
t.trigger('disable.pager');
|
||||
// remove chosen row
|
||||
$(this).closest('tr').remove();
|
||||
// restore pager
|
||||
t.trigger('enable.pager');
|
||||
});
|
||||
|
||||
// Destroy pager / Restore pager
|
||||
// **************
|
||||
$('button:contains(Destroy)').click(function(){
|
||||
// Exterminate, annhilate, destroy! http://www.youtube.com/watch?v=LOqn8FxuyFs
|
||||
var $t = $(this);
|
||||
if (/Destroy/.test( $t.text() )){
|
||||
$('table').trigger('destroy.pager');
|
||||
$t.text('Restore Pager');
|
||||
} else {
|
||||
$('table').tablesorterPager(pagerOptions);
|
||||
$t.text('Destroy Pager');
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
// Disable / Enable
|
||||
// **************
|
||||
$('.toggle').click(function(){
|
||||
var mode = /Disable/.test( $(this).text() );
|
||||
$('table').trigger( (mode ? 'disable' : 'enable') + '.pager');
|
||||
$(this).text( (mode ? 'Enable' : 'Disable') + 'Pager');
|
||||
return false;
|
||||
});
|
||||
$('table').bind('pagerChange', function(){
|
||||
// pager automatically enables when table is sorted.
|
||||
$('.toggle').text('Disable');
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body id="pager-demo">
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Pager plugin + Filter widget</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> The following are not part of the original plugin:
|
||||
<ul>
|
||||
<li>When using this pager plugin with the filter widget, make sure that the <code>removeRows</code> option is set to <code>false</code> or it won't work.</li>
|
||||
<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>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<br>
|
||||
<button type="button">Add Rows</button> <button type="button" class="toggle">Disable Pager</button> <button type="button">Destroy Pager</button>
|
||||
<br><br>
|
||||
<div class="pager">
|
||||
Page: <select class="gotoPage"></select>
|
||||
<img src="../addons/pager/icons/first.png" class="first" alt="First" title="First page" />
|
||||
<img src="../addons/pager/icons/prev.png" class="prev" alt="Prev" title="Previous page" />
|
||||
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
|
||||
<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 value="10">10</option>
|
||||
<option value="20">20</option>
|
||||
<option value="30">30</option>
|
||||
<option value="40">40</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Major</th>
|
||||
<th>Sex</th>
|
||||
<th>English</th>
|
||||
<th>Japanese</th>
|
||||
<th>Calculus</th>
|
||||
<th>Geometry</th>
|
||||
<th class="filter-false remove sorter-false"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Major</th>
|
||||
<th>Sex</th>
|
||||
<th>English</th>
|
||||
<th>Japanese</th>
|
||||
<th>Calculus</th>
|
||||
<th>Geometry</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Student01</td>
|
||||
<td>Languages</td>
|
||||
<td>male</td>
|
||||
<td>80</td>
|
||||
<td>70</td>
|
||||
<td>75</td>
|
||||
<td>80</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student02</td>
|
||||
<td>Mathematics</td>
|
||||
<td>male</td>
|
||||
<td>90</td>
|
||||
<td>88</td>
|
||||
<td>100</td>
|
||||
<td>90</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student03</td>
|
||||
<td>Languages</td>
|
||||
<td>female</td>
|
||||
<td>85</td>
|
||||
<td>95</td>
|
||||
<td>80</td>
|
||||
<td>85</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student04</td>
|
||||
<td>Languages</td>
|
||||
<td>male</td>
|
||||
<td>60</td>
|
||||
<td>55</td>
|
||||
<td>100</td>
|
||||
<td>100</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student05</td>
|
||||
<td>Languages</td>
|
||||
<td>female</td>
|
||||
<td>68</td>
|
||||
<td>80</td>
|
||||
<td>95</td>
|
||||
<td>80</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student06</td>
|
||||
<td>Mathematics</td>
|
||||
<td>male</td>
|
||||
<td>100</td>
|
||||
<td>99</td>
|
||||
<td>100</td>
|
||||
<td>90</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student07</td>
|
||||
<td>Mathematics</td>
|
||||
<td>male</td>
|
||||
<td>85</td>
|
||||
<td>68</td>
|
||||
<td>90</td>
|
||||
<td>90</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student08</td>
|
||||
<td>Languages</td>
|
||||
<td>male</td>
|
||||
<td>100</td>
|
||||
<td>90</td>
|
||||
<td>90</td>
|
||||
<td>85</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student09</td>
|
||||
<td>Mathematics</td>
|
||||
<td>male</td>
|
||||
<td>80</td>
|
||||
<td>50</td>
|
||||
<td>65</td>
|
||||
<td>75</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student10</td>
|
||||
<td>Languages</td>
|
||||
<td>male</td>
|
||||
<td>85</td>
|
||||
<td>100</td>
|
||||
<td>100</td>
|
||||
<td>90</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student11</td>
|
||||
<td>Languages</td>
|
||||
<td>male</td>
|
||||
<td>86</td>
|
||||
<td>85</td>
|
||||
<td>100</td>
|
||||
<td>100</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student12</td>
|
||||
<td>Mathematics</td>
|
||||
<td>female</td>
|
||||
<td>100</td>
|
||||
<td>75</td>
|
||||
<td>70</td>
|
||||
<td>85</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student13</td>
|
||||
<td>Languages</td>
|
||||
<td>female</td>
|
||||
<td>100</td>
|
||||
<td>80</td>
|
||||
<td>100</td>
|
||||
<td>90</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student14</td>
|
||||
<td>Languages</td>
|
||||
<td>female</td>
|
||||
<td>50</td>
|
||||
<td>45</td>
|
||||
<td>55</td>
|
||||
<td>90</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student15</td>
|
||||
<td>Languages</td>
|
||||
<td>male</td>
|
||||
<td>95</td>
|
||||
<td>35</td>
|
||||
<td>100</td>
|
||||
<td>90</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student16</td>
|
||||
<td>Languages</td>
|
||||
<td>female</td>
|
||||
<td>100</td>
|
||||
<td>50</td>
|
||||
<td>30</td>
|
||||
<td>70</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student17</td>
|
||||
<td>Languages</td>
|
||||
<td>female</td>
|
||||
<td>80</td>
|
||||
<td>100</td>
|
||||
<td>55</td>
|
||||
<td>65</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student18</td>
|
||||
<td>Mathematics</td>
|
||||
<td>male</td>
|
||||
<td>30</td>
|
||||
<td>49</td>
|
||||
<td>55</td>
|
||||
<td>75</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student19</td>
|
||||
<td>Languages</td>
|
||||
<td>male</td>
|
||||
<td>68</td>
|
||||
<td>90</td>
|
||||
<td>88</td>
|
||||
<td>70</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student20</td>
|
||||
<td>Mathematics</td>
|
||||
<td>male</td>
|
||||
<td>40</td>
|
||||
<td>45</td>
|
||||
<td>40</td>
|
||||
<td>80</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student21</td>
|
||||
<td>Languages</td>
|
||||
<td>male</td>
|
||||
<td>50</td>
|
||||
<td>45</td>
|
||||
<td>100</td>
|
||||
<td>100</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student22</td>
|
||||
<td>Mathematics</td>
|
||||
<td>male</td>
|
||||
<td>100</td>
|
||||
<td>99</td>
|
||||
<td>100</td>
|
||||
<td>90</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr><td>Student23</td><td>Mathematics</td><td>male</td><td>82</td><td>77</td><td>0</td><td>79</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student24</td><td>Languages</td><td>female</td><td>100</td><td>91</td><td>13</td><td>82</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student25</td><td>Mathematics</td><td>male</td><td>22</td><td>96</td><td>82</td><td>53</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student26</td><td>Languages</td><td>female</td><td>37</td><td>29</td><td>56</td><td>59</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student27</td><td>Mathematics</td><td>male</td><td>86</td><td>82</td><td>69</td><td>23</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student28</td><td>Languages</td><td>female</td><td>44</td><td>25</td><td>43</td><td>1</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student29</td><td>Mathematics</td><td>male</td><td>77</td><td>47</td><td>22</td><td>38</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student30</td><td>Languages</td><td>female</td><td>19</td><td>35</td><td>23</td><td>10</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student31</td><td>Mathematics</td><td>male</td><td>90</td><td>27</td><td>17</td><td>50</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student32</td><td>Languages</td><td>female</td><td>60</td><td>75</td><td>33</td><td>38</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student33</td><td>Mathematics</td><td>male</td><td>4</td><td>31</td><td>37</td><td>15</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student34</td><td>Languages</td><td>female</td><td>77</td><td>97</td><td>81</td><td>44</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student35</td><td>Mathematics</td><td>male</td><td>5</td><td>81</td><td>51</td><td>95</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student36</td><td>Languages</td><td>female</td><td>70</td><td>61</td><td>70</td><td>94</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student37</td><td>Mathematics</td><td>male</td><td>60</td><td>3</td><td>61</td><td>84</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student38</td><td>Languages</td><td>female</td><td>63</td><td>39</td><td>0</td><td>11</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student39</td><td>Mathematics</td><td>male</td><td>50</td><td>46</td><td>32</td><td>38</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student40</td><td>Languages</td><td>female</td><td>51</td><td>75</td><td>25</td><td>3</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student41</td><td>Mathematics</td><td>male</td><td>43</td><td>34</td><td>28</td><td>78</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student42</td><td>Languages</td><td>female</td><td>11</td><td>89</td><td>60</td><td>95</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student43</td><td>Mathematics</td><td>male</td><td>48</td><td>92</td><td>18</td><td>88</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student44</td><td>Languages</td><td>female</td><td>82</td><td>2</td><td>59</td><td>73</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student45</td><td>Mathematics</td><td>male</td><td>91</td><td>73</td><td>37</td><td>39</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student46</td><td>Languages</td><td>female</td><td>4</td><td>8</td><td>12</td><td>10</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student47</td><td>Mathematics</td><td>male</td><td>89</td><td>10</td><td>6</td><td>11</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student48</td><td>Languages</td><td>female</td><td>90</td><td>32</td><td>21</td><td>18</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student49</td><td>Mathematics</td><td>male</td><td>42</td><td>49</td><td>49</td><td>72</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student50</td><td>Languages</td><td>female</td><td>56</td><td>37</td><td>67</td><td>54</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="pager">
|
||||
Page: <select class="gotoPage"></select> <img src="../addons/pager/icons/first.png" class="first" alt="First" title="First page" />
|
||||
<img src="../addons/pager/icons/prev.png" class="prev" alt="Prev" title="Previous page" />
|
||||
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
|
||||
<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 value="10">10</option>
|
||||
<option value="20">20</option>
|
||||
<option value="30">30</option>
|
||||
<option value="40">40</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-empty-table.html">Initializing tablesorter on a empty table ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
616
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-pager.html
Executable file
616
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-pager.html
Executable file
@@ -0,0 +1,616 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Pager plugin</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="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<!-- Tablesorter: optional -->
|
||||
<link rel="stylesheet" href="../addons/pager/jquery.tablesorter.pager.css">
|
||||
<script src="../addons/pager/jquery.tablesorter.pager.js"></script>
|
||||
|
||||
<script id="js">$(function(){
|
||||
|
||||
// **********************************
|
||||
// Description of ALL pager options
|
||||
// **********************************
|
||||
var pagerOptions = {
|
||||
|
||||
// target the pager markup - see the HTML block below
|
||||
container: $(".pager"),
|
||||
|
||||
// use this url format "http:/mydatabase.com?page={page}&size={size}&{sortList:col}"
|
||||
ajaxUrl: null,
|
||||
|
||||
// modify the url after all processing has been applied
|
||||
customAjaxUrl: function(table, url) { return url; },
|
||||
|
||||
// process ajax so that the data object is returned along with the total number of rows
|
||||
// example: { "data" : [{ "ID": 1, "Name": "Foo", "Last": "Bar" }], "total_rows" : 100 }
|
||||
ajaxProcessing: function(ajax){
|
||||
if (ajax && ajax.hasOwnProperty('data')) {
|
||||
// return [ "data", "total_rows" ];
|
||||
return [ ajax.total_rows, ajax.data ];
|
||||
}
|
||||
},
|
||||
|
||||
// output string - default is '{page}/{totalPages}'
|
||||
// possible variables: {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {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,
|
||||
|
||||
// starting page of the pager (zero based index)
|
||||
page: 0,
|
||||
|
||||
// Number of visible rows - default is 10
|
||||
size: 10,
|
||||
|
||||
// Save pager page & size if the storage script is loaded (requires $.tablesorter.storage in jquery.tablesorter.widgets.js)
|
||||
savePages : true,
|
||||
|
||||
//defines custom storage key
|
||||
storageKey:'tablesorter-pager',
|
||||
|
||||
// if true, the table will remain the same height no matter how many records are displayed. The space is made up by an empty
|
||||
// table row set to a height to compensate; default is false
|
||||
fixedHeight: true,
|
||||
|
||||
// remove rows from the table to speed up the sort of large tables.
|
||||
// setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
|
||||
removeRows: false,
|
||||
|
||||
// css class names of pager arrows
|
||||
cssNext: '.next', // next page arrow
|
||||
cssPrev: '.prev', // previous page arrow
|
||||
cssFirst: '.first', // go to first page arrow
|
||||
cssLast: '.last', // go to last page arrow
|
||||
cssGoto: '.gotoPage', // select dropdown to allow choosing a page
|
||||
|
||||
cssPageDisplay: '.pagedisplay', // location of where the "output" is displayed
|
||||
cssPageSize: '.pagesize', // page size selector - select dropdown that sets the "size" option
|
||||
|
||||
// class added to arrows when at the extremes (i.e. prev/first arrows are "disabled" when on the first page)
|
||||
cssDisabled: 'disabled', // Note there is no period "." in front of this class name
|
||||
cssErrorRow: 'tablesorter-errorRow' // ajax error information row
|
||||
|
||||
};
|
||||
|
||||
$("table")
|
||||
|
||||
// Initialize tablesorter
|
||||
// ***********************
|
||||
.tablesorter({
|
||||
theme: 'blue',
|
||||
widthFixed: true,
|
||||
widgets: ['zebra']
|
||||
})
|
||||
|
||||
// bind to pager events
|
||||
// *********************
|
||||
.bind('pagerChange pagerComplete pagerInitialized pageMoved', function(e, c){
|
||||
var msg = '"</span> event triggered, ' + (e.type === 'pagerChange' ? 'going to' : 'now on') +
|
||||
' page <span class="typ">' + (c.page + 1) + '/' + c.totalPages + '</span>';
|
||||
$('#display')
|
||||
.append('<li><span class="str">"' + e.type + msg + '</li>')
|
||||
.find('li:first').remove();
|
||||
})
|
||||
|
||||
// initialize the pager plugin
|
||||
// ****************************
|
||||
.tablesorterPager(pagerOptions);
|
||||
|
||||
// Add two new rows using the "addRows" method
|
||||
// the "update" method doesn't work here because not all rows are
|
||||
// present in the table when the pager is applied ("removeRows" is false)
|
||||
// ***********************************************************************
|
||||
var r, $row, num = 50,
|
||||
row = '<tr><td>Student{i}</td><td>{m}</td><td>{g}</td><td>{r}</td><td>{r}</td><td>{r}</td><td>{r}</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>' +
|
||||
'<tr><td>Student{j}</td><td>{m}</td><td>{g}</td><td>{r}</td><td>{r}</td><td>{r}</td><td>{r}</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>';
|
||||
$('button:contains(Add)').click(function(){
|
||||
// add two rows of random data!
|
||||
r = row.replace(/\{[gijmr]\}/g, function(m){
|
||||
return {
|
||||
'{i}' : num + 1,
|
||||
'{j}' : num + 2,
|
||||
'{r}' : Math.round(Math.random() * 100),
|
||||
'{g}' : Math.random() > 0.5 ? 'male' : 'female',
|
||||
'{m}' : Math.random() > 0.5 ? 'Mathematics' : 'Languages'
|
||||
}[m];
|
||||
});
|
||||
num = num + 2;
|
||||
$row = $(r);
|
||||
$('table')
|
||||
.find('tbody').append($row)
|
||||
.trigger('addRows', [$row]);
|
||||
return false;
|
||||
});
|
||||
|
||||
// Delete a row
|
||||
// *************
|
||||
$('table').delegate('button.remove', 'click' ,function(){
|
||||
var t = $('table');
|
||||
// disabling the pager will restore all table rows
|
||||
// t.trigger('disable.pager');
|
||||
// remove chosen row
|
||||
$(this).closest('tr').remove();
|
||||
// restore pager
|
||||
// t.trigger('enable.pager');
|
||||
t.trigger('update');
|
||||
return false;
|
||||
});
|
||||
|
||||
// Destroy pager / Restore pager
|
||||
// **************
|
||||
$('button:contains(Destroy)').click(function(){
|
||||
// Exterminate, annhilate, destroy! http://www.youtube.com/watch?v=LOqn8FxuyFs
|
||||
var $t = $(this);
|
||||
if (/Destroy/.test( $t.text() )){
|
||||
$('table').trigger('destroy.pager');
|
||||
$t.text('Restore Pager');
|
||||
} else {
|
||||
$('table').tablesorterPager(pagerOptions);
|
||||
$t.text('Destroy Pager');
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
// Disable / Enable
|
||||
// **************
|
||||
$('.toggle').click(function(){
|
||||
var mode = /Disable/.test( $(this).text() );
|
||||
$('table').trigger( (mode ? 'disable' : 'enable') + '.pager');
|
||||
$(this).text( (mode ? 'Enable' : 'Disable') + 'Pager');
|
||||
return false;
|
||||
});
|
||||
$('table').bind('pagerChange', function(){
|
||||
// pager automatically enables when table is sorted.
|
||||
$('.toggle').text('Disable Pager');
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body id="pager-demo">
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Pager plugin</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> 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>
|
||||
|
||||
<h1>Triggered Events</h1>
|
||||
<ul id="display">
|
||||
<li>Pager events will appear here.</li>
|
||||
<li> </li>
|
||||
<li> </li>
|
||||
</ul>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<br>
|
||||
<button type="button">Add Rows</button> <button type="button" class="toggle">Disable Pager</button> <button type="button">Destroy Pager</button>
|
||||
<br><br>
|
||||
<div class="pager">
|
||||
<img src="../addons/pager/icons/first.png" class="first" alt="First" />
|
||||
<img src="../addons/pager/icons/prev.png" class="prev" alt="Prev" />
|
||||
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
|
||||
<img src="../addons/pager/icons/next.png" class="next" alt="Next" />
|
||||
<img src="../addons/pager/icons/last.png" class="last" alt="Last" />
|
||||
<select class="pagesize" title="Select page size">
|
||||
<option value="10">10</option>
|
||||
<option value="20">20</option>
|
||||
<option value="30">30</option>
|
||||
<option value="40">40</option>
|
||||
</select>
|
||||
<select class="gotoPage" title="Select page number"></select>
|
||||
</div>
|
||||
|
||||
<table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Major</th>
|
||||
<th>Sex</th>
|
||||
<th>English</th>
|
||||
<th>Japanese</th>
|
||||
<th>Calculus</th>
|
||||
<th>Geometry</th>
|
||||
<th class="remove sorter-false"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Major</th>
|
||||
<th>Sex</th>
|
||||
<th>English</th>
|
||||
<th>Japanese</th>
|
||||
<th>Calculus</th>
|
||||
<th>Geometry</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Student01</td>
|
||||
<td>Languages</td>
|
||||
<td>male</td>
|
||||
<td>80</td>
|
||||
<td>70</td>
|
||||
<td>75</td>
|
||||
<td>80</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student02</td>
|
||||
<td>Mathematics</td>
|
||||
<td>male</td>
|
||||
<td>90</td>
|
||||
<td>88</td>
|
||||
<td>100</td>
|
||||
<td>90</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student03</td>
|
||||
<td>Languages</td>
|
||||
<td>female</td>
|
||||
<td>85</td>
|
||||
<td>95</td>
|
||||
<td>80</td>
|
||||
<td>85</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student04</td>
|
||||
<td>Languages</td>
|
||||
<td>male</td>
|
||||
<td>60</td>
|
||||
<td>55</td>
|
||||
<td>100</td>
|
||||
<td>100</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student05</td>
|
||||
<td>Languages</td>
|
||||
<td>female</td>
|
||||
<td>68</td>
|
||||
<td>80</td>
|
||||
<td>95</td>
|
||||
<td>80</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student06</td>
|
||||
<td>Mathematics</td>
|
||||
<td>male</td>
|
||||
<td>100</td>
|
||||
<td>99</td>
|
||||
<td>100</td>
|
||||
<td>90</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student07</td>
|
||||
<td>Mathematics</td>
|
||||
<td>male</td>
|
||||
<td>85</td>
|
||||
<td>68</td>
|
||||
<td>90</td>
|
||||
<td>90</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student08</td>
|
||||
<td>Languages</td>
|
||||
<td>male</td>
|
||||
<td>100</td>
|
||||
<td>90</td>
|
||||
<td>90</td>
|
||||
<td>85</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student09</td>
|
||||
<td>Mathematics</td>
|
||||
<td>male</td>
|
||||
<td>80</td>
|
||||
<td>50</td>
|
||||
<td>65</td>
|
||||
<td>75</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student10</td>
|
||||
<td>Languages</td>
|
||||
<td>male</td>
|
||||
<td>85</td>
|
||||
<td>100</td>
|
||||
<td>100</td>
|
||||
<td>90</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student11</td>
|
||||
<td>Languages</td>
|
||||
<td>male</td>
|
||||
<td>86</td>
|
||||
<td>85</td>
|
||||
<td>100</td>
|
||||
<td>100</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student12</td>
|
||||
<td>Mathematics</td>
|
||||
<td>female</td>
|
||||
<td>100</td>
|
||||
<td>75</td>
|
||||
<td>70</td>
|
||||
<td>85</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student13</td>
|
||||
<td>Languages</td>
|
||||
<td>female</td>
|
||||
<td>100</td>
|
||||
<td>80</td>
|
||||
<td>100</td>
|
||||
<td>90</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student14</td>
|
||||
<td>Languages</td>
|
||||
<td>female</td>
|
||||
<td>50</td>
|
||||
<td>45</td>
|
||||
<td>55</td>
|
||||
<td>90</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student15</td>
|
||||
<td>Languages</td>
|
||||
<td>male</td>
|
||||
<td>95</td>
|
||||
<td>35</td>
|
||||
<td>100</td>
|
||||
<td>90</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student16</td>
|
||||
<td>Languages</td>
|
||||
<td>female</td>
|
||||
<td>100</td>
|
||||
<td>50</td>
|
||||
<td>30</td>
|
||||
<td>70</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student17</td>
|
||||
<td>Languages</td>
|
||||
<td>female</td>
|
||||
<td>80</td>
|
||||
<td>100</td>
|
||||
<td>55</td>
|
||||
<td>65</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student18</td>
|
||||
<td>Mathematics</td>
|
||||
<td>male</td>
|
||||
<td>30</td>
|
||||
<td>49</td>
|
||||
<td>55</td>
|
||||
<td>75</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student19</td>
|
||||
<td>Languages</td>
|
||||
<td>male</td>
|
||||
<td>68</td>
|
||||
<td>90</td>
|
||||
<td>88</td>
|
||||
<td>70</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student20</td>
|
||||
<td>Mathematics</td>
|
||||
<td>male</td>
|
||||
<td>40</td>
|
||||
<td>45</td>
|
||||
<td>40</td>
|
||||
<td>80</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student21</td>
|
||||
<td>Languages</td>
|
||||
<td>male</td>
|
||||
<td>50</td>
|
||||
<td>45</td>
|
||||
<td>100</td>
|
||||
<td>100</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student22</td>
|
||||
<td>Mathematics</td>
|
||||
<td>male</td>
|
||||
<td>100</td>
|
||||
<td>99</td>
|
||||
<td>100</td>
|
||||
<td>90</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr><td>Student23</td><td>Mathematics</td><td>male</td><td>82</td><td>77</td><td>0</td><td>79</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student24</td><td>Languages</td><td>female</td><td>100</td><td>91</td><td>13</td><td>82</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student25</td><td>Mathematics</td><td>male</td><td>22</td><td>96</td><td>82</td><td>53</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student26</td><td>Languages</td><td>female</td><td>37</td><td>29</td><td>56</td><td>59</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student27</td><td>Mathematics</td><td>male</td><td>86</td><td>82</td><td>69</td><td>23</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student28</td><td>Languages</td><td>female</td><td>44</td><td>25</td><td>43</td><td>1</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student29</td><td>Mathematics</td><td>male</td><td>77</td><td>47</td><td>22</td><td>38</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student30</td><td>Languages</td><td>female</td><td>19</td><td>35</td><td>23</td><td>10</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student31</td><td>Mathematics</td><td>male</td><td>90</td><td>27</td><td>17</td><td>50</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student32</td><td>Languages</td><td>female</td><td>60</td><td>75</td><td>33</td><td>38</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student33</td><td>Mathematics</td><td>male</td><td>4</td><td>31</td><td>37</td><td>15</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student34</td><td>Languages</td><td>female</td><td>77</td><td>97</td><td>81</td><td>44</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student35</td><td>Mathematics</td><td>male</td><td>5</td><td>81</td><td>51</td><td>95</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student36</td><td>Languages</td><td>female</td><td>70</td><td>61</td><td>70</td><td>94</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student37</td><td>Mathematics</td><td>male</td><td>60</td><td>3</td><td>61</td><td>84</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student38</td><td>Languages</td><td>female</td><td>63</td><td>39</td><td>0</td><td>11</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student39</td><td>Mathematics</td><td>male</td><td>50</td><td>46</td><td>32</td><td>38</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student40</td><td>Languages</td><td>female</td><td>51</td><td>75</td><td>25</td><td>3</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student41</td><td>Mathematics</td><td>male</td><td>43</td><td>34</td><td>28</td><td>78</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student42</td><td>Languages</td><td>female</td><td>11</td><td>89</td><td>60</td><td>95</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student43</td><td>Mathematics</td><td>male</td><td>48</td><td>92</td><td>18</td><td>88</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student44</td><td>Languages</td><td>female</td><td>82</td><td>2</td><td>59</td><td>73</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student45</td><td>Mathematics</td><td>male</td><td>91</td><td>73</td><td>37</td><td>39</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student46</td><td>Languages</td><td>female</td><td>4</td><td>8</td><td>12</td><td>10</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student47</td><td>Mathematics</td><td>male</td><td>89</td><td>10</td><td>6</td><td>11</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student48</td><td>Languages</td><td>female</td><td>90</td><td>32</td><td>21</td><td>18</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student49</td><td>Mathematics</td><td>male</td><td>42</td><td>49</td><td>49</td><td>72</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student50</td><td>Languages</td><td>female</td><td>56</td><td>37</td><td>67</td><td>54</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="pager">
|
||||
<img src="../addons/pager/icons/first.png" class="first" alt="First" />
|
||||
<img src="../addons/pager/icons/prev.png" class="prev" alt="Prev" />
|
||||
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
|
||||
<img src="../addons/pager/icons/next.png" class="next" alt="Next" />
|
||||
<img src="../addons/pager/icons/last.png" class="last" alt="Last" />
|
||||
<select class="pagesize" title="Select page size">
|
||||
<option value="10">10</option>
|
||||
<option value="20">20</option>
|
||||
<option value="30">30</option>
|
||||
<option value="40">40</option>
|
||||
</select>
|
||||
<select class="gotoPage" title="Select page number"></select>
|
||||
</div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
|
||||
<h1>CSS</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-css">/* pager wrapper, div */
|
||||
.tablesorter-pager {
|
||||
padding: 5px;
|
||||
}
|
||||
/* pager wrapper, in thead/tfoot */
|
||||
td.tablesorter-pager {
|
||||
background-color: #e6eeee;
|
||||
margin: 0; /* needed for bootstrap .pager gets a 18px bottom margin */
|
||||
}
|
||||
/* pager navigation arrows */
|
||||
.tablesorter-pager img {
|
||||
vertical-align: middle;
|
||||
margin-right: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* pager output text */
|
||||
.tablesorter-pager .pagedisplay {
|
||||
padding: 0 5px 0 5px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* pager element reset (needed for bootstrap) */
|
||||
.tablesorter-pager select {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*** css used when "updateArrows" option is true ***/
|
||||
/* the pager itself gets a disabled class when the number of rows is less than the size */
|
||||
.tablesorter-pager.disabled {
|
||||
display: none;
|
||||
}
|
||||
/* hide or fade out pager arrows when the first or last row is visible */
|
||||
.tablesorter-pager .disabled {
|
||||
/* visibility: hidden */
|
||||
opacity: 0.5;
|
||||
filter: alpha(opacity=50);
|
||||
cursor: default;
|
||||
}</pre>
|
||||
</div>
|
||||
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"><table class="tablesorter">
|
||||
<!-- view page source to see the entire table -->
|
||||
</table>
|
||||
|
||||
<!-- pager -->
|
||||
<div id="pager" class="pager">
|
||||
<form>
|
||||
<img src="first.png" class="first"/>
|
||||
<img src="prev.png" class="prev"/>
|
||||
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
|
||||
<img src="next.png" class="next"/>
|
||||
<img src="last.png" class="last"/>
|
||||
<select class="pagesize">
|
||||
<option value="10">10</option>
|
||||
<option value="20">20</option>
|
||||
<option value="30">30</option>
|
||||
<option value="40">40</option>
|
||||
</select>
|
||||
</form>
|
||||
</div></pre>
|
||||
|
||||
</div>
|
||||
|
||||
<a id="change-log"></a>
|
||||
<h1>Pager Change Log</h1>
|
||||
<ul>
|
||||
<li>Moved to <a href="https://github.com/Mottie/tablesorter/wiki/Changes">wiki pages</a>.</li>
|
||||
</ul>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-pager-ajax.html">Pager plugin - Ajax ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,154 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Writing custom parsers, advanced use</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 id="js">// add parser through the tablesorter addParser method
|
||||
$(function(){
|
||||
|
||||
$.tablesorter.addParser({
|
||||
// set a unique id
|
||||
id: 'data',
|
||||
is: function(s) {
|
||||
// return false so this parser is not auto detected
|
||||
return false;
|
||||
},
|
||||
format: function(s, table, cell, cellIndex) {
|
||||
var $cell = $(cell);
|
||||
// I could have used $(cell).data(), then we get back an object which contains both
|
||||
// data-lastname & data-date; but I wanted to make this demo a bit more straight-forward
|
||||
// and easier to understand.
|
||||
|
||||
// first column (zero-based index) has lastname data attribute
|
||||
if (cellIndex === 0) {
|
||||
// returns lastname data-attribute, or cell text (s) if it doesn't exist
|
||||
return $cell.attr('data-lastname') || s;
|
||||
|
||||
// third column has date data attribute
|
||||
} else if (cellIndex === 2) {
|
||||
// return "mm-dd" that way we don't need to use "new Date()" to process it
|
||||
return $cell.attr('data-date') || s;
|
||||
}
|
||||
|
||||
// return cell text, just in case
|
||||
return s;
|
||||
},
|
||||
// flag for filter widget (true = ALWAYS search parsed values; false = search cell text)
|
||||
parsed: false,
|
||||
// set type, either numeric or text
|
||||
type: 'text'
|
||||
});
|
||||
|
||||
$('table').tablesorter({
|
||||
theme: 'blue',
|
||||
headers: {
|
||||
0 : { sorter: 'data' },
|
||||
2 : { sorter: 'data' }
|
||||
},
|
||||
widgets: ['zebra']
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Writing custom parsers, advanced use</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.15.0</span>, the <code>parsed</code> parameter
|
||||
<ul>
|
||||
<li>This parameter is a flag used by the filter widget.</li>
|
||||
<li>When <code>true</code>, the filter widget will only search through parsed data for matches.</li>
|
||||
<li>If <code>false</code> (default value), the filter widget will search through the cell text for matches.</li>
|
||||
</ul>
|
||||
</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>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name (Last)</th>
|
||||
<th>Originally from...</th>
|
||||
<th>Birthday</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-lastname="Allen">Joe Allen</td>
|
||||
<td>South Carolina</td>
|
||||
<td data-date="01-15">Jan 15</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-lastname="Torres">Lisa Torres</td>
|
||||
<td>Maryland</td>
|
||||
<td data-date="03-02">March 2nd</td> <!-- leading zeros needed to sort properly! -->
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-lastname="Franklin">Peter Louis Franklin</td>
|
||||
<td>Coventry</td>
|
||||
<td data-date="12-26">Boxing Day (Dec 26th)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-lastname="Jones">Maria Consuela de Los Angeles Ortiz Del Toro-Jones</td>
|
||||
<td>Texas</td>
|
||||
<td data-date="05-10">10 Mayo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-lastname="Bigglesworth">Mike "the Smasher" Bigglesworth</td>
|
||||
<td>Rhode Island</td>
|
||||
<td data-date="06-22">22nd of June</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-lastname="Smith">Fredrick Smith</td>
|
||||
<td>Ohio</td>
|
||||
<td data-date="03-10">10th Mar</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-text-extraction.html">Dealing with markup inside cells (textExtraction function) ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,131 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Disable or set the column parser using class names</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 id="js">$(function(){
|
||||
$("table").tablesorter({ theme: 'blue' });
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Disable or set the column parser using class names</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 tablesorter version 2.0.5 and older, only the metadata and headers options methods were available to set the parsers.</li>
|
||||
<li>In versions 2.0.11+, parsers could be set using class names.</li>
|
||||
<li>Currently (versions 2.3+), parsers can be set using any of the following methods (they all do the same thing), in order of priority:
|
||||
<ul>
|
||||
<li>jQuery data <code>data-sorter="text"</code> (see the Javascript block below on how to set it directly).</li>
|
||||
<li>metadata <code>class="{ sorter: "text" }"</code>. This requires the metadata plugin.</li>
|
||||
<li>headers option <code>headers : { 0 : { sorter: "text" } }</code>.</li>
|
||||
<li>header class name <code>class="sorter-text"</code>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="sorter-text">First Name</th>
|
||||
<th class="sorter-text">Last Name</th>
|
||||
<th class="sorter-false">Age</th>
|
||||
<th class="sorter-currency string-min">Total</th> <!-- class="string-min" treats strings in this numeric column as a large negative number -->
|
||||
<th class="sorter-percent empty-top">Discount</th> <!-- class="empty-top" sorts empty cells to the top -->
|
||||
<th class="sorter-usLongDate">Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>($9.99)</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td></td>
|
||||
<td>33</td>
|
||||
<td>$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td></td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>$153.19</td>
|
||||
<td>44%</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>N/A</td>
|
||||
<td></td>
|
||||
<td>Jan 18, 2007 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Evans</td>
|
||||
<td>18</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</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-parsers-jquery-data.html">Disable or set the column parser using jQuery data ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
175
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-parsers-dates.html
Executable file
175
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-parsers-dates.html
Executable file
@@ -0,0 +1,175 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter - Assorted date 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 { width: 20%; }
|
||||
</style>
|
||||
|
||||
<link href="../css/theme.blue.css" rel="stylesheet">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<!-- load month, weekday and two digit year parsers -->
|
||||
<script src="../js/parsers/parser-date-month.js"></script>
|
||||
<script src="../js/parsers/parser-date-weekday.js"></script>
|
||||
<script src="../js/parsers/parser-date-two-digit-year.js"></script>
|
||||
|
||||
<!-- http://sugarjs.com/dates#comparing_dates -->
|
||||
<script src="js/sugar.min.js"></script>
|
||||
<script src="../js/parsers/parser-date.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
// call the tablesorter plugin
|
||||
$("table").tablesorter({
|
||||
theme : 'blue',
|
||||
widgets : ["zebra"],
|
||||
// date range used by the two-digit year parser (added v2.14.0)
|
||||
dateRange : 30
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Assorted date 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>Parse Dates with these parsers
|
||||
<ul>
|
||||
<li>The "Date" column is using the <a href="http://sugarjs.com/dates#comparing_dates">sugar</a> library to parse dates. Make sure to include the sugar library and the sugar-date-parser.</li>
|
||||
<li>The "Weekday" column uses the included "weekday" parser. You can modify parser to match whatever language you are using.</li>
|
||||
<li>The "Month" column uses the included "month" parser. You can also modify the month names within the parser to match whatever language you are using.</li>
|
||||
<li>The "Year" column is just using the included two digit year parser:
|
||||
<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>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>
|
||||
</li>
|
||||
<li>The "Time" column is using the built-in time parser which has been always been included with tablesorter .</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="sorter-sugar">Date</th>
|
||||
<th class="sorter-weekday">Weekday</th>
|
||||
<th class="sorter-month">Month</th>
|
||||
<th class="sorter-mmddyy">MM/DD/YY</th> <!-- "sorter-ddmmyy" also available -->
|
||||
<th class="sorter-time">Time</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>next friday</td><td>Friday</td><td>Aug</td><td>1/1/12</td><td>12:00 PM</td></tr>
|
||||
<tr><td>today</td><td>Thurs</td><td>September</td><td>1/1/12</td><td>00:00</td></tr>
|
||||
<tr><td>last Tuesday</td><td>Fri</td><td>Mar</td><td>1/1/10</td><td>18:00</td></tr>
|
||||
<tr><td>the day after tomorrow</td><td>Wed</td><td>July</td><td>1/1/13</td><td>13:00</td></tr>
|
||||
<tr><td>2010-05-25T12:30:40.299+01:00</td><td>Monday</td><td>Jan</td><td>1/1/11</td><td>1:30 PM</td></tr>
|
||||
<tr><td>May 25th of next year</td><td>Tues</td><td>Nov</td><td>1/1/11</td><td>14:00</td></tr>
|
||||
<tr><td>25 May 2010</td><td>Tuesday</td><td>November</td><td>1/1/11</td><td>1:58 PM</td></tr>
|
||||
<tr><td>the last day of March</td><td>Mon</td><td>December</td><td>1/1/12</td><td>2:10 PM</td></tr>
|
||||
<tr><td>last month</td><td>Wednesday</td><td>April</td><td>1/1/14</td><td>13:50</td></tr>
|
||||
<tr><td>one day before yesterday</td><td>Thursday</td><td>Feb</td><td>1/1/08</td><td>4:00 AM</td></tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h3>Two digit year calculator:</h3>
|
||||
<div>two digit year <input class="tdy" type="number" min="0" max="99" value="20"> becomes <span class="result">2020</span></div>
|
||||
<div class="params">
|
||||
( <label>range</label> <input class="range" type="number" value="50" min="0" max="99">
|
||||
<label>"current year"</label> <input class="current" type="number" value="2011" min="1900" max="9999"> )
|
||||
</div>
|
||||
|
||||
<h1>Page Header</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><!-- blue theme stylesheet with additional css styles added in v2.0.17 -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<!-- tablesorter plugin -->
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<!-- load month, weekday and two digit year parsers -->
|
||||
<script src="../js/parsers/parser-date-month.js"></script>
|
||||
<script src="../js/parsers/parser-date-weekday.js"></script>
|
||||
<script src="../js/parsers/parser-date-two-digit-year.js"></script>
|
||||
|
||||
<!-- http://sugarjs.com/dates#comparing_dates -->
|
||||
<script src="../js/sugar.js"></script>
|
||||
<script src="../js/parsers/parser-date-sugar.js"></script></pre>
|
||||
</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-widget-filter.html">Applying the filter widget ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.result, .tdy { color: red; }
|
||||
.params { font-size: 0.8em; }
|
||||
</style>
|
||||
<script>
|
||||
$(function(){
|
||||
var tdy = $('.tdy'), // two digit year
|
||||
a = $('.result'), // answer
|
||||
r = $('.range'), // range
|
||||
c = $('.current'), // current year
|
||||
y = new Date().getFullYear();
|
||||
|
||||
tdy.val( (y + 20).toString().slice(-2) ); // use this year + 20
|
||||
c.val( y );
|
||||
|
||||
$('input').on('change', function(){
|
||||
var y = parseInt(tdy.val(), 10),
|
||||
result = 1900 + y,
|
||||
range = parseInt(r.val(), 10);
|
||||
if (y < 10) { tdy.val('0' + y); }
|
||||
y = parseInt(c.val(), 10);
|
||||
while (y - result > range) {
|
||||
result += 100;
|
||||
}
|
||||
a.html(result);
|
||||
}).change();
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,134 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter - Duration parser</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 { width: 20%; }
|
||||
span.valx { float: right; }
|
||||
</style>
|
||||
|
||||
<link href="../css/theme.blue.css" rel="stylesheet">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<!-- load duration parsers -->
|
||||
<script src="../js/parsers/parser-duration.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
// call the tablesorter plugin
|
||||
$("table").tablesorter({
|
||||
theme : 'blue',
|
||||
sortList : [[1,0]],
|
||||
widgets : ["zebra"],
|
||||
|
||||
// Change max length of values
|
||||
// if any time value is > 9999 & < 100,000 then change this option to 5
|
||||
// values > 99,999 and < 100,000 then change the option to 6, etc
|
||||
durationLength : 4,
|
||||
// Modify the labels used in your table
|
||||
// labels can be of any length; multiple labels must be separated by a comma
|
||||
// 'y,d,h,m,s'
|
||||
durationLabels : '(?:years|year|y),(?:days|day|d),(?:hours|hour|h),(?:minutes|minute|min|m),(?:seconds|second|sec|s)'
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Duration parser</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>This parser will convert a duration time "<code>####</code><span class="label label-info">y</span> <code>####</code><span class="label label-info">d</span> <code>####</code><span class="label label-info">h</span> <code>####</code><span class="label label-info">m</span> <code>####</code><span class="label label-info">s</span>" into a sortable value.</li>
|
||||
<li>It is not designed to convert <code>365</code> days into <code>1</code> year, nor performo any other conversions.</li>
|
||||
<li>Options:
|
||||
<ul>
|
||||
<li><code>durationLabels</code>
|
||||
<ul>
|
||||
<li>Default: <code>'(?:years|year|y),(?:days|day|d),(?:hours|hour|h),(?:minutes|minute|min|m),(?:seconds|second|sec|s)'</code></li>
|
||||
<li>Add more or change the duration labels by modifying this option; separate the labels with a comma.</li>
|
||||
<li>The label doesn't need to include regex. If you are only using one letter, change the label to <code>'y,d,h,m,s'</code></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><code>durationLength</code>
|
||||
<ul>
|
||||
<li>Default: <code>4</code></li>
|
||||
<li>Modify this value so that the <em>max length</em> of values is included.</li>
|
||||
<li>The default value of <code>4</code> will include values up to <code>9,999</code></li>
|
||||
<li>Values less than or equal to <code>99,999</code> will require this option to be set to <code>5</code></li>
|
||||
<li>Values less than or equal to <code>999,999</code> need this value set to <code>6</code>, etc.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
|
||||
<button type="button" class="toggleparsedvalue">toggle</button> parsed values within the column
|
||||
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th class="sorter-duration">Duration</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>Frank</td><td>1y 23d 12h 44m 9s</td></tr>
|
||||
<tr><td>Fred</td><td>12d 12h 14m 20s</td></tr>
|
||||
<tr><td>Albert</td><td>12h 14m 3s</td></tr>
|
||||
<tr><td>Aaron</td><td>3d 11h 13m 22s</td></tr>
|
||||
<tr><td>Oliver</td><td>3d 11h 14s</td></tr>
|
||||
<tr><td>Xavier</td><td>11m 41s</td></tr>
|
||||
<tr><td>Henry</td><td>12m</td></tr>
|
||||
<tr><td>Lucy</td><td>23d 12h 44m 10s</td></tr>
|
||||
<tr><td>Marsha</td><td>1y 1h 1m 1s</td></tr>
|
||||
<tr><td>Pat</td><td>12 days 12hours 44minutes 50 seconds</td></tr>
|
||||
<tr><td>George</td><td>33s</td></tr>
|
||||
<tr><td>Oscar</td><td>24d 12h 11m 11s</td></tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Script</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-js"></pre>
|
||||
</div>
|
||||
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(function(){
|
||||
var $table = $('table'),
|
||||
len = $table[0].config.durationLength,
|
||||
regex = new RegExp('(\\d{' + len + '})', 'g');
|
||||
// add parsed values to order & value column
|
||||
addParsedValues( $table, [1], function(v){
|
||||
var t = v.replace(regex, '$1|');
|
||||
return t.substring(0, t.length - 1);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,128 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Feet-inch-fraction parser</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 { width: 50%; }
|
||||
</style>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<script src="../js/parsers/parser-feet-inch-fraction.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
$('table').tablesorter({
|
||||
theme: 'blue',
|
||||
headers: {
|
||||
0: { sorter: 'distance' },
|
||||
1: { sorter: 'distance' }
|
||||
},
|
||||
widgets: ['zebra']
|
||||
});
|
||||
|
||||
});</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Feet-inch-fraction parser</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<h1>Demo</h1>
|
||||
<button type="button" class="toggleparsedvalue">toggle</button> parsed values within the column
|
||||
<div id="demo">
|
||||
<table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Distance (feet & inches)</th>
|
||||
<th>Fractions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>3'</td><td>1½</td></tr>
|
||||
<tr><td>11"</td><td>22/12</td></tr>
|
||||
<tr><td>5'</td><td>3¼</td></tr>
|
||||
<tr><td>3"</td><td>5 ½</td></tr>
|
||||
<tr><td>½"</td><td>2¾</td></tr>
|
||||
|
||||
<tr><td>5' 11"</td><td>¾</td></tr>
|
||||
<tr><td>10' 11"</td><td>⅛</td></tr>
|
||||
<tr><td>10' 1"</td><td>5/6</td></tr>
|
||||
<tr><td>10' 4"</td><td>11/16</td></tr>
|
||||
<tr><td>5' 9"</td><td>⅜</td></tr>
|
||||
<tr><td>5 1/2'</td><td>2</td></tr>
|
||||
|
||||
<tr><td>5' 3/4"</td><td>2⅞</td></tr>
|
||||
<tr><td>5' 5/8"</td><td>3 ¾</td></tr>
|
||||
<tr><td>5' 3 1/2"</td><td>3 ⅛</td></tr>
|
||||
|
||||
<tr><td>10' 3⅛"</td><td>3/7</td></tr>
|
||||
|
||||
<tr><td>10' 2⅜"</td><td>3⅜</td></tr>
|
||||
<tr><td>10' 3⅝"</td><td>3 ½</td></tr>
|
||||
<tr><td>10' 2⅞"</td><td>3 ⅝</td></tr>
|
||||
<tr><td>5' 3¼"</td><td>2⅝</td></tr>
|
||||
<tr><td>5 ' 2 ½ "</td><td>2/3</td></tr>
|
||||
<tr><td>10' 2¾"</td><td>5 ⅝</td></tr>
|
||||
|
||||
<tr><td>5' 2 ½"</td><td>5 ⅜</td></tr>
|
||||
<tr><td>5' 2.5"</td><td>5/16</td></tr>
|
||||
|
||||
<tr><td>5' 2 1/2"</td><td>2 3/5</td></tr>
|
||||
|
||||
<tr><td> 10 ' 1 "</td><td>3</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h1>Page Header</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><!-- blue theme stylesheet -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<!-- tablesorter plugin -->
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<!-- load feet-inch-fraction parser -->
|
||||
<script src="../js/parsers/parser-feet-inch-fraction.js"></script></pre>
|
||||
</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>
|
||||
|
||||
<script>
|
||||
$(function(){
|
||||
// add parsed values to columns [0,1]
|
||||
addParsedValues($('table'), [0,1], function(num){ return Math.round(num * 100)/100; });
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,190 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - File Type Parser</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 id="css">tr.group-header td {
|
||||
background: #eee;
|
||||
}
|
||||
.group-name {
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
}
|
||||
.group-count {
|
||||
color: #999;
|
||||
}
|
||||
.group-hidden {
|
||||
display: none;
|
||||
}
|
||||
.group-header, .group-header td {
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
}
|
||||
/* collapsed arrow */
|
||||
tr.group-header td i {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 4px solid transparent;
|
||||
border-bottom: 4px solid #888;
|
||||
border-right: 4px solid #888;
|
||||
border-left: 4px solid transparent;
|
||||
margin-right: 7px;
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
}
|
||||
tr.group-header.collapsed td i {
|
||||
border-top: 5px solid transparent;
|
||||
border-bottom: 5px solid transparent;
|
||||
border-left: 5px solid #888;
|
||||
border-right: 0;
|
||||
margin-right: 10px;
|
||||
}</style>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<!-- grouping widget -->
|
||||
<script src="../js/parsers/parser-file-type.js"></script>
|
||||
<script src="../js/widgets/widget-grouping.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
// basic list from http://en.wikipedia.org/wiki/List_of_file_formats
|
||||
// there is no need to include this unless you plan on replacing the
|
||||
// default settings completely
|
||||
$.tablesorter.fileTypes = {
|
||||
// divides filetype extensions in the equivalent list below
|
||||
separator : '|',
|
||||
equivalents : {
|
||||
"3D Image" : "3dm|3ds|dwg|max|obj",
|
||||
"Audio" : "aif|aac|ape|flac|la|m4a|mid|midi|mp2|mp3|ogg|ra|raw|rm|wav|wma",
|
||||
"Compressed" : "7z|bin|cab|cbr|gz|gzip|iso|lha|lz|rar|tar|tgz|zip|zipx|zoo",
|
||||
"Database" : "csv|dat|db|dbf|json|ldb|mdb|myd|pdb|sql|tsv|wdb|wmdb|xlr|xls|xlsx|xml",
|
||||
"Development" : "asm|c|class|cls|cpp|cc|cs|cxx|cbp|cs|dba|fla|h|java|lua|pl|py|pyc|pyo|sh|sln|r|rb|vb",
|
||||
"Document" : "doc|docx|odt|ott|pages|pdf|rtf|tex|wpd|wps|wrd|wri",
|
||||
"Executable" : "apk|app|com|exe|gadget|lnk|msi",
|
||||
"Fonts" : "eot|fnt|fon|otf|ttf|woff",
|
||||
"Icons" : "ani|cur|icns|ico",
|
||||
"Images" : "bmp|gif|jpg|jpeg|jpe|jp2|pic|png|psd|tga|tif|tiff|wmf|webp",
|
||||
"Presentation" : "pps|ppt",
|
||||
"Published" : "chp|epub|lit|pub|ppp|fm|mobi",
|
||||
"Script" : "as|bat|cgi|cmd|jar|js|lua|scpt|scptd|sh|vbs|vb|wsf",
|
||||
"Styles" : "css|less|sass",
|
||||
"Text" : "info|log|md|markdown|nfo|tex|text|txt",
|
||||
"Vectors" : "awg|ai|eps|cdr|ps|svg",
|
||||
"Video" : "asf|avi|flv|m4v|mkv|mov|mp4|mpe|mpeg|mpg|ogg|rm|rv|swf|vob|wmv",
|
||||
"Web" : "asp|aspx|cer|cfm|htm|html|php|url|xhtml"
|
||||
}
|
||||
};
|
||||
|
||||
// To add a custom equivalent, define:
|
||||
// $.tablesorter.fileTypes.equivalents['xx'] = "A|B|C";
|
||||
|
||||
// This demo uses the group widget to organize the file type equivalents
|
||||
$("table").tablesorter({
|
||||
theme: 'blue',
|
||||
widgets : [ 'group', 'zebra' ],
|
||||
widgetOptions: {
|
||||
group_separator : '-' // default setting
|
||||
}
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>File Type Parser</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<p></p>
|
||||
<br>
|
||||
|
||||
<ul>
|
||||
<li>If this parser finds the file type extension within the equivalents list, it will add the equivalents group name to the beginning of the file so that during sorting, those file names will sort by the group they are in.</li>
|
||||
<li>Please look in the javascript code section below for a full list of default equivalents. This list is by no means extensive, but it can be easily modified or extended as needed.</li>
|
||||
<li>To add a new group to the equivalents list, just define a new group, <em>before initializing tablesorter</em>, as follows:
|
||||
<pre class="prettyprint lang-javascript">$.tablesorter.fileTypes.equivalents['xx'] = "A|B|C"</pre>
|
||||
</li>
|
||||
<li>But lets say your table is primarily being used to sort font file names, but you notice "svg" is listed under "vectors" (graphics) so you want to modify the equivalents list. Do it as follows:
|
||||
<pre class="prettyprint lang-javascript">$.tablesorter.fileTypes.equivalents["Vectors"] = "awg|ai|eps|cdr"; // redefine vectors without "svg"
|
||||
$.tablesorter.fileTypes.equivalents["Fonts"] += '|svg'; // just add it to the end (but first include the vertical bar = shift+\; above the enter key)!</pre>
|
||||
</li>
|
||||
<li>This parser only looks to see if an extension exists within the equivalents list, so any separator can be used (spaces, commas or vertical bars).</li>
|
||||
</ul>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo">
|
||||
|
||||
<button>Swap</button> (swap media column between "group-separator-1" & "group-separator-2")
|
||||
|
||||
<table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="sorter-filetype group-separator">Desktop Files</th>
|
||||
<th class="sorter-filetype group-separator-1">Tablesorter Files</th>
|
||||
<th id="media" class="group-separator-2">Media</th>
|
||||
<th class="sorter-filetype group-separator-1">Media Files</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>github.url</td><td>package.json</td><td>Music Disc #1 - Green Day - Boulevard of Broken Dreams</td><td>Muse - Supermassive Black Hole.mp3</td></tr>
|
||||
<tr><td>tablesorter.zip</td><td>readme.md</td><td>Music Disc #1 - Green Day - Holiday</td><td>Gorillaz - Feel Good Inc.mp3</td></tr>
|
||||
<tr><td>learn-git.pdf</td><td>index.html</td><td>Music Disc #1 - M83 - Midnight City</td><td>M83 - Midnight City.mp4</td></tr>
|
||||
<tr><td>pancake-cat.jpg</td><td>jquery.tablesorter.js</td><td>Music Disc #1 - Bob Marley - Everything is Gonna Be Alright</td><td>Radiohead - Creep.ogg</td></tr>
|
||||
<tr><td>to-do-list.txt</td><td>theme.blue.css</td><td>Music Disc #1 - Bob Marley - Jamming</td><td>Ellie Goulding - Lights.flv</td></tr>
|
||||
<tr><td>css-tips.docx</td><td>theme.less</td><td>Music Disc #1 - Bob Marley - Oh, Baby I Love Your Way</td><td>Imagine Dragons - Radioactive.avi</td></tr>
|
||||
<tr><td>frisbee-cat.png</td><td>black-asc.gif</td><td>Music Disc #1 - Bob Marley - Red Red Wine</td><td>Muse - Supermassive Black Hole.avi</td></tr>
|
||||
<tr><td>Diablo.lnk</td><td>green-unsorted.psd</td><td>Music Disc #1 - Bob Marley - No Woman No Cry</td><td>Alex Clare - Too Close.wma</td></tr>
|
||||
<tr><td>Warcraft.lnk</td><td>jquery.tablesorter.widgets.js</td><td>Music Disc #2 - Sublime - Santeria</td><td>The XX - Intro.mp3</td></tr>
|
||||
<tr><td>google.url</td><td>glyphicons-halflings.png</td><td>Music Disc #2 - Sublime - What I Got</td><td>AWOLNATION - Sail.wmv</td></tr>
|
||||
<tr><td>swimming-cat.gif</td><td>component.json</td><td>Music Disc #2 - Massive Attack - Teardrop</td><td>Of Monsters and Men - Little Talks.m4a</td></tr>
|
||||
<tr><td>photo-album.zip</td><td>themes.html</td><td>Music Disc #2 - Massive Attack - Dissolved Girl</td><td>Nina Simone - Feeling Good.flac</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>
|
||||
|
||||
<script>
|
||||
/* DEMO ONLY CODE */
|
||||
$(function(){
|
||||
$('button').click(function(){
|
||||
$('#media').toggleClass('group-separator-1 group-separator-2');
|
||||
$('table').trigger('sorton', [ [[2,0]] ]);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-option-sort-force.html">Force a default sorting order ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,434 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Ignore leading articles parser</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
|
||||
<script src="js/jquery-ui-latest.min.js"></script>
|
||||
<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="../js/parsers/parser-ignore-articles.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
$('table').tablesorter({
|
||||
theme: 'blue',
|
||||
widgets: ['zebra'],
|
||||
sortList: [[2, 0]],
|
||||
headers: {
|
||||
2: {
|
||||
sorter: 'ignoreArticles',
|
||||
ignoreArticles : 'en',
|
||||
ignoreArticlesExcept : ''
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Ignore leading articles parser</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<p></p>
|
||||
<br>
|
||||
<div id="root" class="accordion">
|
||||
|
||||
<h3 id="notes"><a href="#">Notes</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>In <span class="version">v2.17.8</span>, added a new option <code>ignoreArticlesExcept</code> option which allows ignoring a set pattern.</li>
|
||||
<li>This parser can not be applied to the original plugin.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3 id="setup"><a href="#">Setup</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>Set the language (French shown below; English is set by default) to use by adding any of the following (they all do the same thing), set in order of priority (<span class="version">v2.8.2</span>):
|
||||
<ul>
|
||||
<li>jQuery data <code>data-ignore-articles="fr"</code>.</li>
|
||||
<li>metadata <code>class="{ ignoreArticles : 'fr' }"</code>. This requires the metadata plugin.</li>
|
||||
<li>headers option <code>headers : { 0 : { ignoreArticles : 'fr' } }</code>.</li>
|
||||
<li>header class name <code>class="ignoreArticles-fr"</code>.</li>
|
||||
</ul>
|
||||
<br>
|
||||
</li>
|
||||
<li>In <span class="version">v2.17.8</span>, you can set up a string to ignore, e.g. keep a title intact like "A to Z", as follows:
|
||||
<ul>
|
||||
<li>jQuery data <code>data-ignore-articles-except="a to"</code>.</li>
|
||||
<li>metadata <code>class="{ ignoreArticlesExcept : 'a to' }"</code>. This requires the metadata plugin.</li>
|
||||
<li>headers option <code>headers : { 0 : { ignoreArticlesExcept : 'a to' } }</code>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>To add more than one title to ignore, separate them using a vertical bar (<kbd>shift</kbd>+<kbd>\</kbd>)
|
||||
<pre class="prettyprint lang-js">headers: {
|
||||
0: {
|
||||
ignoreArticles : 'en',
|
||||
// no special parsing for titles like "A to Z" or "A B C" or "A One"
|
||||
ignoreArticlesExcept : 'a to|a b |a one'
|
||||
}
|
||||
}</pre><span class="label label-info">Note</span> If your title needs a space (e.g. "A B C") make sure it isn't at the end of the <code>ignoreArticlesExcept</code> string; spaces on either end get stripped away.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3 id="customizing"><a href="#">Customizing</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>To add a custom language to the parser, use the following code:
|
||||
<pre class="prettyprint lang-javascript">$.extend( $.tablesorter.ignoreArticles, {
|
||||
"xx" : "a, l'_, de la"
|
||||
});
|
||||
|
||||
$('table').tablesorter({
|
||||
headers: {
|
||||
2: {
|
||||
sorter: 'ignoreArticles',
|
||||
ignoreArticles : 'xx',
|
||||
ignoreArticlesExcept : 'a to'
|
||||
}
|
||||
}
|
||||
});</pre>
|
||||
<ul>
|
||||
<li>where <code>xx</code> is the <code>ignoreArticles</code> id (abbreviation for the language)</li>
|
||||
<li>Each leading article must be separated by a comma and will be case-insensitive.</li>
|
||||
<li>Leading articles will only be removed if they are followed by a space; spaces are automatically included when parsed unless the article definition is followed by an underscore. See the <code>l'_</code> note below.</li>
|
||||
<li><code>a</code> is an example of a leading article which will be removed. So, "A Fistfull of Dollars" will only parse "Fistfull of Dollars" and will sort with the other words that start with an "F".</li>
|
||||
<li><code>l'_</code> includes an underscore (<code>_</code>); this tells the parser to <strong><em>not</em></strong> add a space after the word. So a title like "l'enfant" will parse as "enfant".</li>
|
||||
<li><code>de la</code> is an example showing that the parser can remove a multiple-word article.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Some languages have been included by default. The information below was obtained from <a href="http://en.wikipedia.org/wiki/Article_%28grammar%29#Variation_among_languages">this wikipedia page</a>, so if you discover any errors, or if you want to contribute another language, please <a href="https://github.com/Mottie/tablesorter/issues">open an issue</a>.
|
||||
<pre class="prettyprint lang-javascript">$.tablesorter.ignoreArticles = {
|
||||
"en" : "the, a, an",
|
||||
"de" : "der, die, das, des, dem, den, ein, eine, einer, eines, einem, einen",
|
||||
"nl" : "de, het, de, een",
|
||||
"es" : "el, la, lo, los, las, un, una, unos, unas",
|
||||
"pt" : "o, a, os, as, um, uma, uns, umas",
|
||||
"fr" : "le, la, l'_, les, un, une, des",
|
||||
"it" : "il, lo, la, l'_, i, gli, le, un', uno, una, un",
|
||||
"hu" : "a, az, egy"
|
||||
};</pre></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<br>
|
||||
<div id="demo"><h2><a href="http://www.imdb.com/chart/top">IMDB top 250 movies</a> (3/27/2013)</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<td class="center">Rank</td>
|
||||
<td class="center">Rating</td>
|
||||
<td>Title</td> <!-- data-sorter="ignoreArticles" data-ignore-articles="en" -->
|
||||
<td class="right">Votes</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td class="right">1.</td><td class="center">9.2</td><td><a href="http://www.imdb.com/title/tt0111161/">The Shawshank Redemption</a> (1994)</td><td class="right">941,067</td></tr>
|
||||
<tr><td class="right">2.</td><td class="center">9.2</td><td><a href="http://www.imdb.com/title/tt0068646/">The Godfather</a> (1972)</td><td class="right">673,484</td></tr>
|
||||
<tr><td class="right">3.</td><td class="center">9.0</td><td><a href="http://www.imdb.com/title/tt0071562/">The Godfather: Part II</a> (1974)</td><td class="right">434,176</td></tr>
|
||||
<tr><td class="right">4.</td><td class="center">8.9</td><td><a href="http://www.imdb.com/title/tt0110912/">Pulp Fiction</a> (1994)</td><td class="right">732,799</td></tr>
|
||||
<tr><td class="right">5.</td><td class="center">8.9</td><td><a href="http://www.imdb.com/title/tt0060196/">The Good, the Bad and the Ugly</a> (1966)</td><td class="right">286,482</td></tr>
|
||||
<tr><td class="right">6.</td><td class="center">8.9</td><td><a href="http://www.imdb.com/title/tt0050083/">12 Angry Men</a> (1957)</td><td class="right">231,572</td></tr>
|
||||
<tr><td class="right">7.</td><td class="center">8.9</td><td><a href="http://www.imdb.com/title/tt0468569/">The Dark Knight</a> (2008)</td><td class="right">917,028</td></tr>
|
||||
<tr><td class="right">8.</td><td class="center">8.9</td><td><a href="http://www.imdb.com/title/tt0108052/">Schindler's List</a> (1993)</td><td class="right">483,623</td></tr>
|
||||
<tr><td class="right">9.</td><td class="center">8.8</td><td><a href="http://www.imdb.com/title/tt0167260/">The Lord of the Rings: The Return of the King</a> (2003)</td><td class="right">672,581</td></tr>
|
||||
<tr><td class="right">10.</td><td class="center">8.8</td><td><a href="http://www.imdb.com/title/tt0137523/">Fight Club</a> (1999)</td><td class="right">716,995</td></tr>
|
||||
<tr><td class="right">11.</td><td class="center">8.8</td><td><a href="http://www.imdb.com/title/tt0080684/">Star Wars: Episode V - The Empire Strikes Back</a> (1980)</td><td class="right">462,561</td></tr>
|
||||
<tr><td class="right">12.</td><td class="center">8.8</td><td><a href="http://www.imdb.com/title/tt0120737/">The Lord of the Rings: The Fellowship of the Ring</a> (2001)</td><td class="right">697,724</td></tr>
|
||||
<tr><td class="right">13.</td><td class="center">8.8</td><td><a href="http://www.imdb.com/title/tt0073486/">One Flew Over the Cuckoo's Nest</a> (1975)</td><td class="right">393,499</td></tr>
|
||||
<tr><td class="right">14.</td><td class="center">8.7</td><td><a href="http://www.imdb.com/title/tt1375666/">Inception</a> (2010)</td><td class="right">732,630</td></tr>
|
||||
<tr><td class="right">15.</td><td class="center">8.7</td><td><a href="http://www.imdb.com/title/tt0099685/">Goodfellas</a> (1990)</td><td class="right">411,044</td></tr>
|
||||
<tr><td class="right">16.</td><td class="center">8.7</td><td><a href="http://www.imdb.com/title/tt0076759/">Star Wars</a> (1977)</td><td class="right">518,660</td></tr>
|
||||
<tr><td class="right">17.</td><td class="center">8.7</td><td><a href="http://www.imdb.com/title/tt0047478/">Seven Samurai</a> (1954)</td><td class="right">146,754</td></tr>
|
||||
<tr><td class="right">18.</td><td class="center">8.7</td><td><a href="http://www.imdb.com/title/tt0109830/">Forrest Gump</a> (1994)</td><td class="right">617,489</td></tr>
|
||||
<tr><td class="right">19.</td><td class="center">8.7</td><td><a href="http://www.imdb.com/title/tt0133093/">The Matrix</a> (1999)</td><td class="right">679,951</td></tr>
|
||||
<tr><td class="right">20.</td><td class="center">8.7</td><td><a href="http://www.imdb.com/title/tt0167261/">The Lord of the Rings: The Two Towers</a> (2002)</td><td class="right">603,969</td></tr>
|
||||
<tr><td class="right">21.</td><td class="center">8.7</td><td><a href="http://www.imdb.com/title/tt0317248/">City of God</a> (2002)</td><td class="right">308,820</td></tr>
|
||||
<tr><td class="right">22.</td><td class="center">8.6</td><td><a href="http://www.imdb.com/title/tt0114369/">Se7en</a> (1995)</td><td class="right">547,794</td></tr>
|
||||
<tr><td class="right">23.</td><td class="center">8.6</td><td><a href="http://www.imdb.com/title/tt0102926/">The Silence of the Lambs</a> (1991)</td><td class="right">459,251</td></tr>
|
||||
<tr><td class="right">24.</td><td class="center">8.6</td><td><a href="http://www.imdb.com/title/tt0064116/">Once Upon a Time in the West</a> (1968)</td><td class="right">129,773</td></tr>
|
||||
<tr><td class="right">25.</td><td class="center">8.6</td><td><a href="http://www.imdb.com/title/tt0034583/">Casablanca</a> (1942)</td><td class="right">252,435</td></tr>
|
||||
<tr><td class="right">26.</td><td class="center">8.6</td><td><a href="http://www.imdb.com/title/tt0114814/">The Usual Suspects</a> (1995)</td><td class="right">431,028</td></tr>
|
||||
<tr><td class="right">27.</td><td class="center">8.6</td><td><a href="http://www.imdb.com/title/tt0082971/">Raiders of the Lost Ark</a> (1981)</td><td class="right">394,043</td></tr>
|
||||
<tr><td class="right">28.</td><td class="center">8.6</td><td><a href="http://www.imdb.com/title/tt0047396/">Rear Window</a> (1954)</td><td class="right">190,219</td></tr>
|
||||
<tr><td class="right">29.</td><td class="center">8.6</td><td><a href="http://www.imdb.com/title/tt0038650/">It's a Wonderful Life</a> (1946)</td><td class="right">163,164</td></tr>
|
||||
<tr><td class="right">30.</td><td class="center">8.6</td><td><a href="http://www.imdb.com/title/tt0054215/">Psycho</a> (1960)</td><td class="right">239,467</td></tr>
|
||||
<tr><td class="right">31.</td><td class="center">8.6</td><td><a href="http://www.imdb.com/title/tt0110413/">Léon: The Professional</a> (1994)</td><td class="right">399,997</td></tr>
|
||||
<tr><td class="right">32.</td><td class="center">8.5</td><td><a href="http://www.imdb.com/title/tt0043014/">Sunset Blvd.</a> (1950)</td><td class="right">85,756</td></tr>
|
||||
<tr><td class="right">33.</td><td class="center">8.5</td><td><a href="http://www.imdb.com/title/tt0120586/">American History X</a> (1998)</td><td class="right">433,917</td></tr>
|
||||
<tr><td class="right">34.</td><td class="center">8.5</td><td><a href="http://www.imdb.com/title/tt0209144/">Memento</a> (2000)</td><td class="right">495,175</td></tr>
|
||||
<tr><td class="right">35.</td><td class="center">8.5</td><td><a href="http://www.imdb.com/title/tt0078788/">Apocalypse Now</a> (1979)</td><td class="right">276,646</td></tr>
|
||||
<tr><td class="right">36.</td><td class="center">8.5</td><td><a href="http://www.imdb.com/title/tt0103064/">Terminator 2: Judgment Day</a> (1991)</td><td class="right">425,770</td></tr>
|
||||
<tr><td class="right">37.</td><td class="center">8.5</td><td><a href="http://www.imdb.com/title/tt0120815/">Saving Private Ryan</a> (1998)</td><td class="right">482,123</td></tr>
|
||||
<tr><td class="right">38.</td><td class="center">8.5</td><td><a href="http://www.imdb.com/title/tt0057012/">Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb</a> (1964)</td><td class="right">226,703</td></tr>
|
||||
<tr><td class="right">39.</td><td class="center">8.5</td><td><a href="http://www.imdb.com/title/tt0021749/">City Lights</a> (1931)</td><td class="right">54,820</td></tr>
|
||||
<tr><td class="right">40.</td><td class="center">8.5</td><td><a href="http://www.imdb.com/title/tt0078748/">Alien</a> (1979)</td><td class="right">319,629</td></tr>
|
||||
<tr><td class="right">41.</td><td class="center">8.5</td><td><a href="http://www.imdb.com/title/tt1853728/">Django Unchained</a> (2012)</td><td class="right">263,202</td></tr>
|
||||
<tr><td class="right">42.</td><td class="center">8.5</td><td><a href="http://www.imdb.com/title/tt0053125/">North by Northwest</a> (1959)</td><td class="right">139,339</td></tr>
|
||||
<tr><td class="right">43.</td><td class="center">8.5</td><td><a href="http://www.imdb.com/title/tt0245429/">Spirited Away</a> (2001)</td><td class="right">211,121</td></tr>
|
||||
<tr><td class="right">44.</td><td class="center">8.5</td><td><a href="http://www.imdb.com/title/tt0027977/">Modern Times</a> (1936)</td><td class="right">69,431</td></tr>
|
||||
<tr><td class="right">45.</td><td class="center">8.5</td><td><a href="http://www.imdb.com/title/tt0033467/">Citizen Kane</a> (1941)</td><td class="right">197,473</td></tr>
|
||||
<tr><td class="right">46.</td><td class="center">8.5</td><td><a href="http://www.imdb.com/title/tt1345836/">The Dark Knight Rises</a> (2012)</td><td class="right">568,024</td></tr>
|
||||
<tr><td class="right">47.</td><td class="center">8.5</td><td><a href="http://www.imdb.com/title/tt0081505/">The Shining</a> (1980)</td><td class="right">333,295</td></tr>
|
||||
<tr><td class="right">48.</td><td class="center">8.5</td><td><a href="http://www.imdb.com/title/tt0088763/">Back to the Future</a> (1985)</td><td class="right">377,606</td></tr>
|
||||
<tr><td class="right">49.</td><td class="center">8.4</td><td><a href="http://www.imdb.com/title/tt0253474/">The Pianist</a> (2002)</td><td class="right">260,234</td></tr>
|
||||
<tr><td class="right">50.</td><td class="center">8.4</td><td><a href="http://www.imdb.com/title/tt0407887/">The Departed</a> (2006)</td><td class="right">478,100</td></tr>
|
||||
<tr><td class="right">51.</td><td class="center">8.4</td><td><a href="http://www.imdb.com/title/tt0118799/">Life Is Beautiful</a> (1997)</td><td class="right">206,585</td></tr>
|
||||
<tr><td class="right">52.</td><td class="center">8.4</td><td><a href="http://www.imdb.com/title/tt0022100/">M</a> (1931)</td><td class="right">62,112</td></tr>
|
||||
<tr><td class="right">53.</td><td class="center">8.4</td><td><a href="http://www.imdb.com/title/tt0052357/">Vertigo</a> (1958)</td><td class="right">145,330</td></tr>
|
||||
<tr><td class="right">54.</td><td class="center">8.4</td><td><a href="http://www.imdb.com/title/tt0169547/">American Beauty</a> (1999)</td><td class="right">495,829</td></tr>
|
||||
<tr><td class="right">55.</td><td class="center">8.4</td><td><a href="http://www.imdb.com/title/tt0050825/">Paths of Glory</a> (1957)</td><td class="right">70,416</td></tr>
|
||||
<tr><td class="right">56.</td><td class="center">8.4</td><td><a href="http://www.imdb.com/title/tt0075314/">Taxi Driver</a> (1976)</td><td class="right">285,135</td></tr>
|
||||
<tr><td class="right">57.</td><td class="center">8.4</td><td><a href="http://www.imdb.com/title/tt0036775/">Double Indemnity</a> (1944)</td><td class="right">59,206</td></tr>
|
||||
<tr><td class="right">58.</td><td class="center">8.4</td><td><a href="http://www.imdb.com/title/tt0090605/">Aliens</a> (1986)</td><td class="right">289,891</td></tr>
|
||||
<tr><td class="right">59.</td><td class="center">8.4</td><td><a href="http://www.imdb.com/title/tt0435761/">Toy Story 3</a> (2010)</td><td class="right">277,784</td></tr>
|
||||
<tr><td class="right">60.</td><td class="center">8.4</td><td><a href="http://www.imdb.com/title/tt0910970/">WALL·E</a> (2008)</td><td class="right">376,223</td></tr>
|
||||
<tr><td class="right">61.</td><td class="center">8.4</td><td><a href="http://www.imdb.com/title/tt0405094/">The Lives of Others</a> (2006)</td><td class="right">147,553</td></tr>
|
||||
<tr><td class="right">62.</td><td class="center">8.4</td><td><a href="http://www.imdb.com/title/tt0172495/">Gladiator</a> (2000)</td><td class="right">528,198</td></tr>
|
||||
<tr><td class="right">63.</td><td class="center">8.4</td><td><a href="http://www.imdb.com/title/tt0120689/">The Green Mile</a> (1999)</td><td class="right">390,685</td></tr>
|
||||
<tr><td class="right">64.</td><td class="center">8.4</td><td><a href="http://www.imdb.com/title/tt1675434/">The Intouchables</a> (2011)</td><td class="right">164,584</td></tr>
|
||||
<tr><td class="right">65.</td><td class="center">8.4</td><td><a href="http://www.imdb.com/title/tt0066921/">A Clockwork Orange</a> (1971)</td><td class="right">318,549</td></tr>
|
||||
<tr><td class="right">66.</td><td class="center">8.4</td><td><a href="http://www.imdb.com/title/tt0211915/">Amélie</a> (2001)</td><td class="right">314,747</td></tr>
|
||||
<tr><td class="right">67.</td><td class="center">8.4</td><td><a href="http://www.imdb.com/title/tt0032553/">The Great Dictator</a> (1940)</td><td class="right">68,287</td></tr>
|
||||
<tr><td class="right">68.</td><td class="center">8.4</td><td><a href="http://www.imdb.com/title/tt0482571/">The Prestige</a> (2006)</td><td class="right">432,239</td></tr>
|
||||
<tr><td class="right">69.</td><td class="center">8.4</td><td><a href="http://www.imdb.com/title/tt0056172/">Lawrence of Arabia</a> (1962)</td><td class="right">117,981</td></tr>
|
||||
<tr><td class="right">70.</td><td class="center">8.4</td><td><a href="http://www.imdb.com/title/tt0056592/">To Kill a Mockingbird</a> (1962)</td><td class="right">128,498</td></tr>
|
||||
<tr><td class="right">71.</td><td class="center">8.4</td><td><a href="http://www.imdb.com/title/tt0105236/">Reservoir Dogs</a> (1992)</td><td class="right">369,352</td></tr>
|
||||
<tr><td class="right">72.</td><td class="center">8.4</td><td><a href="http://www.imdb.com/title/tt0082096/">Das Boot</a> (1981)</td><td class="right">106,465</td></tr>
|
||||
<tr><td class="right">73.</td><td class="center">8.4</td><td><a href="http://www.imdb.com/title/tt0041959/">The Third Man</a> (1949)</td><td class="right">73,465</td></tr>
|
||||
<tr><td class="right">74.</td><td class="center">8.4</td><td><a href="http://www.imdb.com/title/tt0180093/">Requiem for a Dream</a> (2000)</td><td class="right">336,877</td></tr>
|
||||
<tr><td class="right">75.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0095765/">Cinema Paradiso</a> (1988)</td><td class="right">81,418</td></tr>
|
||||
<tr><td class="right">76.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0040897/">The Treasure of the Sierra Madre</a> (1948)</td><td class="right">49,807</td></tr>
|
||||
<tr><td class="right">77.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0338013/">Eternal Sunshine of the Spotless Mind</a> (2004)</td><td class="right">389,500</td></tr>
|
||||
<tr><td class="right">78.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0110357/">The Lion King</a> (1994)</td><td class="right">313,388</td></tr>
|
||||
<tr><td class="right">79.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0087843/">Once Upon a Time in America</a> (1984)</td><td class="right">129,414</td></tr>
|
||||
<tr><td class="right">80.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0086190/">Star Wars: Episode VI - Return of the Jedi</a> (1983)</td><td class="right">361,397</td></tr>
|
||||
<tr><td class="right">81.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0093058/">Full Metal Jacket</a> (1987)</td><td class="right">270,902</td></tr>
|
||||
<tr><td class="right">82.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0119488/">L.A. Confidential</a> (1997)</td><td class="right">264,295</td></tr>
|
||||
<tr><td class="right">83.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0071315/">Chinatown</a> (1974)</td><td class="right">130,976</td></tr>
|
||||
<tr><td class="right">84.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0112573/">Braveheart</a> (1995)</td><td class="right">426,632</td></tr>
|
||||
<tr><td class="right">85.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0364569/">Oldboy</a> (2003)</td><td class="right">189,333</td></tr>
|
||||
<tr><td class="right">86.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0071853/">Monty Python and the Holy Grail</a> (1975)</td><td class="right">239,427</td></tr>
|
||||
<tr><td class="right">87.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0045152/">Singin' in the Rain</a> (1952)</td><td class="right">89,152</td></tr>
|
||||
<tr><td class="right">88.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0053291/">Some Like It Hot</a> (1959)</td><td class="right">107,775</td></tr>
|
||||
<tr><td class="right">89.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0017136/">Metropolis</a> (1927)</td><td class="right">66,774</td></tr>
|
||||
<tr><td class="right">90.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0086879/">Amadeus</a> (1984)</td><td class="right">162,968</td></tr>
|
||||
<tr><td class="right">91.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0040522/">Bicycle Thieves</a> (1948)</td><td class="right">50,266</td></tr>
|
||||
<tr><td class="right">92.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0042876/">Rashomon</a> (1950)</td><td class="right">61,981</td></tr>
|
||||
<tr><td class="right">93.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0062622/">2001: A Space Odyssey</a> (1968)</td><td class="right">246,317</td></tr>
|
||||
<tr><td class="right">94.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0042192/">All About Eve</a> (1950)</td><td class="right">51,722</td></tr>
|
||||
<tr><td class="right">95.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0105695/">Unforgiven</a> (1992)</td><td class="right">169,421</td></tr>
|
||||
<tr><td class="right">96.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0070735/">The Sting</a> (1973)</td><td class="right">104,985</td></tr>
|
||||
<tr><td class="right">97.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0097576/">Indiana Jones and the Last Crusade</a> (1989)</td><td class="right">298,740</td></tr>
|
||||
<tr><td class="right">98.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0053604/">The Apartment</a> (1960)</td><td class="right">62,712</td></tr>
|
||||
<tr><td class="right">99.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0081398/">Raging Bull</a> (1980)</td><td class="right">144,339</td></tr>
|
||||
<tr><td class="right">100.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0050212/">The Bridge on the River Kwai</a> (1957)</td><td class="right">92,073</td></tr>
|
||||
<tr><td class="right">101.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0051201/">Witness for the Prosecution</a> (1957)</td><td class="right">31,562</td></tr>
|
||||
<tr><td class="right">102.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0095327/">Grave of the Fireflies</a> (1988)</td><td class="right">65,417</td></tr>
|
||||
<tr><td class="right">103.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0095016/">Die Hard</a> (1988)</td><td class="right">349,451</td></tr>
|
||||
<tr><td class="right">104.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0372784/">Batman Begins</a> (2005)</td><td class="right">535,306</td></tr>
|
||||
<tr><td class="right">105.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt1832382/">A Separation</a> (2011)</td><td class="right">79,685</td></tr>
|
||||
<tr><td class="right">106.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0055630/">Yojimbo</a> (1961)</td><td class="right">44,988</td></tr>
|
||||
<tr><td class="right">107.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0208092/">Snatch.</a> (2000)</td><td class="right">344,587</td></tr>
|
||||
<tr><td class="right">108.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0361748/">Inglourious Basterds</a> (2009)</td><td class="right">436,200</td></tr>
|
||||
<tr><td class="right">109.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0059578/">For a Few Dollars More</a> (1965)</td><td class="right">83,738</td></tr>
|
||||
<tr><td class="right">110.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0363163/">Downfall</a> (2004)</td><td class="right">149,623</td></tr>
|
||||
<tr><td class="right">111.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0457430/">Pan's Labyrinth</a> (2006)</td><td class="right">277,965</td></tr>
|
||||
<tr><td class="right">112.</td><td class="center">8.2</td><td><a href="http://www.imdb.com/title/tt0057115/">The Great Escape</a> (1963)</td><td class="right">98,813</td></tr>
|
||||
<tr><td class="right">113.</td><td class="center">8.2</td><td><a href="http://www.imdb.com/title/tt0031679/">Mr. Smith Goes to Washington</a> (1939)</td><td class="right">49,357</td></tr>
|
||||
<tr><td class="right">114.</td><td class="center">8.2</td><td><a href="http://www.imdb.com/title/tt1049413/">Up</a> (2009)</td><td class="right">319,413</td></tr>
|
||||
<tr><td class="right">115.</td><td class="center">8.2</td><td><a href="http://www.imdb.com/title/tt0047296/">On the Waterfront</a> (1954)</td><td class="right">62,092</td></tr>
|
||||
<tr><td class="right">116.</td><td class="center">8.2</td><td><a href="http://www.imdb.com/title/tt0114709/">Toy Story</a> (1995)</td><td class="right">319,895</td></tr>
|
||||
<tr><td class="right">117.</td><td class="center">8.2</td><td><a href="http://www.imdb.com/title/tt0080678/">The Elephant Man</a> (1980)</td><td class="right">98,958</td></tr>
|
||||
<tr><td class="right">118.</td><td class="center">8.2</td><td><a href="http://www.imdb.com/title/tt0050976/">The Seventh Seal</a> (1957)</td><td class="right">66,074</td></tr>
|
||||
<tr><td class="right">119.</td><td class="center">8.2</td><td><a href="http://www.imdb.com/title/tt0113277/">Heat</a> (1995)</td><td class="right">261,142</td></tr>
|
||||
<tr><td class="right">120.</td><td class="center">8.2</td><td><a href="http://www.imdb.com/title/tt0017925/">The General</a> (1926)</td><td class="right">31,115</td></tr>
|
||||
<tr><td class="right">121.</td><td class="center">8.2</td><td><a href="http://www.imdb.com/title/tt0033870/">The Maltese Falcon</a> (1941)</td><td class="right">73,450</td></tr>
|
||||
<tr><td class="right">122.</td><td class="center">8.2</td><td><a href="http://www.imdb.com/title/tt0083658/">Blade Runner</a> (1982)</td><td class="right">293,867</td></tr>
|
||||
<tr><td class="right">123.</td><td class="center">8.2</td><td><a href="http://www.imdb.com/title/tt1205489/">Gran Torino</a> (2008)</td><td class="right">316,184</td></tr>
|
||||
<tr><td class="right">124.</td><td class="center">8.2</td><td><a href="http://www.imdb.com/title/tt0032976/">Rebecca</a> (1940)</td><td class="right">54,605</td></tr>
|
||||
<tr><td class="right">125.</td><td class="center">8.2</td><td><a href="http://www.imdb.com/title/tt0012349/">The Kid</a> (1921)</td><td class="right">30,188</td></tr>
|
||||
<tr><td class="right">126.</td><td class="center">8.2</td><td><a href="http://www.imdb.com/title/tt0050986/">Wild Strawberries</a> (1957)</td><td class="right">36,922</td></tr>
|
||||
<tr><td class="right">127.</td><td class="center">8.2</td><td><a href="http://www.imdb.com/title/tt0086250/">Scarface</a> (1983)</td><td class="right">301,908</td></tr>
|
||||
<tr><td class="right">128.</td><td class="center">8.2</td><td><a href="http://www.imdb.com/title/tt0116282/">Fargo</a> (1996)</td><td class="right">256,474</td></tr>
|
||||
<tr><td class="right">129.</td><td class="center">8.2</td><td><a href="http://www.imdb.com/title/tt0118715/">The Big Lebowski</a> (1998)</td><td class="right">308,325</td></tr>
|
||||
<tr><td class="right">130.</td><td class="center">8.2</td><td><a href="http://www.imdb.com/title/tt0052311/">Touch of Evil</a> (1958)</td><td class="right">47,592</td></tr>
|
||||
<tr><td class="right">131.</td><td class="center">8.2</td><td><a href="http://www.imdb.com/title/tt0089881/">Ran</a> (1985)</td><td class="right">50,064</td></tr>
|
||||
<tr><td class="right">132.</td><td class="center">8.2</td><td><a href="http://www.imdb.com/title/tt0077416/">The Deer Hunter</a> (1978)</td><td class="right">145,262</td></tr>
|
||||
<tr><td class="right">133.</td><td class="center">8.2</td><td><a href="http://www.imdb.com/title/tt0061512/">Cool Hand Luke</a> (1967)</td><td class="right">75,625</td></tr>
|
||||
<tr><td class="right">134.</td><td class="center">8.2</td><td><a href="http://www.imdb.com/title/tt0015864/">The Gold Rush</a> (1925)</td><td class="right">36,715</td></tr>
|
||||
<tr><td class="right">135.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0120735/">Lock, Stock and Two Smoking Barrels</a> (1998)</td><td class="right">244,635</td></tr>
|
||||
<tr><td class="right">136.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0401792/">Sin City</a> (2005)</td><td class="right">415,871</td></tr>
|
||||
<tr><td class="right">137.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0477348/">No Country for Old Men</a> (2007)</td><td class="right">353,912</td></tr>
|
||||
<tr><td class="right">138.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0025316/">It Happened One Night</a> (1934)</td><td class="right">38,738</td></tr>
|
||||
<tr><td class="right">139.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0044079/">Strangers on a Train</a> (1951)</td><td class="right">56,857</td></tr>
|
||||
<tr><td class="right">140.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0848228/">The Avengers</a> (2012)</td><td class="right">475,869</td></tr>
|
||||
<tr><td class="right">141.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0073195/">Jaws</a> (1975)</td><td class="right">236,363</td></tr>
|
||||
<tr><td class="right">142.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0167404/">The Sixth Sense</a> (1999)</td><td class="right">422,262</td></tr>
|
||||
<tr><td class="right">143.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0091763/">Platoon</a> (1986)</td><td class="right">180,937</td></tr>
|
||||
<tr><td class="right">144.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0112641/">Casino</a> (1995)</td><td class="right">192,252</td></tr>
|
||||
<tr><td class="right">145.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0084787/">The Thing</a> (1982)</td><td class="right">155,679</td></tr>
|
||||
<tr><td class="right">146.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0117951/">Trainspotting</a> (1996)</td><td class="right">273,789</td></tr>
|
||||
<tr><td class="right">147.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0044706/">High Noon</a> (1952)</td><td class="right">51,097</td></tr>
|
||||
<tr><td class="right">148.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0064115/">Butch Cassidy and the Sundance Kid</a> (1969)</td><td class="right">91,992</td></tr>
|
||||
<tr><td class="right">149.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0032138/">The Wizard of Oz</a> (1939)</td><td class="right">169,985</td></tr>
|
||||
<tr><td class="right">150.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0395169/">Hotel Rwanda</a> (2004)</td><td class="right">161,201</td></tr>
|
||||
<tr><td class="right">151.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0266697/">Kill Bill: Vol. 1</a> (2003)</td><td class="right">419,696</td></tr>
|
||||
<tr><td class="right">152.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0119217/">Good Will Hunting</a> (1997)</td><td class="right">312,846</td></tr>
|
||||
<tr><td class="right">153.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt1291584/">Warrior</a> (2011)</td><td class="right">159,949</td></tr>
|
||||
<tr><td class="right">154.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt1305806/">The Secret in Their Eyes</a> (2009)</td><td class="right">63,447</td></tr>
|
||||
<tr><td class="right">155.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0075686/">Annie Hall</a> (1977)</td><td class="right">112,605</td></tr>
|
||||
<tr><td class="right">156.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0031381/">Gone with the Wind</a> (1939)</td><td class="right">133,071</td></tr>
|
||||
<tr><td class="right">157.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0038787/">Notorious</a> (1946)</td><td class="right">47,266</td></tr>
|
||||
<tr><td class="right">158.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0032551/">The Grapes of Wrath</a> (1940)</td><td class="right">37,590</td></tr>
|
||||
<tr><td class="right">159.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0758758/">Into the Wild</a> (2007)</td><td class="right">226,286</td></tr>
|
||||
<tr><td class="right">160.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0096283/">My Neighbor Totoro</a> (1988)</td><td class="right">74,354</td></tr>
|
||||
<tr><td class="right">161.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0434409/">V for Vendetta</a> (2005)</td><td class="right">445,345</td></tr>
|
||||
<tr><td class="right">162.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0079470/">Life of Brian</a> (1979)</td><td class="right">163,492</td></tr>
|
||||
<tr><td class="right">163.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0266543/">Finding Nemo</a> (2003)</td><td class="right">351,617</td></tr>
|
||||
<tr><td class="right">164.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0892769/">How to Train Your Dragon</a> (2010)</td><td class="right">207,521</td></tr>
|
||||
<tr><td class="right">165.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0046912/">Dial M for Murder</a> (1954)</td><td class="right">57,132</td></tr>
|
||||
<tr><td class="right">166.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt1504320/">The King's Speech</a> (2010)</td><td class="right">247,037</td></tr>
|
||||
<tr><td class="right">167.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0469494/">There Will Be Blood</a> (2007)</td><td class="right">224,943</td></tr>
|
||||
<tr><td class="right">168.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0052618/">Ben-Hur</a> (1959)</td><td class="right">95,091</td></tr>
|
||||
<tr><td class="right">169.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0088247/">The Terminator</a> (1984)</td><td class="right">334,304</td></tr>
|
||||
<tr><td class="right">170.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0038355/">The Big Sleep</a> (1946)</td><td class="right">42,449</td></tr>
|
||||
<tr><td class="right">171.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0074958/">Network</a> (1976)</td><td class="right">61,922</td></tr>
|
||||
<tr><td class="right">172.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0048424/">The Night of the Hunter</a> (1955)</td><td class="right">39,940</td></tr>
|
||||
<tr><td class="right">173.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0405159/">Million Dollar Baby</a> (2004)</td><td class="right">267,944</td></tr>
|
||||
<tr><td class="right">174.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0092005/">Stand by Me</a> (1986)</td><td class="right">159,982</td></tr>
|
||||
<tr><td class="right">175.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0107048/">Groundhog Day</a> (1993)</td><td class="right">250,675</td></tr>
|
||||
<tr><td class="right">176.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0246578/">Donnie Darko</a> (2001)</td><td class="right">358,003</td></tr>
|
||||
<tr><td class="right">177.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0903624/">The Hobbit: An Unexpected Journey</a> (2012)</td><td class="right">260,350</td></tr>
|
||||
<tr><td class="right">178.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0114746/">Twelve Monkeys</a> (1995)</td><td class="right">282,004</td></tr>
|
||||
<tr><td class="right">179.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0072890/">Dog Day Afternoon</a> (1975)</td><td class="right">111,658</td></tr>
|
||||
<tr><td class="right">180.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0947798/">Black Swan</a> (2010)</td><td class="right">325,866</td></tr>
|
||||
<tr><td class="right">181.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0245712/">Amores Perros</a> (2000)</td><td class="right">108,303</td></tr>
|
||||
<tr><td class="right">182.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0053198/">The 400 Blows</a> (1959)</td><td class="right">40,671</td></tr>
|
||||
<tr><td class="right">183.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0978762/">Mary and Max</a> (2009)</td><td class="right">57,268</td></tr>
|
||||
<tr><td class="right">184.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0440963/">The Bourne Ultimatum</a> (2007)</td><td class="right">285,964</td></tr>
|
||||
<tr><td class="right">185.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0454876/">Life of Pi</a> (2012)</td><td class="right">156,722</td></tr>
|
||||
<tr><td class="right">186.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0083987/">Gandhi</a> (1982)</td><td class="right">96,275</td></tr>
|
||||
<tr><td class="right">187.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0060827/">Persona</a> (1966)</td><td class="right">31,689</td></tr>
|
||||
<tr><td class="right">188.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0347149/">Howl's Moving Castle</a> (2004)</td><td class="right">104,225</td></tr>
|
||||
<tr><td class="right">189.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0049406/">The Killing</a> (1956)</td><td class="right">39,702</td></tr>
|
||||
<tr><td class="right">190.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0061722/">The Graduate</a> (1967)</td><td class="right">133,213</td></tr>
|
||||
<tr><td class="right">191.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0093779/">The Princess Bride</a> (1987)</td><td class="right">186,593</td></tr>
|
||||
<tr><td class="right">192.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0268978/">A Beautiful Mind</a> (2001)</td><td class="right">296,347</td></tr>
|
||||
<tr><td class="right">193.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0056801/">8½</a> (1963)</td><td class="right">48,845</td></tr>
|
||||
<tr><td class="right">194.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt1010048/">Slumdog Millionaire</a> (2008)</td><td class="right">373,963</td></tr>
|
||||
<tr><td class="right">195.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0054997/">The Hustler</a> (1961)</td><td class="right">38,935</td></tr>
|
||||
<tr><td class="right">196.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0061184/">Who's Afraid of Virginia Woolf?</a> (1966)</td><td class="right">33,649</td></tr>
|
||||
<tr><td class="right">197.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0047528/">La strada</a> (1954)</td><td class="right">28,752</td></tr>
|
||||
<tr><td class="right">198.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0075148/">Rocky</a> (1976)</td><td class="right">193,474</td></tr>
|
||||
<tr><td class="right">199.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0056218/">The Manchurian Candidate</a> (1962)</td><td class="right">48,813</td></tr>
|
||||
<tr><td class="right">200.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0052561/">Anatomy of a Murder</a> (1959)</td><td class="right">28,092</td></tr>
|
||||
<tr><td class="right">201.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt1655442/">The Artist</a> (2011/I)</td><td class="right">113,331</td></tr>
|
||||
<tr><td class="right">202.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0065214/">The Wild Bunch</a> (1969)</td><td class="right">46,187</td></tr>
|
||||
<tr><td class="right">203.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0070047/">The Exorcist</a> (1973)</td><td class="right">188,999</td></tr>
|
||||
<tr><td class="right">204.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0046359/">Stalag 17</a> (1953)</td><td class="right">30,022</td></tr>
|
||||
<tr><td class="right">205.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0040746/">Rope</a> (1948)</td><td class="right">57,554</td></tr>
|
||||
<tr><td class="right">206.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0056217/">The Man Who Shot Liberty Valance</a> (1962)</td><td class="right">35,292</td></tr>
|
||||
<tr><td class="right">207.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0072684/">Barry Lyndon</a> (1975)</td><td class="right">62,239</td></tr>
|
||||
<tr><td class="right">208.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0069281/">Sleuth</a> (1972)</td><td class="right">26,820</td></tr>
|
||||
<tr><td class="right">209.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0079944/">Stalker</a> (1979)</td><td class="right">38,428</td></tr>
|
||||
<tr><td class="right">210.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0338564/">Infernal Affairs</a> (2002)</td><td class="right">57,096</td></tr>
|
||||
<tr><td class="right">211.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0107207/">In the Name of the Father</a> (1993)</td><td class="right">54,640</td></tr>
|
||||
<tr><td class="right">212.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0120382/">The Truman Show</a> (1998)</td><td class="right">345,615</td></tr>
|
||||
<tr><td class="right">213.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0046250/">Roman Holiday</a> (1953)</td><td class="right">55,590</td></tr>
|
||||
<tr><td class="right">214.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0353969/">Memories of Murder</a> (2003)</td><td class="right">27,373</td></tr>
|
||||
<tr><td class="right">215.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0325980/">Pirates of the Caribbean: The Curse of the Black Pearl</a> (2003)</td><td class="right">457,277</td></tr>
|
||||
<tr><td class="right">216.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt1136608/">District 9</a> (2009)</td><td class="right">332,916</td></tr>
|
||||
<tr><td class="right">217.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0198781/">Monsters, Inc.</a> (2001)</td><td class="right">277,654</td></tr>
|
||||
<tr><td class="right">218.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0058461/">A Fistful of Dollars</a> (1964)</td><td class="right">71,024</td></tr>
|
||||
<tr><td class="right">219.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt1220719/">Ip Man</a> (2008)</td><td class="right">70,724</td></tr>
|
||||
<tr><td class="right">220.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0401383/">The Diving Bell and the Butterfly</a> (2007)</td><td class="right">61,322</td></tr>
|
||||
<tr><td class="right">221.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0382932/">Ratatouille</a> (2007)</td><td class="right">274,240</td></tr>
|
||||
<tr><td class="right">222.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt1201607/">Harry Potter and the Deathly Hallows: Part 2</a> (2011)</td><td class="right">257,398</td></tr>
|
||||
<tr><td class="right">223.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0796366/">Star Trek</a> (2009)</td><td class="right">291,734</td></tr>
|
||||
<tr><td class="right">224.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0044081/">A Streetcar Named Desire</a> (1951)</td><td class="right">54,316</td></tr>
|
||||
<tr><td class="right">225.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt1659337/">The Perks of Being a Wallflower</a> (2012)</td><td class="right">98,357</td></tr>
|
||||
<tr><td class="right">226.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0113247/">La Haine</a> (1995)</td><td class="right">54,972</td></tr>
|
||||
<tr><td class="right">227.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0101414/">Beauty and the Beast</a> (1991)</td><td class="right">163,508</td></tr>
|
||||
<tr><td class="right">228.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt1130884/">Shutter Island</a> (2010)</td><td class="right">370,474</td></tr>
|
||||
<tr><td class="right">229.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt1187043/">3 Idiots</a> (2009)</td><td class="right">63,883</td></tr>
|
||||
<tr><td class="right">230.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0020629/">All Quiet on the Western Front</a> (1930)</td><td class="right">34,318</td></tr>
|
||||
<tr><td class="right">231.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0063522/">Rosemary's Baby</a> (1968)</td><td class="right">91,657</td></tr>
|
||||
<tr><td class="right">232.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0087544/">Nausicaä of the Valley of the Wind</a> (1984)</td><td class="right">45,761</td></tr>
|
||||
<tr><td class="right">233.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0095953/">Rain Man</a> (1988)</td><td class="right">235,025</td></tr>
|
||||
<tr><td class="right">234.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0042546/">Harvey</a> (1950)</td><td class="right">33,525</td></tr>
|
||||
<tr><td class="right">235.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt1255953/">Incendies</a> (2010)</td><td class="right">29,047</td></tr>
|
||||
<tr><td class="right">236.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0986264/">Like Stars on Earth</a> (2007)</td><td class="right">28,610</td></tr>
|
||||
<tr><td class="right">237.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0327056/">Mystic River</a> (2003)</td><td class="right">225,582</td></tr>
|
||||
<tr><td class="right">238.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0107290/">Jurassic Park</a> (1993)</td><td class="right">290,452</td></tr>
|
||||
<tr><td class="right">239.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0079522/">Manhattan</a> (1979)</td><td class="right">68,578</td></tr>
|
||||
<tr><td class="right">240.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0070511/">Papillon</a> (1973)</td><td class="right">53,163</td></tr>
|
||||
<tr><td class="right">241.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0374546/">Spring, Summer, Fall, Winter... and Spring</a> (2003)</td><td class="right">36,974</td></tr>
|
||||
<tr><td class="right">242.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt1125849/">The Wrestler</a> (2008)</td><td class="right">187,480</td></tr>
|
||||
<tr><td class="right">243.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0013442/">Nosferatu</a> (1922)</td><td class="right">47,665</td></tr>
|
||||
<tr><td class="right">244.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt1454029/">The Help</a> (2011)</td><td class="right">150,081</td></tr>
|
||||
<tr><td class="right">245.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0118694/">In the Mood for Love</a> (2000)</td><td class="right">43,683</td></tr>
|
||||
<tr><td class="right">246.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0319061/">Big Fish</a> (2003)</td><td class="right">253,904</td></tr>
|
||||
<tr><td class="right">247.</td><td class="center">7.9</td><td><a href="http://www.imdb.com/title/tt0094226/">The Untouchables</a> (1987)</td><td class="right">146,540</td></tr>
|
||||
<tr><td class="right">248.</td><td class="center">7.9</td><td><a href="http://www.imdb.com/title/tt0036613/">Arsenic and Old Lace</a> (1944)</td><td class="right">41,392</td></tr>
|
||||
<tr><td class="right">249.</td><td class="center">7.9</td><td><a href="http://www.imdb.com/title/tt0092067/">Castle in the Sky</a> (1986)</td><td class="right">47,537</td></tr>
|
||||
<tr><td class="right">250.</td><td class="center">7.9</td><td><a href="http://www.imdb.com/title/tt0053221/">Rio Bravo</a> (1959)</td><td class="right">29,442</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
<h1>Page Header</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><!-- tablesorter -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<!-- load ignore-articles parser -->
|
||||
<script src="../js/parsers/parser-ignore-articles.js"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$('table').tablesorter({
|
||||
theme: 'blue',
|
||||
widgets: ['zebra'],
|
||||
sortList: [[2, 0]],
|
||||
headers: {
|
||||
2: {
|
||||
sorter: 'ignoreArticles',
|
||||
ignoreArticles : 'fr',
|
||||
ignoreArticlesExcept : ''
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script></pre>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,136 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - IP address 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="../js/parsers/parser-ipv6.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
$('table').tablesorter({
|
||||
theme: 'blue',
|
||||
widgets: ['zebra'],
|
||||
sortList: [[2, 0]],
|
||||
headers: {
|
||||
2: {
|
||||
sorter: 'ipv6Address'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>IPv4 & IPv6 address 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>This parser can be applied to the original plugin.</li>
|
||||
<li>The default "ipAdress" parser (IPv4) is included with the original tablesorter.</li>
|
||||
<li>A parser for IPv6 was added in <span class="version">v2.12</span> and named "ipv6Address":
|
||||
<ul>
|
||||
<li>Unlike some other custom parsers, this one will auto-detect & check for a valid IPv6 address since the same address can be represented in many different ways. Some examples are shown in the demo table below.</li>
|
||||
<li>IPv6 addresses are stored in the cache in their canonical decimal form, without the colons, for faster & easier numerical sorting.</li>
|
||||
<li><a href="../test.html">Extensive unit tests</a> are included with this parser.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>If the parser doesn't auto-detect which column has IPv6 addresses, use the headers sorter option to set it:
|
||||
<pre class="prettyprint lang-javascript">$(function(){
|
||||
$('table').tablesorter({
|
||||
headers: {
|
||||
2: {
|
||||
sorter: 'ipv6Address'
|
||||
}
|
||||
}
|
||||
});
|
||||
});</pre>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<button type="button" class="toggleparsedvalue">Toggle parsed values</button>
|
||||
<br>
|
||||
<div id="demo">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Name</td>
|
||||
<td>IPv4</td>
|
||||
<td>IPv6</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>Fred</td><td>1.2.3.4</td><td>f0f0::1</td></tr>
|
||||
<tr><td>Ginger</td><td>1.1.1.1</td><td>f0::1</td></tr>
|
||||
<tr><td>Mike</td><td>2.222.33.44</td><td>1:2:3:4:5::7:8</td></tr>
|
||||
<tr><td>George</td><td>255.255.255.255</td><td>::2:3:4</td></tr>
|
||||
<tr><td>Harry</td><td>251.2.33.4</td><td>f0f0:f::1</td></tr>
|
||||
<tr><td>Frank</td><td>251.002.31.4</td><td>::</td></tr>
|
||||
<tr><td>Kristy</td><td>2.221.003.4</td><td>0:0:0:0:0:0:0:0</td></tr>
|
||||
<tr><td>Lily</td><td>251.02.32.4</td><td>f0f0::f:1</td></tr>
|
||||
<tr><td>Maria</td><td>1.2.3.44</td><td>1:2:3:4:5:6:1.2.3.4</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
<h1>Page Header</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><!-- tablesorter -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<!-- load ipv6 parser -->
|
||||
<script src="../js/parsers/parser-ipv6.js"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$('table').tablesorter({
|
||||
theme: 'blue',
|
||||
widgets: ['zebra'],
|
||||
sortList: [[1, 0]],
|
||||
headers: {
|
||||
1: {
|
||||
sorter: 'ipv6Address'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script></pre>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(function(){
|
||||
// add parsed values to columns [0,1]
|
||||
addParsedValues($('table'), [1,2]);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,119 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Disable or set the column parser using jQuery data</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 id="js">$(function(){
|
||||
$("table").tablesorter({ theme: 'blue' });
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Disable or set the column parser using jQuery data</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> This functionality was added in version 2.2.3 (it is not part of the original plugin).
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-sorter="text">First Name</th>
|
||||
<th data-sorter="text">Last Name</th>
|
||||
<th data-sorter="false">Age</th>
|
||||
<th data-sorter="currency" data-string="min">Total</th> <!-- data-string="min" treats strings in this numeric column as a large negative number -->
|
||||
<th data-sorter="percent" data-empty="top">Discount</th> <!-- data-empty="top" sorts empty cells to the top -->
|
||||
<th data-sorter="usLongDate">Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>($9.99)</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td></td>
|
||||
<td>33</td>
|
||||
<td>$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td></td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>$153.19</td>
|
||||
<td>44%</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>N/A</td>
|
||||
<td></td>
|
||||
<td>Jan 18, 2007 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</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-extractors-parsers.html">Using extractors with parsers ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
123
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-parsers-metric.html
Executable file
123
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-parsers-metric.html
Executable file
@@ -0,0 +1,123 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter - Metric Parser</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 { width: 20%; }
|
||||
</style>
|
||||
|
||||
<link href="../css/theme.blue.css" rel="stylesheet">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<!-- load metric parser -->
|
||||
<script src="../js/parsers/parser-metric.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
$("table").tablesorter({
|
||||
theme : 'blue',
|
||||
widgets : ["zebra"]
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Metric parser</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>This parser will convert numbers with metric prefixes ("Mega", "Giga", etc) into appropriate values so they are sorted correctly.</li>
|
||||
<li>The base name must be included in the header:
|
||||
<ul>
|
||||
<li>The base is the unit of measure, such as "byte", "meter", "liter", etc.</li>
|
||||
<li>When saving the base, include both the abbreviation and full name of the base separated by a vertical bar (shift-\) <code>b|byte</code>.</li>
|
||||
<li>Store this information within the header's data-attribute (<code>data-metric-name="b|byte"</code>).</li>
|
||||
<li>If no base information is found, it will default to <code>m|meter</code>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Because metric prefixes can be applied to binary values, the parser will calculate the cached value based on the binary multiple, i.e. <code>"1 kb"</code> is actually <code>"1024 bytes"</code>. See <a href="http://en.wikipedia.org/wiki/Unit_prefix#Binary_prefixes">this article</a> for more details.</li>
|
||||
<li>This parser does not (yet) support the IEC recommendations for binary prefixes (i.e. "kibibyte (Kib)", "mebibyte (MiB)", etc).</li>
|
||||
<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>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<button type="button" class="toggleparsedvalue">Toggle parsed values</button>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr><th class="sorter-metric" data-metric-name="b|byte">Metric (binary) Size</th>
|
||||
<th class="sorter-metric" data-metric-name="m|meter">Metric Length</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>1 byte</td><td>1 nm</td></tr>
|
||||
<tr><td>1 kb</td><td>1 kilometer</td></tr>
|
||||
<tr><td>1 Gigabyte</td><td>1 Gm</td></tr>
|
||||
<tr><td>10 Mb</td><td>1 Tm</td></tr>
|
||||
<tr><td>1 Mb</td><td>1,000 mm</td></tr>
|
||||
<tr><td>1 Tb</td><td>1 meter</td></tr>
|
||||
<tr><td>1 Petabyte</td><td>1 hm</td></tr>
|
||||
<tr><td>1 Zb</td><td>1 dam</td></tr>
|
||||
<tr><td>1,025 Mb</td><td>1 Mm</td></tr>
|
||||
<tr><td>1,000 kilobytes</td><td>1 dm</td></tr>
|
||||
<tr><td>1 Eb</td><td>1 µm</td></tr>
|
||||
<tr><td>1023 Mb</td><td>1 pm</td></tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Page Header</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><!-- blue theme stylesheet with additional css styles added in v2.0.17 -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<!-- tablesorter plugin -->
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<!-- load metric parser -->
|
||||
<script src="../js/parsers/parser-metric.js"></script></pre>
|
||||
</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-widget-filter.html">Applying the filter widget ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(function(){
|
||||
// add parsed values to columns [0,1]
|
||||
addParsedValues($('table'), [0,1], function(num){ return num.toExponential(); });
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
239
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-parsers-roman.html
Executable file
239
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-parsers-roman.html
Executable file
@@ -0,0 +1,239 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Roman Numeral Parser</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
|
||||
<script src="js/jquery-ui-latest.min.js"></script>
|
||||
<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="../js/jquery.tablesorter.widgets.js"></script>
|
||||
<script src="../js/parsers/parser-roman.js"></script>
|
||||
|
||||
<style>
|
||||
th { width: 20%; }
|
||||
</style>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
$("table").tablesorter({
|
||||
theme: 'blue',
|
||||
widgets: ['zebra'],
|
||||
|
||||
// roman numeral parser option
|
||||
// ===========================
|
||||
// column 0 & 1 are set to zero as placeholders
|
||||
// column 2: ignore last character (1) - for Roman "roman-ignore" numeral parser
|
||||
// column 3: ignore characters that match the set regex (beginning of the string to first space)
|
||||
roman_ignore: [ 0, 0, 1, /^(\w+\s)/ ]
|
||||
|
||||
});
|
||||
|
||||
});</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Roman Numeral Parser</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<p></p>
|
||||
<br>
|
||||
|
||||
<div id="root" class="accordion">
|
||||
|
||||
<h3><a href="#">Notes</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>This parser (added <span class="version">v2.17.3</span>) will convert roman numerals into their decimal equivalent so the table column can be sorted correctly.</li>
|
||||
<li>There are actually 3 separate parsers included with this script.
|
||||
<ul>
|
||||
<li>They are very similar, but were written to cover different use cases.</li>
|
||||
<li> Refer to each in their separate sections below.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>This demo includes the stored roman numeral values within the table cells, toggle the view using the button directly above the table.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">"roman" parser</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>This parser is optimized for columns that contain only roman numerals.</li>
|
||||
<li>In the demo below, this parser is used for the "Short" and "Long" columns.</li>
|
||||
<li>This parser has no option settings.</li>
|
||||
</ul>
|
||||
<pre class="prettyprint lang-js">$(function() {
|
||||
|
||||
$("table").tablesorter({
|
||||
theme: 'blue',
|
||||
widgets: ['zebra'],
|
||||
headers: {
|
||||
0 : { sorter: 'roman' },
|
||||
1 : { sorter: 'roman' }
|
||||
}
|
||||
});
|
||||
|
||||
});</pre>
|
||||
|
||||
</div>
|
||||
|
||||
<h3><a href="#">"roman-ignore" parser</a></h3>
|
||||
<div>
|
||||
This parser is designed to use the <code>roman_ignore</code> option to either:
|
||||
|
||||
<h4>Ignore The Last "X" Characters</h4>
|
||||
For content that contains a roman number followed by an alphabetical character, such as "Ia" or "IIb", this parser can be set to ignore the last character (spaces are trimmed automatically):
|
||||
<pre class="prettyprint lang-js">$(function() {
|
||||
|
||||
$("table").tablesorter({
|
||||
theme: 'blue',
|
||||
widgets: ['zebra'],
|
||||
headers: {
|
||||
2 : { sorter: 'roman-ignore' }
|
||||
},
|
||||
// roman numeral parser option
|
||||
// ignore the last (1) character(s) in column 2 (zero-based index)
|
||||
// the two zeros in the array are just placeholders ( [ , , 1 ] works as well )
|
||||
roman_ignore: [ 0, 0, 1 ]
|
||||
|
||||
});
|
||||
|
||||
});</pre>
|
||||
|
||||
<h4>Remove Non-Roman Numerals</h4>
|
||||
For cells that contain a bit more complex layout, you can define a regular expression to ignore (remove) certain parts of the content.<br>
|
||||
<br>
|
||||
The value obtained from the <code>roman_ignore</code> option array is <em>used within a javascript replace function</em>, so it can be either a <strong>regular expression</strong> or a <strong>string</strong>.<br>
|
||||
<br>
|
||||
In this example (see the "Ignore regex" column in the demo below), content at the beginning of the cell is set to be ignored. This should <em>leave</em> the roman numeral string to be parsed by this script (spaces are trimmed automatically).
|
||||
<pre class="prettyprint lang-js">$(function() {
|
||||
|
||||
$("table").tablesorter({
|
||||
theme: 'blue',
|
||||
widgets: ['zebra'],
|
||||
headers: {
|
||||
3 : { sorter: 'roman-ignore' }
|
||||
},
|
||||
// roman numeral parser option
|
||||
// ignore any words at the beginning of column 3 (zero-based index) using a regular expression
|
||||
// additionally, if all column content contains the same character to ignore, a string can be
|
||||
// passed within this option, e.g. "Chapter "
|
||||
// the three zeros in the array are just placeholders ( [ , , , /^(\w+\s)/ ] works as well )
|
||||
roman_ignore: [ 0, 0, 0, /^(\w+\s)/ ]
|
||||
|
||||
});
|
||||
|
||||
});</pre>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">"roman-extract" parser</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>This parser will attempt to extract out a roman numeral block from the cell content.</li>
|
||||
<li>It's not perfect. If the content contains two blocks of roman numerals, they will be combined. For example,
|
||||
<ul>
|
||||
<li>If a cell contains <code>X plus VII</code>, the parser will extract out <code>XVII</code> and return a value of 17.</li>
|
||||
<li>Or worse yet, if a cell contains <code>VI minus X</code>, the parser will extract out <code>VIX</code> which is not a valid roman numeral, so it will instead return the initial value of <code>VI minus X</code>. If this is the case, use the "roman-ignore" parser instead.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<pre class="prettyprint lang-js">$(function() {
|
||||
|
||||
$("table").tablesorter({
|
||||
theme: 'blue',
|
||||
widgets: ['zebra'],
|
||||
headers: {
|
||||
4 : { sorter: 'roman-extract' }
|
||||
}
|
||||
});
|
||||
|
||||
});</pre>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<h1>Demo</h1>
|
||||
|
||||
<button type="button" class="toggleparsedvalue">toggle</button> parsed values within the column
|
||||
|
||||
<div id="demo"><table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="sorter-false" colspan="2">Pure Roman Numerals</th>
|
||||
<th class="sorter-false" colspan="2">Ignore Non-Roman Numerals</th>
|
||||
<th class="sorter-false">Extract Roman Numerals</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="sorter-roman">Short</th>
|
||||
<th class="sorter-roman">Long</th>
|
||||
<th class="sorter-roman-ignore">Ignore last (1) character *</th>
|
||||
<th class="sorter-roman-ignore">Ignore regex (/^(\w+\s)/)</th>
|
||||
<th class="sorter-roman-extract">Extract</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>I</td><td>MDLXXXV</td><td>iiia</td><td>Mark I</td><td>2000 XXVII Sydney</td></tr>
|
||||
<tr><td>MXI</td><td>MDCLXVI</td><td>iiib</td><td>Mark IV</td><td>2012 XXX London</td></tr>
|
||||
<tr><td>XII</td><td>MMDCCCLVIII</td><td>ia</td><td>Mark V</td><td>2020 XXXII Tokyo</td></tr>
|
||||
<tr><td>CXI</td><td>MMCCI</td><td>va</td><td>Mark VII</td><td>2004 XXVIII Athens</td></tr>
|
||||
<tr><td>XXI</td><td>MDCCCXL</td><td>vi b</td><td>Mk III</td><td>1980 XXII Moscow</td></tr>
|
||||
<tr><td>XIII</td><td>MMMCXXIX</td><td>iva</td><td>Mod X</td><td>1972 XX Munich</td></tr>
|
||||
<tr><td>V</td><td>DLXXVII</td><td>via</td><td>Mod IV</td><td>2016 XXXI Rio de Janeiro</td></tr>
|
||||
<tr><td>X</td><td>MDCLXV</td><td>xia</td><td>Mk VIII</td><td>1996 XXVI Atlanta</td></tr>
|
||||
<tr><td>XI</td><td>MDXVIII</td><td>xiiz</td><td>Mod XII</td><td>1976 XXI Montreal</td></tr>
|
||||
<tr><td>CLXI</td><td>MDCCCLX</td><td>xd</td><td>Mk 0</td><td>1992 XXV Barcelona</td></tr>
|
||||
<tr><td>C</td><td>CCCXCI</td><td>iiic</td><td>Mk VI</td><td>1988 XXIV Seoul</td></tr>
|
||||
<tr><td>LV</td><td>MLXXX</td><td>xxf</td><td>Mk II</td><td>1984 XXIII Los Angeles</td></tr>
|
||||
<tr><td>IX</td><td>DCCLVII</td><td>lig</td><td>Mod L</td><td>2008 XXIX Beijing</td></tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
<small>* Ignoring the last letter (set number to ignore in <code>roman_ignore</code> option array; notice that "vi b" sorts before "via" - <strong>spaces do matter</strong>!)</small><p>
|
||||
|
||||
<h1>Page Header</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><!-- blue theme stylesheet with additional css styles added in v2.0.17 -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<!-- tablesorter plugin; requires jQuery -->
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<!-- load roman numeral parser -->
|
||||
<script src="../js/parsers/parser-roman.js"></script></pre>
|
||||
</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>
|
||||
|
||||
<script>
|
||||
$(function(){
|
||||
// add parsed values to order & value column
|
||||
addParsedValues($('table'), [0,1,2,3,4]);
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
170
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-parsers.html
Executable file
170
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-parsers.html
Executable file
@@ -0,0 +1,170 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Writing custom 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 id="js">// add parser through the tablesorter addParser method
|
||||
$.tablesorter.addParser({
|
||||
// set a unique id
|
||||
id: 'grades',
|
||||
is: function(s, table, cell) {
|
||||
// return false so this parser is not auto detected
|
||||
return false;
|
||||
},
|
||||
format: function(s, table, cell, cellIndex) {
|
||||
// format your data for normalization
|
||||
return s.toLowerCase()
|
||||
.replace(/good/,2)
|
||||
.replace(/medium/,1)
|
||||
.replace(/bad/,0);
|
||||
},
|
||||
// set type, either numeric or text
|
||||
type: 'numeric'
|
||||
});
|
||||
|
||||
$(function() {
|
||||
$("table").tablesorter({
|
||||
theme: 'blue'
|
||||
// "sorter-grades" added as a class name in the HTML (new in v2.0.11)
|
||||
// or un-comment out the option below
|
||||
// ,headers: { 6: { sorter: 'grades' } }
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Writing custom parsers</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
|
||||
<div class="tip">
|
||||
Notes about the <code>addParser</code> template:
|
||||
<ul>
|
||||
<li>The <code>id</code> block is required and must be unique.</li>
|
||||
<li>The <code>is</code> block will allow the parser to be used for autodetecting the parser
|
||||
<ul>
|
||||
<li>Most custom parsers are made for a specific set of data/column, so the <code>is</code> block usually just returns false telling the plugin that the parser doesn't match any columns.</li>
|
||||
<li>If so desired, the function provides three parameters: <code>s</code> contains the text from the cell, <code>table</code> is the table DOM element and <code>cell</code> is the current cell DOM element.</li>
|
||||
<li>This function must <code>return true</code> before the plugin will use the custom parser's format block to process the column content.</li>
|
||||
<li>In version 2.7.4, the <code>is</code> block became optional because most parsers just return false.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>The <code>format</code> block is used to normalize your data and return it to the plugin for sorting
|
||||
<ul>
|
||||
<li>Within this function, modify the given text from the cell (<code>s</code>) or obtain parameters and/or other data from the cell (<code>cell</code>) then return this data to the plugin.</li>
|
||||
<li>As an example, the date parser takes the date string (e.g. <code>"12/25/2013"</code>) and converts it into a numeric value (<code>1387951200000</code>; <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Date/getTime">ref</a>) to make sorting and comparing dates easier.</li>
|
||||
<li>Use the <code>cellIndex</code> if the cells within columns contain different data - see this demo for an example.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>The <code>parsed</code> block (added <span class="version">v2.15.0</span>)
|
||||
<ul>
|
||||
<li>This parameter is a flag used by the filter widget.</li>
|
||||
<li>When <code>true</code>, the filter widget will only search through parsed data for matches.</li>
|
||||
<li>If <code>false</code> (default value), the filter widget will search through the cell text for matches.</li>
|
||||
<li>Currently, only the parsers for inputs, checkboxes and selects have this parameter set to <code>true</code>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>The <code>type</code> block sets the type of sort to use:
|
||||
<ul>
|
||||
<li>Set it to either <code>"text"</code> or <code>"numeric"</code>.</li>
|
||||
<li>This tells the plugin the type of sorter to use.</li>
|
||||
<li>Text type sorting uses a natural sort and is a tiny bit slower than a pure numeric sort.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3>Add Parser Template</h3>
|
||||
<pre class="prettyprint lang-javascript">$.tablesorter.addParser({
|
||||
// use a unique id
|
||||
id: 'myparser',
|
||||
is: function(s, table, cell) {
|
||||
// s is the text from the cell
|
||||
// table is the current table (as a DOM element; not jQuery object)
|
||||
// cell is the current table cell (DOM element)
|
||||
// return false if you don't want this parser to be auto detected
|
||||
return false;
|
||||
},
|
||||
format: function(s, table, cell, cellIndex) {
|
||||
// s is the text from the cell
|
||||
// table is the current table (as a DOM element; not jQuery object)
|
||||
// cell is the current table cell (DOM element)
|
||||
// cellIndex is the current cell's column index
|
||||
// format your data for normalization
|
||||
// (i.e. do something to get and/or modify your data, then return it)
|
||||
return s;
|
||||
},
|
||||
// flag for filter widget (true = ALWAYS search parsed values; false = search cell text)
|
||||
parsed: false,
|
||||
// set the type to either numeric or text (text uses a natural sort function
|
||||
// so it will work for everything, but numeric is faster for numbers
|
||||
type: 'numeric'
|
||||
});</pre>
|
||||
|
||||
<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="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>medium</td></tr>
|
||||
<tr><td>Student02</td><td>Mathematics</td><td>male</td><td>90</td><td>88</td><td>100</td><td>good</td></tr>
|
||||
<tr><td>Student03</td><td>Languages</td><td>female</td><td>85</td><td>95</td><td>80</td><td>good</td></tr>
|
||||
<tr><td>Student04</td><td>Languages</td><td>male</td><td>20</td><td>50</td><td>65</td><td>bad</td></tr>
|
||||
<tr><td>Student05</td><td>Mathematics</td><td>female</td><td>70</td><td>78</td><td>70</td><td>medium</td></tr>
|
||||
<tr><td>Student06</td><td>Mathematics</td><td>male</td><td>44</td><td>65</td><td>60</td><td>bad</td></tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<h3>Grades Parser Code</h3>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
<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>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-parsers-advanced.html">Writing custom parsers, advanced ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
227
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-trigger-sort.html
Executable file
227
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-trigger-sort.html
Executable file
@@ -0,0 +1,227 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Sort table using a link outside the table</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>
|
||||
.block, .left, .right {
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
.left {
|
||||
background: #eee;
|
||||
width: 50%;
|
||||
float: left;
|
||||
margin-top: 15px;
|
||||
padding: 10px;
|
||||
}
|
||||
.right {
|
||||
width: 50%;
|
||||
float: right;
|
||||
}
|
||||
.block h3 {
|
||||
margin: 2px;
|
||||
}
|
||||
.sort-reset {
|
||||
float: right;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
$("table").tablesorter({
|
||||
theme: 'blue',
|
||||
widgets: ['zebra', 'columns']
|
||||
});
|
||||
|
||||
// sort using data-sort attribute value
|
||||
$('button[data-sort]').click(function(){
|
||||
var sort = $(this).data('sort');
|
||||
$(this).closest('.block').find('table').trigger('sorton', [ sort ]);
|
||||
return false;
|
||||
});
|
||||
|
||||
$('.sortReset-toggle').click(function(){
|
||||
var c = $(this).closest('.block').find('table')[0].config;
|
||||
c.sortReset = !c.sortReset;
|
||||
$(this).next().html('' + c.sortReset);
|
||||
});
|
||||
|
||||
// toggle the sort on the Discount column v2.9!
|
||||
$("#toggle-sort").click(function() {
|
||||
$("#table2").find("th:contains(Discount)").trigger("sort");
|
||||
return false;
|
||||
});
|
||||
|
||||
});</script>
|
||||
|
||||
<script>
|
||||
// demo stuff (update pre with current sort)
|
||||
$(function() {
|
||||
$('button[data-sort]').click(function(){
|
||||
var $this = $(this),
|
||||
sort = $this.data('sort'),
|
||||
$pre = $this.closest('.box').find('pre:last');
|
||||
$pre.html('$("table").trigger("sorton", [ ' + JSON.stringify(sort) + ' ]);');
|
||||
prettyPrint( null, $pre[0] );
|
||||
return false;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Sort table using a link outside the table</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
<h1>Demo</h1>
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<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>
|
||||
|
||||
<div id="demo">
|
||||
|
||||
<!--
|
||||
********************
|
||||
Basic Asc/Desc sort
|
||||
********************
|
||||
-->
|
||||
<div class="block">
|
||||
<div class="left box">
|
||||
|
||||
<button class="sort-reset" data-sort="[]">Reset</button>
|
||||
<h3>Sort Ascending/Descending</h3>
|
||||
Use <code>0</code> or <code>"a"</code> for ascending sorts, and <code>1</code> or <code>"d"</code> for descending sorts<super>*</super><br>
|
||||
<br>
|
||||
<button data-sort="[[0,0]]">Asc</button> (<code>[[0,0]]</code>) <button data-sort='[[0,"a"],[1,"d"]]'>Asc/Desc</button> (<code>[[0,"a"],[1,"d"]]</code>)<br>
|
||||
<button data-sort="[[0,1]]">Desc</button> (<code>[[0,1]]</code>) <button data-sort='[[0,"d"],[1,"a"]]'>Desc/Asc</button> (<code>[[0,"d"],[1,"a"]]</code>)
|
||||
<pre class="prettyprint lang-js updating">$("table").trigger("sorton", [ [] ]);</pre>
|
||||
<small>* <code>"a"</code> & <code>"d"</code> values added <span class="version">v2.17.0</span>.</small>
|
||||
</div>
|
||||
<div class="right box">
|
||||
<table id="table1" class="tablesorter">
|
||||
<thead>
|
||||
<tr><th>First Name</th><th>Last Name</th><th>Age</th><th>Total</th><th>Discount</th><th>Date</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>Peter</td><td>Parker</td><td>28</td><td>$9.99</td><td>20%</td><td>Jul 6, 2006 8:14 AM</td></tr>
|
||||
<tr><td>John</td><td>Hood</td><td>33</td><td>$19.99</td><td>25%</td><td>Dec 10, 2002 5:14 AM</td></tr>
|
||||
<tr><td>Clark</td><td>Kent</td><td>18</td><td>$15.89</td><td>44%</td><td>Jan 12, 2003 11:14 AM</td></tr>
|
||||
<tr><td>Bruce</td><td>Almighty</td><td>45</td><td>$153.19</td><td>44%</td><td>Jan 18, 2001 9:12 AM</td></tr>
|
||||
<tr><td>Bruce</td><td>Evans</td><td>22</td><td>$13.19</td><td>11%</td><td>Jan 18, 2007 9:12 AM</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<br class="clear">
|
||||
|
||||
<!--
|
||||
********************
|
||||
Toggle Sort (Next)
|
||||
********************
|
||||
-->
|
||||
<div class="block">
|
||||
<div class="left box">
|
||||
|
||||
<button class="sort-reset" data-sort="[]">Reset</button>
|
||||
<h3>Toggle sort (Next)</h3>
|
||||
Either trigger a <code>"sort"</code> on the desired column, or <code>"sorton"</code> on the table using the <code>"n"</code> value<super>*</super>.<br>
|
||||
Toggle the <button class="sortReset-toggle">sortReset</button> option (<code class="kwd">false</code>), then try these sorts (click a third time).<br>
|
||||
|
||||
<br>
|
||||
Trigger "sort" event: <button id="toggle-sort">Discount</button> (v2.9)
|
||||
<pre class="prettyprint lang-js">$("#table2").find("th:contains(Discount)").trigger("sort");</pre>
|
||||
|
||||
<button data-sort='[[0,"n"]]'>Asc/Desc</button> (<code>[[0,"n"]]</code>)<br>
|
||||
<button data-sort='[[0,"n"],[1,"n"]]'>Asc/Desc</button> (<code>[[0,"n"],[1,"n"]]</code>; columns are independent)
|
||||
<pre class="prettyprint lang-js updating">$("table").trigger("sorton", [ [] ]);</pre>
|
||||
<small>* <code>"n"</code> value added <span class="version">v2.17.0</span>.</small>
|
||||
</div>
|
||||
<div class="right box">
|
||||
<table id="table2" class="tablesorter">
|
||||
<thead>
|
||||
<tr><th>First Name</th><th>Last Name</th><th>Age</th><th>Total</th><th>Discount</th><th>Date</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>Peter</td><td>Parker</td><td>28</td><td>$9.99</td><td>20%</td><td>Jul 6, 2006 8:14 AM</td></tr>
|
||||
<tr><td>John</td><td>Hood</td><td>33</td><td>$19.99</td><td>25%</td><td>Dec 10, 2002 5:14 AM</td></tr>
|
||||
<tr><td>Clark</td><td>Kent</td><td>18</td><td>$15.89</td><td>44%</td><td>Jan 12, 2003 11:14 AM</td></tr>
|
||||
<tr><td>Bruce</td><td>Almighty</td><td>45</td><td>$153.19</td><td>44%</td><td>Jan 18, 2001 9:12 AM</td></tr>
|
||||
<tr><td>Bruce</td><td>Evans</td><td>22</td><td>$13.19</td><td>11%</td><td>Jan 18, 2007 9:12 AM</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<br class="clear">
|
||||
|
||||
<!--
|
||||
********************
|
||||
Sort Same/Opposite
|
||||
********************
|
||||
-->
|
||||
<div class="block">
|
||||
<div class="left box">
|
||||
<button class="sort-reset" data-sort="[]">Reset</button>
|
||||
<h3>Sort Same/Opposite</h3>
|
||||
The same (<code>"s"</code>) or opposite (<code>"o"</code>) sort values always set the column sort based on the primary column<super>*</super>.<br>
|
||||
Toggle the <button class="sortReset-toggle">sortReset</button> option (<code class="kwd">false</code>), then try these sorts (click a third time).<br>
|
||||
<br>
|
||||
<button data-sort='[[0,"s"]]'>Same</button> (<code>[[0,"s"]]</code>; always defaults to Asc sort if set on primary column)<br>
|
||||
<button data-sort='[[0,0],[1,"s"]]'>Asc/same</button> (<code>[[0,0],[1,"s"]]</code>)<br>
|
||||
<button data-sort='[[0,1],[1,"s"]]'>Desc/same</button> (<code>[[0,1],[1,"s"]]</code>)<br>
|
||||
<button data-sort='[[0,"n"],[1,"s"]]'>Next/same</button> (<code>[[0,"n"],[1,"s"]]</code>)<br>
|
||||
<button data-sort='[[0,"n"],[1,"o"]]'>Next/opposite</button> (<code>[[0,"n"],[1,"o"]]</code>)<br>
|
||||
<button data-sort='[[0,"n"],[1,"o"],[2,"n"]]'>Next/opposite/next</button> (<code>[[0,"n"],[1,"o"],[2,"n"]]</code>)<br>
|
||||
<button data-sort='[[0,"n"],[1,"o"],[2,"s"]]'>Next/opposite/same</button> (<code>[[0,"n"],[1,"o"],[2,"s"]]</code>)<br>
|
||||
<button data-sort='[[0,"n"],[1,"o"],[2,"s"],[3,"o"]]'>Next/opposite/same/opposite</button> (<code>[[0,"n"],[1,"o"],[2,"s"],[3,"o"]]</code>)
|
||||
<pre class="prettyprint lang-js updating">$("table").trigger("sorton", [ [] ]);</pre>
|
||||
<small>* <code>"s"</code> & <code>"o"</code> values added <span class="version">v2.17.0</span>.</small>
|
||||
</div>
|
||||
<div class="right box">
|
||||
<table id="table3" class="tablesorter">
|
||||
<thead>
|
||||
<tr><th>First Name</th><th>Last Name</th><th>Age</th><th>Total</th><th>Discount</th><th>Date</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>Peter</td><td>Parker</td><td>28</td><td>$9.99</td><td>20%</td><td>Jul 6, 2006 8:14 AM</td></tr>
|
||||
<tr><td>John</td><td>Hood</td><td>33</td><td>$19.99</td><td>25%</td><td>Dec 10, 2002 5:14 AM</td></tr>
|
||||
<tr><td>Clark</td><td>Kent</td><td>18</td><td>$15.89</td><td>44%</td><td>Jan 12, 2003 11:14 AM</td></tr>
|
||||
<tr><td>Bruce</td><td>Almighty</td><td>45</td><td>$153.19</td><td>44%</td><td>Jan 18, 2001 9:12 AM</td></tr>
|
||||
<tr><td>Bruce</td><td>Evans</td><td>22</td><td>$13.19</td><td>11%</td><td>Jan 18, 2007 9:12 AM</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<br class="clear">
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
1111
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-triggers.html
Executable file
1111
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-triggers.html
Executable file
File diff suppressed because it is too large
Load Diff
114
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-update-all.html
Executable file
114
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-update-all.html
Executable file
@@ -0,0 +1,114 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Update headers & table body (updateAll)</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 id="js">$(function() {
|
||||
|
||||
// Set up empty table with second and first columns pre-sorted
|
||||
$("table").tablesorter({ theme : 'blue', sortList: [[2,0]] });
|
||||
|
||||
|
||||
var indx = 0;
|
||||
$("#update").on('click', function() {
|
||||
|
||||
// prevent link from removing all data from the column
|
||||
if (indx++ < 2) {
|
||||
|
||||
// append new html to thead & tbody
|
||||
$("table thead th:eq(2)").html("Age");
|
||||
$("table tbody").find('td:nth-child(3)').html(function(i,h){
|
||||
return h.substring(1); // remove x & y prefix
|
||||
});
|
||||
|
||||
var resort = true, // re-apply the current sort
|
||||
callback = function(){
|
||||
// do something after the updateAll method has completed
|
||||
};
|
||||
|
||||
// let the plugin know that we made a update, then the plugin will
|
||||
// automatically sort the table based on the header settings
|
||||
$("table").trigger("updateAll", [ resort, callback ]);
|
||||
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Update headers & table body (updateAll)</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>This demo uses the <code>updateAll</code> method (<span class="version">v2.8</span>).</li>
|
||||
<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>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Value</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>Peter</td><td>Parker</td><td>x28</td><td>$9.99</td><td>20%</td><td>Jul 6, 2006 8:14 AM</td></tr>
|
||||
<tr><td>John</td><td>Hood</td><td>y33</td><td>$19.99</td><td>25%</td><td>Dec 10, 2002 5:14 AM</td></tr>
|
||||
<tr><td>Clark</td><td>Kent</td><td>y18</td><td>$15.89</td><td>44%</td><td>Jan 12, 2003 11:14 AM</td></tr>
|
||||
<tr><td>Bruce</td><td>Almighty</td><td>x45</td><td>$153.19</td><td>44%</td><td>Jan 18, 2001 9:12 AM</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<a href="#" id="update">Modify the entire value column</a>
|
||||
</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 class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-update-cell.html">Update the table after cell content has changed ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
138
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-update-cell.html
Executable file
138
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-update-cell.html
Executable file
@@ -0,0 +1,138 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Updating a table cell</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>
|
||||
|
||||
<style>
|
||||
.discount { cursor: pointer; }
|
||||
</style>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
$("table").tablesorter({ theme: 'blue', sortList: [[3,1],[0,0]] });
|
||||
|
||||
$("table tbody td.discount").click(function() {
|
||||
|
||||
// randomize a number
|
||||
var resort = "", // resort variable set to anything BUT false (without quotes) will trigger the automatic resort
|
||||
discount = '$' + Math.round(Math.random() * Math.random() * 100) + '.' + ('0' + Math.round(Math.random() * Math.random() * 100)).slice(-2),
|
||||
callback = function(table){ /* do something */ };
|
||||
$(this).text(discount);
|
||||
|
||||
// set resort flag to false to prevent automatic resort
|
||||
// leave the resort flag as undefined, or with any other value, to automatically resort the table
|
||||
$("table").trigger("updateCell",[this, resort, callback]);
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Updating a table cell</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>Click on any value in the Total column to change it to a random amount.</li>
|
||||
<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>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td class="discount">$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td class="discount">$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td class="discount">$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td class="discount">$153.19</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td class="discount">$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</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-render-header.html">Modify how the header is rendered to allow for custom styling ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,452 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Align Character Widget (beta)</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">
|
||||
<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
|
||||
<script src="js/jquery-ui-latest.min.js"></script>
|
||||
<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="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<script src="../js/widgets/widget-alignChar.js"></script>
|
||||
|
||||
<style>
|
||||
/* demo stuff */
|
||||
.accordion th:nth-child(2) {
|
||||
width: 140px;
|
||||
}
|
||||
#demo th {
|
||||
width: 25%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style id="css">/* CSS needed for this widget */
|
||||
.ts-align-wrap {
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.ts-align-wrap, .ts-align-left, .ts-align-right {
|
||||
display: inline-block;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.ts-align-left {
|
||||
text-align:right;
|
||||
}
|
||||
.ts-align-right {
|
||||
text-align:left;
|
||||
}
|
||||
/* optional - colorize alignment character in Animals column */
|
||||
td:nth-child(3) .ts-align-right i {
|
||||
color: red;
|
||||
}</style>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
$("table").tablesorter({
|
||||
theme: 'blue',
|
||||
widgets: ['zebra', 'alignChar'],
|
||||
widgetOptions : {
|
||||
alignChar_wrap : '<i/>',
|
||||
alignChar_charAttrib : 'data-align-char',
|
||||
alignChar_indexAttrib : 'data-align-index',
|
||||
alignChar_adjustAttrib : 'data-align-adjust' // percentage width adjustments
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body id="align">
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Align Character Widget (beta)</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
|
||||
<p></p>
|
||||
<br>
|
||||
|
||||
<div class="accordion">
|
||||
|
||||
<h3><a href="#">Notes</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>This widget will <strong>only work</strong> in tablesorter version 2.8+ and jQuery version 1.7+.</li>
|
||||
<li>The widget is still in "beta", so options & functionality may change without warning; and, it has not been thoroughly tested!</li>
|
||||
<li>Make sure to include the CSS shown below to maintain the alignment.</li>
|
||||
<li><span class="label warning">*NOTE*</span> if the table cell becomes too narrow, the alignment <strong>will not</strong> be maintained & some content may overflow into the next/previous cell (the widget css does include <code>overflow:hidden</code> on the wrapper, so some content will be hidden instead of overflowing).</li>
|
||||
<li>Until the day that <code>text-align: '.';</code> becomes standard (<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-align">ref</a>), if ever, this widget might prove useful.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Options</a></h3>
|
||||
<div>
|
||||
<h3>Align Character (alignChar) widget default options (added inside of tablesorter <code>widgetOptions</code>)</h3>
|
||||
<table class="tablesorter-blue">
|
||||
<colgroup><col style="width:135px"></colgroup>
|
||||
<thead>
|
||||
<tr><th>Option</th><th>Default</th><th class="sorter-false">Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="#" class="permalink">alignChar_wrap</a></td>
|
||||
<td><code>''</code></td>
|
||||
<td>
|
||||
This option allows you to wrap the alignment character in any HTML:
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
When the widget completes the alignment, it is basically splitting the content of the table cell into two halves, and wrapping it in a span element. Below is an example of a modified cell showing all contents; it's from the "Animals" column (the cell that contains "Ox = stinky")
|
||||
<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%">=&nbsp;stinky</span>
|
||||
</span>
|
||||
</td></pre>
|
||||
When this option is set with some HTML:
|
||||
<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
|
||||
</span>
|
||||
</span>
|
||||
</td></pre>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#" class="permalink">alignChar_charAttrib</a></td>
|
||||
<td><code>'data-align-char'</code></td>
|
||||
<td>
|
||||
This option points to the header data-attribute which contains the desired alignment character.
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
Add it to the header as follows:
|
||||
<pre class="prettyprint lang-html"><th data-align-char=".">Numeric</th></pre>
|
||||
The <code>data-align-char</code> data-attribute contains the actual character to align. There is no default alignment character, so if this data-attribute is undefined, the column will be ignored.<br>
|
||||
<br>
|
||||
<span class="label warning">*NOTE*</span> if wanting to align the content on a space (see the "AlphaNumeric" column), use <code>&nbsp;</code> instead of a regular space because all spaces within the content are replaced by non-breaking spaces.
|
||||
<pre class="prettyprint lang-html"><th data-align-char="&nbsp;">AlphaNumeric</th></pre>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#" class="permalink">alignChar_indexAttrib</a></td>
|
||||
<td><code>'data-align-index'</code></td>
|
||||
<td>This option points to the header data-attribute which contains the desired alignment character index (<strong>one-based index</strong>).
|
||||
<div class="collapsible">
|
||||
<ul>
|
||||
<li>What that means is if your data has multiple periods, like in the URLs of the sites column below, you can tell the widget which period to line-up on.</li>
|
||||
<li>The alignment may seem to act incorrectly, if your data doesn't have enough periods to line up on, but it's doing the best it can! For example, in the sites column below, a table cell contains <code>"rental.nytimes.com/index.html"</code>. This URL has three periods, while all other cells in that column only contain two. When the <code>data-align-index</code> is set to <code>"3"</code>, the widget aligns the content on that third period. All of the other columns only have two, so they all align on their last period. Does that make it clear?</li>
|
||||
<li>Try adjusting the sliders in this demo to change the <code>data-align-index</code> of the "Animals" and "Sites" columns to see how this works.</li>
|
||||
</ul>
|
||||
Add this attribute to the header as follows:
|
||||
<pre class="prettyprint lang-html"><th data-align-char="=" data-align-index="1">Animals</th></pre>
|
||||
The <code>data-align-index</code> data-attribute contains the actual character index. The index defaults to "1" if this data-attribute is undefined.
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#" class="permalink">alignChar_adjustAttrib</a></td>
|
||||
<td><code>'data-align-adjust'</code></td>
|
||||
<td>This option allows you to tweak the horizontal position of the aligned cell content.
|
||||
<div class="collapsible">
|
||||
<ul>
|
||||
<li>Here is an example of a modified cell showing its contents; it's from the "Numeric" column (the cell that contains "87.20000"):
|
||||
<pre class="prettyprint lang-html"><td>
|
||||
<span class="ts-align-wrap">
|
||||
<span class="ts-align-left" style="min-width:36%">87</span>
|
||||
<span class="ts-align-right" style="min-width:64%">.20000</span>
|
||||
</span>
|
||||
</td></pre>As you can see, the "87" (integer-part) is in a "ts-align-left" span, set with a <code>text-align: right;</code> (it's on the left, but right aligned)<br>
|
||||
The ".20000" (fractional-part) is in a "ts-align-right" span, set with a <code>text-align: left;</code> (opposite of the other one)!<br>
|
||||
</li>
|
||||
<li>So in the above example, the left side is set to a width of "36%" and the right to "64%" (adding up to 100%), which "sort-of" centers the aligned character.</li>
|
||||
<li>If you don't want to move the position of the aligned character, you can set the <code>data-align-adjust</code> data-attribute with a percentage change. This value (positive or negative) will be added to the "ts-align-left" span, and subtracted from the "ts-align-right" span.</li>
|
||||
<li>Try adjusting the sliders in this demo to change the <code>data-align-adjust</code> of the "Sites" column to see how this works.</li>
|
||||
</ul>
|
||||
Add this attribute to the header as follows:
|
||||
<pre class="prettyprint lang-html"><th data-align-char="." data-align-adjust="10">Numeric</th></pre>
|
||||
The <code>data-align-adjust</code> data-attribute contains a percentage value (without the percent sign). The adjustment defaults to "0" if this data-attribute is undefined.
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">CSS</a></h3>
|
||||
<div>
|
||||
The following is *required* css. Without it, the alignment will be all wrong.
|
||||
<div id="css">
|
||||
<pre class="prettyprint lang-css"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<p></p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
|
||||
<span class="demo-label">Animals align index:</span> <div id="slider0"></div> <span class="bright">1</span> (only indexes of 1 or 2 will work)<br>
|
||||
<span class="demo-label">Sites align index:</span> <div id="slider1"></div> <span class="bright">1</span> (only indexes of 1 - 3 will work<br>
|
||||
<span class="demo-label">Sites adjust value:</span> <div id="slider2"></div> <span class="bright">0</span>
|
||||
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-align-char=" ">AlphaNumeric</th>
|
||||
<th data-align-char="." data-align-adjust="0">Numeric</th>
|
||||
<th data-align-char="=" data-align-index="1">Animals</th>
|
||||
<th data-align-char="." data-align-index="1">Sites</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>abc 123</td>
|
||||
<td>.423475</td>
|
||||
<td>Koala = cute = cudley</td>
|
||||
<td>search.google.com</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>abc 1</td>
|
||||
<td>23.4</td>
|
||||
<td>Ox = stinky</td>
|
||||
<td>mail.yahoo.com</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>abc 9</td>
|
||||
<td>1.0</td>
|
||||
<td>Girafee = tall</td>
|
||||
<td>http://www.facebook.com</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>zyx 24</td>
|
||||
<td>7.67</td>
|
||||
<td>Bison = burger</td>
|
||||
<td>http://internship.whitehouse.gov/</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>abc 11</td>
|
||||
<td>3000</td>
|
||||
<td>Chimp = banana lover</td>
|
||||
<td>about.ucla.edu/</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>abc 2</td>
|
||||
<td>56.5</td>
|
||||
<td>Elephant = unforgetable</td>
|
||||
<td>http://www.wikipedia.org/</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>abc 9</td>
|
||||
<td>15.5</td>
|
||||
<td>Lion = rawr</td>
|
||||
<td>rental.nytimes.com/index.html</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>ABC 10</td>
|
||||
<td>87.20000</td>
|
||||
<td>Zebra = stripey</td>
|
||||
<td>http://android.google.com</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>zyx 1</td>
|
||||
<td>999.1</td>
|
||||
<td>Koala = cute, again!</td>
|
||||
<td>http://irsmrt.mit.edu/</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>zyx 12</td>
|
||||
<td>0.2</td>
|
||||
<td>Llama = llove it</td>
|
||||
<td>http://aliens.nasa.gov/</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Page Header</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><!-- Tablesorter: required -->
|
||||
<link href="../css/theme.blue.css" rel="stylesheet">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<!-- Align Character widget -->
|
||||
<script src="../js/widgets/widget-alignChar.js"></script></pre>
|
||||
</div>
|
||||
|
||||
<h1>Script</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-js"></pre>
|
||||
</div>
|
||||
|
||||
<h1>CSS</h1>
|
||||
<div id="css">
|
||||
<pre class="prettyprint lang-css"></pre>
|
||||
</div>
|
||||
|
||||
<h1>HTML</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-align-char="&nbsp;">AlphaNumeric</th>
|
||||
<th data-align-char="." data-align-adjust="0">Numeric</th>
|
||||
<th data-align-char="=" data-align-index="1">Animals</th>
|
||||
<th data-align-char="." data-align-index="1">Sites</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>abc 123</td>
|
||||
<td>.423475</td>
|
||||
<td>Koala = cute = cudley</td>
|
||||
<td>search.google.com</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>abc 1</td>
|
||||
<td>23.4</td>
|
||||
<td>Ox = stinky</td>
|
||||
<td>mail.yahoo.com</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>abc 9</td>
|
||||
<td>1.0</td>
|
||||
<td>Girafee = tall</td>
|
||||
<td>http://www.facebook.com</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>zyx 24</td>
|
||||
<td>7.67</td>
|
||||
<td>Bison = burger</td>
|
||||
<td>http://internship.whitehouse.gov/</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>abc 11</td>
|
||||
<td>3000</td>
|
||||
<td>Chimp = banana lover</td>
|
||||
<td>about.ucla.edu/</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>abc 2</td>
|
||||
<td>56.5</td>
|
||||
<td>Elephant = unforgetable</td>
|
||||
<td>http://www.wikipedia.org/</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>abc 9</td>
|
||||
<td>15.5</td>
|
||||
<td>Lion = rawr</td>
|
||||
<td>rental.nytimes.com/index.html</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>ABC 10</td>
|
||||
<td>87.20000</td>
|
||||
<td>Zebra = stripey</td>
|
||||
<td>http://android.google.com</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>zyx 1</td>
|
||||
<td>999.1</td>
|
||||
<td>Koala = cute, again!</td>
|
||||
<td>http://irsmrt.mit.edu/</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>zyx 12</td>
|
||||
<td>0.2</td>
|
||||
<td>Llama = llove it</td>
|
||||
<td>http://aliens.nasa.gov/</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></pre>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* DEMO ONLY CODE */
|
||||
$(function(){
|
||||
var $table = $('#demo table'),
|
||||
c = $table[0].config,
|
||||
$animals = c.$headers.eq(2),
|
||||
$sites = c.$headers.eq(3);
|
||||
$animals.find('.tablesorter-header-inner')[0].innerHTML += ' ( "data-align-index" : <span></span> )';
|
||||
$sites.find('.tablesorter-header-inner')[0].innerHTML += ' ( "data-align-index" : <span></span>, "data-align-adjust" : <span></span> )';
|
||||
$( "#slider0" ).slider({
|
||||
value: 1,
|
||||
min: 0,
|
||||
max: 3,
|
||||
step: 1,
|
||||
create: function(){
|
||||
$animals.find('span').html( $animals.attr('data-align-index') );
|
||||
},
|
||||
slide: function( event, ui ) {
|
||||
$animals
|
||||
.attr('data-align-index', ui.value)
|
||||
.find('span').html( ui.value );
|
||||
$('.bright:eq(0)').html( ui.value );
|
||||
$table.trigger('refreshAlign');
|
||||
}
|
||||
});
|
||||
$( "#slider1" ).slider({
|
||||
value: 1,
|
||||
min: 0,
|
||||
max: 4,
|
||||
step: 1,
|
||||
create: function(){
|
||||
$sites.find('span').html( $sites.attr('data-align-index') );
|
||||
},
|
||||
slide: function( event, ui ) {
|
||||
$sites
|
||||
.attr('data-align-index', ui.value)
|
||||
.find('span:eq(0)').html( ui.value );
|
||||
$('.bright:eq(1)').html( ui.value );
|
||||
$table.trigger('refreshAlign');
|
||||
}
|
||||
});
|
||||
$( "#slider2" ).slider({
|
||||
value: 0,
|
||||
min: -30,
|
||||
max: 30,
|
||||
step: 5,
|
||||
create: function(){
|
||||
$sites.find('span').html( $sites.attr('data-align-index') );
|
||||
},
|
||||
slide: function( event, ui ) {
|
||||
$sites
|
||||
.attr('data-align-adjust', ui.value)
|
||||
.find('span:eq(1)').html( ui.value );
|
||||
$('.bright:eq(2)').html( ui.value );
|
||||
$table.trigger('refreshAlign');
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,310 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - jQuery UITheme Widget (Bootstrap)</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-1.4.4.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link rel="stylesheet" href="css/bootstrap.min.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required for bootstrap -->
|
||||
<link rel="stylesheet" href="../css/theme.bootstrap.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<!-- Tablesorter: optional -->
|
||||
<link rel="stylesheet" href="../addons/pager/jquery.tablesorter.pager.css">
|
||||
<script src="../addons/pager/jquery.tablesorter.pager.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
$.extend($.tablesorter.themes.bootstrap, {
|
||||
// these classes are added to the table. To see other table classes available,
|
||||
// look here: http://twitter.github.com/bootstrap/base-css.html#tables
|
||||
table : 'table table-bordered',
|
||||
caption : 'caption',
|
||||
header : 'bootstrap-header', // give the header a gradient background
|
||||
footerRow : '',
|
||||
footerCells: '',
|
||||
icons : '', // add "icon-white" to make them white; this icon class is added to the <i> in the header
|
||||
sortNone : 'bootstrap-icon-unsorted',
|
||||
sortAsc : 'icon-chevron-up glyphicon glyphicon-chevron-up', // includes classes for Bootstrap v2 & v3
|
||||
sortDesc : 'icon-chevron-down glyphicon glyphicon-chevron-down', // includes classes for Bootstrap v2 & v3
|
||||
active : '', // applied when column is sorted
|
||||
hover : '', // use custom css here - bootstrap class may not override it
|
||||
filterRow : '', // filter row class
|
||||
even : '', // odd row zebra striping
|
||||
odd : '' // even row zebra striping
|
||||
});
|
||||
|
||||
// call the tablesorter plugin and apply the uitheme widget
|
||||
$("table").tablesorter({
|
||||
// this will apply the bootstrap theme if "uitheme" widget is included
|
||||
// the widgetOptions.uitheme is no longer required to be set
|
||||
theme : "bootstrap",
|
||||
|
||||
widthFixed: true,
|
||||
|
||||
headerTemplate : '{content} {icon}', // new in v2.7. Needed to add the bootstrap icon!
|
||||
|
||||
// widget code contained in the jquery.tablesorter.widgets.js file
|
||||
// use the zebra stripe widget if you plan on hiding any rows (filter widget)
|
||||
widgets : [ "uitheme", "filter", "zebra" ],
|
||||
|
||||
widgetOptions : {
|
||||
// using the default zebra striping class name, so it actually isn't included in the theme variable above
|
||||
// this is ONLY needed for bootstrap theming if you are using the filter widget, because rows are hidden
|
||||
zebra : ["even", "odd"],
|
||||
|
||||
// reset filters button
|
||||
filter_reset : ".reset"
|
||||
|
||||
// set the uitheme widget to use the bootstrap theme class names
|
||||
// this is no longer required, if theme is set
|
||||
// ,uitheme : "bootstrap"
|
||||
|
||||
}
|
||||
})
|
||||
.tablesorterPager({
|
||||
|
||||
// target the pager markup - see the HTML block below
|
||||
container: $(".ts-pager"),
|
||||
|
||||
// target the pager page select dropdown - choose a page
|
||||
cssGoto : ".pagenum",
|
||||
|
||||
// remove rows from the table to speed up the sort of large tables.
|
||||
// setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
|
||||
removeRows: false,
|
||||
|
||||
// output string - default is '{page}/{totalPages}';
|
||||
// possible variables: {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {totalRows}
|
||||
output: '{startRow} - {endRow} / {filteredRows} ({totalRows})'
|
||||
|
||||
});
|
||||
|
||||
});</script>
|
||||
|
||||
<script>
|
||||
$(function(){
|
||||
|
||||
// filter button demo code
|
||||
$('button.filter').click(function(){
|
||||
var col = $(this).data('column'),
|
||||
txt = $(this).data('filter');
|
||||
$('table').find('.tablesorter-filter').val('').eq(col).val(txt);
|
||||
$('table').trigger('search', false);
|
||||
return false;
|
||||
});
|
||||
|
||||
// toggle zebra widget
|
||||
$('button.zebra').click(function(){
|
||||
var t = $(this).hasClass('btn-success');
|
||||
// if (t) {
|
||||
// removing classes applied by the zebra widget
|
||||
// you shouldn't ever need to use this code, it is only for this demo
|
||||
// $('table').find('tr').removeClass('odd even');
|
||||
// }
|
||||
$('table')
|
||||
.toggleClass('table-striped')[0]
|
||||
.config.widgets = (t) ? ["uitheme", "filter"] : ["uitheme", "filter", "zebra"];
|
||||
$(this)
|
||||
.toggleClass('btn-danger btn-success')
|
||||
.find('i')
|
||||
.toggleClass('icon-ok icon-remove glyphicon-ok glyphicon-remove').end()
|
||||
.find('span')
|
||||
.text(t ? 'disabled' : 'enabled');
|
||||
$('table').trigger('refreshWidgets', [false]);
|
||||
return false;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>jQuery UITheme Widget (Bootstrap)</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
|
||||
<p class="tip">
|
||||
<span class="label label-info">NOTE!</span>
|
||||
<ul>
|
||||
<li><span class="label label-success">New!</span>In tablesorter v2.11+, The bootstrap theme now works with Bootstrap 3 and older versions.
|
||||
<ul>
|
||||
<li>Note the changes to the sorting icons in the <code>$.tablesorter.themes.bootstrap</code> defaults below.</li>
|
||||
<li>Just use the appropriate icon class name (<code>icon-{name}</code> for Bootstrap v2, and <code>glyphicon glyphicon-{name}</code> for Bootstrap v3.</li>
|
||||
<li>And of course include the necessary Bootstrap image or font).</li>
|
||||
<li>Wrapped all of the <code>pager</code> controls in the tfoot within a div (don't use the class name <code>pager</code> as it adds a lot of padding) to keep the controls from being centered.</li>
|
||||
<li>Pager control buttons in the tfoot have class names needed for both Bootstrap v2+ and v3, so there's no need for you to use both, just use the ones you need.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>As of tablesorter version 2.9+, this widget can no longer be applied to versions of tablesorter prior to version 2.8.</li>
|
||||
<li>Make sure to include the <code>{icon}</code> in the <code>headerTemplate</code> to add a sorting arrow to the headers.</li>
|
||||
<li>Added in v2.7!
|
||||
<ul>
|
||||
<li>You will need to modify the <code>headerTemplate</code> option to include the bootstrap icon! See the example in the code.</li>
|
||||
<li>Setting <code>theme</code> option to <code>"Bootstrap"</code> will now override/ignore the <code>uitheme</code> value in the <code>widgetOptions</code>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>In tablesorter v2.4, the <code>uitheme</code> option has changed to indicate the theme instead of an array of icons to use:
|
||||
<ul>
|
||||
<li>All theme class names are now contained within <code>$.tablesorter.themes</code> with the Bootstrap theme saved to <code>$.tablesorter.themes.bootstrap</code>.</li>
|
||||
<li>The themes variable allows you to modify the class names for the table, header, sort icons, active state, hover state, filter inputs and zebra striping. See the code below on how to extend these variables.</li>
|
||||
<li>Set the <del><code>uitheme</code> widget</del> <code>theme</code> option (changed in v2.7) to <code>"bootstrap"</code> to set the widget to use the Bootstrap theme. See the <a href="example-widget-ui-theme.html">jQuery UI demo</a> for another example.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>This demo shows how to get around an issue with the filter widget:
|
||||
<ul>
|
||||
<li>The <span class="label label-info">zebra widget button</span> below was added to show that when bootstrap's "table-striped" class is applied, the css defined zebra striping will not apply correctly because table rows are hidden but still accounted for by the css <code>nth-child()</code> selector.</li>
|
||||
<li>To better understand this issue, disable the zebra widget (using the toggle button). Now <button type="button" class="filter btn btn-small btn-primary" data-column="5" data-filter=">80"><i class="icon-white icon-filter glyphicon glyphicon-filter"></i> Filter ">80"</button> in the "Calculus" column.</li>
|
||||
<li>Try other filter searches with the zebra widget disabled, like <button type="button" class="filter btn btn-small btn-primary" data-column="2" data-filter="male"><i class="icon-white icon-filter glyphicon glyphicon-filter"></i> Filter "male"</button> in the "Sex" column.</li>
|
||||
<li>To solve this issue, just enable the zebra widget and the "even" and "odd" row class names <del>will</del> should over-ride the <code>nth-child()</code> styling.<br><span class="label label-warning">NOTE!</span> This doesn't seem to work in the latest Bootstrap version, so you'll have to remove the "table-striped" class completely from the table.</li>
|
||||
<li>The only down side is that for custom bootstrap themes, you'll need to edit the "theme.bootstrap.css" file for bootstrap.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>This demo uses HTML5 data attributes and therefore needs jQuery 1.4+.</li>
|
||||
</ul>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<!-- use the filter_reset : '.reset' option or include data-filter="" using the filter button demo code to reset the filters -->
|
||||
<div class="bootstrap_buttons">
|
||||
Reset filter : <button type="button" class="reset btn btn-primary" data-column="0" data-filter=""><i class="icon-white icon-refresh glyphicon glyphicon-refresh"></i> Reset filters</button>
|
||||
<br>
|
||||
Zebra widget : <button type="button" class="zebra btn btn-success"><i class="icon-white icon-ok glyphicon glyphicon-ok"></i> <span>enabled</span></button>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Major</th>
|
||||
<th class="filter-select filter-exact" data-placeholder="Pick a gender">Sex</th>
|
||||
<th>English</th>
|
||||
<th>Japanese</th>
|
||||
<th>Calculus</th>
|
||||
<th>Geometry</th></tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Major</th>
|
||||
<th>Sex</th>
|
||||
<th>English</th>
|
||||
<th>Japanese</th>
|
||||
<th>Calculus</th>
|
||||
<th>Geometry</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="7" class="ts-pager form-horizontal">
|
||||
<button type="button" class="btn first"><i class="icon-step-backward glyphicon glyphicon-step-backward"></i></button>
|
||||
<button type="button" class="btn prev"><i class="icon-arrow-left glyphicon glyphicon-backward"></i></button>
|
||||
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
|
||||
<button type="button" class="btn next"><i class="icon-arrow-right glyphicon glyphicon-forward"></i></button>
|
||||
<button type="button" class="btn last"><i class="icon-step-forward glyphicon glyphicon-step-forward"></i></button>
|
||||
<select class="pagesize input-mini" title="Select page size">
|
||||
<option selected="selected" value="10">10</option>
|
||||
<option value="20">20</option>
|
||||
<option value="30">30</option>
|
||||
<option value="40">40</option>
|
||||
</select>
|
||||
<select class="pagenum input-mini" title="Select page number"></select>
|
||||
</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr><td>Student01</td><td>Languages</td><td>male</td><td>80</td><td>70</td><td>75</td><td>80</td></tr>
|
||||
<tr><td>Student02</td><td>Mathematics</td><td>male</td><td>90</td><td>88</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student03</td><td>Languages</td><td>female</td><td>85</td><td>95</td><td>80</td><td>85</td></tr>
|
||||
<tr><td>Student04</td><td>Languages</td><td>male</td><td>60</td><td>55</td><td>100</td><td>100</td></tr>
|
||||
<tr><td>Student05</td><td>Languages</td><td>female</td><td>68</td><td>80</td><td>95</td><td>80</td></tr>
|
||||
<tr><td>Student06</td><td>Mathematics</td><td>male</td><td>100</td><td>99</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student07</td><td>Mathematics</td><td>male</td><td>85</td><td>68</td><td>90</td><td>90</td></tr>
|
||||
<tr><td>Student08</td><td>Languages</td><td>male</td><td>100</td><td>90</td><td>90</td><td>85</td></tr>
|
||||
<tr><td>Student09</td><td>Mathematics</td><td>male</td><td>80</td><td>50</td><td>65</td><td>75</td></tr>
|
||||
<tr><td>Student10</td><td>Languages</td><td>male</td><td>85</td><td>100</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student11</td><td>Languages</td><td>male</td><td>86</td><td>85</td><td>100</td><td>100</td></tr>
|
||||
<tr><td>Student12</td><td>Mathematics</td><td>female</td><td>100</td><td>75</td><td>70</td><td>85</td></tr>
|
||||
<tr><td>Student13</td><td>Languages</td><td>female</td><td>100</td><td>80</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student14</td><td>Languages</td><td>female</td><td>50</td><td>45</td><td>55</td><td>90</td></tr>
|
||||
<tr><td>Student15</td><td>Languages</td><td>male</td><td>95</td><td>35</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student16</td><td>Languages</td><td>female</td><td>100</td><td>50</td><td>30</td><td>70</td></tr>
|
||||
<tr><td>Student17</td><td>Languages</td><td>female</td><td>80</td><td>100</td><td>55</td><td>65</td></tr>
|
||||
<tr><td>Student18</td><td>Mathematics</td><td>male</td><td>30</td><td>49</td><td>55</td><td>75</td></tr>
|
||||
<tr><td>Student19</td><td>Languages</td><td>male</td><td>68</td><td>90</td><td>88</td><td>70</td></tr>
|
||||
<tr><td>Student20</td><td>Mathematics</td><td>male</td><td>40</td><td>45</td><td>40</td><td>80</td></tr>
|
||||
<tr><td>Student21</td><td>Languages</td><td>male</td><td>50</td><td>45</td><td>100</td><td>100</td></tr>
|
||||
<tr><td>Student22</td><td>Mathematics</td><td>male</td><td>100</td><td>99</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student23</td><td>Mathematics</td><td>male</td><td>82</td><td>77</td><td>0</td><td>79</td></tr>
|
||||
<tr><td>Student24</td><td>Languages</td><td>female</td><td>100</td><td>91</td><td>13</td><td>82</td></tr>
|
||||
<tr><td>Student25</td><td>Mathematics</td><td>male</td><td>22</td><td>96</td><td>82</td><td>53</td></tr>
|
||||
<tr><td>Student26</td><td>Languages</td><td>female</td><td>37</td><td>29</td><td>56</td><td>59</td></tr>
|
||||
<tr><td>Student27</td><td>Mathematics</td><td>male</td><td>86</td><td>82</td><td>69</td><td>23</td></tr>
|
||||
<tr><td>Student28</td><td>Languages</td><td>female</td><td>44</td><td>25</td><td>43</td><td>1</td></tr>
|
||||
<tr><td>Student29</td><td>Mathematics</td><td>male</td><td>77</td><td>47</td><td>22</td><td>38</td></tr>
|
||||
<tr><td>Student30</td><td>Languages</td><td>female</td><td>19</td><td>35</td><td>23</td><td>10</td></tr>
|
||||
<tr><td>Student31</td><td>Mathematics</td><td>male</td><td>90</td><td>27</td><td>17</td><td>50</td></tr>
|
||||
<tr><td>Student32</td><td>Languages</td><td>female</td><td>60</td><td>75</td><td>33</td><td>38</td></tr>
|
||||
<tr><td>Student33</td><td>Mathematics</td><td>male</td><td>4</td><td>31</td><td>37</td><td>15</td></tr>
|
||||
<tr><td>Student34</td><td>Languages</td><td>female</td><td>77</td><td>97</td><td>81</td><td>44</td></tr>
|
||||
<tr><td>Student35</td><td>Mathematics</td><td>male</td><td>5</td><td>81</td><td>51</td><td>95</td></tr>
|
||||
<tr><td>Student36</td><td>Languages</td><td>female</td><td>70</td><td>61</td><td>70</td><td>94</td></tr>
|
||||
<tr><td>Student37</td><td>Mathematics</td><td>male</td><td>60</td><td>3</td><td>61</td><td>84</td></tr>
|
||||
<tr><td>Student38</td><td>Languages</td><td>female</td><td>63</td><td>39</td><td>0</td><td>11</td></tr>
|
||||
<tr><td>Student39</td><td>Mathematics</td><td>male</td><td>50</td><td>46</td><td>32</td><td>38</td></tr>
|
||||
<tr><td>Student40</td><td>Languages</td><td>female</td><td>51</td><td>75</td><td>25</td><td>3</td></tr>
|
||||
<tr><td>Student41</td><td>Mathematics</td><td>male</td><td>43</td><td>34</td><td>28</td><td>78</td></tr>
|
||||
<tr><td>Student42</td><td>Languages</td><td>female</td><td>11</td><td>89</td><td>60</td><td>95</td></tr>
|
||||
<tr><td>Student43</td><td>Mathematics</td><td>male</td><td>48</td><td>92</td><td>18</td><td>88</td></tr>
|
||||
<tr><td>Student44</td><td>Languages</td><td>female</td><td>82</td><td>2</td><td>59</td><td>73</td></tr>
|
||||
<tr><td>Student45</td><td>Mathematics</td><td>male</td><td>91</td><td>73</td><td>37</td><td>39</td></tr>
|
||||
<tr><td>Student46</td><td>Languages</td><td>female</td><td>4</td><td>8</td><td>12</td><td>10</td></tr>
|
||||
<tr><td>Student47</td><td>Mathematics</td><td>male</td><td>89</td><td>10</td><td>6</td><td>11</td></tr>
|
||||
<tr><td>Student48</td><td>Languages</td><td>female</td><td>90</td><td>32</td><td>21</td><td>18</td></tr>
|
||||
<tr><td>Student49</td><td>Mathematics</td><td>male</td><td>42</td><td>49</td><td>49</td><td>72</td></tr>
|
||||
<tr><td>Student50</td><td>Languages</td><td>female</td><td>56</td><td>37</td><td>67</td><td>54</td></tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h2>Page Header</h2>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><!-- Bootstrap stylesheet -->
|
||||
<link rel="stylesheet" href="css/bootstrap.min.css">
|
||||
|
||||
<!-- bootstrap widget theme -->
|
||||
<link rel="stylesheet" href="/tablesorter/css/theme.bootstrap.css">
|
||||
<!-- tablesorter plugin -->
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<!-- tablesorter widget file - loaded after the plugin -->
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script></pre>
|
||||
</div>
|
||||
|
||||
<h2>Javascript</h2>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-widget-resizable.html">Resizable Columns widget ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,777 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Build Table Widget</title>
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
|
||||
<script src="js/jquery-ui-latest.min.js"></script>
|
||||
<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>
|
||||
<script src="js/demo-build-table.js"></script>
|
||||
<style>
|
||||
.csv { display: none; }
|
||||
.tablesorter-blue td.info { background: #eee; }
|
||||
</style>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<!-- build table widget -->
|
||||
<script type="text/javascript" src="../js/widgets/widget-build-table.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Build Table Widget</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
<br>
|
||||
<div class="accordion">
|
||||
|
||||
<h3><a href="#">Notes</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>Build a table starting with an assortment of data types ( array, text (CSV, HTML) or object (json) ).</li>
|
||||
<li>This widget isn't really a widget because it is run and does it's processing before tablesorter has initialized; but the options for it are contained within the tablesorter <code>widgetOptions</code>.</li>
|
||||
<li>Using the core build options:
|
||||
<ul>
|
||||
<li>The <code>build_type</code> tells the widget which type of data processing to use on the data.</li>
|
||||
<li>The <code>build_source</code> points the widget to the data source.</li>
|
||||
<li>Once the data is obtained from the <code>build_source</code>, you can do whatever processing that needs to be done on it using the <code>build_processing</code> option.
|
||||
<ul>
|
||||
<li>For example, if the table data is within a larger JSON, you can just return that portion of the JSON to the widget: <code>build_processing : function(data, wo) { return data.all_info_tables.table_of_contents; }</code></li>
|
||||
<li>Anoter example is to use the processing option to split a string into an array (see the "Array (from string w/processing)" section below)</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>An extra option named <code>build_numbers</code> has been included:
|
||||
<ul>
|
||||
<li>This option only applies to array and csv source table builds.</li>
|
||||
<li>Set the <code>build_numbers.addColumn</code> option to <code>true</code> (or a string with the column name <code>"#"</code>) to add a row number column on the far left of the table.</li>
|
||||
<li>Set the <code>build_numbers.sortable</code> option to <code>true</code> to make the added number column sortable. This option only applies if the <code>addColumn</code> option is <code>true</code>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Options</a></h3>
|
||||
<div>
|
||||
<table class="tablesorter-blue">
|
||||
<colgroup>
|
||||
<col style="width:10%">
|
||||
<col style="width:10%">
|
||||
<col style="width:15%">
|
||||
<col style="width:65%">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>widgetOption</th>
|
||||
<th>Type</th>
|
||||
<th>Default</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
<tr>
|
||||
<td colspan="4" class="info">Core Options</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><a href="#" class="permalink"><code>build_type</code></a></td>
|
||||
<td>String</td>
|
||||
<td><code>""</code></td>
|
||||
<td>
|
||||
Indicate the data result type that needs to be processed
|
||||
<div class="collapsible"><br>
|
||||
Options include: <code>"array"</code>, <code>"csv"</code>, <code>"object"</code>, <code>"json"</code> or <code>"html"</code>.<br>
|
||||
Default is <code>""</code> (an empty string).
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#" class="permalink"><code>build_source</code></a></td>
|
||||
<td>String</td>
|
||||
<td><code>""</code></td>
|
||||
<td>
|
||||
Contains the data stored as an array, object, jQuery object or <a href="http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings">ajax settings</a> used to obtain ajax data (include any desired ajax options).
|
||||
<div class="collapsible"><br>
|
||||
Options include: an array, object, jQuery Object (<code>$('.csv')</code>) or ajax settings( <code>{ url: 'mysite.com/data.json', dataType: 'json' }</code> ).
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#" class="permalink"><code>build_processing</code></a></td>
|
||||
<td>Function</td>
|
||||
<td><code>null</code></td>
|
||||
<td>
|
||||
Add a function that returns a useable build_type. (e.g. string to array)
|
||||
<div class="collapsible"><br>
|
||||
The function receives two parameters: <code>data</code> which contains the obtained data and <code>wo</code> which is the widget options (<code>table.config.widgetOptions</code>).<br>
|
||||
Example: <code>build_processing: function(data, wo){ return data.split(';'); }</code>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="permalink"><code>build_complete</code></span></td>
|
||||
<td>String</td>
|
||||
<td><code>"tablesorter-build-complete"</code></td>
|
||||
<td>Contains the name of the event to trigger when a table build has completed.</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td colspan="4" class="info">CSV & Array Options</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><span class="permalink"><code>build_headers.rows</code></span></td>
|
||||
<td>Numeric</td>
|
||||
<td><code>1</code></td>
|
||||
<td>Number of header rows contained within the csv</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="permalink"><code>build_headers.classes</code></span></td>
|
||||
<td>Array</td>
|
||||
<td><code>[]</code></td>
|
||||
<td>Array of header class names to add while building the table header.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#" class="permalink"><code>build_headers.text</code></a></td>
|
||||
<td>Array</td>
|
||||
<td><code>[]</code></td>
|
||||
<td>Array of header cell names to add while building the table header.
|
||||
<div class="collapsible"><br>
|
||||
Any value contained within this option will override any header text obtained from the CSV data.
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="permalink"><code>build_headers.widths</code></span></td>
|
||||
<td>Array</td>
|
||||
<td><code>[]</code></td>
|
||||
<td>Array of header cell widths which are added to a <code><col></code> within a <code><colgroup></code>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="permalink"><code>build_footers.rows</code></span></td>
|
||||
<td>Numeric</td>
|
||||
<td><code>1</code></td>
|
||||
<td>Number of footer rows contained within the csv</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="permalink"><code>build_footers.classes</code></span></td>
|
||||
<td>Array</td>
|
||||
<td><code>[]</code></td>
|
||||
<td>Array of footer class names to add while building the table footer.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#" class="permalink"><code>build_footers.text</code></a></td>
|
||||
<td>Array</td>
|
||||
<td><code>[]</code></td>
|
||||
<td>Array of footer cell names to add while building the table footer.
|
||||
<div class="collapsible"><br>
|
||||
Any value contained within this option will override any footer text obtained from the CSV data.
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><a href="#" class="permalink"><code>build_numbers.addColumn</code></a></td>
|
||||
<td>Boolean</td>
|
||||
<td><code>false</code></td>
|
||||
<td>Include a row numbering column.
|
||||
<div class="collapsible"><br>
|
||||
Only works with csv or array data.
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#" class="permalink"><code>build_numbers.sortable</code></a></td>
|
||||
<td>Boolean</td>
|
||||
<td><code>false</code></td>
|
||||
<td>Make the included row number column sortable.
|
||||
<div class="collapsible"><br>
|
||||
Only works when the <code>build_numbers.addColumn</code> is <code>true</code> and when csv or array data is used.
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td colspan="4" class="info">CSV Only Options</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><span class="permalink"><code>build_csvStartLine</code></span></td>
|
||||
<td>Numeric</td>
|
||||
<td><code>0</code></td>
|
||||
<td>The line within the csv data to start building the table</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="permalink"><code>build_csvSeparator</code></span></td>
|
||||
<td>String</td>
|
||||
<td><code>","</code> (comma)</td>
|
||||
<td>The separator used within the text file (comma or tab)</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td colspan="4" class="info">Object Only Options</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><span class="permalink"><code>build_objectRowKey</code></span></td>
|
||||
<td>String</td>
|
||||
<td><code>"rows"</code></td>
|
||||
<td>Object key which contains row data</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="permalink"><code>build_objectCellKey</code></span></td>
|
||||
<td>String</td>
|
||||
<td><code>"cells"</code></td>
|
||||
<td>Object key which contains the table cells, within the row data</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="permalink"><code>build_objectHeaderKey</code></span></td>
|
||||
<td>String</td>
|
||||
<td><code>"headers"</code></td>
|
||||
<td>Object key which contains the table headers data</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="permalink"><code>build_objectFooterKey</code></span></td>
|
||||
<td>String</td>
|
||||
<td><code>"footers"</code></td>
|
||||
<td>Object key which contains the table footers data</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div> <!-- end options -->
|
||||
|
||||
<h3><a href="#">Setup - Common (document head)</a></h3>
|
||||
<div>
|
||||
Add the following required scripts and css files into the document <code><head></code>
|
||||
<pre class="prettyprint lang-html"><!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css"> <!-- choose any theme -->
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<!-- build table widget -->
|
||||
<script type="text/javascript" src="../js/widgets/widget-build-table.js"></script></pre>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Setup - Array (javascript variable)</a></h3>
|
||||
<div>
|
||||
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>The array is set up such that it is an array of arrays. The outer array contains each row array, and within each row array is the cell text.</li>
|
||||
<li>Using an array is limiting, so addtional options have been added:
|
||||
<ul>
|
||||
<li>(<code>build_headers</code> & <code>build_footers</code>) have been added allowing customizing the headers and/or footers.</li>
|
||||
<li>The <code>rows</code> option sets the number of headers rows to include from the data source. <strong>Zero is not an option</strong> since tablesorter requires a thead in place before it will initialize.</li>
|
||||
<li>The <code>classes</code> array sets each header cell (<code>th</code>) class name.</li>
|
||||
<li>The <code>text</code> array within these options will override any text obtained from the data source.</li>
|
||||
<li>The <code>widths</code> array, only in the <code>build_headers</code> option, sets column widths by building <code><col></code> elements within a <code><colgroup</code>.</li>
|
||||
<li>Adding class names to the tbody rows or cells isn't easily accomplished, but you can bind to the build complete event (<code>'tablesorter-build-complete'</code>) and add them yourself.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h3>HTML</h3>
|
||||
<pre class="prettyprint lang-html"><div id="array2Table"></div></pre>
|
||||
<h3>Javascript</h3>
|
||||
<pre class="prettyprint lang-js">$(function() {
|
||||
var arry = [
|
||||
[ 'ID', 'Name', 'Age', 'Date' ], // header
|
||||
[ 'A42b', 'Parker', 28, 'Jul 6, 2006 8:14 AM' ], // row 1
|
||||
[ 'A255', 'Hood', 33, 'Dec 10, 2002 5:14 AM' ], // row 2
|
||||
[ 'A33', 'Kent', 18, 'Jan 12, 2003 11:14 AM' ], // row 3
|
||||
[ 'A1', 'Franklin', 45, 'Jan 18, 2001 9:12 AM' ], // row 4
|
||||
[ 'A102', 'Evans', 22, 'Jan 18, 2007 9:12 AM' ], // row 5
|
||||
[ 'A42a', 'Everet', 22, 'Jan 18, 2007 9:12 AM' ], // row 6
|
||||
[ 'ID', 'Name', 'Age', 'Date' ] // footer
|
||||
];
|
||||
|
||||
$('#array2Table').tablesorter({
|
||||
theme: 'blue',
|
||||
widgets: ['zebra'],
|
||||
widgetOptions : {
|
||||
// build_type : 'array', // can sometimes be detected if undefined
|
||||
build_source : arry,
|
||||
build_headers : {
|
||||
rows : 1, // Number of header rows from the csv
|
||||
classes : [], // Header classes to apply to cells
|
||||
text : [], // Header cell text
|
||||
widths : [ '15%', '30%', '15%', '40%' ] // set header cell widths
|
||||
},
|
||||
build_footers : {
|
||||
rows : 1, // Number of header rows from the csv
|
||||
classes : [], // Footer classes to apply to cells
|
||||
text : [ 'ID (a###)', 'Last Name', 'Age (joined)', 'Date (joined)' ] // Footer cell text
|
||||
}
|
||||
}
|
||||
});
|
||||
});</pre>
|
||||
<h3>Result</h3>
|
||||
<div id="array2Table" class="container"></div>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Setup - Array (from string w/processing)</a></h3>
|
||||
<div>
|
||||
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>We start out with a string and split it into a useable array of arrays.</li>
|
||||
<li>The settings are similair to the Array (javascript variable) code above with the exception of using the <code>build_processing</code> function to create the array.
|
||||
<ul>
|
||||
<li>The string is set up to separate each row by a semi-colon, then each cell by a comma.</li>
|
||||
<li>The first split is needed to create an array of rows <code>.split(';')</code></li>
|
||||
<li>The second split can be accomplished using <code>.split(',')</code> on each row of the array, but instead we use the build table widget function <code>$.tablesorter.buildTable.splitCSV(cells, ',');</code> to ensure that the split doesn't occur if the separator is within double quotes (note the footer text).</li>
|
||||
<li>Then just return this newly built array back to the build table widget (see the full code below).</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h3>HTML</h3>
|
||||
<pre class="prettyprint lang-html"><div id="string2Table"></div></pre>
|
||||
<h3>Javascript</h3>
|
||||
<pre class="prettyprint lang-js">$(function() {
|
||||
$('#string2Table').tablesorter({
|
||||
theme: 'blue',
|
||||
widgets: ['zebra'],
|
||||
widgetOptions: {
|
||||
build_type : 'array',
|
||||
build_source : 'header 1,header 2,header 3;r1c1,r1c2,r1c3;r2c1,r2c2,r2c3;r3c1,r3c2,r3c3;"footer, 1","footer, 2","footer, 3"',
|
||||
build_processing : function(data, wo) {
|
||||
var rows = data.split(';');
|
||||
return $.each(rows, function(i,cells) {
|
||||
// similar to using rows[i] = cells.split(',') but the splitCSV script
|
||||
// doesn't split the cell if the separator (comma) is within double quotes
|
||||
rows[i] = $.tablesorter.buildTable.splitCSV(cells, ',');
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
});</pre>
|
||||
<h3>Result</h3>
|
||||
<div id="string2Table" class="container"></div>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Setup - CSV (txt within DOM element)</a></h3>
|
||||
<div>
|
||||
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>A jQuery object targeting the CSV text can be passed to the <code>build_source</code> option.</li>
|
||||
<li>The widget detects that a jQuery object was passed to it, and grabs the HTML (not text) of the element.
|
||||
<ul>
|
||||
<li>Make sure not include HTML tags, or at least use the <code>build_processing</code> function to reformat the data.</li>
|
||||
<li>The row of csv data is trimmed of extra tabs and spaces (only from the beginning & end of each row).</li>
|
||||
<li>Building a table from CSV or array use the same script, so the same addtional options are available:
|
||||
<ul>
|
||||
<li>(<code>build_headers</code> & <code>build_footers</code>) have been added allowing customizing the headers and/or footers.</li>
|
||||
<li>The <code>rows</code> option sets the number of headers rows to include from the data source. <strong>Zero is not an option</strong> since tablesorter requires a thead in place before it will initialize.</li>
|
||||
<li>The <code>classes</code> array sets each header cell (<code>th</code>) class name.</li>
|
||||
<li>The <code>text</code> array within these options will override any text obtained from the data source.</li>
|
||||
<li>The <code>widths</code> array, only in the <code>build_headers</code> option, sets column widths by building <code><col></code> elements within a <code><colgroup</code>.</li>
|
||||
<li>Adding class names to the tbody rows or cells isn't easily accomplished, but you can bind to the build complete event (<code>'tablesorter-build-complete'</code>) and add them yourself.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>CSV data has two additional options used during data processing:
|
||||
<ul>
|
||||
<li><code>build_csvStartLine</code> (default is <code>0</code>) tells the csv build script which line in the csv data to start using to build the table. This is added in case comments or other data is above the table data.</li>
|
||||
<li><code>build_csvSeparator</code> (default is <code>","</code>)
|
||||
<ul>
|
||||
<li>This sets the separator used within the csv data to separate each cell.</li>
|
||||
<li>The <a href="https://code.google.com/p/jquerycsvtotable/">original jquerycsvtotable plugin</a> shows an <a href="http://honestbleeps.com/csvtotable/demo.html#TSVSource">example to process tab separated values (TSV)</a> by setting this option to <code>"\t"</code>.</li>
|
||||
<li>Rows are determined by placing the data on a new line.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>In this demo, the <code>build_numbers</code> sub-options <code>addColumn</code> and <code>sortable</code> are set to add a numeric column on the left side.
|
||||
<ul>
|
||||
<li>The <code>addColumn</code> option contains the name of the numeric column to be added to the header. Otherwise, set this option to <code>false</code> to not build this numeric column.</li>
|
||||
<li>The <code>sortable</code> option makes that numeric column sortable.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h3>HTML</h3>
|
||||
<pre class="prettyprint lang-html"><!--
|
||||
Note: if the csv data contains commas ("10,000 days") wrap it in quotes
|
||||
-->
|
||||
<div class="csv" style="display:none;">
|
||||
Album,Artist,Price (USD)
|
||||
Lateralus,Tool,$13.00
|
||||
Aenima,Tool,$12.00
|
||||
"10,000 days",Tool,$14.00
|
||||
Down In It,Nine Inch Nails,$3.00
|
||||
Broken,Nine Inch Nails,$6.00
|
||||
Muse,Black Holes and Revelations,$7.00
|
||||
Anon,"fake album, with comma", $1.00
|
||||
Album,Artist,Price (USD)
|
||||
</div>
|
||||
|
||||
<div id="csv2Table"></div></pre>
|
||||
<h3>Javascript</h3>
|
||||
<pre class="prettyprint lang-js">$(function() {
|
||||
$('#csv2Table').tablesorter({
|
||||
theme: 'blue',
|
||||
widgets: ['zebra'],
|
||||
widgetOptions: {
|
||||
// *** build widget core ***
|
||||
build_type : 'csv',
|
||||
build_source : $('.csv'),
|
||||
build_complete : 'tablesorter-build-complete', // triggered event when build completes
|
||||
|
||||
// *** CSV & array ***
|
||||
build_headers : {
|
||||
rows : 1, // Number of header rows from the csv
|
||||
classes : [], // Header classes to apply to cells
|
||||
text : [], // Header cell text
|
||||
widths : ['3%', '27%', '50%', '20%'] // set header cell widths
|
||||
},
|
||||
build_footers : {
|
||||
rows : 1, // Number of header rows from the csv
|
||||
classes : [], // Footer classes to apply to cells
|
||||
text : [] // Footer cell text
|
||||
},
|
||||
build_numbers : {
|
||||
addColumn : "#", // include row numbering column?
|
||||
sortable : true // make column sortable?
|
||||
},
|
||||
|
||||
// *** CSV options ***
|
||||
build_csvStartLine : 0, // line within the csv to start adding to table
|
||||
build_csvSeparator : "," // csv separator
|
||||
}
|
||||
});
|
||||
});</pre>
|
||||
<h3>Result</h3>
|
||||
<div id="csv2Table" class="container"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Setup - CSV (txt file via ajax)</a></h3>
|
||||
<div>
|
||||
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>If the csv data is obtained via ajax instead of from a DOM element, only the <code>build_source</code> option needs to change, everything else stays the same.
|
||||
<ul>
|
||||
<li>Set the <code>build_source</code> to contain any <a href="http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings">ajax settings</a> required to load the data.</li>
|
||||
<li>In this case the csv file is contained within a text file (<code>build.txt</code>), so a <code>url</code> option is set to point to the file and the <code>dataType</code> option (set to <code>html</code>) is set so that ajax knows the type of file to access.</li>
|
||||
<li>The remaining default settings were left out of the example below.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Please note that browsers like Chrome will not allow you to access locally hosted (desktop) files. Test it with Firefox instead.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Build.txt file</h3>
|
||||
<pre class="prettyprint lang-html">Album,Artist,Price ($)
|
||||
Lateralus,Tool,$13.00
|
||||
Aenima,Tool,$12.00
|
||||
"10,000 days",Tool,$14.00
|
||||
Down In It,Nine Inch Nails,$3.00
|
||||
Broken,Nine Inch Nails,$6.00
|
||||
Muse,Black Holes and Revelations,$7.00
|
||||
Anon,"fake album, with comma", $1.00
|
||||
Album,Artist,Price ($)</pre>
|
||||
<h3>HTML</h3>
|
||||
<pre class="prettyprint lang-html"><div id="csv2Table2"></div></pre>
|
||||
<h3>Javascript</h3>
|
||||
<pre class="prettyprint lang-js">$(function() {
|
||||
$('#csv2Table2').tablesorter({
|
||||
theme: 'blue',
|
||||
widgets: ['zebra'],
|
||||
widgetOptions: {
|
||||
// *** build widget core ***
|
||||
build_type : 'csv',
|
||||
build_source : { url: 'assets/csv.txt', dataType: 'html' },
|
||||
build_headers : {
|
||||
widths : ['30%', '50%', '20%'] // set header cell widths
|
||||
}
|
||||
}
|
||||
});
|
||||
});</pre>
|
||||
<h3>Result</h3>
|
||||
<div id="csv2Table2" class="container"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Setup - Object (javascript variable)</a></h3>
|
||||
<div>
|
||||
<h3>Notes</h3>
|
||||
<div class="accordion">
|
||||
<h3><a href="#">Definitions - General:</a></h3>
|
||||
<div>
|
||||
These are definitions to words as used within this documentation.
|
||||
<ul>
|
||||
<li>A <strong>key-value pair</strong> (or <strong>attribute</strong>): Within an object, the way to assign a value is by using a key-value pair (<code>"name" : "Fred"</code>; which is like saying <code>name = "Fred"</code> or <code>x = 1</code> outside of an object).</li>
|
||||
<li>A <strong>block</strong> is essentially the "value" portion of a key-value pair; specifically when referring to the value of the header, footer, row and cell blocks.</li>
|
||||
<li>An <strong>array</strong> is a list or group of values (i.e. <code>['x','y','z']</code>).</li>
|
||||
<li>An <strong>array of arrays</strong> is an array that contains more arrays (i.e. <code>[ ['a','b','c'], ['d','e','f' ] ]</code>). This applies to the header, row and footer blocks.</li>
|
||||
<li>Any build table widget object:
|
||||
<ul>
|
||||
<li>These objects are a grouping of key-value pairs used to define a tbody, row or cell.</li>
|
||||
<li>These objects contains all of the attributes which are to be added to a table element while building the table.</li>
|
||||
<li>The keys used in these attributes will look familiar - <code>class</code> (see row 7 below), <code>colspan</code> (see row 4 below), <code>data-</code>attributes (see row 7 cell 3 below), etc.</li>
|
||||
<li>Depending on where an object is located (tbody, row or cell), it will have a special key word or words which are significant (see the Objects section below).</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Blocks:</a></h3>
|
||||
<div>
|
||||
(row #), or (row # cell #) in these descriptions refer to the demo object code below
|
||||
<ul>
|
||||
<li><code>header</code> block:
|
||||
<ul>
|
||||
<li>This block will contain an array of rows. The rows can be defined as another array of cell text (row 1-3,5-6), or row objects (row 0, 4 & 7).</li>
|
||||
<li>The <code>header</code> object key name can be modified by changing the widget <code>build_objectHeaderKey</code> option.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><code>footers</code> block:
|
||||
<ul>
|
||||
<li>This block can contain all of the same data as the header block.</li>
|
||||
<li>This block has one additional setting, it can also contain a very specific string: <code>"clone"</code>. When this setting is used, the footer will be created by making a clone of the header.</li>
|
||||
<li>The <code>footers</code> object key name can be modified by changing the widget <code>build_objectFooterKey</code> option.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><code>rows</code> block:
|
||||
<ul>
|
||||
<li>This block will contain an array of rows. The rows can be defined as another array of cell text, or as a row object (same as the header & footer blocks).</li>
|
||||
<li>In addition, this block can contain a tbody object (tbody 2 & tbody 3; see the tbody object section below for more details).</li>
|
||||
<li>The <code>rows</code> object key name can be modified by changing the widget <code>build_objectRowKey</code> option.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><code>cells</code> block:
|
||||
<ul>
|
||||
<li>This block will contain an array of cells. The cells can be defined as cell text (string), or cell objects.</li>
|
||||
<li>The <code>cells</code> object key name can be modified by changing the widget <code>build_objectCellKey</code> option.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Object Content</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>tbody object
|
||||
<ul>
|
||||
<li>The tbody object contains all of the attributes that are to be applied to a particular table tbody (<code>tbody</code>).</li>
|
||||
<li>The tbody object <strong>requires</strong> a <code>newTbody</code> key set to <code>true</code>. It is the ONLY way the build widget can differeniate a row object from a "new" tbody object.</li>
|
||||
<li>If the <code>newTbody</code> attribute is <code>true</code>, the build widget will place all remaining rows into a new tbody; or all rows, until it encounters another valid tbody object, into a new tbody.</li>
|
||||
<li>If the <code>newTbody</code> attribute is <code>false</code>, the build widget will assume the object is for a row and add it as a row.</li>
|
||||
<li>See "TBODY 2" and "TBODY 3" tbody objects in the code example below.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>row object
|
||||
<ul>
|
||||
<li>The row object contains all of the attributes that are to be applied to a particular table row (<code>tr</code>).</li>
|
||||
<li>The row object requires a <code>cells</code> attribute.</li>
|
||||
<li>The cells attribute will contain all table cell data for the cells within that table row.</li>
|
||||
<li>This attribute can be changed by modifying the build table widget's <code>build_objectCellKey</code> (default is <code>"cells"</code>).</li>
|
||||
<li>See row 4 and row 7 in the demo code below.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>row array
|
||||
<ul>
|
||||
<li>A row array can contain either the text for a table cell (row 0 cell 2 & 4), or a cell object (row 0 cell 1,3,5,6) contains.</li>
|
||||
<li>It can also contain all cell text (row 1-3,5-6) or all cell objects (almost row 7) for cells within that row.</li>
|
||||
<li>This method does not allow adding any row (<code>tr</code>) attributes, (i.e. class or data-attributes).</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li>cell object
|
||||
<ul>
|
||||
<li>The cell object contains all of the attributes that are to be applied to a particular table cell (<code>th</code> (thead or tfoot) or <code>td</code> (tbody).</li>
|
||||
<li>This object requires either a <code>text</code> (row 0 & row 7) or <code>html</code> (row 4) attribute to add content into the cell.</li>
|
||||
<li>Within the first header row only, if a <code>width</code> attribute is defined, it will be applied to a <code><col></code> element and placed within a <code><colgroup></code> before the header.</li>
|
||||
<li>See row 0 (header), row 4 and row 7 (rows) in the demo code below.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>cell text
|
||||
<ul>
|
||||
<li>Within a row array or object, only the cell text can be included (row 0 cell 2,4; row 1-3,5-6; row 7 cell 5).</li>
|
||||
<li>Within the header only, whenever cell content is added as a string, the widget will check the <code>widgetOptions.build_headers.classes</code> & <code>wo.build_headers.widths</code> (first row only) and apply any values it finds for that column to those cells.</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>HTML</h3>
|
||||
<pre class="prettyprint lang-html"><div id="object2Table"></div></pre>
|
||||
<h3>Javascript</h3>
|
||||
<pre class="prettyprint lang-js">$(function() {
|
||||
// object or JSON
|
||||
var dataObject = {
|
||||
headers : [
|
||||
[
|
||||
// each object/string is a cell
|
||||
{ text: 'First Name', class: 'fname', width: '10%' }, // row 0 cell 1
|
||||
'Last Name', // row 0 cell 2
|
||||
{ text: 'Age', class: 'age', 'data-sorter' : false }, // row 0 cell 3
|
||||
'Total', // row 0 cell 4
|
||||
{ text: 'Discount', class : 'sorter-false' }, // row 0 cell 5
|
||||
{ text: 'Date', class : 'date' } // row 0 cell 6
|
||||
]
|
||||
],
|
||||
footers : 'clone', // clone headers or assign array like headers
|
||||
rows : [
|
||||
// TBODY 1
|
||||
[ 'Peter', 'Parker', 28, '$9.99', '20%', 'Jul 6, 2006 8:14 AM' ], // row 1
|
||||
[ 'John', 'Hood', 33, '$19.99', '25%', 'Dec 10, 2002 5:14 AM' ], // row 2
|
||||
[ 'Clark', 'Kent', 18, '$15.89', '44%', 'Jan 12, 2003 11:14 AM' ], // row 3
|
||||
|
||||
// TBODY 2
|
||||
{ newTbody: true, class: 'tablesorter-infoOnly' },
|
||||
{ cells : [ { html: '<strong>Info Row</strong>', colSpan: 6 } ] }, // row 4
|
||||
|
||||
// TBODY 3
|
||||
{ newTbody: true },
|
||||
[ 'Bruce', 'Evans', 22, '$13.19', '11%', 'Jan 18, 2007 9:12 AM' ], // row 5
|
||||
[ 'Bruce', 'Almighty', 45, '$153.19', '44%', 'Jan 18, 2001 9:12 AM' ], // row 6
|
||||
|
||||
{ class: 'specialRow', // row 7
|
||||
cells: [
|
||||
// each object/string is a cell
|
||||
{ text: 'Fred', class: 'fname' }, // row 7 cell 1
|
||||
{ text: 'Smith', class: 'lname' }, // row 7 cell 2
|
||||
{ text: 18, class: 'age', 'data-info': "fake ID!, he's only 16" }, // row 7 cell 3
|
||||
{ text: '$22.44', class: 'total' }, // row 7 cell 4
|
||||
'8%', // row 7 cell 5
|
||||
{ text: 'Aug 20, 2012 10:15 AM', class: 'date' } // row 7 cell 6
|
||||
],
|
||||
'data-info' : 'This row likes turtles'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
$('#object2Table').tablesorter({
|
||||
theme: 'blue',
|
||||
widgets: ['zebra'],
|
||||
data : dataObject, // same as using build_source (build_source would override this)
|
||||
widgetOptions : {
|
||||
// *** build object options ***
|
||||
build_objectRowKey : 'rows', // object key containing table rows
|
||||
build_objectCellKey : 'cells', // object key containing table cells (within the rows object)
|
||||
build_objectHeaderKey : 'headers', // object key containing table headers
|
||||
build_objectFooterKey : 'footers' // object key containing table footers
|
||||
}
|
||||
});
|
||||
|
||||
});</pre>
|
||||
<h3>Result</h3>
|
||||
<div id="object2Table" class="container"></div>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Setup - Object (json file via ajax)</a></h3>
|
||||
<div>
|
||||
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>The important difference between this demo and the javascript variable demo above is that this one retrieves a JSON file:
|
||||
<ul>
|
||||
<li>Set the <code>build_source</code> option to contain any <a href="">ajax settings</a> to load the json.</li>
|
||||
<li>To load the json file, set the <code>url</code> option to point to the json file and the <code>dataType</code> set to <code>"json"</code>.</li>
|
||||
<li>The remaining default settings were left out of the example below.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Please see the "Object (javascript variable)" section above for more details on how to set up the JSON for this demo.</li>
|
||||
<li>Note that JSON formatting is very specific - only double quotes (<code>"</code>) can be used to wrap attributes, all keys must be wrapped in quotes, no comments, etc.</li>
|
||||
<li>Always verify that the JSON is valid (use <a href="http://jsonlint.com/">JSONLint</a>) and realize that browsers like Chrome will not allow you to access locally hosted (desktop) JSON files. Test it with Firefox instead.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Build.json file</h3>
|
||||
<pre class="prettyprint lang-js">{
|
||||
"headers" : [
|
||||
[
|
||||
{ "text": "First Name", "class": "fname", "width": "20%" },
|
||||
"Last Name",
|
||||
{ "text": "Age", "class": "age", "data-sorter" : false },
|
||||
"Total",
|
||||
{ "text": "Discount", "class" : "sorter-false" },
|
||||
{ "text": "Date", "class" : "date" }
|
||||
]
|
||||
],
|
||||
"footers" : "clone",
|
||||
"rows" : [
|
||||
[ "Peter", "Parker", 28, "$9.99", "20%", "Jul 6, 2006 8:14 AM" ],
|
||||
[ "John", "Hood", 33, "$19.99", "25%", "Dec 10, 2002 5:14 AM" ],
|
||||
[ "Clark", "Kent", 18, "$15.89", "44%", "Jan 12, 2003 11:14 AM" ],
|
||||
|
||||
{ "newTbody": true, "class": "tablesorter-infoOnly" },
|
||||
{ "cells" : [ { "html": "<strong>JSON Info Row</strong>", "colspan": 6 } ] },
|
||||
|
||||
{ "newTbody" : true },
|
||||
[ "Bruce", "Evans", 22, "$13.19", "11%", "Jan 18, 2007 9:12 AM" ],
|
||||
[ "Bruce", "Almighty", 45, "$153.19", "44%", "Jan 18, 2001 9:12 AM" ],
|
||||
|
||||
{ "class": "specialRow",
|
||||
"cells" : [
|
||||
{ "text": "Fred", "class": "fname" },
|
||||
{ "text": "Smith", "class": "lname" },
|
||||
{ "text": 18, "class": "age", "data-info": "fake ID!, he's only 16" },
|
||||
{ "text": "$22.44", "class": "total" },
|
||||
"8%",
|
||||
{ "text": "Aug 20, 2012 10:15 AM", "class": "date" }
|
||||
],
|
||||
"data-info" : "This row likes turtles"
|
||||
}
|
||||
]
|
||||
}</pre>
|
||||
<h3>HTML</h3>
|
||||
<pre class="prettyprint lang-html"><div id="object2Table2"></div></pre>
|
||||
<h3>Javascript</h3>
|
||||
<pre class="prettyprint lang-js">$(function() {
|
||||
$('#object2Table2').tablesorter({
|
||||
theme: 'blue',
|
||||
widgets: ['zebra'],
|
||||
widgetOptions: {
|
||||
build_type : 'json',
|
||||
build_source : { url: 'assets/build.json', dataType: 'json' }
|
||||
}
|
||||
});
|
||||
});</pre>
|
||||
<h3>Result</h3>
|
||||
<div id="object2Table2" class="container"></div>
|
||||
|
||||
</div>
|
||||
|
||||
</div> <!-- end accordion -->
|
||||
|
||||
</div> <!-- end #main -->
|
||||
|
||||
<div class="csv hidden">
|
||||
Album,Artist,Price
|
||||
Lateralus,Tool,$13.00
|
||||
Aenima,Tool,$12.00
|
||||
"10,000 days",Tool,$14.00
|
||||
Down In It,Nine Inch Nails,$3.00
|
||||
Broken,Nine Inch Nails,$6.00
|
||||
Muse,Black Holes and Revelations,$7.00
|
||||
Anon,"fake album, with comma", $1.00
|
||||
Album,Artist,Price (USD)
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,568 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Column Selector Widget (beta)</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
|
||||
<script src="js/jquery-ui-latest.min.js"></script>
|
||||
<link rel="stylesheet" href="css/bootstrap.min.css">
|
||||
<script src="js/bootstrap.min.js"></script>
|
||||
<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="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<script src="../js/widgets/widget-columnSelector.js"></script>
|
||||
<style>
|
||||
/* override document styling */
|
||||
.popover.right { text-align: left; }
|
||||
.ui-widget-content a { color: #428bca; }
|
||||
</style>
|
||||
<script>
|
||||
$(function(){
|
||||
$('.options').tablesorter({
|
||||
widthFixed: true,
|
||||
widgets: ['stickyHeaders']
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style id="css">/*** custom css only popup ***/
|
||||
.columnSelectorWrapper {
|
||||
position: relative;
|
||||
margin: 10px 0;
|
||||
display: inline-block;
|
||||
}
|
||||
.columnSelector, .hidden {
|
||||
display: none;
|
||||
}
|
||||
.columnSelectorButton {
|
||||
background: #99bfe6;
|
||||
border: #888 1px solid;
|
||||
color: #111;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
}
|
||||
#colSelect1:checked + label {
|
||||
background: #5797d7;
|
||||
border-color: #555;
|
||||
}
|
||||
#colSelect1:checked ~ #columnSelector {
|
||||
display: block;
|
||||
}
|
||||
.columnSelector {
|
||||
width: 120px;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
padding: 10px;
|
||||
background: #fff;
|
||||
border: #99bfe6 1px solid;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.columnSelector label {
|
||||
display: block;
|
||||
}
|
||||
.columnSelector label:nth-child(1) {
|
||||
border-bottom: #99bfe6 solid 1px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.columnSelector input {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.columnSelector .disabled {
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
/*** Bootstrap popover ***/
|
||||
#popover-target label {
|
||||
margin: 0 5px;
|
||||
display: block;
|
||||
}
|
||||
#popover-target input {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.popover {
|
||||
margin-top: -65px; /* adjust popover position */
|
||||
}
|
||||
</style>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
/*** custom css only button popup ***/
|
||||
$(".custom-popup").tablesorter({
|
||||
theme: 'blue',
|
||||
widgets: ['zebra', 'columnSelector', 'stickyHeaders'],
|
||||
widgetOptions : {
|
||||
// target the column selector markup
|
||||
columnSelector_container : $('#columnSelector'),
|
||||
// column status, true = display, false = hide
|
||||
// disable = do not display on list
|
||||
columnSelector_columns : {
|
||||
0: 'disable' /* set to disabled; not allowed to unselect it */
|
||||
},
|
||||
// remember selected columns (requires $.tablesorter.storage)
|
||||
columnSelector_saveColumns: true,
|
||||
|
||||
// container layout
|
||||
columnSelector_layout : '<label><input type="checkbox">{name}</label>',
|
||||
// data attribute containing column name to use in the selector container
|
||||
columnSelector_name : 'data-selector-name',
|
||||
|
||||
/* Responsive Media Query settings */
|
||||
// enable/disable mediaquery breakpoints
|
||||
columnSelector_mediaquery: true,
|
||||
// toggle checkbox name
|
||||
columnSelector_mediaqueryName: 'Auto: ',
|
||||
// breakpoints checkbox initial setting
|
||||
columnSelector_mediaqueryState: true,
|
||||
// responsive table hides columns with priority 1-6 at these breakpoints
|
||||
// see http://view.jquerymobile.com/1.3.2/dist/demos/widgets/table-column-toggle/#Applyingapresetbreakpoint
|
||||
// *** set to false to disable ***
|
||||
columnSelector_breakpoints : [ '20em', '30em', '40em', '50em', '60em', '70em' ],
|
||||
// data attribute containing column priority
|
||||
// duplicates how jQuery mobile uses priorities:
|
||||
// http://view.jquerymobile.com/1.3.2/dist/demos/widgets/table-column-toggle/
|
||||
columnSelector_priority : 'data-priority'
|
||||
}
|
||||
});
|
||||
|
||||
/*** Bootstrap popover demo ***/
|
||||
$('#popover')
|
||||
.popover({
|
||||
placement: 'right',
|
||||
html: true, // required if content has HTML
|
||||
content: '<div id="popover-target"></div>'
|
||||
})
|
||||
// bootstrap popover event triggered when the popover opens
|
||||
.on('shown.bs.popover', function () {
|
||||
// call this function to copy the column selection code into the popover
|
||||
$.tablesorter.columnSelector.attachTo( $('.bootstrap-popup'), '#popover-target');
|
||||
});
|
||||
|
||||
// initialize column selector using default settings
|
||||
// note: no container is defined!
|
||||
$(".bootstrap-popup").tablesorter({
|
||||
theme: 'blue',
|
||||
widgets: ['zebra', 'columnSelector', 'stickyHeaders']
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Column Selector Widget (beta)</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
|
||||
<p></p>
|
||||
<br>
|
||||
|
||||
<div id="root" class="accordion">
|
||||
|
||||
<h3><a href="#">Notes</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>
|
||||
In <span class="version">v2.17.0</span>, a method to refresh the column selector was added.<br>
|
||||
<br>
|
||||
</li>
|
||||
<li>This widget will <strong>only work</strong> in tablesorter version 2.8+ and jQuery version 1.7+.</li>
|
||||
<li>This widget may not work properly if the table header includes rows with row or column spans.</li>
|
||||
<li>The responsive part of this widget
|
||||
<ul>
|
||||
<li>Uses similar parameters as those used by jQuery mobile to set <a href="http://view.jquerymobile.com/1.4.0/demos/table-column-toggle/">column priority</a>.</li>
|
||||
<li>The column priorities range from 1 to 6, with 1 having the highest priority. As the browser window shrinks, lower priority (higher numbers) columns will be hidden first until all numbered priority columns are hidden.</li>
|
||||
<li>Any named data-priority, other than the numbers 1 - 6, (e.g. "critical" or "persistent") will be treated as a column which <em>will not be included</em> in the column selector.</li>
|
||||
<li>Note that this widget uses media queries, which <a href="http://caniuse.com/#search=media">will not work in IE8 and older browsers</a>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>The selector code uses css selectors, for optimal speed, to hide/show columns. These selectors <a href="http://caniuse.com/#search=nth-child">will not work in IE8 and older browsers</a>.</li>
|
||||
<li>The column button & popup is completely customizable, and in this demo it includes css that may not work properly in older versions of IE.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Options</a></h3>
|
||||
<div>
|
||||
<h4>Column selector widget default options (added inside of tablesorter <code>widgetOptions</code>)</h4>
|
||||
<div>
|
||||
<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 class="options tablesorter-blue" data-sortlist="[[0,0]]">
|
||||
<thead>
|
||||
<tr><th>Option</th><th class="sorter-false">Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
<tr id="column-selector-container">
|
||||
<td><a href="#" class="permalink">columnSelector_container</a></td>
|
||||
<td>
|
||||
Target an element within the current page where the column selector will be inserted.
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
<ul>
|
||||
<li>This setting is optional. If not set, you can use the following function to attach it to another element - see the Bootstrap example below
|
||||
<pre class="prettyprint lang-js">$.tablesorter.columnSelector.attachTo( $('table'), '.selector-target' );</pre>
|
||||
</li>
|
||||
<li>This can be either a jQuery selector string ( e.g. <code>'#columnSelector'</code> )</li>
|
||||
<li>or, a jQuery object ( e.g. <code>$('#columnSelector')</code> ).</li>
|
||||
</ul>
|
||||
Default value: <code>null</code>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="column-selector-columns">
|
||||
<td><a href="#" class="permalink">columnSelector_columns</a></td>
|
||||
<td>
|
||||
Assigns a column status for each selector
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
<ul>
|
||||
<li>To disable, or remove a column from the column selector, include the key word <code>"disable"</code> - this is one of many ways to remove a column from the column selector popup</li>
|
||||
<li>Set a column status to <code>true</code> to initially display a column. This is the default for undefined columns.</li>
|
||||
<li>Set a column status to <code>false</code> to initially hide a column.</li>
|
||||
<li>Examples:
|
||||
<pre class="prettyprint lang-js">widgetOptions : {
|
||||
columnSelector_columns : {
|
||||
0 : "disable", /* disable; i.e. remove column from selector */
|
||||
1 : false, /* start with column hidden */
|
||||
2 : true, /* start with column visible; default for undefined columns */
|
||||
}
|
||||
}</pre></li>
|
||||
<li>
|
||||
<span class="label label-warning">*NOTE*</span> Prior to v2.15.6, using these extra methods and setting a column to "false" would remove it from the selector. Now, it is more consistent with this columns option - set the appropriate method to "disable" to remove a column, "false" to initially hide a column and "true" to keep the column in an initially visible state.<br>
|
||||
<br>
|
||||
In <span class="version">v2.15.6</span>, the following methods in order of priority are now available (set to true, false or disable):
|
||||
<ul>
|
||||
<li>jQuery data <code>data-columnSelector="true"</code> or <code>data-columnSelector="false"</code>.</li>
|
||||
<li>metadata <code>class="{ columnSelector : true }"</code> or <code>class="{ columnSelector : false }"</code>.</li>
|
||||
<li>headers option <code>headers : { 0 : { columnSelector: true } }</code> or <code>headers : { 0 : { columnSelector: false } }</code>.</li>
|
||||
<li>header class name <code>class="columnSelector-true"</code> or <code>class="columnSelector-false"</code>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<span class="label label-warning">*NOTE*</span> Setting a column to initially be visible (<code>true</code>) or invisible (<code>false</code>) will be overridden by the users saved selections if the <code>columnSelector_saveColumns</code> option is <code>true</code>.<br>
|
||||
<br>
|
||||
Default value: <code>{}</code>; empty object
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="column-selector-save-columns">
|
||||
<td><a href="#" class="permalink">columnSelector_saveColumns</a></td>
|
||||
<td>Save the current manually set column status and the table's responsive ("auto") state (<span class="version updated">v2.15.7</span>).
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
This option requires the storage utility contained within the tablesorter widgets file (<code>jquery.tablesorter.widgets.js</code>).<br>
|
||||
<br>
|
||||
Default value: <code>true</code>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="column-selector-layout">
|
||||
<td><a href="#" class="permalink">columnSelector_layout</a></td>
|
||||
<td>
|
||||
This option defines the markup used for each column selector within the popup.
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
The only available parameter is the <code>{name}</code> string which will be replaced with the appropriate column name/title.<br>
|
||||
<br>
|
||||
An <code><input type="checkbox"></code> is required within this setting!<br>
|
||||
<br>
|
||||
Default value: <code>'<label><input type="checkbox">{name}</label>'</code>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="column-selector-name">
|
||||
<td><a href="#" class="permalink">columnSelector_name</a></td>
|
||||
<td>
|
||||
The data-attribute within the table header cell which contains an alternate column selector name.
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
<ul>
|
||||
<li>If the header cell does not have this attribute defined, the column selector name will be taken from the header cell internal text.</li>
|
||||
<li>If defined, the text contained within this attribute will replace the <code>{name}</code> string within the layout option above.</li>
|
||||
</ul>
|
||||
Default value: <code>"data-selector-name"</code>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="column-selector-mediaquery">
|
||||
<td><a href="#" class="permalink">columnSelector_mediaquery</a></td>
|
||||
<td>Set this option to add (<code>true</code>) or not add (<code>false</code>) the media query functionality of this widget.
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
Default value: <code>true</code>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="column-selector-mediaquery-name">
|
||||
<td><a href="#" class="permalink">columnSelector_mediaqueryName</a></td>
|
||||
<td>When the media query checkbox is added (it also uses the <code>columnSelector_layout</code> markup), this is the name that is added.
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
Set as "Auto" to signify to the user that columns disappearing and/or reappearing is automatically done.<br>
|
||||
<br>
|
||||
Default value: <code>"Auto: "</code>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="column-selector-mediaquery-state">
|
||||
<td><a href="#" class="permalink">columnSelector_mediaqueryState</a></td>
|
||||
<td>Set this option to <code>false</code> to start with the media query disabled (manual column selection mode).
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
Default value: <code>true</code>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="column-selector-breakpoints">
|
||||
<td><a href="#" class="permalink">columnSelector_breakpoints</a></td>
|
||||
<td>This option defines the media query breakpoints with which to use when a column with the associated priority is hidden or revealed.
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
<ul>
|
||||
<li>For example, the last entry "70em" (1,120px) is assigned to data-priority 6. When the browser width is below this dimension, all columns with a data-priority of six will be hidden. Then when a browser width less than "60em" (960px) is reached, all columns of data-priority 5 and above will be hidden. At "50em" (800px), all columns of data-priority 4 and above are hidden, etc.</li>
|
||||
<li>Adjust these values as desired, but a <em>maximum</em> of six data-priorities is set.</li>
|
||||
</ul>
|
||||
Default value: <code>[ "20em", "30em", "40em", "50em", "60em", "70em" ]</code>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="column-selector-priority">
|
||||
<td><a href="#" class="permalink">columnSelector_priority</a></td>
|
||||
<td>
|
||||
This is the assigned data-attribute which contains the defined data priority for a table column
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
<ul>
|
||||
<li>Values of 1 through 6 set the breakpoints of that particular column.</li>
|
||||
<li>A value of 1 has the highest priority, meaning it is the last column(s) to be hidden when the browser width goes below "20em" (320px).</li>
|
||||
<li>A value of 7 has the lowest priority, meaning it is the first column(s) to be hidden when the browser width goes below "70em" (1,120px).</li>
|
||||
<li>Any named priority value, (e.g. "critical" or "persistent") will flag the widget to remove that column from the selector list.</li>
|
||||
<li>Undefined priorities will default to a priority value of 1.</li>
|
||||
</ul>
|
||||
Default value: <code>"data-priority"</code>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Methods</a></h3>
|
||||
<div>
|
||||
Refresh the breakpoints and selected columns using this method (<span class="version">v2.17.0</span>):<br>
|
||||
<br>
|
||||
<pre class="prettyprint lang-js">$('table').trigger('refreshColumnSelector');</pre>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Removing a column from the selector</a></h3>
|
||||
<div>
|
||||
This is probably overkill, but there are numerous ways to remove a column from the selection popup (<span class="version updated">v2.15.6</span>):
|
||||
<ul>
|
||||
<li>Setting the <code>data-priority</code> to any non-numerical name (e.g. "critical" or "persistent").</li>
|
||||
<li>Setting the column selector widget columns option <code>columnSelector_columns : { 0 : 'disable' }</code>.</li>
|
||||
<li>The following methods in order of priority:
|
||||
<ul>
|
||||
<li>jQuery data <code>data-columnSelector="disable"</code>.</li>
|
||||
<li>metadata <code>class="{ columnSelector : disable }"</code>.</li>
|
||||
<li>headers option <code>headers : { 0 : { columnSelector: disable } }</code>.</li>
|
||||
<li>header class name <code>class="columnSelector-disable"</code>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
* Prior to v2.15.6, setting these methods to "false" would remove it from the selector. Now, they must be set to "disable" to remove the column from the selector, this was done to make it more consistent with the <code>columnSelector_columns</code> setting.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
|
||||
<h3>CSS only popup</h3>
|
||||
<!-- This selector markup is completely customizable -->
|
||||
<div class="columnSelectorWrapper">
|
||||
<input id="colSelect1" type="checkbox" class="hidden">
|
||||
<label class="columnSelectorButton" for="colSelect1">Column</label>
|
||||
<div id="columnSelector" class="columnSelector">
|
||||
<!-- this div is where the column selector is added -->
|
||||
</div>
|
||||
</div> (When "Auto" is set, the table becomes responsive; resize the browser window to see it work)
|
||||
|
||||
<table class="tablesorter custom-popup">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-priority="critical">Name</th>
|
||||
<!-- Remove column from selection popup by including -->
|
||||
<!-- data-priority="Anything other than 1-6" OR data-column-selector="disable" OR class="columnSelector-disable" -->
|
||||
<th class="columnSelector-disable">Major</th>
|
||||
<!-- columnSelector-false will initially hide the column -->
|
||||
<th class="columnSelector-false" data-priority="6" data-selector-name="Gender">Sex</th>
|
||||
<th data-priority="4">English</th>
|
||||
<th data-priority="5">Japanese</th>
|
||||
<th data-priority="3">Calculus</th>
|
||||
<th data-priority="2">Geometry</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr><th>Name</th><th>Major</th><th>Sex</th><th>English</th><th>Japanese</th><th>Calculus</th><th>Geometry</th></tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr><td>Student03</td><td>Languages</td><td>female</td><td>85</td><td>95</td><td>80</td><td>85</td></tr>
|
||||
<tr><td>Student04</td><td>Languages</td><td>male</td><td>60</td><td>55</td><td>100</td><td>100</td></tr>
|
||||
<tr><td>Student05</td><td>Languages</td><td>female</td><td>68</td><td>80</td><td>95</td><td>80</td></tr>
|
||||
<tr><td>Student12</td><td>Mathematics</td><td>female</td><td>100</td><td>75</td><td>70</td><td>85</td></tr>
|
||||
<tr><td>Student13</td><td>Languages</td><td>female</td><td>100</td><td>80</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student14</td><td>Languages</td><td>female</td><td>50</td><td>45</td><td>55</td><td>90</td></tr>
|
||||
<tr><td>Student15</td><td>Languages</td><td>male</td><td>95</td><td>35</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student16</td><td>Languages</td><td>female</td><td>100</td><td>50</td><td>30</td><td>70</td></tr>
|
||||
<tr><td>Student17</td><td>Languages</td><td>female</td><td>80</td><td>100</td><td>55</td><td>65</td></tr>
|
||||
<tr><td>Student18</td><td>Mathematics</td><td>male</td><td>30</td><td>49</td><td>55</td><td>75</td></tr>
|
||||
<tr><td>Student19</td><td>Languages</td><td>male</td><td>68</td><td>90</td><td>88</td><td>70</td></tr>
|
||||
<tr><td>Student20</td><td>Mathematics</td><td>male</td><td>40</td><td>45</td><td>40</td><td>80</td></tr>
|
||||
<tr><td>Student01</td><td>Languages</td><td>male</td><td>80</td><td>70</td><td>75</td><td>80</td></tr>
|
||||
<tr><td>Student02</td><td>Mathematics</td><td>male</td><td>90</td><td>88</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student06</td><td>Mathematics</td><td>male</td><td>100</td><td>99</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student07</td><td>Mathematics</td><td>male</td><td>85</td><td>68</td><td>90</td><td>90</td></tr>
|
||||
<tr><td>Student08</td><td>Languages</td><td>male</td><td>100</td><td>90</td><td>90</td><td>85</td></tr>
|
||||
<tr><td>Student09</td><td>Mathematics</td><td>male</td><td>80</td><td>50</td><td>65</td><td>75</td></tr>
|
||||
<tr><td>Student10</td><td>Languages</td><td>male</td><td>85</td><td>100</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student11</td><td>Languages</td><td>male</td><td>86</td><td>85</td><td>100</td><td>100</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>Bootstrap Popover</h3>
|
||||
<!-- Bootstrap popover button -->
|
||||
<button id="popover" type="button" class="btn btn-default">
|
||||
Select Column
|
||||
</button>
|
||||
|
||||
<table class="tablesorter bootstrap-popup">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-priority="critical">Rank</th>
|
||||
<th data-priority="3">First Name</th>
|
||||
<th data-priority="critical">Last Name</th>
|
||||
<th data-priority="4">Age</th>
|
||||
<th data-priority="4">Total</th>
|
||||
<th data-priority="5">Discount</th>
|
||||
<th data-priority="6">Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>1</td><td>Philip Aaron Wong</td><td>Johnson Sr Esq</td><td>25</td><td>$5.95</td><td>22%</td><td>Jun 26, 2004 7:22 AM</td></tr>
|
||||
<tr><td>11</td><td>Aaron</td><td>Hibert</td><td>12</td><td>$2.99</td><td>5%</td><td>Aug 21, 2009 12:21 PM</td></tr>
|
||||
<tr><td>12</td><td>Brandon Clark</td><td>Henry Jr</td><td>51</td><td>$42.29</td><td>18%</td><td>Oct 13, 2000 1:15 PM</td></tr>
|
||||
<tr><td>111</td><td>Peter</td><td>Parker</td><td>28</td><td>$9.99</td><td>20%</td><td>Jul 6, 2006 8:14 AM</td></tr>
|
||||
<tr><td>21</td><td>John</td><td>Hood</td><td>33</td><td>$19.99</td><td>25%</td><td>Dec 10, 2002 5:14 AM</td></tr>
|
||||
<tr><td>013</td><td>Clark</td><td>Kent Sr.</td><td>18</td><td>$15.89</td><td>44%</td><td>Jan 12, 2003 11:14 AM</td></tr>
|
||||
<tr><td>005</td><td>Bruce</td><td>Almighty Esq</td><td>45</td><td>$153.19</td><td>44%</td><td>Jan 18, 2021 9:12 AM</td></tr>
|
||||
<tr><td>10</td><td>Alex</td><td>Dumass</td><td>13</td><td>$5.29</td><td>4%</td><td>Jan 8, 2012 5:11 PM</td></tr>
|
||||
<tr><td>16</td><td>Jim</td><td>Franco</td><td>24</td><td>$14.19</td><td>14%</td><td>Jan 14, 2004 11:23 AM</td></tr>
|
||||
<tr><td>166</td><td>Bruce Lee</td><td>Evans</td><td>22</td><td>$13.19</td><td>11%</td><td>Jan 18, 2007 9:12 AM</td></tr>
|
||||
<tr><td>100</td><td>Brenda Dexter</td><td>McMasters</td><td>18</td><td>$55.20</td><td>15%</td><td>Feb 12, 2010 7:23 PM</td></tr>
|
||||
<tr><td>55</td><td>Dennis</td><td>Bronson</td><td>65</td><td>$123.00</td><td>32%</td><td>Jan 20, 2001 1:12 PM</td></tr>
|
||||
<tr><td>9</td><td>Martha</td><td>delFuego</td><td>25</td><td>$22.09</td><td>17%</td><td>Jun 11, 2011 10:55 AM</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h1>Css</h1>
|
||||
<div id="css">
|
||||
<pre class="prettyprint lang-css"></pre>
|
||||
</div>
|
||||
|
||||
<h1>HTML</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><h3>CSS only popup</h3>
|
||||
<!-- This selector markup is completely customizable -->
|
||||
<div class="columnSelectorWrapper">
|
||||
<input id="colSelect1" type="checkbox" class="hidden">
|
||||
<label class="columnSelectorButton" for="colSelect1">Column</label>
|
||||
<div id="columnSelector" class="columnSelector">
|
||||
<!-- this div is where the column selector is added -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table class="tablesorter custom-popup">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-priority="critical">Name</th>
|
||||
<!-- Remove column from selection popup by including -->
|
||||
<!-- data-priority="Anything other than 1-6" OR data-column-selector="disable" OR class="columnSelector-disable" -->
|
||||
<th class="columnSelector-disable">Major</th>
|
||||
<!-- columnSelector-false will initially hide the column -->
|
||||
<th class="columnSelector-false" data-priority="6" data-selector-name="Gender">Sex</th>
|
||||
<th data-priority="4">English</th>
|
||||
<th data-priority="5">Japanese</th>
|
||||
<th data-priority="3">Calculus</th>
|
||||
<th data-priority="2">Geometry</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr><th>Name</th><th>Major</th><th>Sex</th><th>English</th><th>Japanese</th><th>Calculus</th><th>Geometry</th></tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<!-- ... -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>Bootstrap Popover</h3>
|
||||
<!-- Bootstrap popover button -->
|
||||
<button id="popover" type="button" class="btn btn-default">
|
||||
Select Column
|
||||
</button>
|
||||
|
||||
<table class="tablesorter bootstrap-popup">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-priority="critical">Rank</th>
|
||||
<th data-priority="3">First Name</th>
|
||||
<th data-priority="critical">Last Name</th>
|
||||
<th data-priority="4">Age</th>
|
||||
<th data-priority="4">Total</th>
|
||||
<th data-priority="5">Discount</th>
|
||||
<th data-priority="6">Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- ... -->
|
||||
</tbody>
|
||||
</table></pre>
|
||||
</div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-js"></pre>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
226
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-widget-columns.html
Executable file
226
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-widget-columns.html
Executable file
@@ -0,0 +1,226 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Columns Style Widget</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-1.2.6.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.default.css">
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<link rel="stylesheet" href="../css/theme.green.css">
|
||||
<link rel="stylesheet" href="../css/theme.grey.css">
|
||||
<link rel="stylesheet" href="../css/theme.ice.css">
|
||||
<link rel="stylesheet" href="../css/theme.black-ice.css">
|
||||
<link rel="stylesheet" href="../css/theme.dark.css">
|
||||
<link rel="stylesheet" href="../css/theme.dropbox.css">
|
||||
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
// call the tablesorter plugin
|
||||
$("table").tablesorter({
|
||||
theme : 'blue',
|
||||
|
||||
sortList : [[1,0],[2,0],[3,0]],
|
||||
|
||||
// header layout template; {icon} needed for some themes
|
||||
headerTemplate : '{content}{icon}',
|
||||
|
||||
// initialize zebra striping and column styling of the table
|
||||
widgets : ["zebra", "columns"],
|
||||
|
||||
widgetOptions : {
|
||||
// change the default column class names
|
||||
// primary is the first column sorted, secondary is the second, etc
|
||||
columns : [ "primary", "secondary", "tertiary" ],
|
||||
// include thead when adding class names
|
||||
columns_thead : true,
|
||||
// include tfoot when adding class names
|
||||
columns_tfoot : true
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
});</script>
|
||||
<script>
|
||||
$(function() {
|
||||
var themes = 'default blue green grey ice blackice dark dropbox',
|
||||
i, o = '', t = themes.split(' ');
|
||||
for (i = 0; i < t.length; i++) {
|
||||
o += '<option>' + t[i] + '</option>';
|
||||
}
|
||||
$('select')
|
||||
.html(o)
|
||||
.change(function(){
|
||||
var theme = $(this).val().toLowerCase();
|
||||
$('table')
|
||||
.removeClass('tablesorter-' + t.join(' tablesorter-'))
|
||||
.addClass('tablesorter-' + theme);
|
||||
}).trigger('change');
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Columns Style Widget</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>As of tablesorter version 2.9+, this widget can no longer be applied to versions of tablesorter prior to version 2.8.</li>
|
||||
<li>Older versions of this widget can be applied to the original plugin. The code is in the "jquery.tablesorter.widgets.js" file.</li>
|
||||
<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>
|
||||
|
||||
<h1>Demo</h1>
|
||||
Choose Theme:
|
||||
<select></select>
|
||||
<br><br>
|
||||
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>$153.19</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Page Header</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><!-- blue theme stylesheet with additional css styles added in v2.0.17 -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<!-- tablesorter plugin -->
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<!-- tablesorter widget file - loaded after the plugin -->
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script></pre>
|
||||
</div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
|
||||
<h1>CSS</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-css">/*
|
||||
This css is part of the blue/style.css theme, shown as an example
|
||||
To work with the zebra widget, include the .odd and .even color definitions as well
|
||||
as definitions for the "primary", "secondary" and "tertiary" sorts.
|
||||
*/
|
||||
/* Column Widget - column sort colors */
|
||||
table.tablesorter-blue td.primary,
|
||||
table.tablesorter-blue tr.odd td.primary {
|
||||
background-color: #99b3e6;
|
||||
}
|
||||
table.tablesorter-blue tr.even td.primary {
|
||||
background-color: #c2d1f0;
|
||||
}
|
||||
|
||||
table.tablesorter-blue td.secondary,
|
||||
table.tablesorter-blue tr.odd td.secondary {
|
||||
background-color: #c2d1f0;
|
||||
}
|
||||
table.tablesorter-blue tr.even td.secondary {
|
||||
background-color: #d6e0f5;
|
||||
}
|
||||
|
||||
table.tablesorter-blue td.tertiary,
|
||||
table.tablesorter-blue tr.odd td.tertiary {
|
||||
background-color: #d6e0f5;
|
||||
}
|
||||
table.tablesorter-blue tr.even td.tertiary {
|
||||
background-color: #ebf0fa;
|
||||
}</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-widget-filter.html">Applying the filter widget ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,245 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - CSS Sticky Header Widget</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jquery-ui.min.css">
|
||||
<script src="js/jquery-ui-latest.min.js"></script>
|
||||
<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: theme -->
|
||||
<link class="theme" rel="stylesheet" href="../css/theme.default.css">
|
||||
<link class="theme" rel="stylesheet" href="../css/theme.blue.css">
|
||||
<link class="theme" rel="stylesheet" href="../css/theme.green.css">
|
||||
<link class="theme" rel="stylesheet" href="../css/theme.grey.css">
|
||||
<link class="theme" rel="stylesheet" href="../css/theme.ice.css">
|
||||
<link class="theme" rel="stylesheet" href="../css/theme.black-ice.css">
|
||||
<link class="theme" rel="stylesheet" href="../css/theme.dark.css">
|
||||
<link class="theme" rel="stylesheet" href="../css/theme.dropbox.css">
|
||||
|
||||
<style id="css">/* wrapper of table 2 */
|
||||
.wrapper {
|
||||
position: relative;
|
||||
top: 50px;
|
||||
height: 250px;
|
||||
overflow-x: auto;
|
||||
}</style>
|
||||
|
||||
<!-- Tablesorter script: required -->
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
<script src="../js/widgets/widget-cssStickyHeaders.js"></script>
|
||||
|
||||
<script id="js">$(function(){
|
||||
|
||||
var options = {
|
||||
widthFixed : true,
|
||||
showProcessing: true,
|
||||
headerTemplate: '{content} {icon}', // Add icon for jui theme; new in v2.7!
|
||||
|
||||
widgets: [ 'zebra', 'cssStickyHeaders', 'filter' ],
|
||||
|
||||
widgetOptions: {
|
||||
cssStickyHeaders_offset : 0,
|
||||
cssStickyHeaders_addCaption : true,
|
||||
cssStickyHeaders_attachTo : null,
|
||||
cssStickyHeaders_filteredToTop : true,
|
||||
cssStickyHeaders_zIndex : 10
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
$("#table1").tablesorter(options);
|
||||
|
||||
/* make second table scroll within its wrapper */
|
||||
options.widgetOptions.cssStickyHeaders_attachTo = '.wrapper' // or $('.wrapper')
|
||||
$("#table2").tablesorter(options);
|
||||
|
||||
});</script>
|
||||
<script>
|
||||
$(function() {
|
||||
$('link.theme').each(function(){ this.disabled = true; });
|
||||
|
||||
var themes = 'default blue green grey ice black-ice dark dropbox',
|
||||
i, o = '', t = themes.split(' ');
|
||||
for (i = 0; i < t.length; i++) {
|
||||
o += '<option>' + t[i] + '</option>';
|
||||
}
|
||||
|
||||
$('select:first')
|
||||
.append(o)
|
||||
.change(function(){
|
||||
var theme = $(this).val().toLowerCase(),
|
||||
files = $('link.theme').each(function(){
|
||||
this.disabled = true;
|
||||
})
|
||||
files.filter('[href$="theme.' + theme + '.css"]').each(function(){
|
||||
this.disabled = false;
|
||||
});
|
||||
$('table')
|
||||
.removeClass('tablesorter-' + t.join(' tablesorter-') + ' tablesorter-jui')
|
||||
.addClass('tablesorter-' + theme.replace(/-/,''));
|
||||
}).change();
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>CSS Sticky Header Widget</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
|
||||
<p></p>
|
||||
<br>
|
||||
|
||||
<div id="root" class="accordion">
|
||||
|
||||
<h3><a href="#">Notes</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>This demo uses the CSS Sticky Headers widget which uses CSS transforms to reposition the table head.</li>
|
||||
<li><a href="http://caniuse.com/#search=transform">CSS transforms</a> are supported by most modern browsers (not IE8 and older).</li>
|
||||
<li>The jQuery UI themed table does not stick to the top of the page due to the extra padding. Adjust the <code>cssStickyHeaders_offset</code> option as desired. I didn't bother in this demo because it includes more than just the jQuery UI theme.</li>
|
||||
<li>This widget <em>will not work</em> with the original tablesorter, but works optimally with tablesorter v2.8+ (Added <span class="version">v2.14.2</span>; Updated <span class="version updated">v2.14.4</span>)</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Change log</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>In <span class="version">v2.16.4</span>, added the <code>cssStickyHeaders_filteredToTop</code> option. When <code>true</code> the table top will scroll into view after being filtered. This is done because if the sticky header is active, and a filter results in say only one row, the table will scroll up out of the browser viewport. If setn to <code>false</code>, no scrolling is done.</li>
|
||||
<li>In <span class="version">v2.14.4</span>:
|
||||
<ul>
|
||||
<li>Added <code>cssStickyHeaders_attachTo</code> (default set to <code>null</code>). Setting this option with either a jQuery selector string (<code>".wrapper"</code>) or jQuery object (<code>$(".wrapper")</code>) to attach the sticky header to this element - see the second example below.</li>
|
||||
<li>Removed <code>cssStickyHeaders_offsetX</code> option & renamed <code>cssStickyHeaders_offsetY</code> to <code>cssStickyHeaders_offset</code> as the horizontal offset is not required.</li>
|
||||
</ul><br>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<p>
|
||||
|
||||
<h1>CSS</h1>
|
||||
<div id="css">
|
||||
<pre class="prettyprint lang-css"></pre>
|
||||
</div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
|
||||
<h1>Demo</h1>
|
||||
Choose Theme:
|
||||
<select></select>
|
||||
<br><br>
|
||||
<h1>Attach sticky header to browser window</h1>
|
||||
<table id="table1" class="tablesorter">
|
||||
<caption>Student Grades</caption>
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Major</th><th>Sex</th><th>English</th><th>Japanese</th><th>Calculus</th><th class="filter-false sorter-false">Geometry</th></tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr><th>Name</th><th>Major</th><th>Sex</th><th>English</th><th>Japanese</th><th>Calculus</th><th>Geometry</th></tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr><td>Student01</td><td>Languages</td><td>male</td><td>80</td><td>70</td><td>75</td><td>80</td></tr>
|
||||
<tr><td>Student02</td><td>Mathematics</td><td>male</td><td>90</td><td>88</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student03</td><td>Languages</td><td>female</td><td>85</td><td>95</td><td>80</td><td>85</td></tr>
|
||||
<tr><td>Student04</td><td>Languages</td><td>male</td><td>60</td><td>55</td><td>100</td><td>100</td></tr>
|
||||
<tr><td>Student05</td><td>Languages</td><td>female</td><td>68</td><td>80</td><td>95</td><td>80</td></tr>
|
||||
<tr><td>Student06</td><td>Mathematics</td><td>male</td><td>100</td><td>99</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student07</td><td>Mathematics</td><td>male</td><td>85</td><td>68</td><td>90</td><td>90</td></tr>
|
||||
<tr><td>Student08</td><td>Languages</td><td>male</td><td>100</td><td>90</td><td>90</td><td>85</td></tr>
|
||||
<tr><td>Student09</td><td>Mathematics</td><td>male</td><td>80</td><td>50</td><td>65</td><td>75</td></tr>
|
||||
<tr><td>Student10</td><td>Languages</td><td>male</td><td>85</td><td>100</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student11</td><td>Languages</td><td>male</td><td>86</td><td>85</td><td>100</td><td>100</td></tr>
|
||||
<tr><td>Student12</td><td>Mathematics</td><td>female</td><td>100</td><td>75</td><td>70</td><td>85</td></tr>
|
||||
<tr><td>Student13</td><td>Languages</td><td>female</td><td>100</td><td>80</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student14</td><td>Languages</td><td>female</td><td>50</td><td>45</td><td>55</td><td>90</td></tr>
|
||||
<tr><td>Student15</td><td>Languages</td><td>male</td><td>95</td><td>35</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student16</td><td>Languages</td><td>female</td><td>100</td><td>50</td><td>30</td><td>70</td></tr>
|
||||
<tr><td>Student17</td><td>Languages</td><td>female</td><td>80</td><td>100</td><td>55</td><td>65</td></tr>
|
||||
<tr><td>Student18</td><td>Mathematics</td><td>male</td><td>30</td><td>49</td><td>55</td><td>75</td></tr>
|
||||
<tr><td>Student19</td><td>Languages</td><td>male</td><td>68</td><td>90</td><td>88</td><td>70</td></tr>
|
||||
<tr><td>Student20</td><td>Mathematics</td><td>male</td><td>40</td><td>45</td><td>40</td><td>80</td></tr>
|
||||
<tr><td>Student21</td><td>Languages</td><td>male</td><td>50</td><td>45</td><td>100</td><td>100</td></tr>
|
||||
<tr><td>Student22</td><td>Mathematics</td><td>male</td><td>100</td><td>99</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student23</td><td>Languages</td><td>female</td><td>85</td><td>80</td><td>80</td><td>80</td></tr>
|
||||
<tr><td>student23</td><td>Mathematics</td><td>male</td><td>82</td><td>77</td><td>0</td><td>79</td></tr>
|
||||
<tr><td>student24</td><td>Languages</td><td>female</td><td>100</td><td>91</td><td>13</td><td>82</td></tr>
|
||||
<tr><td>student25</td><td>Mathematics</td><td>male</td><td>22</td><td>96</td><td>82</td><td>53</td></tr>
|
||||
<tr><td>student26</td><td>Languages</td><td>female</td><td>37</td><td>29</td><td>56</td><td>59</td></tr>
|
||||
<tr><td>student27</td><td>Mathematics</td><td>male</td><td>86</td><td>82</td><td>69</td><td>23</td></tr>
|
||||
<tr><td>student28</td><td>Languages</td><td>female</td><td>44</td><td>25</td><td>43</td><td>1</td></tr>
|
||||
<tr><td>student29</td><td>Mathematics</td><td>male</td><td>77</td><td>47</td><td>22</td><td>38</td></tr>
|
||||
<tr><td>student30</td><td>Languages</td><td>female</td><td>19</td><td>35</td><td>23</td><td>10</td></tr>
|
||||
<tr><td>student31</td><td>Mathematics</td><td>male</td><td>90</td><td>27</td><td>17</td><td>50</td></tr>
|
||||
<tr><td>student32</td><td>Languages</td><td>female</td><td>60</td><td>75</td><td>33</td><td>38</td></tr>
|
||||
<tr><td>student33</td><td>Mathematics</td><td>male</td><td>4</td><td>31</td><td>37</td><td>15</td></tr>
|
||||
<tr><td>student34</td><td>Languages</td><td>female</td><td>77</td><td>97</td><td>81</td><td>44</td></tr>
|
||||
<tr><td>student35</td><td>Mathematics</td><td>male</td><td>5</td><td>81</td><td>51</td><td>95</td></tr>
|
||||
<tr><td>student36</td><td>Languages</td><td>female</td><td>70</td><td>61</td><td>70</td><td>94</td></tr>
|
||||
<tr><td>student37</td><td>Mathematics</td><td>male</td><td>60</td><td>3</td><td>61</td><td>84</td></tr>
|
||||
<tr><td>student38</td><td>Languages</td><td>female</td><td>63</td><td>39</td><td>0</td><td>11</td></tr>
|
||||
<tr><td>student39</td><td>Mathematics</td><td>male</td><td>50</td><td>46</td><td>32</td><td>38</td></tr>
|
||||
<tr><td>student40</td><td>Languages</td><td>female</td><td>51</td><td>75</td><td>25</td><td>3</td></tr>
|
||||
<tr><td>student41</td><td>Mathematics</td><td>male</td><td>43</td><td>34</td><td>28</td><td>78</td></tr>
|
||||
<tr><td>student42</td><td>Languages</td><td>female</td><td>11</td><td>89</td><td>60</td><td>95</td></tr>
|
||||
<tr><td>student43</td><td>Mathematics</td><td>male</td><td>48</td><td>92</td><td>18</td><td>88</td></tr>
|
||||
<tr><td>student44</td><td>Languages</td><td>female</td><td>82</td><td>2</td><td>59</td><td>73</td></tr>
|
||||
<tr><td>student45</td><td>Mathematics</td><td>male</td><td>91</td><td>73</td><td>37</td><td>39</td></tr>
|
||||
<tr><td>student46</td><td>Languages</td><td>female</td><td>4</td><td>8</td><td>12</td><td>10</td></tr>
|
||||
<tr><td>student47</td><td>Mathematics</td><td>male</td><td>89</td><td>10</td><td>6</td><td>11</td></tr>
|
||||
<tr><td>student48</td><td>Languages</td><td>female</td><td>90</td><td>32</td><td>21</td><td>18</td></tr>
|
||||
<tr><td>student49</td><td>Mathematics</td><td>male</td><td>42</td><td>49</td><td>49</td><td>72</td></tr>
|
||||
<tr><td>student50</td><td>Languages</td><td>female</td><td>56</td><td>37</td><td>67</td><td>54</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h1>Attach sticky header to its parent</h1>
|
||||
<div class="narrow-block wrapper">
|
||||
<table id="table2" class="tablesorter">
|
||||
<caption>Student Grades</caption>
|
||||
<thead>
|
||||
<tr><th>Account #</th><th>First Name</th><th>Last Name</th><th>Age</th><th>Total</th><th>Discount</th><th>Diff</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>A43</td><td>Peter</td><td>Parker</td><td>28</td><td>9.99</td><td>20.3%</td><td>+3</td></tr>
|
||||
<tr><td>A255</td><td>John</td><td>Hood</td><td>33</td><td>19.99</td><td>25.1%</td><td>-7</td></tr>
|
||||
<tr><td>A33</td><td>Clark</td><td>Kent</td><td>18</td><td>15.49</td><td>44.2%</td><td>-13</td></tr>
|
||||
<tr><td>A11</td><td>Bruce</td><td>Almighty</td><td>45</td><td>153.19</td><td>44%</td><td>+19</td></tr>
|
||||
<tr><td>A102</td><td>Bruce</td><td>Evans</td><td>56</td><td>153.19</td><td>23%</td><td>+9</td></tr>
|
||||
<tr><td>A23</td><td>Mike</td><td>Peters</td><td>22</td><td>5.69</td><td>20.3%</td><td>+2</td></tr>
|
||||
<tr><td>A55</td><td>Leslie</td><td>Kent</td><td>33</td><td>15.99</td><td>25.1%</td><td>-3</td></tr>
|
||||
<tr><td>A3</td><td>Frank</td><td>Mint</td><td>44</td><td>12.59</td><td>44.2%</td><td>-12</td></tr>
|
||||
<tr><td>A21</td><td>Joe</td><td>Thomas</td><td>45</td><td>15.25</td><td>44%</td><td>+12</td></tr>
|
||||
<tr><td>A12</td><td>Tess</td><td>Evans</td><td>66</td><td>13.59</td><td>23%</td><td>+4</td></tr>
|
||||
<tr><td>A21</td><td>Peter</td><td>Dunn</td><td>12</td><td>2.99</td><td>21.1%</td><td>+2</td></tr>
|
||||
<tr><td>A33</td><td>Harry</td><td>Jones</td><td>13</td><td>19.49</td><td>22.2%</td><td>-6</td></tr>
|
||||
<tr><td>A13</td><td>John</td><td>James</td><td>16</td><td>13.89</td><td>42.1%</td><td>-13</td></tr>
|
||||
<tr><td>A71</td><td>Nick</td><td>Parker</td><td>45</td><td>13.89</td><td>44%</td><td>+29</td></tr>
|
||||
<tr><td>A21</td><td>Charles</td><td>Dunn</td><td>19</td><td>15.49</td><td>22%</td><td>+3</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,571 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Content Editable</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
|
||||
<script src="js/jquery-ui-latest.min.js"></script>
|
||||
<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">
|
||||
<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;
|
||||
resize: none;
|
||||
}
|
||||
td.no-edit, span.no-edit {
|
||||
background-color: rgba(230,191,153,0.5);
|
||||
}
|
||||
.focused {
|
||||
color: blue;
|
||||
}</style>
|
||||
<script id="js">$(function() {
|
||||
|
||||
$("#table")
|
||||
.tablesorter({
|
||||
theme : 'blue',
|
||||
|
||||
widgets: ['editable'],
|
||||
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, columnIndex){ return text; }
|
||||
editable_focused : function(txt, columnIndex, $element) {
|
||||
// $element is the div, not the td
|
||||
// to get the td, use $element.closest('td')
|
||||
$element.addClass('focused');
|
||||
},
|
||||
editable_blur : function(txt, columnIndex, $element) {
|
||||
// $element is the div, not the td
|
||||
// to get the td, use $element.closest('td')
|
||||
$element.removeClass('focused');
|
||||
},
|
||||
editable_selectAll : function(txt, columnIndex, $element){
|
||||
// note $element is the div inside of the table cell, so use $element.closest('td') to get the cell
|
||||
// only select everthing within the element when the content starts with the letter "B"
|
||||
return /^b/i.test(txt) && columnIndex === 0;
|
||||
},
|
||||
editable_wrapContent : '<div>', // wrap all editable cell content... makes this widget work in IE, and with autocomplete
|
||||
editable_noEdit : 'no-edit', // class name of cell that is not editable
|
||||
editable_editComplete : 'editComplete' // event fired after the table content has been edited
|
||||
}
|
||||
})
|
||||
// config event variable new in v2.17.6
|
||||
.children('tbody').on('editComplete', 'td', function(event, config){
|
||||
var $this = $(this),
|
||||
|
||||
newContent = $this.text(),
|
||||
cellIndex = this.cellIndex, // there shouldn't be any colspans in the tbody
|
||||
rowIndex = $this.closest('tr').attr('id'); // data-row-index stored in row id
|
||||
/*
|
||||
$.post("mysite.php", {
|
||||
"row" : rowIndex,
|
||||
"cell" : cellIndex,
|
||||
"content" : newContent
|
||||
});
|
||||
*/
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Content Editable</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<p></p>
|
||||
<br>
|
||||
|
||||
<div id="root" class="accordion">
|
||||
|
||||
<h3><a href="#">Notes</a></h3>
|
||||
<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).<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>
|
||||
</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>
|
||||
<div>
|
||||
<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 class="options tablesorter-blue" data-sortlist="[[0,0]]">
|
||||
<thead>
|
||||
<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).
|
||||
<div class="collapsible">
|
||||
<ul>
|
||||
<li>In tablesorter core <span class="version">v2.14.2</span>, this widget was updated to allow passing a range string in this option, i.e. <code>"0-2"</code> instead of <code>[0,1,2]</code>.</li>
|
||||
<li><code>contenteditable="true"</code> is added to cells within these columns.</li>
|
||||
</ul>
|
||||
Default value: <code>[]</code> (empty array)
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="editable-enter-to-accept">
|
||||
<td><a href="#" class="permalink">editable_enterToAccept</a></td>
|
||||
<td>Makes the user press enter to accept the content within the editable table cell
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
if <code>false</code>, clicking outside the cell will accept the content.<br>
|
||||
<br>
|
||||
Default value: <code>true</code>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="editable-auto-resort">
|
||||
<td><a href="#" class="permalink">editable_autoResort</a></td>
|
||||
<td>If <code>true</code>, the column will resort (only if already sorted) after the content has been changed.
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
Default value: <code>false</code>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<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.
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
The search is only done within the columns set by the <code>editable_columns</code> option.<br>
|
||||
<br>
|
||||
Default value: <code>'no-edit'</code>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="editable-edit-complete">
|
||||
<td><a href="#" class="permalink">editable_editComplete</a></td>
|
||||
<td>Event fired after the table content has been edited
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
<pre class="prettyprint lang-js">$(function(){
|
||||
|
||||
$('#table')
|
||||
.tablesorter({
|
||||
widgets : ['editable'],
|
||||
widgetOptions : {
|
||||
editable_editComplete : 'giterdone'
|
||||
}
|
||||
})
|
||||
// use delegated event binding
|
||||
.on('giterdone', 'td', function(event, config){
|
||||
// this = td; the event bubble up
|
||||
console.log( 'new content = ' + $(this).text() );
|
||||
});
|
||||
|
||||
});</pre>
|
||||
Default value: <code>'editComplete'</code>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="editable-focused">
|
||||
<td><a href="#" class="permalink">editable_focused</a></td>
|
||||
<td>Callback function that is executeed when the contenteditable cell is focused (<span class="version">v2.17.8</span>)
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
Set this function to manipulate or adjust the content when the content editable is focused
|
||||
<pre class="prettyprint lang-js">$(function(){
|
||||
|
||||
$('#table').tablesorter({
|
||||
widgets : ['editable'],
|
||||
widgetOptions : {
|
||||
editable_focused : function(txt, columnIndex, $element){
|
||||
// note $element is the div inside of the table cell, so use $element.closest('td') to get the cell
|
||||
$element.closest('td').addClass('focused');
|
||||
},
|
||||
editable_blur : function(txt, columnIndex, $element){
|
||||
$element.closest('td').removeClass('focused');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});</pre>
|
||||
Default value: <code>null</code>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="editable-blur">
|
||||
<td><a href="#" class="permalink">editable_blur</a></td>
|
||||
<td>Callback function that is executeed when the contenteditable cell is no longer focused (<span class="version">v2.17.8</span>)
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
Set this function to manipulate or adjust the content when the content editable is blurred
|
||||
<pre class="prettyprint lang-js">$(function(){
|
||||
|
||||
$('#table').tablesorter({
|
||||
widgets : ['editable'],
|
||||
widgetOptions : {
|
||||
editable_focused : function(txt, columnIndex, $element){
|
||||
// note $element is the div inside of the table cell, so use $element.closest('td') to get the cell
|
||||
$element.closest('td').addClass('focused');
|
||||
},
|
||||
editable_blur : function(txt, columnIndex, $element){
|
||||
$element.closest('td').removeClass('focused');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});</pre>
|
||||
Default value: <code>null</code>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="editable-selectall">
|
||||
<td><a href="#" class="permalink">editable_selectAll</a></td>
|
||||
<td>Set to automatically select all content when the contenteditable cell is focused (<span class="version">v2.17.8</span>)
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
Set this option to a boolean, or a function that returns a boolean:
|
||||
<ul>
|
||||
<li>When <code>true</code>, all of the text within the current contenteditable element will be selected.</li>
|
||||
<li>When <code>false</code>, no selection is made.</li>
|
||||
<li>When this option contains a function, return either <code>true</code> to select all of the text within the element, or <code>false</code> to not select any text.</li>
|
||||
</ul>
|
||||
<pre class="prettyprint lang-js">$(function(){
|
||||
|
||||
$('#table').tablesorter({
|
||||
widgets : ['editable'],
|
||||
widgetOptions : {
|
||||
editable_selectAll : function(txt, columnIndex, $element){
|
||||
// note $element is the div inside of the table cell, so use $element.closest('td') to get the cell
|
||||
// only select everthing within the element when the content starts with the letter "B"
|
||||
return /^b/i.test(txt) && columnIndex === 0;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});</pre>
|
||||
Default value: <code>null</code>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="editable-validate">
|
||||
<td><a href="#" class="permalink">editable_validate</a></td>
|
||||
<td>Validate the content change (<span class="version updated">v2.17.8</span>)
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
Use this function to validate and/or modify the content before it is accepted.<br>
|
||||
<br>
|
||||
In <span class="version updated">v2.17.8</span>:
|
||||
<ul>
|
||||
<li>Set this option to be a global function, or an object containing a column index, or class name of the desired column</li>
|
||||
<li>A <code>columnIndex</code> is now included in the function parameters</li>
|
||||
<li>A <code>$element</code> parameter has been included which contains the contenteditable element. To get the table cell, use <code>$element.closest('td');</code></li>
|
||||
</ul>
|
||||
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(){
|
||||
|
||||
$('#table1').tablesorter({
|
||||
widgets : ['editable'],
|
||||
widgetOptions : {
|
||||
// global validate function
|
||||
editable_validate : function(txt, orig, columnIndex, $element){
|
||||
// only allow one word
|
||||
var t = /\s/.test(txt) ? txt.split(/\s/)[0] : txt;
|
||||
return t ? t : false;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('#table2').tablesorter({
|
||||
widgets : ['editable'],
|
||||
widgetOptions : {
|
||||
// validate function per column
|
||||
editable_validate : {
|
||||
0 : function(txt, orig, columnIndex, $element){
|
||||
// allow up to two words
|
||||
var t = txt.split(' ');
|
||||
return t.length > 2 ? t[0] + (t[1] ? ' ' + t[1] : '') : txt;
|
||||
},
|
||||
'.price' : function(txt, orig, columnIndex, $element) {
|
||||
// make sure the price column(s) are using a number
|
||||
return isNaN( txt.replace(/[$,\s]/g, '') ) ? false : txt;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});</pre>
|
||||
Default value: <code>null</code>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="editable-trimcontent">
|
||||
<td><a href="#" class="permalink">editable_trimContent</a></td>
|
||||
<td>Trim the content within the editable cell (<span class="version">v2.17.8</span>)
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
When a table cell is formatted as follows:
|
||||
<pre class="prettyprint lang-html"><td>
|
||||
John
|
||||
</td></pre>All carriage returns and tab(s) within the table cell would be included before editing. Once the contenteditable element has focus, the content is cleaned up.<br>
|
||||
<br>
|
||||
If this option is <code>true</code>, this widget will trim content <em>upon initialization</em>; this is necessary if you need cleaned it up content before editing, like with an autocomplete script.<br>
|
||||
<br>
|
||||
Use this option as follows:
|
||||
<pre class="prettyprint lang-js">$(function(){
|
||||
|
||||
$('#table').tablesorter({
|
||||
widgets : ['editable'],
|
||||
widgetOptions : {
|
||||
editable_trimContent : true
|
||||
}
|
||||
});
|
||||
|
||||
});</pre>
|
||||
Default value: <code>true</code>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="editable-wrapcontent">
|
||||
<td><a href="#" class="permalink">editable_wrapContent</a></td>
|
||||
<td>Wrap the editable cell content with this element (<span class="version">v2.17.8</span>)
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
Internally, the widget uses jQuery's <code>wrapInner</code> to wrap the cell contents, using the following rules:
|
||||
<ul>
|
||||
<li>If this option is set to <code>false</code> or an empty string (<code>''</code>), then no wrapping will occur. The "contenteditable" attribute will be applied to the table cell.</li>
|
||||
<li>If the table cell has no children, then the content is wrapped using this option, and the wrapping element will have the "contentediable" attribute enabled.</li>
|
||||
<li>If the cell already has children (one or more) immediately inside of the table cell, no wrapping occurs and the child element(s) that don't have the class name set in <code>editable_noEdit</code>, will have the "contenteditable" attribute enabled.</li>
|
||||
</ul>
|
||||
Note: that this option uses jQuery's <code>wrapInner</code>, so this option can be set to a html string or selector, jQuery object, DOM element, or a function (jQuery 1.4+)
|
||||
<pre class="prettyprint lang-js">$(function(){
|
||||
|
||||
$('#table').tablesorter({
|
||||
widgets : ['editable'],
|
||||
widgetOptions : {
|
||||
editable_wrap : '<div>'
|
||||
}
|
||||
});
|
||||
|
||||
});</pre>
|
||||
Default value: <code>'<div>'</code>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<p></p>
|
||||
<h1>Demo</h1>
|
||||
|
||||
<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>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr id="db-row-344">
|
||||
<td class="no-edit">Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr id="db-row-884">
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr id="db-row-234">
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr id="db-row-756">
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>$153.19</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr id="db-row-232">
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
<h1>CSS</h1>
|
||||
<div id="css">
|
||||
<pre class="prettyprint lang-css"></pre>
|
||||
</div>
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
</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>
|
||||
|
||||
@@ -0,0 +1,166 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Filter Widget External Search</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
|
||||
<script src="js/jquery-ui-latest.min.js"></script>
|
||||
<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="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
var $table = $('table').tablesorter({
|
||||
theme: 'blue',
|
||||
widgets: ["zebra", "filter"],
|
||||
widgetOptions : {
|
||||
// filter_anyMatch replaced! Instead use the filter_external option
|
||||
// Set to use a jQuery selector (or jQuery object) pointing to the
|
||||
// external filter (column specific or any match)
|
||||
filter_external : '.search',
|
||||
// add a default type search to the first name column
|
||||
filter_defaultFilter: { 1 : '~{query}' },
|
||||
// include column filters
|
||||
filter_columnFilters: true,
|
||||
filter_placeholder: { search : 'Search...' },
|
||||
filter_saveFilters : true,
|
||||
filter_reset: '.reset'
|
||||
}
|
||||
});
|
||||
|
||||
});</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Filter Widget External Search</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<p></p>
|
||||
<br>
|
||||
<div class="accordion">
|
||||
|
||||
<h3><a href="#">Notes</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>In <span class="version">v2.17.8</span>, added a default fuzzy search to the "First Name" column.</li>
|
||||
<li>This is a demo of the <a href="index.html#widget-filter-external"><code>filter_external</code></a> option (added <span class="version">v2.15</span>).</li>
|
||||
<li>In <span class="version">v2.15</span>
|
||||
<ul>
|
||||
<li>The <a class="alert" href="index.html#widget-filter-any-match"><code>filter_anyMatch</code></a> has been <span class="label alert">removed</span> (added <span class="version">v2.13.3</span>; removed in v2.15)</li>
|
||||
<li>A new option <code>filter_external</code> has been added. It is set to a jQuery selector string (<code>'.search'</code>) or jQuery object (<code>$('.search')</code>) targetting an external input.</li>
|
||||
<li>So now a table can include <em>both</em> a filter row (<code>filter_columnFilters</code> is <code>true</code>, i.e. the internal table filters) and any number of external search inputs (as set by the <code>filter_external</code> option).</li>
|
||||
<li>The external search results must have a <code>data-column="#"</code> attribute set, where <code>#</code> is the index of the column (zero-based) that the input targets, to have an input search all table content, set the data column attribute to <code>"all"</code> to match any column.</li>
|
||||
<li>The <a href="index.html#function-bindsearch"><code>$.tablesorter.bindSearch</code> function</a> (<a href="example-widget-filter-external-inputs.html">see demo</a>) does exactly the same thing as the <code>filter_external</code> option. The major difference is seen when using ajax to populate the table, the initial filter values can be set before tablesorter initialization when using teh <code>filter_external</code> option; whereas, the bind search function can not set initial filter values and is usually executed after tablesorter initialization.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Limitations</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>The any-match search method has limitations applied. It does not support all of the per column search features! So, at this time, the following types of queries are not allowed as the results will cause confusion:
|
||||
<ul>
|
||||
<li>Search operators - A search for values equal, greater or less than values (<code>> >= <= <</code>) is not allowed because tables that contain both numbers and text (in separate columns). For example:
|
||||
<pre class="prettyprint lang-javascript">"Fred" > "1" // true*
|
||||
"Fred" < "10" // false
|
||||
"Fred" > 1 // false (numeric comparisons occur with parsed table data)
|
||||
"Fred" > 1 // false
|
||||
"Fred" < 10 // false</pre>* For comparisons, letters have a greater <a href="http://en.wikipedia.org/wiki/Ascii#ASCII_printable_characters">ASCII value</a> than numbers.
|
||||
</li>
|
||||
<li>Range query - A search for any number range (<code>1 - 10</code>) is not allowed because, if any columns contain text, then no rows will result. The examples are the same as the search operators examples above.</li>
|
||||
<li>Not Match query - A search for not matches (<code>!a</code>) is not allowed because tables that contain both numbers and text (in separate columns) will always show all rows. For example:
|
||||
<pre class="prettyprint lang-javascript">"Frank".search("a") // 2 (a match, so this row "may" be hidden)
|
||||
"Fred".search("a") // -1 (a not match! so this row will always show)
|
||||
"25".search("a") // -1 (a not match! so this row will always show)
|
||||
"1/1/2014".search("a") // -1 (a not match! so this row will always show)</pre>
|
||||
</li>
|
||||
<li>Allowed filters include plain text matching, fuzzy search (<code>~</code>), exact match (<code>"</code>), wild card matches( <code>?</code> or <code>*</code>), regex (<code>/\d/g</code>), and logical and (<code>a && b</code>)/or (<code>a|b</code>) matches.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Setting this option should work properly with or without the column filters. The only issue you would have is if you triggered a search on the table using an array with undefined or null array values, like this:
|
||||
<pre class="prettyprint lang-javascript">// apply "2?%" filter to the fifth column (zero-based index)
|
||||
var columns = [];
|
||||
columns[5] = '2?%';
|
||||
// anyMatch will kick in on undefined column filters,
|
||||
// unless the array looks like this: columns = [ '', '', '', '', '', '2?%' ]
|
||||
$('table').trigger('search', [ columns ]);</pre>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<h1>Demo</h1>
|
||||
|
||||
<div id="demo"><input class="search" type="search" data-column="all"> (Match any column)<br>
|
||||
<input class="search" type="search" data-column="1"> (First Name; fuzzy search... try "be")<br>
|
||||
|
||||
<!-- targeted by the "filter_reset" option -->
|
||||
<button type="button" class="reset">Reset Search</button>
|
||||
|
||||
<table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Rank</th>
|
||||
<th data-placeholder="Fuzzy search">First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>1</td><td>Philip Aaron</td><td>Johnson Sr Esq</td><td>25</td><td>$5.95</td><td>22%</td><td>Jun 26, 2004 7:22 AM</td></tr>
|
||||
<tr><td>11</td><td>Aaron</td><td>Hibert</td><td>12</td><td>$2.99</td><td>5%</td><td>Aug 21, 2009 12:21 PM</td></tr>
|
||||
<tr><td>12</td><td>Brandon Clark</td><td>Henry Jr</td><td>51</td><td>$42.29</td><td>18%</td><td>Oct 13, 2000 1:15 PM</td></tr>
|
||||
<tr><td>111</td><td>Peter</td><td>Parker</td><td>28</td><td>$9.99</td><td>20%</td><td>Jul 6, 2006 8:14 AM</td></tr>
|
||||
<tr><td>21</td><td>John</td><td>Hood</td><td>33</td><td>$19.99</td><td>25%</td><td>Dec 10, 2002 5:14 AM</td></tr>
|
||||
<tr><td>013</td><td>Clark</td><td>Kent Sr.</td><td>18</td><td>$15.89</td><td>44%</td><td>Jan 12, 2003 11:14 AM</td></tr>
|
||||
<tr><td>005</td><td>Bruce</td><td>Almighty Esq</td><td>45</td><td>$153.19</td><td>44%</td><td>Jan 18, 2021 9:12 AM</td></tr>
|
||||
<tr><td>10</td><td>Alex</td><td>Dumass</td><td>13</td><td>$5.29</td><td>4%</td><td>Jan 8, 2012 5:11 PM</td></tr>
|
||||
<tr><td>16</td><td>Jim</td><td>Franco</td><td>24</td><td>$14.19</td><td>14%</td><td>Jan 14, 2004 11:23 AM</td></tr>
|
||||
<tr><td>166</td><td>Bruce Lee</td><td>Evans</td><td>22</td><td>$13.19</td><td>11%</td><td>Jan 18, 2007 9:12 AM</td></tr>
|
||||
<tr><td>100</td><td>Brenda Lee</td><td>McMasters</td><td>18</td><td>$55.20</td><td>15%</td><td>Feb 12, 2010 7:23 PM</td></tr>
|
||||
<tr><td>55</td><td>Dennis</td><td>Bronson</td><td>65</td><td>$123.00</td><td>32%</td><td>Jan 20, 2001 1:12 PM</td></tr>
|
||||
<tr><td>9</td><td>Martha</td><td>delFuego</td><td>25</td><td>$22.09</td><td>17%</td><td>Jun 11, 2011 10:55 AM</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-widget-filter-external-inputs.html">jQuery custom filter widget external inputs ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,289 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Custom Filter Widget Search Types</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
|
||||
<script src="js/jquery-ui-latest.min.js"></script>
|
||||
<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="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<style>
|
||||
#types { width: 100%; }
|
||||
</style>
|
||||
<script>
|
||||
$(function(){
|
||||
$('#types').tablesorter();
|
||||
});
|
||||
</script>
|
||||
|
||||
<script id="js">// *** Filter search type function arguments ***
|
||||
// data.filter = filter input value for a column; iFilter = same as filter, except lowercase
|
||||
// data.exact = table cell text (or parsed data, if column parser enabled)
|
||||
// data.iExact = same as exact, except lowercase
|
||||
|
||||
// search for a match from the beginning of a string
|
||||
// "^l" matches "lion" but not "koala"
|
||||
$.tablesorter.filter.types.start = function( config, data ) {
|
||||
if ( /^\^/.test( data.iFilter ) ) {
|
||||
return data.iExact.indexOf( data.iFilter.substring(1) ) === 0;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
// search for a match at the end of a string
|
||||
// "a$" matches "Llama" but not "aardvark"
|
||||
$.tablesorter.filter.types.end = function( config, data ) {
|
||||
if ( /\$$/.test( data.iFilter ) ) {
|
||||
var filter = data.iFilter,
|
||||
filterLength = filter.length - 1,
|
||||
removedSymbol = filter.substring(0, filterLength),
|
||||
exactLength = data.iExact.length;
|
||||
return data.iExact.lastIndexOf(removedSymbol) + filterLength === exactLength;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
$(function() {
|
||||
|
||||
$('#filters').tablesorter({
|
||||
theme: 'blue',
|
||||
widgets: ['zebra', 'filter'],
|
||||
widgetOptions: {
|
||||
filter_reset: '.reset'
|
||||
}
|
||||
});
|
||||
|
||||
// External search
|
||||
// buttons set up like this:
|
||||
// <button type="button" class="search" data-filter-column="4" data-filter-text="2?%">Saved Search</button>
|
||||
$('button').click(function(){
|
||||
var $t = $(this),
|
||||
col = $t.data('filter-column'), // zero-based index
|
||||
filter = [];
|
||||
|
||||
filter[col] = $t.text(); // text to add to filter
|
||||
$('#filters').trigger('search', [ filter ]);
|
||||
return false;
|
||||
});
|
||||
|
||||
});</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Custom Filter Widget Search Types</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<p></p>
|
||||
<br>
|
||||
|
||||
<div id="root" class="accordion">
|
||||
|
||||
<h3><a href="#">Notes</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li><span class="label warning">Notice!</span> In version <span class="version">v2.17.8</span>, some drastic changes were made to the way variables are passed to the filters. Please check out the "How to add Custom Filter types" section below.</li>
|
||||
<li>This demo was added in <span class="version">v2.17.5</span>, but modification using these instructions works for v2.13.3+; when the filter widget was restructured to allow the adding of custom filter search types.</li>
|
||||
<li>In this demo, two additional search types have been added as an example
|
||||
<ul>
|
||||
<li>Start a search from beginning of the content using the <code>^</code> designator.</li>
|
||||
<li>Search for a specific ending in the content using the <code>$</code> designator.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Please review the following sections for more details.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Built-in Filters</a></h3>
|
||||
<div>
|
||||
The built-in filter search types include:
|
||||
<table id="types" class="tablesorter-blue" data-sortList="[[0,0]]">
|
||||
<thead>
|
||||
<tr><th>Priority</th><th>Type</th><th class="sorter-false">Designator</th><th>Function</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>1</td><td>regex</td><td><code>/./mig</code></td><td>$.tablesorter.filter.types.regex</td></tr>
|
||||
<tr><td>2</td><td>operators</td><td><code>< <= >= ></code></td><td>$.tablesorter.filter.types.operators</td></tr>
|
||||
<tr><td>3</td><td>not</td><td><code>!</code> or <code>!=</code></td><td>$.tablesorter.filter.types.notMatch</td></tr>
|
||||
<tr><td>4</td><td>exact</td><td><code>"</code> or <code>=</code></td><td>$.tablesorter.filter.types.exact</td></tr>
|
||||
<tr><td>5</td><td>and</td><td><code> && </code> or <code> and </code></td><td>$.tablesorter.filter.types.and</td></tr>
|
||||
<tr><td>6</td><td>range</td><td><code> - </code> or <code> to </code></td><td>$.tablesorter.filter.types.range</td></tr>
|
||||
<tr><td>7</td><td>wild</td><td><code>*</code> or <code>?</code></td><td>$.tablesorter.filter.types.wild</td></tr>
|
||||
<tr><td>7</td><td>or</td><td><code>|</code> or <code> or </code></td><td>$.tablesorter.filter.types.wild (built-into wild)</td></tr>
|
||||
<tr><td>8</td><td>fuzzy</td><td><code>~</code></td><td>$.tablesorter.filter.types.fuzzy</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<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>Changed in <span class="version updated">v2.17.8</span>, only two parameters are passed to the filter type function:
|
||||
<pre class="prettyprint lang-js">$.tablesorter.filter.types.myNewFilter = function( config, data ) { /* ... */ }</pre>
|
||||
<ul>
|
||||
<li><code>config</code> - tablesorter config containing all variables (<code>table.config</code>)</li>
|
||||
<li><code>data</code> - filter data containing all filter variables. All variables are listed below.</li>
|
||||
</ul>
|
||||
<br>
|
||||
</li>
|
||||
<li>Within your filter, first test for your designator symbol.
|
||||
<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>The following arguments are passed to the filter function within the <code>data</code> parameter (changed in <span class="version updated">v2.17.8</span>):
|
||||
<ul>
|
||||
<li><code>data.filter</code> - The exact text from the filter input (e.g. <code>^h</code>).</li>
|
||||
<li><code>data.iFilter</code> - The text from the filter in all lower case for case insensitive searches.</li>
|
||||
<li><code>data.exact</code> - The exact (or parsed) text from the current table cell, or the entire row if <code>data.anyMatch</code> is <code>true</code>; the parsed text is passed when the column has a <code>"filter-parsed"</code> class name set.</li>
|
||||
<li><code>data.iExact</code> - The exact (or parsed) text in all lower case for case insensitive searches.<br><br></li>
|
||||
<li><code>data.index</code> - The current column index (zero-based) being filtered. When performing an "any match", this index is equal to <code>config.columns</code> which is the last column of the table plus one.</li>
|
||||
<li><code>data.cache</code> - The parsed text from the current table cell, or the entire row if <code>data.anyMatch</code> is <code>true</code>. This value will be in all lower case if <code>config.ignoreCase</code> is <code>true</code>.<br><br></li>
|
||||
|
||||
<li><code>data.anyMatch</code> - This is a boolean value indicating when the <code>data.exact</code> and <code>data.iExact</code> parameters contain data from the entire row instead of one cell. This value will always be <code>false</code> if the table does not include an associated any match filter.<br><br></li>
|
||||
|
||||
<li><code>data.rowArray</code> - An array of the exact text from each table cell.</li>
|
||||
<li><code>data.cacheArray</code> - An array of parsed text from each table cell.</li>
|
||||
<li><code>data.childRowText</code> - contains all text from any associated child rows.</li>
|
||||
|
||||
<li><code>data.parsed</code> - An array of boolean flags that indicate if the column data should obtained from parsed values, or not; obtained from <code>filter_useParsedData</code> setting or <code>filter-parsed</code> classes on the header cells.</li>
|
||||
</ul>
|
||||
<br>
|
||||
</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( config, data ) {
|
||||
// test for filter type designator. In this example, "^" must be at the beginning of the filter
|
||||
// for this test, the use of the case insensitive "iFilter" variable
|
||||
// doesn't matter since we are only looking at the symbol
|
||||
if ( /^\^/.test( data.iFilter ) ) {
|
||||
// test the table content (exact or parsed) against the filter
|
||||
// * Don't forget to remove the designator first ( the substring(1) part ), so "^h".substring(1) becomes "h"
|
||||
// * In this case, we do care about using "iFilter" since we're comparing it with "iExact"
|
||||
// * We use "indexOf" so that we know the match starts from the beginning of the string.
|
||||
// * Your function should return a boolean indicating a match, or not.
|
||||
return data.iExact.indexOf( data.iFilter.substring(1) ) === 0;
|
||||
}
|
||||
// ALWAYS return null if your custom filter type doesn't match
|
||||
return null;
|
||||
};</pre>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">How to remove filter types</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>If one of the built-in search types is interfering or bothersome to your users, then you can remove it using the following command (using fuzzy search as an example):
|
||||
<pre class="prettyprint lang-js">$(function(){
|
||||
|
||||
// Remove fuzzy search
|
||||
delete $.tablesorter.filter.types.fuzzy;
|
||||
|
||||
$('table').tablesorter({
|
||||
theme: 'blue',
|
||||
widgets: ['filter']
|
||||
});
|
||||
|
||||
});</pre></li>
|
||||
<li>The full list of built-in filter type functions can be found in the "Built-in Filters" section.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Localization</a></h3>
|
||||
<div>
|
||||
You can change the language of the searches used within the filter widget. This only applies to the "and", "or" and "to" (range) searches. For example, to change the localization to French, do the following:
|
||||
<pre class="prettyprint lang-js">// add French support
|
||||
$.extend($.tablesorter.language, {
|
||||
to : 'à',
|
||||
or : 'ou',
|
||||
and : 'et'
|
||||
});</pre>This results in searches that can be performed as follows:
|
||||
<ul>
|
||||
<li>"and" search: <code>Pierre et Franc</code> or <code>Pierre && Franc</code>.</li>
|
||||
<li>"or" search: <code>Marie ou Claudette</code> or <code>Marie|Claudette</code></li>
|
||||
<li>"to" search: <code>10 à 20</code> or <code>10 - 20</code></li>
|
||||
</ul>
|
||||
<span class="label label-info">Note</span> the symbolic searches never changed (<code> && </code>, <code>|</code> and <code> - </code>)
|
||||
<br>
|
||||
<span class="label label-info">Important</span> Even though the language settings don't include spaces, the user is still required to enter spaces in the filter to perform these searches, e.g. <code>1 à 10</code> (shows rows with numbers between 1 and 10).
|
||||
<hr>
|
||||
If you want to support multiple languages, separate the language variables with a vertical bar (<code>|</code>, <kbd>Shift</kbd> + <kbd>\</kbd>):
|
||||
<pre class="prettyprint lang-js">// add French & Spanish support
|
||||
$.extend($.tablesorter.language, {
|
||||
to : 'à|a',
|
||||
or : 'ou|o',
|
||||
and : 'et|y'
|
||||
});</pre></div>
|
||||
|
||||
</div>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><button type="button" data-filter-column="1">^h</button> (beginning of word)<br>
|
||||
<button type="button" data-filter-column="1">s$</button> (end of word)<br>
|
||||
<button type="button" class="reset">Reset</button><br>
|
||||
|
||||
<table id="filters" class="tablesorter">
|
||||
<thead>
|
||||
<tr><th>First Name</th><th>Last Name</th><th>City</th><th>Age</th><th>Total</th><th>Discount</th><th>Date</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>Aaron</td><td>Johnson Sr</td><td>Atlanta</td><td>35</td><td>$5.95</td><td>22%</td><td>Jun 26, 2004 7:22 AM</td></tr>
|
||||
<tr><td>Aaron</td><td>Johnson</td><td>Yuma</td><td>12</td><td>$2.99</td><td>5%</td><td>Aug 21, 2009 12:21 PM</td></tr>
|
||||
<tr><td>Clark</td><td>Henry Jr</td><td>Tampa</td><td>51</td><td>$42.29</td><td>18%</td><td>Oct 13, 2000 1:15 PM</td></tr>
|
||||
<tr><td>Denni</td><td>Henry</td><td>New York</td><td>28</td><td>$9.99</td><td>20%</td><td>Jul 6, 2006 8:14 AM</td></tr>
|
||||
<tr><td>John</td><td>Hood</td><td>Boston</td><td>33</td><td>$19.99</td><td>25%</td><td>Dec 10, 2002 5:14 AM</td></tr>
|
||||
<tr><td>Clark</td><td>Kent Sr</td><td>Los Angeles</td><td>18</td><td>$15.89</td><td>44%</td><td>Jan 12, 2003 11:14 AM</td></tr>
|
||||
<tr><td>Peter</td><td>Kent Esq</td><td>Seattle</td><td>45</td><td>$153.19</td><td>44%</td><td>Jan 18, 2021 9:12 AM</td></tr>
|
||||
<tr><td>Peter</td><td>Johns</td><td>Milwaukee</td><td>13</td><td>$5.29</td><td>4%</td><td>Jan 8, 2012 5:11 PM</td></tr>
|
||||
<tr><td>Aaron</td><td>Evan</td><td>Chicago</td><td>24</td><td>$14.19</td><td>14%</td><td>Jan 14, 2004 11:23 AM</td></tr>
|
||||
<tr><td>Bruce</td><td>Evans</td><td>Upland</td><td>22</td><td>$13.19</td><td>11%</td><td>Jan 18, 2007 9:12 AM</td></tr>
|
||||
<tr><td>Clark</td><td>McMasters</td><td>Pheonix</td><td>18</td><td>$55.20</td><td>15%</td><td>Feb 12, 2010 7:23 PM</td></tr>
|
||||
<tr><td>Dennis</td><td>Masters</td><td>Indianapolis</td><td>65</td><td>$123.00</td><td>32%</td><td>Jan 20, 2001 1:12 PM</td></tr>
|
||||
<tr><td>John</td><td>Hood</td><td>Fort Worth</td><td>25</td><td>$22.09</td><td>17%</td><td>Jun 11, 2011 10:55 AM</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-widget-filter-formatter-1.html">jQuery custom filter widget formatter (jQuery UI widgets) ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,445 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Custom Filter Widget Functions</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
|
||||
<script src="js/jquery-ui-latest.min.js"></script>
|
||||
<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="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<script>
|
||||
$(function(){
|
||||
|
||||
// External search
|
||||
// buttons set up like this:
|
||||
// <button type="button" class="search" data-filter-column="4" data-filter-text="2?%">Saved Search</button>
|
||||
$('button.match').click(function(){
|
||||
|
||||
// toggle "filter-match" class on first column
|
||||
var first = $('table').find('th:first').toggleClass('filter-match');
|
||||
$('#mode').html( '' + first.hasClass('filter-match') );
|
||||
|
||||
/*** first method *** data-filter-column="1" data-filter-text="!son"
|
||||
add search value to Discount column (zero based index) input */
|
||||
var filters = $('table').find('.tablesorter-filter'),
|
||||
col = $(this).data('filter-column'), // zero-based index
|
||||
txt = $(this).data('filter-text'); // text to add to filter
|
||||
|
||||
filters.val(''); // clear all filters
|
||||
filters.eq(col).val(txt).trigger('search', false);
|
||||
return false;
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
// call the tablesorter plugin
|
||||
$("table").tablesorter({
|
||||
theme: 'blue',
|
||||
|
||||
// hidden filter input/selects will resize the columns, so try to minimize the change
|
||||
widthFixed : true,
|
||||
|
||||
// initialize zebra striping and filter widgets
|
||||
widgets: ["zebra", "filter"],
|
||||
|
||||
// headers: { 5: { sorter: false, filter: false } },
|
||||
|
||||
widgetOptions : {
|
||||
|
||||
// extra css class applied to the table row containing the filters & the inputs within that row
|
||||
filter_cssFilter : '',
|
||||
|
||||
// If there are child rows in the table (rows with class name from "cssChildRow" option)
|
||||
// and this option is true and a match is found anywhere in the child row, then it will make that row
|
||||
// visible; default is false
|
||||
filter_childRows : false,
|
||||
|
||||
// if true, filters are collapsed initially, but can be revealed by hovering over the grey bar immediately
|
||||
// below the header row. Additionally, tabbing through the document will open the filter row when an input gets focus
|
||||
filter_hideFilters : false,
|
||||
|
||||
// Set this option to false to make the searches case sensitive
|
||||
filter_ignoreCase : true,
|
||||
|
||||
// jQuery selector string of an element used to reset the filters
|
||||
filter_reset : '.reset',
|
||||
|
||||
// Use the $.tablesorter.storage utility to save the most recent filters
|
||||
filter_saveFilters : true,
|
||||
|
||||
// Delay in milliseconds before the filter widget starts searching; This option prevents searching for
|
||||
// every character while typing and should make searching large tables faster.
|
||||
filter_searchDelay : 300,
|
||||
|
||||
// Set this option to true to use the filter to find text from the start of the column
|
||||
// So typing in "a" will find "albert" but not "frank", both have a's; default is false
|
||||
filter_startsWith : false,
|
||||
|
||||
// if false, filters are collapsed initially, but can be revealed by hovering over the grey bar immediately
|
||||
// below the header row. Additionally, tabbing through the document will open the filter row when an input gets focus
|
||||
filter_hideFilters : false,
|
||||
|
||||
// Add select box to 4th column (zero-based index)
|
||||
// each option has an associated function that returns a boolean
|
||||
// function variables:
|
||||
// e = exact text from cell
|
||||
// n = normalized value returned by the column parser
|
||||
// f = search filter input value
|
||||
// i = column index
|
||||
filter_functions : {
|
||||
|
||||
// Add select menu to this column
|
||||
// set the column value to true, and/or add "filter-select" class name to header
|
||||
// '.first-name' : true,
|
||||
|
||||
// Exact match only
|
||||
1 : function(e, n, f, i, $r) {
|
||||
return e === f;
|
||||
},
|
||||
|
||||
// Add these options to the select dropdown (regex example)
|
||||
2 : {
|
||||
"A - D" : function(e, n, f, i, $r) { return /^[A-D]/.test(e); },
|
||||
"E - H" : function(e, n, f, i, $r) { return /^[E-H]/.test(e); },
|
||||
"I - L" : function(e, n, f, i, $r) { return /^[I-L]/.test(e); },
|
||||
"M - P" : function(e, n, f, i, $r) { return /^[M-P]/.test(e); },
|
||||
"Q - T" : function(e, n, f, i, $r) { return /^[Q-T]/.test(e); },
|
||||
"U - X" : function(e, n, f, i, $r) { return /^[U-X]/.test(e); },
|
||||
"Y - Z" : function(e, n, f, i, $r) { return /^[Y-Z]/.test(e); }
|
||||
},
|
||||
|
||||
// Add these options to the select dropdown (numerical comparison example)
|
||||
// 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; }
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
});</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Custom Filter Widget Functions</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<p></p>
|
||||
<br>
|
||||
<div class="accordion">
|
||||
|
||||
<h3><a href="#">Notes</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>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).</li>
|
||||
<li>In <span class="version">v2.16.3</span>,
|
||||
<ul>
|
||||
<li>When a default filter select is added to a column, it is now parsed from the assigned parser, then sorted using the <code>textSorter</code> setting, and falls back to an alphanumeric sort.</li>
|
||||
<li>Adding a class of <code>"filter-select-nosort"</code> will now leave the select options unsorted.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>In <span class="version">v2.14</span>, the <code>filter_saveFilters</code> option was added (default set to <code>false</code>); this demo has it set to <code>true</code> to provide an example.</li>
|
||||
<li>In <span class="version">v2.11</span>, the filter functions provide an additional parameter <code>$r</code> providing a jQuery object of the current row being searched by the filter.</li>
|
||||
<li>For <span class="version">v2.10.8</span>, the Age column includes the new <code>data-value</code> set to <code><30</code> which sets the default (starting) filter value (see <a href="index.html#widget-filter-defaultattrib">filter_defaultAttrib</a> for more details).</li>
|
||||
<li>As of tablesorter <span class="version">v2.9</span>, this widget can no longer be applied to versions of tablesorter prior to version 2.8.</li>
|
||||
<li>Custom filter widget option <code>filter_functions</code> was added in version 2.3.6.</li>
|
||||
<li>jQuery v1.4.3+ required.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#"><strong>Default Select</strong></a> <span class="xsmall">("First Name" column)</span></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>To enable this type of select, set the <code>filter_functions</code> option for the column to <code>true</code>,<pre class="prettyprint lang-javascript">filter_functions : {
|
||||
|
||||
// Add select menu to this column
|
||||
// set the column value to true, and/or add "filter-select" class name to header
|
||||
'.first-name' : true
|
||||
|
||||
}</pre>or add a "filter-select" class to the column header cell (see code below).</li>
|
||||
<li>The default option text, "Select a name", is obtained from the header <code>data-placeholder</code> attribute of the column header cell. And when active, it will show all table rows.<pre class="prettyprint lang-html"><th class="filter-select" data-placeholder="Select a name">First Name</th></pre></li>
|
||||
<li>Add a "filter-match" class to only match instead of exactly match the selected value. Click on the "Match" button below to see the difference.<pre class="prettyprint lang-html"><th class="filter-select filter-match" data-placeholder="Select a name">First Name</th></pre></li>
|
||||
<li>The select is populated by the column text contents with repeated content combined (i.e. There are three "Aaron"'s in the first column, but only one in the dropdown.</li>
|
||||
<li>Select options are automatically <del>alphanumerically</del> (new in v2.4) sorted. Changed in <span class="version updated">v2.16.3</span>:
|
||||
<ul>
|
||||
<li>The select contents are now parsed from the assigned parser, then sorted using the <a href="index.html#textsorter"><code>textSorter</code></a> option</li>
|
||||
<li>Add a class name of <code>"filter-select-nosort"</code> to prevent sorting the select options (<span class="version">v2.16.3</span>).</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Please check out what the "filter-onlyAvail" class name does by reviewing the details below (in the "Discount" column) (<span class="version">v2.10.1</span>).</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#"><strong>Custom Filter Function</strong></a> <span class="xsmall">("Last Name" column)</span></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>To enable this type of filter, add your custom function to the <code>filter_functions</code> option following this example:<pre class="prettyprint lang-javascript">filter_functions : {
|
||||
|
||||
// Exact match only
|
||||
1 : function(e, n, f, i, $r) {
|
||||
return e === f;
|
||||
}
|
||||
|
||||
}</pre></li>
|
||||
<li>The example shows you how to show only exact matches. The problem with this is that you can't see the matches while typing unless you set the <code>filter_searchDelay</code> option to be a bit longer.</li>
|
||||
<li>Also, the example only checks for an exact match (<code>===</code>) meaning the <code>filter_ignoreCase</code> option is ignored, but other comparisons can be made using regex and the insensitive "i" flag.</li>
|
||||
<li>See the filter function information below.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#"><strong>Custom Select</strong></a> <span class="xsmall">("City" or "Total" column)</span></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>To enable this type of select, add your custom options within the <code>filter_functions</code> option.</li>
|
||||
<li>Each option is set as a "key:value" pair where the "key" is the actual text of the option and the "value" is the function associated with the option.</li>
|
||||
<li>Here is an example using alphabetical comparisons (using regular expressions):<pre class="prettyprint lang-javascript">filter_functions : {
|
||||
|
||||
// Add these options to the select dropdown (regex example)
|
||||
2 : {
|
||||
"A - D" : function(e, n, f, i, $r) { return /^[A-D]/.test(e); },
|
||||
"E - H" : function(e, n, f, i, $r) { return /^[E-H]/.test(e); },
|
||||
"I - L" : function(e, n, f, i, $r) { return /^[I-L]/.test(e); },
|
||||
"M - P" : function(e, n, f, i, $r) { return /^[M-P]/.test(e); },
|
||||
"Q - T" : function(e, n, f, i, $r) { return /^[Q-T]/.test(e); },
|
||||
"U - X" : function(e, n, f, i, $r) { return /^[U-X]/.test(e); },
|
||||
"Y - Z" : function(e, n, f, i, $r) { return /^[Y-Z]/.test(e); }
|
||||
}
|
||||
|
||||
}</pre></li>
|
||||
<li>Here is an example using numerical comparisons:<pre class="prettyprint lang-javascript">filter_functions : {
|
||||
// Add these options to the select dropdown (numerical comparison example)
|
||||
// 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; }
|
||||
}
|
||||
}</pre></li>
|
||||
<li>See the "Filter function information" section below.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#"><strong>Default Select with only available options</strong></a> <span class="xsmall">("Discount" column)</span></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>This column uses the same method as the "First Name" column with one exception, it also includes the "filter-onlyAvail" class name in the header
|
||||
cell:<pre class="prettyprint lang-html"><th class="filter-select filter-onlyAvail">Discount</th></pre></li>
|
||||
<li>To see how this works, do the following:
|
||||
<ul>
|
||||
<li>First, filter the "First Name" column by selecting the name "Clark"</li>
|
||||
<li>Now use the "Discount" filter select box, you'll notice that only the values associated with the first name of Clark are showing as options.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Conversely, if you reset the filters, select "44%" in the "Discount" column, then look at the "First Name" filter selector, you'll notice that it still contains all of the original options; because the "filter-onlyAvail" class name is not included in that column's header cell.</li>
|
||||
<li>Sorry, this functionality only works for default select filters.</li>
|
||||
<li>This funcitonality was added in <span class="version">v2.10.1</span>.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#"><strong>Filter function information</strong></a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>The custom function must return a boolean value. If <code>true</code> is returned, the row will be shown if all other filters match; and if <code>false</code> is returned, the row will be hidden.<pre class="prettyprint lang-javascript">function(e, n, f, i, $r) { return test; /* test should be a Boolean (true or false) */ }</pre></li>
|
||||
<li>The <strong>exact text (e)</strong> of the table cell is a variable passed to the function. Note that numbers will need to be parsed to make comparisons.</li>
|
||||
<li><strong>Normalized table cell data (n)</strong> is the next varibale passed to the function.
|
||||
<ul>
|
||||
<li>This data has been parsed by the assigned column parser, so make sure the same type of data is being compared as parsed data may not be what you expect.</li>
|
||||
<li>Normalized numerical values within the table will be of numeric type and not of string type, as the sorter needs to use mathematical comparisons while sorting.</li>
|
||||
<li>The data will be in lower-case if the <code>filter_ignoreCase</code> option is <code>true</code>.</li>
|
||||
<li>Dates like in the last column of the table below will store the time in seconds since 1970 (using javascript's .getTime() function).</li>
|
||||
<li>The percentage column will only store the number and not percentage sign.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>The <strong>filter input value (f)</strong> is the exact text entered by the user. If numerical, it will need to be parsed using parseFloat() or parseInt() to allow for making comparisons.</li>
|
||||
<li>The <strong>column index (i)</strong> might be useful for obtaining more information from header, or something.</li>
|
||||
<li>The <strong>row ($r)</strong> is the current table row (jQuery object) being searched (or filtered); this allows access to any extra information within. To access the current cell, just use <code>$r.children().eq(i)</code>.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<button type="button" class="match" data-filter-column="0" data-filter-text="Denni">Match</button> <span id="mode">false</span> (toggle "filter-match" class on First Name column)<br>
|
||||
<button type="button" class="reset">Reset Search</button>
|
||||
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<!-- add "filter-select" class or filter_functions : { '.first-name' : true } -->
|
||||
<!-- add "filter-match" class to just match the content, so selecting "Denni" will also show "Dennis" -->
|
||||
<th class="first-name filter-select" data-placeholder="Select a name">First Name</th>
|
||||
<th data-placeholder="Exact matches only">Last Name</th>
|
||||
<th data-placeholder="Choose a city">City</th>
|
||||
<th data-value="<30">Age</th>
|
||||
<th data-placeholder="Select a filter">Total</th>
|
||||
<th class="filter-select filter-onlyAvail">Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Aaron</td>
|
||||
<td>Johnson Sr</td>
|
||||
<td>Atlanta</td>
|
||||
<td>35</td>
|
||||
<td>$5.95</td>
|
||||
<td>22%</td>
|
||||
<td>Jun 26, 2004 7:22 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Aaron</td>
|
||||
<td>Johnson</td>
|
||||
<td>Yuma</td>
|
||||
<td>12</td>
|
||||
<td>$2.99</td>
|
||||
<td>5%</td>
|
||||
<td>Aug 21, 2009 12:21 PM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Henry Jr</td>
|
||||
<td>Tampa</td>
|
||||
<td>51</td>
|
||||
<td>$42.29</td>
|
||||
<td>18%</td>
|
||||
<td>Oct 13, 2000 1:15 PM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Denni</td>
|
||||
<td>Henry</td>
|
||||
<td>New York</td>
|
||||
<td>28</td>
|
||||
<td>$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>Boston</td>
|
||||
<td>33</td>
|
||||
<td>$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent Sr</td>
|
||||
<td>Los Angeles</td>
|
||||
<td>18</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Kent Esq</td>
|
||||
<td>Seattle</td>
|
||||
<td>45</td>
|
||||
<td>$153.19</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2021 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Johns</td>
|
||||
<td>Milwaukee</td>
|
||||
<td>13</td>
|
||||
<td>$5.29</td>
|
||||
<td>4%</td>
|
||||
<td>Jan 8, 2012 5:11 PM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Aaron</td>
|
||||
<td>Evan</td>
|
||||
<td>Chicago</td>
|
||||
<td>24</td>
|
||||
<td>$14.19</td>
|
||||
<td>14%</td>
|
||||
<td>Jan 14, 2004 11:23 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>Upland</td>
|
||||
<td>22</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>McMasters</td>
|
||||
<td>Pheonix</td>
|
||||
<td>18</td>
|
||||
<td>$55.20</td>
|
||||
<td>15%</td>
|
||||
<td>Feb 12, 2010 7:23 PM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dennis</td>
|
||||
<td>Masters</td>
|
||||
<td>Indianapolis</td>
|
||||
<td>65</td>
|
||||
<td>$123.00</td>
|
||||
<td>32%</td>
|
||||
<td>Jan 20, 2001 1:12 PM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>Fort Worth</td>
|
||||
<td>25</td>
|
||||
<td>$22.09</td>
|
||||
<td>17%</td>
|
||||
<td>Jun 11, 2011 10:55 AM</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-widget-filter-custom-search.html">Custom Filter Widget Search Types ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,166 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Filter Widget External Inputs</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
|
||||
<script src="js/jquery-ui-latest.min.js"></script>
|
||||
<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="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
var $table = $('table').tablesorter({
|
||||
theme: 'blue',
|
||||
widgets: ["zebra", "filter"],
|
||||
widgetOptions : {
|
||||
// use the filter_external option OR use bindSearch function (below)
|
||||
// to bind external filters.
|
||||
// filter_external : '.search',
|
||||
|
||||
filter_columnFilters: false,
|
||||
filter_saveFilters : true,
|
||||
filter_reset: '.reset'
|
||||
}
|
||||
});
|
||||
|
||||
// Target the $('.search') input using built in functioning
|
||||
// this binds to the search using "search" and "keyup"
|
||||
// Allows using filter_liveSearch or delayed search &
|
||||
// pressing escape to cancel the search
|
||||
$.tablesorter.filter.bindSearch( $table, $('.search') );
|
||||
|
||||
// Basic search binding, alternate to the above
|
||||
// bind to search - pressing enter and clicking on "x" to clear (Webkit)
|
||||
// keyup allows dynamic searching
|
||||
/*
|
||||
$(".search").bind('search keyup', function (e) {
|
||||
$('table').trigger('search', [ [this.value] ]);
|
||||
});
|
||||
*/
|
||||
|
||||
// Allow changing an input from one column (any column) to another
|
||||
$('select').change(function(){
|
||||
// modify the search input data-column value (swap "0" or "all in this demo)
|
||||
$('.selectable').attr( 'data-column', $(this).val() );
|
||||
// update external search inputs
|
||||
$.tablesorter.filter.bindSearch( $table, $('.search'), false );
|
||||
});
|
||||
|
||||
});</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Filter Widget External Inputs</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<p></p>
|
||||
<br>
|
||||
<div class="accordion">
|
||||
|
||||
<h3><a href="#">Notes</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<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>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>
|
||||
<li>This demo shows how to use multiple external search filters to filter the table, and how to make one input dynamically change to filter any or all columns.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>The <code>$.tablesorter.filter.bindSearch</code> function allows binding multiple external search filters</li>
|
||||
<li>The advantage of using this function over your own is:
|
||||
<ul>
|
||||
<li>Inputs behave the same as internal filters; searches adhere to the <code>filter_liveSearch</code> and <code>filter_searchDelay</code> options.</li>
|
||||
<li>When pressing the <kbd>Esc</kbd> key, the filter resets.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Include a <code>data-column="#"</code> attribute to specify to which column the search should apply; or <code>data-column="all"</code> to search all columns.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1>Demo</h1>
|
||||
|
||||
<div id="demo"><input class="search selectable" type="search" placeholder="Search" data-column="all">
|
||||
<!-- select to change data-column attribute of the above input -->
|
||||
<select class="change-input">
|
||||
<option value="all">all</option>
|
||||
<option value="0">Rank</option>
|
||||
<option value="1">First Name</option>
|
||||
<option value="2">Last Name</option>
|
||||
</select>
|
||||
<br>
|
||||
<input class="search" type="search" placeholder="First Name" data-column="1"><br>
|
||||
<input class="search" type="search" placeholder="Last Name" data-column="2"><br>
|
||||
<!-- targeted by the "filter_reset" option -->
|
||||
<button type="button" class="reset">Reset Search</button>
|
||||
|
||||
<table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Rank</th>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>1</td><td>Philip Aaron</td><td>Johnson Sr Esq</td><td>25</td><td>$5.95</td><td>22%</td><td>Jun 26, 2004 7:22 AM</td></tr>
|
||||
<tr><td>11</td><td>Aaron</td><td>Hibert</td><td>12</td><td>$2.99</td><td>5%</td><td>Aug 21, 2009 12:21 PM</td></tr>
|
||||
<tr><td>12</td><td>Brandon Clark</td><td>Henry Jr</td><td>51</td><td>$42.29</td><td>18%</td><td>Oct 13, 2000 1:15 PM</td></tr>
|
||||
<tr><td>111</td><td>Peter</td><td>Parker</td><td>28</td><td>$9.99</td><td>20%</td><td>Jul 6, 2006 8:14 AM</td></tr>
|
||||
<tr><td>21</td><td>John</td><td>Hood</td><td>33</td><td>$19.99</td><td>25%</td><td>Dec 10, 2002 5:14 AM</td></tr>
|
||||
<tr><td>013</td><td>Clark</td><td>Kent Sr.</td><td>18</td><td>$15.89</td><td>44%</td><td>Jan 12, 2003 11:14 AM</td></tr>
|
||||
<tr><td>005</td><td>Bruce</td><td>Almighty Esq</td><td>45</td><td>$153.19</td><td>44%</td><td>Jan 18, 2021 9:12 AM</td></tr>
|
||||
<tr><td>10</td><td>Alex</td><td>Dumass</td><td>13</td><td>$5.29</td><td>4%</td><td>Jan 8, 2012 5:11 PM</td></tr>
|
||||
<tr><td>16</td><td>Jim</td><td>Franco</td><td>24</td><td>$14.19</td><td>14%</td><td>Jan 14, 2004 11:23 AM</td></tr>
|
||||
<tr><td>166</td><td>Bruce Lee</td><td>Evans</td><td>22</td><td>$13.19</td><td>11%</td><td>Jan 18, 2007 9:12 AM</td></tr>
|
||||
<tr><td>100</td><td>Brenda Lee</td><td>McMasters</td><td>18</td><td>$55.20</td><td>15%</td><td>Feb 12, 2010 7:23 PM</td></tr>
|
||||
<tr><td>55</td><td>Dennis</td><td>Bronson</td><td>65</td><td>$123.00</td><td>32%</td><td>Jan 20, 2001 1:12 PM</td></tr>
|
||||
<tr><td>9</td><td>Martha</td><td>delFuego</td><td>25</td><td>$22.09</td><td>17%</td><td>Jun 11, 2011 10:55 AM</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-widget-filter-custom.html">jQuery custom filter widget ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,637 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Custom Filter Widget Formatter (jQuery UI widgets)</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<script src="js/jquery-ui-latest.min.js"></script>
|
||||
<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>
|
||||
|
||||
<!-- jQuery UI theme switcher: https://github.com/pontikis/jui_theme_switch/ -->
|
||||
<style>
|
||||
th { width: 15%; }
|
||||
.reset { margin: 4px; }
|
||||
#switcher { float: left; }
|
||||
.switcher_container { padding: 5px; }
|
||||
.switcher_list { padding: 2px; }
|
||||
.switcher_label { margin-right: 5px; }
|
||||
</style>
|
||||
<script src="js/jquery.jui_theme_switch.min.js"></script>
|
||||
|
||||
<style id="css">/* css needed to get compare selector & slider in-line */
|
||||
.compare-select-wrapper { min-width: 60%; float: right; }</style>
|
||||
|
||||
<!-- Tablesorter: required; also include any of the jQuery UI themes -->
|
||||
<link id="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
|
||||
<link href="../css/theme.jui.css" rel="stylesheet">
|
||||
<link href="../css/filter.formatter.css" rel="stylesheet">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets-filter-formatter.js"></script>
|
||||
<script>
|
||||
$(function(){
|
||||
|
||||
$('#switcher').jui_theme_switch({
|
||||
stylesheet_link_id : 'ui-theme',
|
||||
datasource_url : 'assets/theme_switcher.json'
|
||||
});
|
||||
|
||||
$('.accordion button').on('click', function(){
|
||||
var $this = $(this),
|
||||
column = $this.data('column'),
|
||||
filters = [];
|
||||
filters[ column ] = $this.data('value');
|
||||
$('table').trigger('sorton', [ [[column, 0]], function(){
|
||||
$.tablesorter.setFilters( $('table'), filters, true );
|
||||
} ]);
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
<script id="js">$(function() {
|
||||
|
||||
// call the tablesorter plugin
|
||||
$("table").tablesorter({
|
||||
theme : 'jui',
|
||||
headerTemplate : '{content}{icon}',
|
||||
// hidden filter input/selects will resize the columns, so try to minimize the change
|
||||
widthFixed : true,
|
||||
// initialize zebra striping and filter widgets
|
||||
widgets : ["zebra", "filter", "stickyHeaders", "uitheme"],
|
||||
widgetOptions : {
|
||||
// Use the $.tablesorter.storage utility to save the most recent filters
|
||||
filter_saveFilters : true,
|
||||
// jQuery selector string of an element used to reset the filters
|
||||
filter_reset : 'button.reset',
|
||||
// add custom selector elements to the filter row
|
||||
filter_formatter : {
|
||||
|
||||
// Rank (jQuery selector added v2.17.0)
|
||||
'th:contains("Rank")' : function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.uiSlider( $cell, indx, {
|
||||
delayed : true,
|
||||
valueToHeader : false,
|
||||
cellText : 'Rank:',
|
||||
compare : [ '=', '>=', '<=' ],
|
||||
selected : 2, // zero-based index of compare starting selected value
|
||||
// jQuery UI slider options
|
||||
value : 100,
|
||||
min : 0,
|
||||
max : 100
|
||||
});
|
||||
},
|
||||
|
||||
// Age
|
||||
1 : function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.uiSlider( $cell, indx, {
|
||||
delayed : false,
|
||||
valueToHeader : false,
|
||||
exactMatch : false,
|
||||
allText : 'all', // this is ignored when compare is not empty
|
||||
compare : [ '=', '>=', '<=' ],
|
||||
selected : 1,
|
||||
// jQuery UI slider options
|
||||
value : 1,
|
||||
min : 1,
|
||||
max : 65
|
||||
});
|
||||
},
|
||||
|
||||
// Total (jQuery selector added v2.17.0)
|
||||
'.total' : function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.uiRange( $cell, indx, {
|
||||
delayed : false,
|
||||
valueToHeader : false,
|
||||
// jQuery UI slider options
|
||||
values : [1, 160],
|
||||
min : 1,
|
||||
max : 160
|
||||
});
|
||||
},
|
||||
|
||||
// Discount
|
||||
3 : function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.uiSpinner( $cell, indx, {
|
||||
delayed : true,
|
||||
addToggle : false,
|
||||
exactMatch : true,
|
||||
compare : [ '', '=', '>=', '<=' ],
|
||||
selected : 2,
|
||||
// jQuery UI spinner options
|
||||
min : 0,
|
||||
max : 45,
|
||||
value : 1,
|
||||
step : 1
|
||||
});
|
||||
},
|
||||
|
||||
// Date (one input)
|
||||
4 : function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.uiDateCompare( $cell, indx, {
|
||||
cellText : 'Dates', // text added before the input
|
||||
compare : [ '', '=', '>=', '<=' ],
|
||||
selected : 3,
|
||||
// jQuery UI datepicker options
|
||||
// defaultDate : '1/1/2014', // default date
|
||||
changeMonth : true,
|
||||
changeYear : true
|
||||
|
||||
});
|
||||
},
|
||||
|
||||
// Date (two inputs)
|
||||
5 : function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.uiDatepicker( $cell, indx, {
|
||||
// from : '08/01/2013', // default from date
|
||||
// to : '1/18/2014', // default to date
|
||||
changeMonth : true,
|
||||
changeYear : true
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// added v2.16
|
||||
filter_placeholder : {
|
||||
from : 'From...',
|
||||
to : 'To...'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Custom Filter Widget Formatter (jQuery UI widgets)</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<p></p>
|
||||
<br>
|
||||
<div class="accordion">
|
||||
|
||||
<h3><a href="#">Notes</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>As of <span class="version">v2.17.5</span>, if writing a custom filterFormatter function, you'll need to call an additional function after initialization has completed so the "filterInit" event isn't triggered prematurely. See the "Custom Filter Formatter Function Information" section below for more details.</li>
|
||||
<li>In <span class="version updated">v2.17.0</span>, the <code>filter_formatter</code> column can also be referenced by using a jQuery selector (e.g. class name or ID).</li>
|
||||
<li>In <span class="version">v2.16.0</span>, the <code>filter_placeholder</code> option was added. See the jQuery UI Datepicker Range Selector section for more details.</li>
|
||||
<li>In <span class="version">v2.15.0</span>, the following changes were made:
|
||||
<ul>
|
||||
<li>These updated filter widget functions are not completely backward compatible with older versions of the filter widget. Please update both!</li>
|
||||
<li>Added <code>compare</code> & <code>selected</code> options:
|
||||
<ul>
|
||||
<li>These options allow the adding of a comparison operator selector to the cell (e.g. <code>></code>, <code>>=</code>, <code><</code>, <code><=</code>, etc).</li>
|
||||
<li>If any <code>cellText</code> is included, it is now wrapped in a label with a class name of "compare-select-label" and "compare-select-label#" (where "#" is the column index).</li>
|
||||
<li>The selector has a class name of "compare-select" and "compare-select#" (where "#" is the column index)</li>
|
||||
<li>Whichever type of input that is added to the cell is then wrapped in a div with class "compare-select-wrapper" and "compare-select-wrapper#" (where "#" is the column index).</li>
|
||||
<li>These class names allow styling of an individual filter to keep elements in line, or however you wish to style it.
|
||||
<pre class="prettyprint lang-html"><!-- rendered filter cell (first column) -->
|
||||
<td>
|
||||
<!-- cellText -->
|
||||
<label class="compare-select-label compare-select-label0">Rank:</label>
|
||||
<!-- compare: [ '=', '>=', '<=' ] -->
|
||||
<select class="compare-select compare-select0">
|
||||
<option>=</option>
|
||||
<option>&gt;=</option>
|
||||
<option selected>&lt;=</option>
|
||||
</select>
|
||||
<!-- wrapped selector element -->
|
||||
<div class="compare-select-wrapper compare-select-wrapper0">
|
||||
<div class="slider slider0><!-- jQuery UI Slider gets added here --></div>
|
||||
</div>
|
||||
<!-- hidden input -->
|
||||
<input class="filter tablesorter-filter" type="hidden" value="" data-column="0">
|
||||
</td></pre>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Filter reset now sets these filters to their default values, not an empty string.</li>
|
||||
<li>Updated to now properly restore saved filters.</li>
|
||||
<li>Added <code>endOfDay</code> option for jQuery UI Datepicker.
|
||||
<ul>
|
||||
<li>When <code>true</code> search dates will include all times from the date chosen when a comparison is made of dates "less than" the set date.</li>
|
||||
<li>Example 1: if a table entry has a date of "Jan 14, 2014 11:23 AM" and the filter search is set to <button data-column="4" data-value="<=1/14/2014"><= 1/14/2014</button>, the table entry will be included in the search; the default set time would otherwise be "1/14/2014 00:00:00" and not include the entry from "11:23 AM". So, the <code>endOfDay</code> option sets the time to "23:59:59".</li>
|
||||
<li>Example 2: if searching for one specific date, this option will now search for all times within that day. For example, searching for <button data-column="4" data-value="=1/20/2014">= 1/20/2014</button>, and the results will include dates from 1/20/2014 00:00:00 to 1/20/2014 23:59:59.</li>
|
||||
<li>When comparing dates greater than the set date, the time will be set to midnight; so this option will not be applied.</li>
|
||||
<li>Example 3: in two date inputs, the <code>endOfDay</code> time is only applied to the "to" input; search for <button data-column="5" data-value="1/20/2014 - 1/20/2014">1/20/2014 - 1/20/2014</button></li>
|
||||
<li>This option is available in both the comparison (one input) and range (two inputs; "to" date input only) date pickers.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>As of tablesorter version 2.9+, this widget can no longer be applied to versions of tablesorter prior to version 2.8.</li>
|
||||
<li>This page shows you how to add a few <strong>jQuery UI widgets</strong> to interact with the filter widget using the <code>filter_formatter</code> option.</li>
|
||||
<li>Custom filter widget option <code>filter_formatter</code> was added in version 2.7.7.</li>
|
||||
<li>jQuery v1.4.3+ required.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#"><strong>jQuery UI Single Slider</strong></a> <span class="xsmall">("Rank" and "Age" columns)</span></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>In <span class="version">v2.15.0</span> the <code>compare</code> option was updated to allow adding a selector along with the input. The <code>selected</code> option allows choosing the default setting.</li>
|
||||
<li>In <span class="version">v2.10.1</span> the <code>compare</code> option was added. This allows comparing the slider's value to the column value. The slider in the Age column is selecting values greater than or equal to itself.</li>
|
||||
<li>A search delay was added in v2.7.11 (time set by <code>filter_searchDelay</code> option). It can be disabled by setting the <code>delayed</code> option to <code>false</code>.<br><br></li>
|
||||
<li>This example shows how you can add a jQuery UI slider to filter column content.</li>
|
||||
<li>The <code>filter_formatter</code> function provided in the extra "jquery.tablesorter.widgets-filter-formatter.js" file is used to add this custom control within the filter row.</li>
|
||||
<li>Make sure to include all values within the selected range, otherwise rows outside of this range will be forever hidden.</li>
|
||||
<li>Add the following code to apply a slider to filter a column:<pre class="prettyprint lang-javascript">$(function() {
|
||||
|
||||
$("table").tablesorter({
|
||||
theme: 'jui',
|
||||
// hidden filter input/selects will resize the columns, so try to minimize the change
|
||||
widthFixed : true,
|
||||
// initialize zebra striping and filter widgets
|
||||
widgets: ["zebra", "filter", "uitheme"],
|
||||
widgetOptions : {
|
||||
// jQuery selector string of an element used to reset the filters
|
||||
filter_reset : 'button.reset',
|
||||
// add custom selector elements to the filter row
|
||||
filter_formatter : {
|
||||
|
||||
// Rank (jQuery selector added v2.17.0)
|
||||
'th:contains("Rank")' : function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.uiSlider( $cell, indx, {
|
||||
// filterFormatter options
|
||||
cellText : 'Rank:',
|
||||
delayed: true, // delay search (set by filter_searchDelay)
|
||||
valueToHeader: false, // add current slider value to the header cell
|
||||
exactMatch: true, // exact (true) or match (false)
|
||||
allText: 'all', // text shown when the slider is at the minimum value
|
||||
compare : [ '=', '>=', '<=' ], // any comparison would override the exactMatch option
|
||||
selected : 2, // zero-based index of compare starting selected value
|
||||
|
||||
// add any of the jQuery UI Slider options here (http://api.jqueryui.com/slider/)
|
||||
value: 100, // starting value
|
||||
min: 0, // minimum value
|
||||
max: 100 // maximum value
|
||||
});
|
||||
},
|
||||
|
||||
// Age
|
||||
1 : function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.uiSlider( $cell, indx, {
|
||||
delayed: false, // delay search (set by filter_searchDelay)
|
||||
valueToHeader: false, // add current slider value to the header cell
|
||||
exactMatch: false, // exact (true) or match (false)
|
||||
allText: 'all', // text shown when slider is at the minimum value; ignored when compare has a value
|
||||
compare: [ '=', '>=', '<=' ], // search values greater/less than selected value; overrides exactMatch
|
||||
selected : 1, // zero-based index of compare starting selected value
|
||||
|
||||
// add any of the jQuery UI Slider options here (http://api.jqueryui.com/slider/)
|
||||
value: 1, // starting value
|
||||
min: 1, // minimum value
|
||||
max: 65 // maximum value
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});</pre></li>
|
||||
<li>The tooltip above the slider is added using pure css, which is included in the "filter.formatter.css" file, but it won't work in IE7 and older. But, you set the <code>valueToHeader</code> option to <code>true</code> to add the slider value to the header cell above the filter.</li>
|
||||
<li>Another option named <code>exactMatch</code> was added to allow exact or general matching of column content.</li>
|
||||
<li>Notice that the left-most value, zero in this case, will clear the column filter to allow a method to show all column content. You can modify the "all" text using the <code>allText</code> option.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#"><strong>jQuery UI Range Slider</strong></a> <span class="xsmall">("Total" column)</span></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>This example shows how you can add a jQuery UI range slider to filter column content.</li>
|
||||
<li>The <code>filter_formatter</code> function provided in the extra "jquery.tablesorter.widgets-filter-formatter.js" file is used to add this custom control within the filter row.</li>
|
||||
<li>Make sure to include all values within the selected range, otherwise rows outside of this range will be forever hidden.</li>
|
||||
<li>The range slider is actually the same as the single slider described above, but was built to handle a range of values.</li>
|
||||
<li>Add the following code to apply a range slider to filter a column:<pre class="prettyprint lang-javascript">$(function() {
|
||||
|
||||
$("table").tablesorter({
|
||||
theme: 'jui',
|
||||
// hidden filter input/selects will resize the columns, so try to minimize the change
|
||||
widthFixed : true,
|
||||
// initialize zebra striping and filter widgets
|
||||
widgets: ["zebra", "filter", "uitheme"],
|
||||
widgetOptions : {
|
||||
// jQuery selector string of an element used to reset the filters
|
||||
filter_reset : 'button.reset',
|
||||
// add custom selector elements to the filter row
|
||||
filter_formatter : {
|
||||
|
||||
// Total column (jQuery selector added v2.17.0)
|
||||
'.total' : function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.uiRange( $cell, indx, {
|
||||
delayed: true, // delay search (set by filter_searchDelay)
|
||||
valueToHeader: false, // add current slider value to the header cell
|
||||
|
||||
// add any of the jQuery UI Slider options (for range selection) here (http://api.jqueryui.com/slider/)
|
||||
values: [1, 160], // starting range
|
||||
min: 1, // minimum value
|
||||
max: 160 // maximum value
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});</pre></li>
|
||||
<li>The tooltip above the slider is added using pure css, which is included in the "filter.formatter.css" file, but it won't work in IE7 and older. But, you set the <code>valueToHeader</code> option to <code>true</code> to add the slider value to the header cell above the filter.</li>
|
||||
<li>Another option named <code>exactMatch</code> was added to allow exact or general matching of column content.</li>
|
||||
<li>A search delay was added in v2.7.11 (time set by <code>filter_searchDelay</code> option). It can be disabled by setting the <code>delayed</code> option to <code>false</code>.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#"><strong>jQuery UI Spinner</strong></a> <span class="xsmall">("Discount" column)</span></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>In <span class="version">v2.15.0</span> the <code>compare</code> option was updated to allow adding a selector along with the input. The <code>selected</code> option allows choosing the default setting.<br><br></li>
|
||||
<li>This example shows how you can add a jQuery UI spinner to filter column content.</li>
|
||||
<li>The <code>filter_formatter</code> function provided in the extra "jquery.tablesorter.widgets-filter-formatter.js" file is used to add this custom control within the filter row.</li>
|
||||
<li>Add the following code to apply a spinner to filter a column:<pre class="prettyprint lang-javascript">$(function() {
|
||||
|
||||
$("table").tablesorter({
|
||||
theme: 'jui',
|
||||
// hidden filter input/selects will resize the columns, so try to minimize the change
|
||||
widthFixed : true,
|
||||
// initialize zebra striping and filter widgets
|
||||
widgets: ["zebra", "filter", "uitheme"],
|
||||
widgetOptions : {
|
||||
// jQuery selector string of an element used to reset the filters
|
||||
filter_reset : 'button.reset',
|
||||
// add custom selector elements to the filter row
|
||||
filter_formatter : {
|
||||
|
||||
// Discount column
|
||||
3 : function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.uiSpinner( $cell, indx, {
|
||||
delayed: true, // delay search (set by filter_searchDelay)
|
||||
addToggle: false, // add a toggle switch to activate/deactive the search
|
||||
exactMatch: true, // exact (true) or match (false)
|
||||
compare : [ '', '=', '>=', '<=' ], // search values greater/less than selected value; overrides exactMatch
|
||||
selected : 2, // zero-based index of compare starting selected value
|
||||
|
||||
// add any of the jQuery UI Spinner options here (http://api.jqueryui.com/spinner/)
|
||||
min : 0,
|
||||
max : 45,
|
||||
value: 1,
|
||||
step: 1
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});</pre></li>
|
||||
<li>This is the only jQuery UI widget that includes a toggle button. The toggle button is added by default, but if you don't want it, set the <code>addToggle</code> option to <code>false</code>. Without the toggle button, the filter is always active.</li>
|
||||
<li>Another option named <code>exactMatch</code> was added to allow exact or general matching of column content.</li>
|
||||
<li>A search delay was added in v2.7.11 (time set by <code>filter_searchDelay</code> option). It can be disabled by setting the <code>delayed</code> option to <code>false</code>.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#"><strong>jQuery UI Datepicker Comparison</strong></a> <span class="xsmall">("Date (one input)" column)</span></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>In <span class="version">v2.15.0</span>
|
||||
<ul>
|
||||
<li>The <code>compare</code> option was updated to allow adding a selector along with the input. The <code>selected</code> option allows choosing the default setting.</li>
|
||||
<li>A <code>endOfDay</code> option was added, which when a <code><=</code> comparison is made, will include all times within the selected day. Try searching for <button data-column="4" data-value="<=1/14/2014"><= 1/14/2014</button>; it basically sets the time of the selected day to end at 23:59:59.</li>
|
||||
<li>Additionally, when <code>endOfDay</code> option is <code>true</code> and using an exact (<code>=</code>) comparison, all times within that selected day will be included - try searching for <button data-column="4" data-value="=1/20/2014">= 1/20/2014</button> to note that the day include various times.</li>
|
||||
</ul>
|
||||
<br>
|
||||
</li>
|
||||
<li>This example shows how you can add a jQuery UI Datepicker to compare to filter column content.</li>
|
||||
<li>The <code>filter_formatter</code> function provided in the extra "jquery.tablesorter.widgets-filter-formatter.js" file is used to add this custom control within the filter row.</li>
|
||||
<li>This code follows the <a class="external" href="http://jqueryui.com/datepicker/#default">default functionality</a> example from the jQuery UI docs.</li>
|
||||
<li>Add the following code to apply a datepicker comparison selector to the filter row:<pre class="prettyprint lang-javascript">$(function() {
|
||||
|
||||
$("table").tablesorter({
|
||||
theme: 'jui',
|
||||
// hidden filter input/selects will resize the columns, so try to minimize the change
|
||||
widthFixed : true,
|
||||
// initialize zebra striping and filter widgets
|
||||
widgets: ["zebra", "filter", "uitheme"],
|
||||
widgetOptions : {
|
||||
// jQuery selector string of an element used to reset the filters
|
||||
filter_reset : 'button.reset',
|
||||
// add custom selector elements to the filter row
|
||||
filter_formatter : {
|
||||
|
||||
// Date (one input)
|
||||
4 : function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.uiDateCompare( $cell, indx, {
|
||||
cellText : 'Dates', // text added before the input
|
||||
compare : [ '', '=', '>=', '<=' ], // search values greater/less than selected value; overrides exactMatch
|
||||
selected : 3, // zero-based index of compare starting selected value
|
||||
|
||||
// add any of the jQuery UI Datepicker options here (http://api.jqueryui.com/datepicker/)
|
||||
// defaultDate : '1/1/2014', // default date
|
||||
changeMonth : true,
|
||||
changeYear : true
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});</pre></li>
|
||||
<li>There is one issue with this comparison script, and that is with dates that contain a time:
|
||||
<ul>
|
||||
<li>Table data that contains dates with times will be parsed into values that include time.</li>
|
||||
<li>So if the <code>compare</code> option is set to <code>=</code>, it may not show any filtered table rows as none match that date at midnight. To fix this, either remove times from the table data, use a column parser that ignores the time, or use the Datepicker range selector and set the "from" input to the desired day and the "to" input to be the next day (at midnight).</li>
|
||||
<li><del>Using a <code>compare</code> of <code><=</code> will only show filtered dates from the selected day <em>at midnight</em> with earlier dates; i.e. a cell with the selected date but a time set to noon will not be visible</del>. As of <span class="version">v2.10/8</span>, the comparison of dates less than the selected date, now adds a time of 11:59:59 so it will include times within the selected date.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#"><strong>jQuery UI Datepicker Range Selector</strong></a> <span class="xsmall">("Date (two inputs)" column)</span></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>In <span class="version">v2.16.0</span>, a <code>filter_placeholder</code> option was added:
|
||||
<ul>
|
||||
<li>The option adds a search input placeholder and select (first option) text, but it also includes placeholder text for both the "from" and "to" inputs</li>
|
||||
<li>Set it as follows:
|
||||
<pre class="prettyprint lang-js">filter_placeholder : {
|
||||
search : '', // any default search inputs including the datepicker comparison
|
||||
from : 'Date from...', // datepicker range "from" placeholder
|
||||
to : 'Date to...' // datepicker range "to" placeholder
|
||||
}
|
||||
</pre></li>
|
||||
<li><span class="label label-info">Note</span> The browser must support the <a href="http://caniuse.com/#feat=input-placeholder">placeholder attribute</a> before this text will be visible.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>In <span class="version">v2.15.0</span>, an <code>endOfDay</code> option was added, which when <code>true</code> and searching within one day, all times within that selected day will be included - try searching for <button data-column="5" data-value="1/20/2014 - 1/20/2014">1/20/2014 - 1/20/2014</button> to note that the day include various times.<br></li>
|
||||
<li>This example shows how you can add a jQuery UI Datepicker range to filter column content.</li>
|
||||
<li>The <code>filter_formatter</code> function provided in the extra "jquery.tablesorter.widgets-filter-formatter.js" file is used to add this custom control within the filter row.</li>
|
||||
<li>This code follows the <a class="external" href="http://jqueryui.com/datepicker/#date-range">date range</a> example from the jQuery UI docs.</li>
|
||||
<li>Updated two input functions so that if the "to" input is empty, all dates greater than the "from" date are shown. If the "from" input is empty, all dates less than the "to" input date are shown (<span class="version updated">v2.10.1</span>).</li>
|
||||
<li>Add the following code to apply a datepicker range selector to the filter row:<pre class="prettyprint lang-javascript">$(function() {
|
||||
|
||||
$("table").tablesorter({
|
||||
theme: 'jui',
|
||||
// hidden filter input/selects will resize the columns, so try to minimize the change
|
||||
widthFixed : true,
|
||||
// initialize zebra striping and filter widgets
|
||||
widgets: ["zebra", "filter", "uitheme"],
|
||||
widgetOptions : {
|
||||
// jQuery selector string of an element used to reset the filters
|
||||
filter_reset : 'button.reset',
|
||||
// add custom selector elements to the filter row
|
||||
filter_formatter : {
|
||||
|
||||
// Date (two inputs)
|
||||
5 : function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.uiDatepicker( $cell, indx, {
|
||||
// add any of the jQuery UI Datepicker options here (http://api.jqueryui.com/datepicker/)
|
||||
// from : '8/1/2013', // starting date
|
||||
// to : '1/18/2014', // ending date
|
||||
textFrom: 'from', // "from" label text
|
||||
textTo: 'to', // "to" label text
|
||||
changeMonth: true,
|
||||
changeYear : true
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});</pre></li>
|
||||
<li>Note that the datepicker options are slightly different from the default datepicker options:
|
||||
<ul>
|
||||
<li>Instead of using the <code>defaultDate</code> option of the datepicker widget, it has a <code>from</code> and <code>to</code> option to fullfill that purpose.</li>
|
||||
<li>The options added to this function will be applied to both the from and to datepicker inputs.</li>
|
||||
<li>As of <span class="version">v2.10.8</span>, the comparison of dates less than the selected "to" date, now adds a time of 11:59:59 so it will include times within the selected dates.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#"><strong>Custom Filter Formatter Function Information</strong></a></h3>
|
||||
<div>
|
||||
If you want to write your own custom filter formatter function, there are certain requirements that should be met:
|
||||
<ul>
|
||||
<li>Required input element:
|
||||
<ul>
|
||||
<li>If your selector isn't an input (e.g. jQuery UI Slider), then you'll need to return an input of type hidden which gets updated by the selector with the filter query for the column.
|
||||
<pre class="prettyprint lang-javascript">filter_formatter : {
|
||||
0 : function($cell, indx) {
|
||||
var $input = $('<input type="hidden">').appendTo($cell);
|
||||
// add your selector code here
|
||||
return $input;
|
||||
}
|
||||
}</pre></li>
|
||||
<li>If the input contains a value that doesn't match a standard filter syntax, then you'll need to return an input of type hidden with the correct format.</li>
|
||||
<li>This returned input element should to be attached to the <code>$cell</code>.</li>
|
||||
<li>The returned input should have a "search" event triggered upon it after being updated.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Some method should be added to show the user the current value of the selector - update a data attribute for css3 tooltips, or update the header cell.</li>
|
||||
<li>A reset function needs to also be included; bind to the <code>filterReset</code> event and clear out or disable your custom selector when triggered.
|
||||
<pre class="prettyprint lang-javascript">$cell.closest('table').bind('filterReset', function(){ /* update the input here */ });</pre>
|
||||
</li>
|
||||
<li>In <span class="version">v2.15.0</span>, in order to update your custom input with any saved filter searches, you will need to bind to the <code>filterFomatterUpdate</code> event to get the saved filter value from the hidden input and apply it to your custom input.
|
||||
<pre class="prettyprint lang-javascript">$cell.closest('table').bind('filterFomatterUpdate', function(){
|
||||
var savedSearch = $cell.find('input[type=hidden]').val();
|
||||
// apply this saved search to your custom input
|
||||
$.tablesorter.filter.formatterUpdated($cell, indx); // new v2.17.5
|
||||
});</pre>As of <span class="version">v2.17.5</span>, you need to call <code>$.tablesorter.filter.formatterUpdated($cell, indx);</code> so the filter widget knows when all inputs have completed initialization, and fire the "filterInit" event.<br><br></li>
|
||||
<li>If your selector needs a parsed value to work with, add the <code>filter-parsed</code> class name to the header cell above the filter, use this code to do that:
|
||||
<pre class="prettyprint lang-javascript">$cell.closest('thead').find('th[data-column=' + indx + ']').addClass('filter-parsed');</pre>
|
||||
</li>
|
||||
<li>Since, by default, the filter only matches cell content, a <code>1</code> in the filter will show all rows with a one no matter where it is located. So, if you need an exact match, add an equal sign to the end of the value (<code>1=</code>). This forces the filter to exactly match the value in the search input.</li>
|
||||
<li>To include a search delay, trigger the search on the hidden input and pass a boolean. If <code>true</code> or undefined, the search will be delayed and not delayed if <code>false</code>; modify the delay time set by changing the <code>filter_searchDelay</code> option.
|
||||
<pre class="prettyprint lang-javascript">$input.val( newVal ).trigger('search', false); // no search delay</pre>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="switcher"></div>
|
||||
<button type="button" class="reset">Reset Search</button>
|
||||
<br>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Rank</th>
|
||||
<th>Age</th>
|
||||
<th class="total">Total (range)</th>
|
||||
<th>Discount</th>
|
||||
<th data-placeholder="Try 1/18/2013">Date (one input)</th>
|
||||
<th>Date (two inputs; range)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>1</td><td>25</td><td>$5.95</td><td>22%</td><td>Jun 26, 2013 7:22 AM</td><td>Jun 26, 2013 7:22 AM</td></tr>
|
||||
<tr><td>11</td><td>12</td><td>$82.99</td><td>5%</td><td>Aug 21, 2013 12:21 PM</td><td>Aug 21, 2013 12:21 PM</td></tr>
|
||||
<tr><td>12</td><td>51</td><td>$99.29</td><td>18%</td><td>Oct 13, 2013 1:15 PM</td><td>Oct 13, 2013 1:15 PM</td></tr>
|
||||
<tr><td>51</td><td>28</td><td>$9.99</td><td>20%</td><td>Jul 6, 2013 8:14 AM</td><td>Jul 6, 2013 8:14 AM</td></tr>
|
||||
<tr><td>21</td><td>33</td><td>$19.99</td><td>25%</td><td>Dec 10, 2012 5:14 AM</td><td>Dec 10, 2012 5:14 AM</td></tr>
|
||||
<tr><td>013</td><td>18</td><td>$65.89</td><td>45%</td><td>Jan 12, 2013 11:14 AM</td><td>Jan 12, 2013 11:14 AM</td></tr>
|
||||
<tr><td>005</td><td>45</td><td>$153.19</td><td>45%</td><td>Jan 18, 2014 9:12 AM</td><td>Jan 18, 2014 9:12 AM</td></tr>
|
||||
<tr><td>10</td><td>3</td><td>$5.29</td><td>4%</td><td>Jan 8, 2013 5:11 PM</td><td>Jan 8, 2013 5:11 PM</td></tr>
|
||||
<tr><td>16</td><td>24</td><td>$14.19</td><td>14%</td><td>Jan 14, 2014 11:23 AM</td><td>Jan 14, 2014 11:23 AM</td></tr>
|
||||
<tr><td>66</td><td>22</td><td>$13.19</td><td>11%</td><td>Jan 18, 2013 9:12 AM</td><td>Jan 18, 2013 9:12 AM</td></tr>
|
||||
<tr><td>100</td><td>18</td><td>$55.20</td><td>15%</td><td>Feb 12, 2013 7:23 PM</td><td>Feb 12, 2013 7:23 PM</td></tr>
|
||||
<tr><td>55</td><td>65</td><td>$123.00</td><td>32%</td><td>Jan 20, 2014 1:12 PM</td><td>Jan 20, 2014 1:12 PM</td></tr>
|
||||
<tr><td>9</td><td>25</td><td>$22.09</td><td>17%</td><td>Jun 11, 2013 10:55 AM</td><td>Jun 11, 2013 10:55 AM</td></tr>
|
||||
<tr><td>13</td><td>12</td><td>$19.99</td><td>18%</td><td>Jan 20, 2014 7:45 PM</td><td>Jan 20, 2014 7:45 PM</td></tr>
|
||||
<tr><td>73</td><td>58</td><td>$129.19</td><td>39%</td><td>Jan 20, 2014 10:11 AM</td><td>Jan 20, 2014 10:11 AM</td></tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Page Header</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><!-- jQuery UI for range slider -->
|
||||
<link rel="stylesheet" href="css/jquery-ui.min.css">
|
||||
<script src="js/jquery-ui-latest.min.js"></script>
|
||||
|
||||
<!-- tablesorter plugin -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<!-- filter formatter code -->
|
||||
<link rel="stylesheet" href="../css/filter.formatter.css">
|
||||
<script src="../js/jquery.tablesorter.widgets-filter-formatter.js"></script></pre>
|
||||
</div>
|
||||
|
||||
<h1>CSS</h1>
|
||||
<div id="css">
|
||||
<pre class="prettyprint lang-css"></pre>
|
||||
</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-widget-filter-formatter-2.html">jQuery custom filter widget formatter (HTML5 Elements) ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,353 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Custom Filter Widget Formatter (HTML5 Elements)</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
|
||||
<script src="js/jquery-ui-latest.min.js"></script>
|
||||
<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 href="../css/theme.blue.css" rel="stylesheet">
|
||||
<link href="../css/filter.formatter.css" rel="stylesheet">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets-filter-formatter.js"></script>
|
||||
|
||||
<style id="css">/* css needed to get compare selector & slider in-line */
|
||||
.compare-select-wrapper { width: 60%; float: right; }</style>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
$("table").tablesorter({
|
||||
theme: 'blue',
|
||||
// hidden filter input/selects will resize the columns, so try to minimize the change
|
||||
widthFixed : true,
|
||||
// initialize zebra striping and filter widgets
|
||||
widgets: ["zebra", "filter", "stickyHeaders"],
|
||||
widgetOptions : {
|
||||
// Use the $.tablesorter.storage utility to save the most recent filters
|
||||
filter_saveFilters : true,
|
||||
// jQuery selector string of an element used to reset the filters
|
||||
filter_reset : 'button.reset',
|
||||
// add custom selector elements to the filter row
|
||||
filter_formatter : {
|
||||
|
||||
// Rank
|
||||
0 : function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.html5Range( $cell, indx, {
|
||||
value: 0,
|
||||
min: 0,
|
||||
max: 100,
|
||||
delayed: true,
|
||||
valueToHeader: true,
|
||||
compare : [ '=', '>=', '<=' ],
|
||||
selected: 1
|
||||
});
|
||||
},
|
||||
|
||||
// Color
|
||||
1 : function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.html5Color( $cell, indx, {
|
||||
value: '#000000',
|
||||
addToggle: true,
|
||||
exactMatch: true,
|
||||
valueToHeader: false
|
||||
});
|
||||
},
|
||||
|
||||
// Age
|
||||
3: function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.html5Number( $cell, indx, {
|
||||
value: 1,
|
||||
min: 1,
|
||||
max: 65,
|
||||
delayed: true,
|
||||
addToggle: true,
|
||||
exactMatch: true,
|
||||
compare: ''
|
||||
});
|
||||
},
|
||||
|
||||
// Total
|
||||
4 : function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.html5Range( $cell, indx, {
|
||||
value: 0,
|
||||
min: 0,
|
||||
max: 150,
|
||||
delayed: true,
|
||||
valueToHeader: true,
|
||||
compare : '>='
|
||||
});
|
||||
},
|
||||
|
||||
// Discount
|
||||
5: function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.html5Number( $cell, indx, {
|
||||
value: 1,
|
||||
min: 1,
|
||||
max: 44,
|
||||
delayed: true,
|
||||
addToggle: false,
|
||||
compare: [ '<=', '=', '>=' ],
|
||||
selected: 2
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Custom Filter Widget Formatter (HTML5 Elements)</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<p></p>
|
||||
<br>
|
||||
<div class="accordion">
|
||||
|
||||
<h3><a href="#">Notes</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>In <span class="version updated">v2.17.0</span>, the <code>filter_formatter</code> column can also be referenced by using a jQuery selector (e.g. class name or ID).</li>
|
||||
<li>As of tablesorter version 2.9+, this widget can no longer be applied to versions of tablesorter prior to version 2.8.</li>
|
||||
<li>At this time, these widgets do not work with the sticky header widget.</li>
|
||||
<li>This page shows you how to add a few default <strong>HTML5 elements</strong> to interact with the filter widget.</li>
|
||||
<li>If the HTML5 elements are not supported by your browser, you'll just see an input.</li>
|
||||
<li>Custom filter widget option <code>filter_formatter</code> was added in version 2.7.7.</li>
|
||||
<li>jQuery v1.4.3+ required.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#"><strong>HTML Range</strong></a> <span class="xsmall">("Rank" and "Total" columns)</span></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>In <span class="version">v2.15.0</span> the <code>compare</code> option was updated to allow adding a selector along with the input. The <code>selected</code> option allows choosing the default setting.</li>
|
||||
<li>This example shows how you can add an HTML5 range input slider to filter column content.</li>
|
||||
<li>The <code>filter_formatter</code> function provided in the extra "jquery.tablesorter.widgets-filter-formatter.js" file is used to add this custom control within the filter row.</li>
|
||||
<li>Make sure to include all values within the selected range, otherwise rows outside of this range will be forever hidden.</li>
|
||||
<li>Add the following code to apply an HTML5 range slider to the filter row:<pre class="prettyprint lang-javascript">$(function() {
|
||||
|
||||
$("table").tablesorter({
|
||||
theme: 'blue',
|
||||
// initialize zebra striping and filter widgets
|
||||
widgets: ["zebra", "filter"],
|
||||
widgetOptions : {
|
||||
// jQuery selector string of an element used to reset the filters
|
||||
filter_reset : 'button.reset',
|
||||
// add custom selector elements to the filter row
|
||||
filter_formatter : {
|
||||
|
||||
// Rank
|
||||
0 : function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.html5Range( $cell, indx, {
|
||||
value: 0,
|
||||
min: 0,
|
||||
max: 100,
|
||||
delayed: true,
|
||||
valueToHeader: true,
|
||||
compare : [ '=', '>=', '<=' ],
|
||||
selected: 1
|
||||
});
|
||||
},
|
||||
|
||||
// Total
|
||||
4 : function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.html5Range( $cell, indx, {
|
||||
value: 0,
|
||||
min: 0,
|
||||
max: 150,
|
||||
delayed: true,
|
||||
valueToHeader: true,
|
||||
compare : '>='
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});</pre></li>
|
||||
<li>By default, this code has the <code>valueToHeader</code> option set to <code>true</code> to add the slider value to the header cell above the filter.</li>
|
||||
<li>The tooltip above the slider is NOT added in this example because the slider handle is not a separate element. But if you are interested, you can use <a href="http://codepen.io/chriscoyier/pen/lokyH">this code</a> by Chris Coyier to animate a range slider bubble.</li>
|
||||
<li>Another option named <code>exactMatch</code> was added to allow exact or general matching of column content.</li>
|
||||
<li>Notice that the left-most value, zero in this case, will clear the column filter to allow a method to show all column content. You can modify the "all" text using the <code>allText</code> option.</li>
|
||||
<li>A search delay option was added in v2.7.11 (time set by <code>filter_searchDelay</code> option). It can be disabled by setting the <code>delayed</code> option to <code>false</code>.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#"><strong>HTML5 color input</strong></a> <span class="xsmall">("Color" column)</span></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>This example shows how you can add an HTML5 color input to filter column content.</li>
|
||||
<li>The <code>filter_formatter</code> function is used to add a custom control within the filter row, but a hidden input is still required to store the filter value.</li>
|
||||
<li>Add the following code to apply a color input to the filter row:<pre class="prettyprint lang-javascript">$(function() {
|
||||
|
||||
$("table").tablesorter({
|
||||
theme: 'blue',
|
||||
// hidden filter input/selects will resize the columns, so try to minimize the change
|
||||
widthFixed : true,
|
||||
// initialize zebra striping and filter widgets
|
||||
widgets: ["zebra", "filter"],
|
||||
widgetOptions : {
|
||||
// jQuery selector string of an element used to reset the filters
|
||||
filter_reset : 'button.reset',
|
||||
// add custom selector elements to the filter row
|
||||
filter_formatter : {
|
||||
|
||||
// Color
|
||||
1 : function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.html5Color( $cell, indx, {
|
||||
value: '#000000',
|
||||
addToggle: true,
|
||||
exactMatch: true,
|
||||
valueToHeader: false
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});</pre></li>
|
||||
<li>This color selector will only output the color as a hex value with a hash followed by six characters (<code>#000000</code>).</li>
|
||||
<li>By default, this code has the <code>valueToHeader</code> option set to <code>false</code>. The currently selected color is added to a span within the cell by default.</li>
|
||||
<li>Another option named <code>exactMatch</code> was added to allow exact or general matching of column content, in case you have multiple colors in one cell.</li>
|
||||
<li>This selector includes a toggle button. The toggle button is added by default, but if you don't want it, set the <code>addToggle</code> option to <code>false</code>. Without the toggle button, the filter is always active.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#"><strong>HTML5 Number Selector</strong></a> <span class="xsmall">("Age" and "Discount" columns)</span></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>In <span class="version">v2.15.0</span> the <code>compare</code> option was updated to allow adding a selector along with the input. The <code>selected</code> option allows choosing the default setting.</li>
|
||||
<li>This example shows how you can add an HTML5 number spinner to the filter column content.</li>
|
||||
<li>The <code>filter_formatter</code> function provided in the extra "jquery.tablesorter.widgets-filter-formatter.js" file is used to add this custom control within the filter row.</li>
|
||||
<li>Add the following code to apply an HTML spinner to filter a column:<pre class="prettyprint lang-javascript">$(function() {
|
||||
|
||||
$("table").tablesorter({
|
||||
theme: 'blue',
|
||||
// hidden filter input/selects will resize the columns, so try to minimize the change
|
||||
widthFixed : true,
|
||||
// initialize zebra striping and filter widgets
|
||||
widgets: ["zebra", "filter"],
|
||||
widgetOptions : {
|
||||
// jQuery selector string of an element used to reset the filters
|
||||
filter_reset : 'button.reset',
|
||||
// add custom selector elements to the filter row
|
||||
filter_formatter : {
|
||||
|
||||
// Age
|
||||
3: function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.html5Number( $cell, indx, {
|
||||
value: 1,
|
||||
min: 1,
|
||||
max: 65,
|
||||
delayed: true,
|
||||
addToggle: true,
|
||||
exactMatch: true,
|
||||
compare: ''
|
||||
});
|
||||
},
|
||||
|
||||
// Discount
|
||||
5: function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.html5Number( $cell, indx, {
|
||||
value: 1,
|
||||
min: 1,
|
||||
max: 44,
|
||||
delayed: true,
|
||||
addToggle: false,
|
||||
compare: [ '<=', '=', '>=' ],
|
||||
selected: 2
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});</pre></li>
|
||||
<li>This is spinner includes a toggle button. The toggle button is added by default, but if you don't want it, set the <code>addToggle</code> option to <code>false</code>. Without the toggle button, the filter is always active.</li>
|
||||
<li>Another option named <code>exactMatch</code> was added to allow exact or general matching of column content.</li>
|
||||
<li>A search delay option was added in v2.7.11 (time set by <code>filter_searchDelay</code> option). It can be disabled by setting the <code>delayed</code> option to <code>false</code>.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<button type="button" class="reset">Reset Search</button>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr><th>Rank</th><th>Color</th><th>Name</th><th>Age</th><th>Total</th><th>Discount</th><th>Date</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>1</td><td>#ff0000</td><td>Johnson</td><td>25</td><td>$5.95</td><td>22%</td><td>Jun 26, 2013 7:22 AM</td></tr>
|
||||
<tr><td>11</td><td>#00ff00</td><td>Hibert</td><td>12</td><td>$2.99</td><td>5%</td><td>Aug 21, 2013 12:21 PM</td></tr>
|
||||
<tr><td>12</td><td>#0000ff</td><td>Henry</td><td>51</td><td>$42.29</td><td>18%</td><td>Oct 13, 2013 1:15 PM</td></tr>
|
||||
<tr><td>51</td><td>#00ff00</td><td>Parker</td><td>28</td><td>$9.99</td><td>20%</td><td>Jul 6, 2013 8:14 AM</td></tr>
|
||||
<tr><td>21</td><td>#ffffff</td><td>Hood</td><td>33</td><td>$19.99</td><td>25%</td><td>Dec 10, 2012 5:14 AM</td></tr>
|
||||
<tr><td>013</td><td>#ff0000</td><td>Kent</td><td>18</td><td>$15.89</td><td>44%</td><td>Jan 12, 2013 11:14 AM</td></tr>
|
||||
<tr><td>005</td><td>#00ff00</td><td>Bruce</td><td>45</td><td>$153.19</td><td>44%</td><td>Jan 18, 2014 9:12 AM</td></tr>
|
||||
<tr><td>10</td><td>#000000</td><td>Alex</td><td>3</td><td>$5.29</td><td>4%</td><td>Jan 8, 2013 5:11 PM</td></tr>
|
||||
<tr><td>16</td><td>#ff0000</td><td>Franco</td><td>24</td><td>$14.19</td><td>14%</td><td>Jan 14, 2014 11:23 AM</td></tr>
|
||||
<tr><td>66</td><td>#000000</td><td>Evans</td><td>22</td><td>$13.19</td><td>11%</td><td>Jan 18, 2013 9:12 AM</td></tr>
|
||||
<tr><td>100</td><td>#ffffff</td><td>Brenda</td><td>18</td><td>$55.20</td><td>15%</td><td>Feb 12, 2013 7:23 PM</td></tr>
|
||||
<tr><td>55</td><td>#000000</td><td>Bronson</td><td>65</td><td>$123.00</td><td>32%</td><td>Jan 20, 2014 1:12 PM</td></tr>
|
||||
<tr><td>9</td><td>#000000</td><td>Martha</td><td>25</td><td>$22.09</td><td>17%</td><td>Jun 11, 2013 10:55 AM</td></tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Page Header</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><!-- jQuery UI for range slider -->
|
||||
<link rel="stylesheet" href="css/jquery-ui.min.css">
|
||||
<script src="js/jquery-ui-latest.min.js"></script>
|
||||
|
||||
<!-- tablesorter plugin -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<!-- filter formatter code -->
|
||||
<link rel="stylesheet" href="../css/filter.formatter.css">
|
||||
<script src="../js/jquery.tablesorter.widgets-filter-formatter.js"></script></pre>
|
||||
</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-widget-ui-theme.html">UITheme widget - jQuery UI theme ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,230 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Filter Formatter: select2 (beta)</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
|
||||
<script src="js/jquery-ui-latest.min.js"></script>
|
||||
<link rel="stylesheet" href="../docs/css/jq.css">
|
||||
<link href="../docs/css/prettify.css" rel="stylesheet">
|
||||
<script src="../docs/js/prettify.js"></script>
|
||||
<script src="../docs/js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link href="../css/theme.blue.css" rel="stylesheet">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<!-- Select2 code -->
|
||||
<link href="css/select2-3.4.6.min.css" rel="stylesheet">
|
||||
<script src="js/select2-3.4.6.min.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets-filter-formatter-select2.js"></script>
|
||||
|
||||
<script id="js">$(function(){
|
||||
|
||||
$('.tablesorter').tablesorter({
|
||||
theme: 'blue',
|
||||
widthFixed: true,
|
||||
widgets: ['zebra', 'stickyHeaders', 'filter'],
|
||||
widgetOptions : {
|
||||
// Use the $.tablesorter.storage utility to save the most recent filters
|
||||
filter_saveFilters : true,
|
||||
// jQuery selector string of an element used to reset the filters
|
||||
filter_reset : 'button.reset',
|
||||
// add custom selector elements to the filter row
|
||||
filter_formatter : {
|
||||
|
||||
// Alphanumeric (match)
|
||||
0 : function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.select2( $cell, indx, {
|
||||
match : true, // adds "filter-match" to header
|
||||
cellText : 'Match: ', // Cell text
|
||||
width: '85%', // adjusted width to allow for cell text
|
||||
value: ['abc', 'def'] // initial values
|
||||
});
|
||||
},
|
||||
|
||||
// Alphanumeric (exact)
|
||||
1 : function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.select2( $cell, indx, {
|
||||
match : false // exact match only
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// option added in v2.16.0
|
||||
filter_selectSource : {
|
||||
// Alphanumeric match (prefix only)
|
||||
// added as select2 options (you could also use select2 data option)
|
||||
0 : function(table, column) {
|
||||
return ['abc', 'def', 'zyx'];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Filter Formatter: select2 (beta)</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<p></p>
|
||||
<br>
|
||||
|
||||
<div id="root" class="accordion">
|
||||
|
||||
<h3><a href="#">Notes</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>Updated in <span class="version updated">v2.16.3</span> to allow adding an initial value to the select2 plugin.</li>
|
||||
<li>This is a demo of the select2 filter formatter code.</li>
|
||||
<li>It requires jQuery 1.7.2+, tablesorter <span class="version">2.16</span>+, the filter widget 2.16+ and <a href="http://ivaynberg.github.io/select2/">Select2</a> v3.4.6+ (not tested on older select2 versions)</li>
|
||||
<li>This demo uses the new <a href="index.html#widget-filter-selectsource"><code>filter_selectSource</code></a> option which is only available in tablesorter <span class="version">v2.16</span>+</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Options</a></h3>
|
||||
<div>
|
||||
There are only two filter formatter options, the rest are all <a href="http://ivaynberg.github.io/select2/#documentation">select2 plugin options</a> (defaults shown below):
|
||||
<table class="tablesorter-blue">
|
||||
<thead>
|
||||
<tr><th>Option</th><th>Default</th><th class="sorter-false">Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><th colspan="3">Select2 FilterFormatter options</th></tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
|
||||
<tr>
|
||||
<td>cellText</td>
|
||||
<td>''</td>
|
||||
<td>Text added within a <code><label></code> before the input.</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>match</td>
|
||||
<td>true</td>
|
||||
<td>Adds a "filter-match" class name to the header & modifies the search</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>value</td>
|
||||
<td>[ ]</td>
|
||||
<td>Set the initial select2 values within this array. These values are restored when the filters are reset.</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr><th colspan="3">Select2 plugin (modified defaults)</th></tr>
|
||||
</tbody>
|
||||
|
||||
<tbody>
|
||||
|
||||
<tr>
|
||||
<td>multiple</td>
|
||||
<td>true</td>
|
||||
<td>Allow multiple selections. This option can be modified.</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>width</td>
|
||||
<td>'100%'</td>
|
||||
<td>Reduce this width if you add anything cellText, or the text and the input will be on separate lines.</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
This is an example of how to set these options:
|
||||
<pre class="prettyprint lang-js">filter_formatter : {
|
||||
// default settings on first column
|
||||
0 : function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.select2( $cell, indx, {
|
||||
// *** select2 filter formatter options ***
|
||||
cellText : '', // Text (wrapped in a label element)
|
||||
match : true, // adds "filter-match" to header & modifies search
|
||||
value : [], // initial select2 values
|
||||
|
||||
// *** ANY select2 options can be included below ***
|
||||
// (showing default settings for this formatter code)
|
||||
multiple : true, // allow multiple selections
|
||||
width : '100%' // reduce this width if you add cellText
|
||||
});
|
||||
}
|
||||
}</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><button class="reset">Reset Search</button>
|
||||
<table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<!-- filter-match is automatically added by select2 "match" option -->
|
||||
<th>AlphaNumeric (match)</th>
|
||||
<th class="filter-onlyAvail">AlphaNumeric (exact; only available)</th>
|
||||
<th>Numeric</th>
|
||||
<th>Animals</th>
|
||||
<th>Sites</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>abc 123</td><td>abc 123</td><td>10</td><td>Koala</td><td>http://www.google.com</td></tr>
|
||||
<tr><td>abc 1</td><td>abc 1</td><td>34</td><td>Ox</td><td>http://www.yahoo.com</td></tr>
|
||||
<tr><td>abc 9</td><td>abc 9</td><td>10</td><td>Girafee</td><td>http://www.facebook.com</td></tr>
|
||||
<tr><td>zyx 24</td><td>zyx 24</td><td>67</td><td>Bison</td><td>http://www.whitehouse.gov/</td></tr>
|
||||
<tr><td>abc 11</td><td>abc 11</td><td>3</td><td>Chimp</td><td>http://www.ucla.edu/</td></tr>
|
||||
<tr><td>def 2</td><td>def 2</td><td>56</td><td>Elephant</td><td>http://www.wikipedia.org/</td></tr>
|
||||
<tr><td>abc 9</td><td>abc 9</td><td>75</td><td>Lion</td><td>http://www.nytimes.com/</td></tr>
|
||||
<tr><td>def 10</td><td>def 10</td><td>87</td><td>Zebra</td><td>http://www.google.com</td></tr>
|
||||
<tr><td>zyx 1</td><td>zyx 1</td><td>99</td><td>Koala</td><td>http://www.mit.edu/</td></tr>
|
||||
<tr><td>zyx 12</td><td>zyx 12</td><td>0</td><td>Llama</td><td>http://www.nasa.gov/</td></tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Header</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link href="../css/theme.blue.css" rel="stylesheet">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<!-- Select2 code -->
|
||||
<link href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.6/select2.min.css" rel="stylesheet">
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.6/select2.min.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets-filter-formatter-select2.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>
|
||||
749
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-widget-filter.html
Executable file
749
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-widget-filter.html
Executable file
@@ -0,0 +1,749 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Filter Widget</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
|
||||
<script src="js/jquery-ui-latest.min.js"></script>
|
||||
<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>
|
||||
/* override the vertical-align top in the blue theme */
|
||||
.notes.tablesorter-blue tbody td { vertical-align: middle; }
|
||||
</style>
|
||||
<script>
|
||||
$(function(){
|
||||
$('.options').tablesorter({
|
||||
widthFixed: true,
|
||||
widgets: ['stickyHeaders']
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
// call the tablesorter plugin
|
||||
$("#table").tablesorter({
|
||||
theme: 'blue',
|
||||
|
||||
// hidden filter input/selects will resize the columns, so try to minimize the change
|
||||
widthFixed : true,
|
||||
|
||||
// initialize zebra striping and filter widgets
|
||||
widgets: ["zebra", "filter"],
|
||||
|
||||
ignoreCase: false,
|
||||
|
||||
widgetOptions : {
|
||||
|
||||
// filter_anyMatch options was removed in v2.15; it has been replaced by the filter_external option
|
||||
|
||||
// If there are child rows in the table (rows with class name from "cssChildRow" option)
|
||||
// and this option is true and a match is found anywhere in the child row, then it will make that row
|
||||
// visible; default is false
|
||||
filter_childRows : false,
|
||||
|
||||
// if true, a filter will be added to the top of each table column;
|
||||
// disabled by using -> headers: { 1: { filter: false } } OR add class="filter-false"
|
||||
// if you set this to false, make sure you perform a search using the second method below
|
||||
filter_columnFilters : true,
|
||||
|
||||
// extra css class name(s) applied to the table row containing the filters & the inputs within that row
|
||||
// this option can either be a string (class applied to all filters) or an array (class applied to indexed filter)
|
||||
filter_cssFilter : '', // or []
|
||||
|
||||
// add a default column filter type "~{query}" to make fuzzy searches default;
|
||||
// "{q1} AND {q2}" to make all searches use a logical AND.
|
||||
filter_defaultFilter : {},
|
||||
|
||||
// filters to exclude, per column
|
||||
filter_excludeFilter : {},
|
||||
|
||||
// jQuery selector (or object) pointing to an input to be used to match the contents of any column
|
||||
// please refer to the filter-any-match demo for limitations - new in v2.15
|
||||
filter_external : '',
|
||||
|
||||
// class added to filtered rows (rows that are not showing); needed by pager plugin
|
||||
filter_filteredRow : 'filtered',
|
||||
|
||||
// add custom filter elements to the filter row
|
||||
// see the filter formatter demos for more specifics
|
||||
filter_formatter : null,
|
||||
|
||||
// add custom filter functions using this option
|
||||
// see the filter widget custom demo for more specifics on how to use this option
|
||||
filter_functions : null,
|
||||
|
||||
// if true, filters are collapsed initially, but can be revealed by hovering over the grey bar immediately
|
||||
// below the header row. Additionally, tabbing through the document will open the filter row when an input gets focus
|
||||
filter_hideFilters : true,
|
||||
|
||||
// Set this option to false to make the searches case sensitive
|
||||
filter_ignoreCase : true,
|
||||
|
||||
// if true, search column content while the user types (with a delay)
|
||||
filter_liveSearch : true,
|
||||
|
||||
// a header with a select dropdown & this class name will only show available (visible) options within that drop down.
|
||||
filter_onlyAvail : 'filter-onlyAvail',
|
||||
|
||||
// jQuery selector string of an element used to reset the filters
|
||||
filter_reset : 'button.reset',
|
||||
|
||||
// Use the $.tablesorter.storage utility to save the most recent filters (default setting is false)
|
||||
filter_saveFilters : true,
|
||||
|
||||
// Delay in milliseconds before the filter widget starts searching; This option prevents searching for
|
||||
// every character while typing and should make searching large tables faster.
|
||||
filter_searchDelay : 300,
|
||||
|
||||
// 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_serversideFiltering : false,
|
||||
|
||||
// Set this option to true to use the filter to find text from the start of the column
|
||||
// So typing in "a" will find "albert" but not "frank", both have a's; default is false
|
||||
filter_startsWith : false,
|
||||
|
||||
// Filter using parsed content for ALL columns
|
||||
// be careful on using this on date columns as the date is parsed and stored as time in seconds
|
||||
filter_useParsedData : false,
|
||||
|
||||
// data attribute in the header cell that contains the default filter value
|
||||
filter_defaultAttrib : 'data-value'
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
// External search
|
||||
// buttons set up like this:
|
||||
// <button type="button" data-filter-column="4" data-filter-text="2?%">Saved Search</button>
|
||||
$('button[data-filter-column]').click(function(){
|
||||
/*** first method *** data-filter-column="1" data-filter-text="!son"
|
||||
add search value to Discount column (zero based index) input */
|
||||
var filters = [],
|
||||
$t = $(this),
|
||||
col = $t.data('filter-column'), // zero-based index
|
||||
txt = $t.data('filter-text') || $t.text(); // text to add to filter
|
||||
|
||||
filters[col] = txt;
|
||||
// using "table.hasFilters" here to make sure we aren't targetting a sticky header
|
||||
$.tablesorter.setFilters( $('#table'), filters, true ); // new v2.9
|
||||
|
||||
/** old method (prior to tablsorter v2.9 ***
|
||||
var filters = $('table.tablesorter').find('input.tablesorter-filter');
|
||||
filters.val(''); // clear all filters
|
||||
filters.eq(col).val(txt).trigger('search', false);
|
||||
******/
|
||||
|
||||
/*** second method ***
|
||||
this method bypasses the filter inputs, so the "filter_columnFilters"
|
||||
option can be set to false (no column filters showing)
|
||||
******/
|
||||
/*
|
||||
var columns = [];
|
||||
columns[5] = '2?%'; // or define the array this way [ '', '', '', '', '', '2?%' ]
|
||||
$('table').trigger('search', [ columns ]);
|
||||
*/
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
});</script>
|
||||
|
||||
<script>
|
||||
$(function(){
|
||||
|
||||
// *** widgetfilter_startsWith toggle button ***
|
||||
$('button.toggle').click(function(){
|
||||
var c = $('#table')[0].config,
|
||||
$t = $(this),
|
||||
// toggle the boolean
|
||||
fsw = !c.widgetOptions.filter_startsWith,
|
||||
fic = !c.widgetOptions.filter_ignoreCase;
|
||||
if ($t.hasClass('fsw')) {
|
||||
c.widgetOptions.filter_startsWith = fsw;
|
||||
$('#start').html(fsw.toString());
|
||||
} else if ($t.hasClass('fic')) {
|
||||
c.widgetOptions.filter_ignoreCase = fic;
|
||||
$('#case').html(fic.toString());
|
||||
} else {
|
||||
$t = c.$headers.eq(1).toggleClass('filter-match');
|
||||
$t.find('span').html( $t.hasClass('filter-match') ? '' : ' No' );
|
||||
}
|
||||
// update search after option change; add false to trigger to skip search delay
|
||||
c.$table.trigger('search', false);
|
||||
return false;
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Filter Widget</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<p></p>
|
||||
<br>
|
||||
<div id="root" class="accordion">
|
||||
|
||||
<h3 id="notes"><a href="#">Notes</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>In <span class="version">v2.17.8</span>, filter selects will default to exact matches unless the header cell has a "filter-match" class added.</li>
|
||||
<li>In <span class="version">v2.17.1</span>, added a not exact match (<code>!=</code>) filter type.</li>
|
||||
<li>In <span class="version updated">v2.16+</span>,
|
||||
<ul>
|
||||
<li>When a default filter select is added to a column, it is now parsed from the assigned parser, then sorted using the <code>textSorter</code> setting, and falls back to an alphanumeric sort (<span class="version updated">v2.16.3</span>).</li>
|
||||
<li>Adding a class of <code>"filter-select-nosort"</code> will now leave the select options unsorted (<span class="version">v2.16.3</span>).</li>
|
||||
<li>Added <code>filter_placeholder</code> option (<span class="version">v2.16.0</span>).</li>
|
||||
<li>Added <code>filter_selectSource</code> option (<span class="version">v2.16.3</span>).</li>
|
||||
<li>updated <code>filter_reset</code> option (<span class="version updated">v2.16.3</span>).</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>In <span class="version updated">v2.15</span>,
|
||||
<ul>
|
||||
<li>The <code>filter_anyMatch</code> widget option was completely <span class="label alert">removed</span>. Sorry for not deprecating this option, but the filter any match code was completely rewritten.</li>
|
||||
<li>Added a <code>filter_external</code> widget option to only accept a jQuery selector string/object; please see the updated <a href="example-widget-filter-any-match.html">filter any match</a> demo for more details.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Added & set <code>filter_saveFilters</code> to <code>true</code> (default is <code>false</code>) in this demo (<span class="version">v2.14</span>).</li>
|
||||
<li>Hover over the grey bar below the table header to open the filter row. Disable this by setting <code>filter_hideFilters</code> option to <code>false</code>.</li>
|
||||
<li>This widget uses jQuery's <code>.nextUntil()</code> function which is only available is jQuery version 1.4+.</li>
|
||||
<li>This widget does work with tablesorter v2.0.5.</li>
|
||||
<li>Using the built-in filters (<a href="example-widget-filter-custom-search.html">learn how to customize them here</a> - demo created <span class="version">v2.17.5</span>):
|
||||
<table class="tablesorter-blue notes">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width:10%">Type <small class="bright">(1)(2)</small></th>
|
||||
<th style="width:40%">Description</th>
|
||||
<th style="width:50%">Examples</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td class="center">text</td><td>Any text entered in the filter will <strong>match</strong> text found within the column</td><td><code>abc</code> (finds "abc", "abcd", "abcde", etc);<button data-filter-column="1">Aaron</button> (finds "Aaron" and "Philip Aaron Wong")</td></tr>
|
||||
<tr><td class="center"><code>/\d/</code></td><td>Add any regex to the query to use in the query ("mig" flags can be included <code>/\w/mig</code>)</td><td><code>/b[aeiou]g/i</code> (finds "bag", "beg", "BIG", "Bug", etc);<button data-filter-column="1">/r$/</button> (matches text that ends with an "r")</td></tr>
|
||||
<tr><td class="center"><code>< <= >= ></code></td><td>Find alphabetical or numerical values less than or greater than or equal to the filtered query <small class="bright">(2)</small>.</td><td><button data-filter-column="5">>= 10</button> (find values greater than or equal to 10)</td></tr>
|
||||
<tr><td class="center"><code>!</code> or <code>!=</code></td><td>Not operator, or not exactly match. Filter the column with content that <strong>do not</strong> match the query. Include an equal (<code>=</code>), single (<code>'</code>) or double quote (<code>"</code>) to exactly <em>not</em> match a filter (<span class="version">v2.17.1</span>).</td><td><code>!fe</code> (hide rows with "female" in that column, but shows rows with "male");<button data-filter-column="1">!a</button> (find text that doesn't contain an "a");<button data-filter-column="1">!"Bruce"</button> (find content that does not exactly match "Bruce")</td></tr>
|
||||
<tr><td class="center"><code>"</code> or <code>=</code></td><td>To exactly match the search query, add a quote, apostrophe or equal sign to the beginning and/or end of the query</td><td><code>abc"</code> or <code>abc=</code> (exactly match "abc");<button data-filter-column="1">John"</button> or <button data-filter-column="1">John=</button> (exactly match "John")</td></tr>
|
||||
<tr><td class="center"><code> && </code> or <code> AND </code></td><td>Logical "and". Filter the column for content that matches text from either side of the operator.</td><td><code>box && bat</code> (matches a column cell that contains both "box" and "bat");<button data-filter-column="1">Br && c</button> (Find text that contains both "br" and "c")</td></tr>
|
||||
<tr><td class="center"><code> - </code> or <code> to </code></td><td>Find a range of values. Make sure there is a space before and after the dash (or the word "to") <small class="bright">(4)</small>.</td><td><button data-filter-column="3">10 - 30</button> or <button data-filter-column="4">10 to 30</button> (match values between 10 and 30)</td></tr>
|
||||
<tr><td class="center"><code>?</code></td><td>Wildcard for a single, non-space character.</td><td><code>J?n</code> (finds "Jan" and "Jun", but not "Joan");<button data-filter-column="2">a?s</button> (finds "Dumass" and "Evans", but not "McMasters")</td></tr>
|
||||
<tr><td class="center"><code>*</code></td><td>Wildcard for zero or more non-space characters.</td><td><code>B*k</code> (matches "Black" and "Book");<button data-filter-column="2">a*s</button> (matches "Dumass", "Evans" and "McMasters")</td></tr>
|
||||
<tr><td class="center"><code>|</code> or <code> OR </code></td><td>Logical "or" (Vertical bar). Filter the column for content that matches text from either side of the bar <small class="bright">(3)</small>.</td><td><code>box|bat</code> (matches a column cell with either "box" or "bat");<button data-filter-column="1">Alex|Peter</button> (Find text that contains either "Alex" or "Peter")</td></tr>
|
||||
<tr><td class="center"><code>~</code></td><td>Perform a fuzzy search (matches sequential characters) by adding a tilde to the beginning of the query (<span class="version">v2.13.3</span>)</td><td><button data-filter-column="1">~bee</button> (matches "Bruce Lee" and "Brenda Dexter"), or <button data-filter-column="1">~piano</button> (matches "Philip Aaron Wong")</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<span class="bright">(1)</span> You cannot combine these operators with each other (except for the wildcards).<br>
|
||||
<span class="bright">(2)</span> The filter order (or precendence) of how searches are checked is as follows: <span class="smallcode">regex (<code>/\d/</code>) <strong>></strong> operators (<code>< <= >= ></code>) <strong>></strong> not match (<code>!</code>) <strong>></strong> exact (<code>"</code>) <strong>></strong> and (<code> AND </code>) <strong>></strong> range (<code> - </code>) <strong>></strong> wild/or (<code>?</code>, <code>*</code> and <code> OR </code>) <strong>></strong> fuzzy (<code>~</code>); so an exact match will override "and", "or" and "range" searches </span> (*NOTE* order changed in <span class="version updated">v2.15</span>, operators prioritized before exact; see <a href="https://github.com/Mottie/tablesorter/issues/465">issue #465</a>; order changed again in <span class="version updated">v2.17.1</span> to move "not match" before "exact" and allow for exact not matches; see <a href="https://github.com/Mottie/tablesorter/issues/628">issue #628</a>)<br>
|
||||
<span class="bright">(3)</span> Logical "or" comparisons can now show exact matches (by default; <span class="version">v2.10.1</span>) or just match cell contents.<br>
|
||||
<span class="bright">(4)</span> In tablesorter <span class="version">v2.10</span>, comparisons can be made in date columns (if properly parsed).
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Options</a></h3>
|
||||
<div>
|
||||
<h4>Filter widget defaults (added inside of tablesorter <code>widgetOptions</code>)</h4>
|
||||
<div>
|
||||
<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 class="options tablesorter-blue" data-sortlist="[[0,0]]">
|
||||
<thead>
|
||||
<tr><th>Option</th><th>Default</th><th class="sorter-false">Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
<tr id="filter-child-rows">
|
||||
<td><span class="permalink">filter_childRows</span></td>
|
||||
<td>false</td>
|
||||
<td>if <code>true</code>, filter includes child row content in the search.</td>
|
||||
</tr>
|
||||
|
||||
<tr id="filter-column-filters">
|
||||
<td><span class="permalink">filter_columnFilters</span></td>
|
||||
<td>true</td>
|
||||
<td>if <code>true</code>, a filter will be added to the top of each table column.</td>
|
||||
</tr>
|
||||
|
||||
<tr id="filter-css-filter">
|
||||
<td><a href="#" class="permalink">filter_cssFilter</a></td>
|
||||
<td>''</td>
|
||||
<td>
|
||||
Extra css class name(s) applied to the table row containing the filters & the inputs within that row (<span class="version updated">v2.15</span>).
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
This option can either be a string (class applied to all filters) or an array (class applied to indexed filter).
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="filter-default-attrib">
|
||||
<td><span class="permalink">filter_defaultAttrib</span></td>
|
||||
<td>'data-value'</td>
|
||||
<td>this option contains the name of the data-attribute which contains the default (starting) filter value.</td>
|
||||
</tr>
|
||||
|
||||
<tr id="filter-defaultfilter">
|
||||
<td><span class="permalink">filter_defaultFilter</span></td>
|
||||
<td>{ }</td>
|
||||
<td>Set a default filter for a set column (<span class="version">v2.17.8</span>).</td>
|
||||
</tr>
|
||||
|
||||
<tr id="filter-excludefilter">
|
||||
<td><span class="permalink">filter_excludeFilter</span></td>
|
||||
<td>{ }</td>
|
||||
<td>Set a column to exclude the chosen filter types (range, exact, notMatch, etc) (<span class="version">v2.17.8</span>).</td>
|
||||
</tr>
|
||||
|
||||
<tr id="filter-external">
|
||||
<td><a href="#" class="permalink">filter_external</a></td>
|
||||
<td>''</td>
|
||||
<td>
|
||||
Set to a jQuery selector (or object) pointing to an input to be used to match the contents of any column (<span class="version">v2.15</span>).
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
Please refer to the updated <a href="example-widget-filter-any-match.html">filter-any-match demo</a> for the limitations of this setting.
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="filter-filtered-row">
|
||||
<td><span class="permalink">filter_filteredRow</span></td>
|
||||
<td>'filtered'</td>
|
||||
<td>Css class name added to filtered rows (rows that are not showing); needed by pager plugin.</td>
|
||||
</tr>
|
||||
|
||||
<tr id="filter-formatter">
|
||||
<td><a href="#" class="permalink">filter_formatter</a></td>
|
||||
<td>null</td>
|
||||
<td>
|
||||
Add custom filter element(s) to the filter row
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
Custom filter elements include:
|
||||
<ul>
|
||||
<li><a href="example-widget-filter-formatter-1.html">jQuery UI widgets</a>: slider, spinner & datepicker</li>
|
||||
<li><a href="example-widget-filter-formatter-2.html">HTML5 elements</a>: range, number input, color selector.</li>
|
||||
<li><a href="example-widget-filter-formatter-select2.html">Select2 plugin</a>.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="filter-functions">
|
||||
<td><a href="#" class="permalink">filter_functions</a></td>
|
||||
<td>null</td>
|
||||
<td>
|
||||
Add custom filter functions using this option.
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
See the <a href="example-widget-filter-custom.html">custom filter widget functions demo</a> for more details and numerous examples.
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="filter-hide-empty">
|
||||
<td><span class="permalink">filter_hideEmpty</span></td>
|
||||
<td>true</td>
|
||||
<td>Hide filter row when the table is empty (<span class="version">v2.15</span>).</td>
|
||||
</tr>
|
||||
|
||||
<tr id="filter-hide-filters">
|
||||
<td><span class="permalink">filter_hideFilters</span></td>
|
||||
<td>false</td>
|
||||
<td>If <code>true</code>, filters are hidden initially, but can be revealed by hovering over the filter row, or giving a filter input focus (tabbing down the page).</td>
|
||||
</tr>
|
||||
|
||||
<tr id="filter-ignore-case">
|
||||
<td><span class="permalink">filter_ignoreCase</span></td>
|
||||
<td>true</td>
|
||||
<td>If <code>true</code>, all searches are case-insensitive.</td>
|
||||
</tr>
|
||||
|
||||
<tr id="filter-live-search">
|
||||
<td><a href="#" class="permalink">filter_liveSearch</a></td>
|
||||
<td>true</td>
|
||||
<td>
|
||||
If <code>true</code>, search column content while the user types (with a short delay).
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
<ul>
|
||||
<li>If <code>false</code>, the user must press enter to start the search.</li>
|
||||
<li>If set to a number, when the length of the input text reaches this minimum length, a search will initiate.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="filter-only-avail">
|
||||
<td><span class="permalink">filter_onlyAvail</span></td>
|
||||
<td>'filter-onlyAvail'</td>
|
||||
<td>A header with a select dropdown & this class name set, will only show available (visible) options within that drop down.</td>
|
||||
</tr>
|
||||
|
||||
<tr id="filter-placeholder">
|
||||
<td><span class="permalink">filter_placeholder</span></td>
|
||||
<td>{ search : '', select : '' }</td>
|
||||
<td>Default placeholder text (overridden by any header "data-placeholder" setting; <span class="version">v2.16</span>).</td>
|
||||
</tr>
|
||||
|
||||
<tr id="filter-reset">
|
||||
<td><span class="permalink">filter_reset</span></td>
|
||||
<td>null</td>
|
||||
<td>jQuery selector string of an element used to reset the filters (v2.4; <span class="version updated">v2.16.0</span>).</td>
|
||||
</tr>
|
||||
|
||||
<tr id="filter-save-filters">
|
||||
<td><span class="permalink">filter_saveFilters</span></td>
|
||||
<td>false</td>
|
||||
<td>Uses the <code>$.tablesorter.storage</code> utility to save the most recent filters.</td>
|
||||
</tr>
|
||||
|
||||
<tr id="filter-search-delay">
|
||||
<td><span class="permalink">filter_searchDelay</span></td>
|
||||
<td>300</td>
|
||||
<td>Typing delay in milliseconds before starting a search.</td>
|
||||
</tr>
|
||||
|
||||
<tr id="filter-search-filtered">
|
||||
<td><span class="permalink">filter_searchFiltered</span></td>
|
||||
<td>true</td>
|
||||
<td>Allow searching through already filtered rows in special circumstances; will speed up searching in large tables if <code>true</code>.</td>
|
||||
</tr>
|
||||
|
||||
<tr id="filter-select-source">
|
||||
<td><span class="permalink">filter_selectSource</span></td>
|
||||
<td>null</td>
|
||||
<td>Include a function to return an array of values to be added to the column filter select (<span class="version">v2.16.0</span>).</td>
|
||||
</tr>
|
||||
|
||||
<tr id="filter-select-source-separator">
|
||||
<td><span class="permalink">filter_selectSourceSeparator</span></td>
|
||||
<td>null</td>
|
||||
<td><code>filter_selectSource</code> array text left of the separator is added to the option value, right into the option text.</td>
|
||||
</tr>
|
||||
|
||||
<tr id="filter-serverside-filtering">
|
||||
<td><span class="permalink">filter_serversideFiltering</span></td>
|
||||
<td>false</td>
|
||||
<td>If <code>true</code>, filter will be done server-side. The client-side filtering will be disabled, but the ui and events will still be used.</td>
|
||||
</tr>
|
||||
|
||||
<tr id="filter-starts-with">
|
||||
<td><span class="permalink">filter_startsWith</span></td>
|
||||
<td>false</td>
|
||||
<td>If <code>true</code>, filter start from the beginning of the cell contents.</td>
|
||||
</tr>
|
||||
|
||||
<tr id="filter-use-parsed-data">
|
||||
<td><span class="permalink">filter_useParsedData</span></td>
|
||||
<td>false</td>
|
||||
<td>Filter all data using parsed content.</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr><th colspan="3">Removed options</th></tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
|
||||
<tr id="filter-any-match">
|
||||
<td><span class="permalink alert">filter_anyMatch</span></td>
|
||||
<td>null</td>
|
||||
<td>jQuery selector string (or jQuery object) of external anyMatch filter (<span class="label alert">removed</span> in v2.15; please see <a href="example-widget-filter-any-match.html">the demo</a> for more details)</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Classes</a></h3>
|
||||
<div>
|
||||
Class names that can be added to the <code>th</code> header cells:
|
||||
<ul>
|
||||
<li><code>filter-false</code> - disable the filter for a specific header column.</li>
|
||||
<li><code>filter-select</code> - build a default select box for a column (shows unique column content). See the <a href="example-widget-filter-custom.html">custom filter widget</a> demo for an example.</li>
|
||||
<li><code>filter-select-nosort</code> - when a default select box is built, this option prevents the sorting of select options leaving them in their original table order (<span class="version">v2.16.3</span>).</li>
|
||||
<li><code>filter-match</code> - applies to "filter-select" columns and columns where the user can use the logical "or" search. Makes the filter/select match the column contents instead of exactly matching.</li>
|
||||
<li><code>filter-parsed</code> - set a column to filter through parsed data instead of the actual table cell content.</li>
|
||||
<li><code>filter-onlyAvail</code>
|
||||
<ul>
|
||||
<li>Show only available (visible) options within a default select box.</li>
|
||||
<li>This class name is set by the <code>filter_onlyAvail</code> option.</li>
|
||||
<li>See the <a href="example-widget-filter-custom.html">custom filter widget</a> demo "Discount" column for an example.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Methods</a></h3>
|
||||
<div>
|
||||
<h3>Set Filter Placeholder Text</h3>
|
||||
<blockquote>
|
||||
Set a <code>data-placeholder</code> attribute on the associated table header with your desired placeholder text
|
||||
<pre class="prettyprint lang-html"><th data-placeholder="Enter Something">Name</th></pre>
|
||||
or, set the header cell's jQuery data
|
||||
<pre class="prettyprint lang-javascript">$('.tablesorter th:eq(0)').data('placeholder', 'Search for...')</pre>
|
||||
</blockquote>
|
||||
|
||||
<h3>filterReset</h3>
|
||||
<blockquote>
|
||||
Use the <code>filterReset</code> method to reset (clear) all of the current filters using this method
|
||||
<pre class="prettyprint lang-javascript">$('table').trigger('filterReset');</pre>
|
||||
</blockquote>
|
||||
|
||||
<h3>search</h3>
|
||||
<blockquote>
|
||||
With this method, you can pass an array of filter values:
|
||||
<pre class="prettyprint lang-javascript">// apply "2?%" filter to the fifth column (zero-based index)
|
||||
var columns = [];
|
||||
columns[5] = '2?%';
|
||||
// or define the array this way var columns = [ '', '', '', '', '', '2?%' ]
|
||||
$('table').trigger('search', [ columns ]);</pre>
|
||||
or, just pass <code>false</code> to refresh the current search:
|
||||
<pre class="prettyprint lang-javascript">$('table').trigger('search', false);</pre>
|
||||
* Note: using this search method will update the contents of the filters within the filter row.<br>
|
||||
<br>
|
||||
In <span class="version updated">v2.15</span>, one additional parameter can be added to the array to perform an "any-match" of the table; <span class="label warning">Warning!</span> please note that if no external input (with a <code>data-column="all"</code> is attached using <a href="index.html#function-bindsearch"><code>bindSearch</code></a> function) is visible, the user will not know that a filter has been applied. <pre class="prettyprint lang-js">// in a table with 4 columns; set the 5th parameter to any-match
|
||||
$('table').trigger( 'search', [['', '', '', '', 'orange']] ); // find orange in any column</pre>
|
||||
</blockquote>
|
||||
|
||||
<h3>Get current filters</h3>
|
||||
<blockquote>
|
||||
Get an array of the currently applied filters (<span class="version">v2.9</span>).
|
||||
<pre class="prettyprint lang-javascript">$.tablesorter.getFilters( $('table') ); // or $('table.hasFilters')</pre>
|
||||
This method returns an array of filter values or <code>false</code> if the selected table does not contain a filter row.<br>
|
||||
<br>
|
||||
Internally, the get filters functions returns the filters stored within this table data <code>$('table').data('lastSearch')</code>, unless an additional parameter of <code>true</code> is passed to the function:
|
||||
<pre class="prettyprint lang-javascript">$.tablesorter.getFilters( $('table'), true ); // get current input values instead of data stored filters</pre>
|
||||
As of <span class="version updated">v2.15</span>, if an external "any-match" filter (see <code>filter_external</code> widget option) is included, one additional array parameter will be returned in the filter - the value of the any match search.
|
||||
<pre class="prettyprint lang-js">// in a table with six columns, this function will return an array with seven
|
||||
// parameters; something like this: [ '', '', '', '', '', '', '11' ],
|
||||
// where the "11" will be obtained from the "any-match" input
|
||||
var filters = $.tablesorter.getFilters( $('table') );</pre>
|
||||
</blockquote>
|
||||
|
||||
<h3>Set current filters</h3>
|
||||
<blockquote>
|
||||
Set the values of the actual filters using this method; include a <code>true</code> boolean to actually apply the search (<span class="version">v2.9</span>).
|
||||
<pre class="prettyprint lang-javascript">// update filters, but don't apply the search
|
||||
$.tablesorter.setFilters( $('table'), [ '', '', '', '', '', '2?%' ] );
|
||||
|
||||
// update filters, AND apply the search
|
||||
$.tablesorter.setFilters( $('table'), [ '', '', '', '', '', '2?%' ], true );</pre>
|
||||
This method returns <code>true</code> if the filters were sucessfully applied, or <code>false</code> if the table does have a filter row.<br>
|
||||
<br>
|
||||
As of <span class="version updated">v2.15</span>, if an external "any-match" filter (see <code>filter_external</code> widget option) is included, add an additional array parameter to set that filter; so if a table has six columns, add the any-match search as the seventh value.
|
||||
<pre class="prettyprint lang-js">// in a table with 6 columns, the 7th filter will apply
|
||||
// to the any-match filter & match any table column with "11"
|
||||
$.tablesorter.setFilters( $('table'), [ '', '', '', '', '', '', '11' ], true );</pre>
|
||||
</blockquote>
|
||||
|
||||
<h3>Bind External filter</h3>
|
||||
<blockquote>
|
||||
Use this method to bind external search filters; include a data-attribute <code>data-column</code> with the column index to target, or use <code>data-column="all"</code> to preform an "any-match" search (<span class="version updated">v2.15</span>). If no <code>data-column</code> is added to the input, the input will be ignored.
|
||||
<pre class="prettyprint lang-html"><!-- will perform an "any-match" type of search (matches any column) -->
|
||||
<input type="search" class="search" data-column="all">
|
||||
<!-- will only search the first column (zero-based index) -->
|
||||
<input type="search" class="search" data-column="0"></pre>
|
||||
<pre class="prettyprint lang-javascript">// Target the $('.search') input using built in functioning
|
||||
// this binds to the search using "search" and "keyup" and allows using filter_liveSearch
|
||||
// or delayed search & pressing escape to cancel the search
|
||||
// pass an optional third parameter (false boolean) to force the inputs to update
|
||||
// this allows changing the data-column for an input dynamically
|
||||
$.tablesorter.filter.bindSearch( $table, $('.search'), false );</pre>
|
||||
If you don't care about the enhanced search filter, then bind to both the "keyup" and "search" events
|
||||
<pre class="prettyprint lang-javascript">// Basic search binding, alternate to the above
|
||||
// bind to search - pressing enter and clicking on "x" to clear (Webkit)
|
||||
// keyup allows dynamic searching
|
||||
$(".search").bind('search keyup', function (e) {
|
||||
$('table').trigger('search', [ [this.value] ]);
|
||||
});
|
||||
</pre></blockquote>
|
||||
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Events</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li><code>filterEnd</code> - Event triggered when the filter widget has finished processing the search.</li>
|
||||
<li><code>filterInit</code> - Event triggered when the filter widget has finished initializing.</li>
|
||||
<li><code>filterStart</code> - Event triggered when the filter widget has started processing the search.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Changes</a></h3>
|
||||
<div class="inner">
|
||||
Moved to the wiki pages - <a href="https://github.com/Mottie/tablesorter/wiki/Changes">filter change log</a>.
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Localization</a></h3>
|
||||
<div class="inner">
|
||||
You can now change the language of the searches used within the filter widget. For example, to change the localization to French, do the following:
|
||||
<pre class="prettyprint lang-js">// add French support
|
||||
$.extend($.tablesorter.language, {
|
||||
to : 'à',
|
||||
or : 'ou',
|
||||
and : 'et'
|
||||
});</pre>If you want to support multiple languages, separate the language variables with a vertical bar (<code>|</code>, <kbd>Shift</kbd> + <kbd>\</kbd>):
|
||||
<pre class="prettyprint lang-js">// add French & Spanish support
|
||||
$.extend($.tablesorter.language, {
|
||||
to : 'à|a',
|
||||
or : 'ou|o',
|
||||
and : 'et|y'
|
||||
});</pre><span class="label label-info">Note</span> These changes still require the user to enter spaces in the filter to perform the search, e.g. <code>1 à 10</code> (shows rows with numbers between 1 and 10).
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<button type="button" class="toggle fsw">Toggle</button> filter_startsWith : <span id="start">false</span> (if true, search from beginning of cell content only)<br>
|
||||
<button type="button" class="toggle fic">Toggle</button> filter_ignoreCase : <span id="case">true</span> (if false, the search will be case sensitive)<br>
|
||||
<button type="button" class="toggle ffm">Toggle</button> filter-match (if class name added to the "First Name" column, all "or" searches will only match the content; Search <button data-filter-column="1">alex|br*|c</button> in the First Name column (<span class="version">2.10.1</span>).
|
||||
<hr>
|
||||
|
||||
<div id="demo">Search <button type="button" data-filter-column="5" data-filter-text="2?%">2?%</button> in the Discount column<br>
|
||||
<button type="button" class="reset">Reset</button> <!-- targeted by the "filter_reset" option -->
|
||||
|
||||
<table id="table" class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<!-- you can also add a placeholder using script; $('.tablesorter th:eq(0)').data('placeholder', 'hello') -->
|
||||
<th data-placeholder="" class="filter-false">Rank</th>
|
||||
<th data-placeholder="Try B*{space} or alex|br*|c" class="filter-match">First Name (<span></span> filter-match )</th>
|
||||
<th data-placeholder="Try <d">Last Name</th>
|
||||
<th data-placeholder="Try >=33">Age</th>
|
||||
<th data-placeholder="Try <9.99">Total</th>
|
||||
<th data-placeholder="Try 2?%">Discount</th> <!-- add class="filter-false" to disable the filter in this column -->
|
||||
<th data-placeholder="Try /20[^0]\d/ or >1/1/2010">Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>1</td><td>Philip Aaron Wong</td><td>Johnson Sr Esq</td><td>25</td><td>$5.95</td><td>22%</td><td>Jun 26, 2004 7:22 AM</td></tr>
|
||||
<tr><td>11</td><td>Aaron</td><td>Hibert</td><td>12</td><td>$2.99</td><td>5%</td><td>Aug 21, 2009 12:21 PM</td></tr>
|
||||
<tr><td>12</td><td>Brandon Clark</td><td>Henry Jr</td><td>51</td><td>$42.29</td><td>18%</td><td>Oct 13, 2000 1:15 PM</td></tr>
|
||||
<tr><td>111</td><td>Peter</td><td>Parker</td><td>28</td><td>$9.99</td><td>20%</td><td>Jul 6, 2006 8:14 AM</td></tr>
|
||||
<tr><td>21</td><td>John</td><td>Hood</td><td>33</td><td>$19.99</td><td>25%</td><td>Dec 10, 2002 5:14 AM</td></tr>
|
||||
<tr><td>013</td><td>Clark</td><td>Kent Sr.</td><td>18</td><td>$15.89</td><td>44%</td><td>Jan 12, 2003 11:14 AM</td></tr>
|
||||
<tr><td>005</td><td>Bruce</td><td>Almighty Esq</td><td>45</td><td>$153.19</td><td>44%</td><td>Jan 18, 2021 9:12 AM</td></tr>
|
||||
<tr><td>10</td><td>Alex</td><td>Dumass</td><td>13</td><td>$5.29</td><td>4%</td><td>Jan 8, 2012 5:11 PM</td></tr>
|
||||
<tr><td>16</td><td>Jim</td><td>Franco</td><td>24</td><td>$14.19</td><td>14%</td><td>Jan 14, 2004 11:23 AM</td></tr>
|
||||
<tr><td>166</td><td>Bruce Lee</td><td>Evans</td><td>22</td><td>$13.19</td><td>11%</td><td>Jan 18, 2007 9:12 AM</td></tr>
|
||||
<tr><td>100</td><td>Brenda Dexter</td><td>McMasters</td><td>18</td><td>$55.20</td><td>15%</td><td>Feb 12, 2010 7:23 PM</td></tr>
|
||||
<tr><td>55</td><td>Dennis</td><td>Bronson</td><td>65</td><td>$123.00</td><td>32%</td><td>Jan 20, 2001 1:12 PM</td></tr>
|
||||
<tr><td>9</td><td>Martha</td><td>delFuego</td><td>25</td><td>$22.09</td><td>17%</td><td>Jun 11, 2011 10:55 AM</td></tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Page Header</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><!-- blue theme stylesheet -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<!-- tablesorter plugin -->
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<!-- tablesorter widget file - loaded after the plugin -->
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script></pre>
|
||||
</div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
|
||||
<h1>CSS</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-css">/* This css is already contained within each theme file */
|
||||
/* filter row */
|
||||
.tablesorter-filter-row td {
|
||||
background: #eee;
|
||||
line-height: normal;
|
||||
text-align: center; /* center the input */
|
||||
-webkit-transition: line-height 0.1s ease;
|
||||
-moz-transition: line-height 0.1s ease;
|
||||
-o-transition: line-height 0.1s ease;
|
||||
transition: line-height 0.1s ease;
|
||||
}
|
||||
/* optional disabled input styling */
|
||||
.tablesorter-filter-row .disabled {
|
||||
opacity: 0.5;
|
||||
filter: alpha(opacity=50);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* hidden filter row */
|
||||
.tablesorter-filter-row.hideme td {
|
||||
/*** *********************************************** ***/
|
||||
/*** change this padding to modify the thickness ***/
|
||||
/*** of the closed filter row (height = padding x 2) ***/
|
||||
padding: 2px;
|
||||
/*** *********************************************** ***/
|
||||
margin: 0;
|
||||
line-height: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.tablesorter-filter-row.hideme .tablesorter-filter {
|
||||
height: 1px;
|
||||
min-height: 0;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
/* don't use visibility: hidden because it disables tabbing */
|
||||
opacity: 0;
|
||||
filter: alpha(opacity=0);
|
||||
}
|
||||
|
||||
/* filters */
|
||||
.tablesorter-filter {
|
||||
width: 95%;
|
||||
height: inherit;
|
||||
margin: 4px;
|
||||
padding: 4px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #bbb;
|
||||
color: #333;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
-webkit-transition: height 0.1s ease;
|
||||
-moz-transition: height 0.1s ease;
|
||||
-o-transition: height 0.1s ease;
|
||||
transition: height 0.1s ease;
|
||||
}</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-widget-filter-any-match.html">jQuery Any Match filter widget ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,194 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Grouping + Filter widget with child rows</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
|
||||
<script src="js/jquery-ui-latest.min.js"></script>
|
||||
<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 id="css">/* extra css needed because there are 5 child rows */
|
||||
/* no zebra striping */
|
||||
.tablesorter-blue tbody > tr:hover + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow > td,
|
||||
.tablesorter-blue tbody > tr:hover + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow > td,
|
||||
.tablesorter-blue tbody > tr:hover + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow > td,
|
||||
/* with zebra striping */
|
||||
.tablesorter-blue tbody > tr.even:hover + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow > td
|
||||
.tablesorter-blue tbody > tr.even:hover + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow > td
|
||||
.tablesorter-blue tbody > tr.even:hover + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow > td,
|
||||
.tablesorter-blue tbody > tr.even:hover + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow > td {
|
||||
background: #d9d9d9;
|
||||
}
|
||||
.tablesorter-blue tbody > tr.odd:hover + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow > td,
|
||||
.tablesorter-blue tbody > tr.odd:hover + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow > td,
|
||||
.tablesorter-blue tbody > tr.odd:hover + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow > td {
|
||||
background: #bfbfbf;
|
||||
}
|
||||
|
||||
/* Grouping widget css */
|
||||
tr.group-header td {
|
||||
background: #eee;
|
||||
}
|
||||
.group-name {
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
}
|
||||
.group-count {
|
||||
color: #999;
|
||||
}
|
||||
.group-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
.group-header, .group-header td {
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
}
|
||||
/* collapsed arrow */
|
||||
tr.group-header td i {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 4px solid transparent;
|
||||
border-bottom: 4px solid #888;
|
||||
border-right: 4px solid #888;
|
||||
border-left: 4px solid transparent;
|
||||
margin-right: 7px;
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
}
|
||||
tr.group-header.collapsed td i {
|
||||
border-top: 5px solid transparent;
|
||||
border-bottom: 5px solid transparent;
|
||||
border-left: 5px solid #888;
|
||||
border-right: 0;
|
||||
margin-right: 10px;
|
||||
}</style>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<!-- grouping widget -->
|
||||
<script src="../js/parsers/parser-input-select.js"></script>
|
||||
<script src="../js/widgets/widget-grouping.js"></script>
|
||||
|
||||
<script id="js">$(function(){
|
||||
|
||||
$("table").tablesorter({
|
||||
theme : 'blue',
|
||||
sortList : [[1,0]],
|
||||
widgets: ['group', 'filter'],
|
||||
widgetOptions: {
|
||||
group_collapsible : true,
|
||||
group_collapsed : false,
|
||||
group_count : false,
|
||||
filter_childRows : true,
|
||||
}
|
||||
});
|
||||
|
||||
$('.tablesorter-childRow td').hide();
|
||||
|
||||
$('.tablesorter').delegate('.toggle', 'click' ,function(){
|
||||
$(this).closest('tr').nextUntil('tr:not(.tablesorter-childRow)').find('td').toggle();
|
||||
return false;
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body id="group">
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Grouping + Filter widget with child rows</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>As of <span class="version updated">v2.15.12</span>,
|
||||
<ul>
|
||||
<li>Parents of child rows now have a <code>tablesorter-hasChildRow</code> class name added.</li>
|
||||
<li><span class="label label-info">NOTE!</span> A new css definition was added to every default theme; the "filtered" class name (set by the <code>filter_filteredRow</code> widgetOption) has been added to properly hide/show child rows when filtered.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="Customer group-false"></th>
|
||||
<th class="group-word">Order</th>
|
||||
<th class="group-false">Status</th>
|
||||
<th class="group-false">Priority</th>
|
||||
<th class="group-false">Price</th>
|
||||
</tr>
|
||||
</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 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>
|
||||
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">Cycle Clearance</a></td><td>FRANCE</td><td>25%</td><td></td><td></td></tr>
|
||||
<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 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 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 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 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>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h1>Script</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-js"></pre>
|
||||
</div>
|
||||
|
||||
<h1>CSS</h1>
|
||||
<div id="css">
|
||||
<pre class="prettyprint lang-css"></pre>
|
||||
</div>
|
||||
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,576 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Grouping Rows Widget</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
|
||||
<script src="js/jquery-ui-latest.min.js"></script>
|
||||
<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>
|
||||
/* remove messed up row hovering on this info table */
|
||||
table.classes tr:hover td {
|
||||
background: #fff !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style id="css">tr.group-header td {
|
||||
background: #eee;
|
||||
}
|
||||
.group-name {
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
}
|
||||
.group-count {
|
||||
color: #999;
|
||||
}
|
||||
.group-hidden {
|
||||
display: none;
|
||||
}
|
||||
.group-header, .group-header td {
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
}
|
||||
/* collapsed arrow */
|
||||
tr.group-header td i {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 4px solid transparent;
|
||||
border-bottom: 4px solid #888;
|
||||
border-right: 4px solid #888;
|
||||
border-left: 4px solid transparent;
|
||||
margin-right: 7px;
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
}
|
||||
tr.group-header.collapsed td i {
|
||||
border-top: 5px solid transparent;
|
||||
border-bottom: 5px solid transparent;
|
||||
border-left: 5px solid #888;
|
||||
border-right: 0;
|
||||
margin-right: 10px;
|
||||
}</style>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link href="../css/theme.blue.css" rel="stylesheet">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<!-- grouping widget -->
|
||||
<script src="../js/parsers/parser-input-select.js"></script>
|
||||
<script src="../js/widgets/widget-grouping.js"></script>
|
||||
|
||||
<script>
|
||||
$(function(){
|
||||
$('.options').tablesorter({
|
||||
widgets: [ "stickyHeaders" ]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<script id="js">$(function(){
|
||||
|
||||
$("#groups").tablesorter({
|
||||
theme : "blue",
|
||||
headers: {
|
||||
0: { sorter: "checkbox" },
|
||||
3: { sorter: "select" },
|
||||
6: { sorter: "inputs" }
|
||||
},
|
||||
widgets: [ "group", "columns", "zebra" ],
|
||||
widgetOptions: {
|
||||
group_collapsible : true, // make the group header clickable and collapse the rows below it.
|
||||
group_collapsed : false, // start with all groups collapsed (if true)
|
||||
group_saveGroups : true, // remember collapsed groups
|
||||
group_saveReset : '.group_reset', // element to clear saved collapsed groups
|
||||
group_count : " ({num})", // if not false, the "{num}" string is replaced with the number of rows in the group
|
||||
|
||||
// change these default date names based on your language preferences
|
||||
group_months : [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ],
|
||||
group_week : [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ],
|
||||
group_time : [ "AM", "PM" ],
|
||||
|
||||
// this function is used when "group-date" is set to create the date string
|
||||
// you can just return date, date.toLocaleString(), date.toLocaleDateString() or d.toLocaleTimeString()
|
||||
// reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#Conversion_getter
|
||||
group_dateString : function(date) {
|
||||
return date.toLocaleString();
|
||||
},
|
||||
|
||||
group_formatter : function(txt, col, table, c, wo) {
|
||||
// txt = current text; col = current column
|
||||
// table = current table (DOM); c = table.config; wo = table.config.widgetOptions
|
||||
if (col === 7 && txt.indexOf("GMT") > 0) {
|
||||
// remove "GMT-0000 (Xxxx Standard Time)" from the end of the full date
|
||||
txt = txt.substring(0, txt.indexOf("GMT"));
|
||||
}
|
||||
// If there are empty cells, name the group "Empty"
|
||||
return txt === "" ? "Empty" : txt;
|
||||
},
|
||||
|
||||
group_callback : function($cell, $rows, column, table){
|
||||
// callback allowing modification of the group header labels
|
||||
// $cell = current table cell (containing group header cells ".group-name" & ".group-count"
|
||||
// $rows = all of the table rows for the current group; table = current table (DOM)
|
||||
// column = current column being sorted/grouped
|
||||
if (column === 2) {
|
||||
var subtotal = 0;
|
||||
$rows.each(function(){
|
||||
subtotal += parseFloat( $(this).find("td").eq(column).text() );
|
||||
});
|
||||
$cell.find(".group-count").append("; subtotal: " + subtotal );
|
||||
}
|
||||
},
|
||||
// event triggered on the table when the grouping widget has finished work
|
||||
group_complete : "groupingComplete"
|
||||
}
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body id="group">
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Grouping Rows Widget</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<p></p>
|
||||
<br>
|
||||
|
||||
<div id="root" class="accordion">
|
||||
|
||||
<h3><a href="#">Notes</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>This widget will <strong>only work</strong> in tablesorter version 2.8+ and jQuery version 1.7+.</li>
|
||||
<li>Please do not use this widget in very large tables (it might be really slow) <del>or when your table includes multiple tbodies</del>.</li>
|
||||
<li>In <span class="version">v2.15.6</span>, added <code>group_saveGroups</code> & <code>group_saveReset</code> options. More details are included in the "Options" section.</li>
|
||||
<li>In <span class="version">v2.14</span>, added <code>group_dateString</code> option. More details are included in the "Options" section.</li>
|
||||
<li>In <span class="version">v2.13</span>, added <code>group_separator</code> option & <code>group-separator-#</code> header class name. To see this in action, check out the <a href="example-parsers-file-type.html">file type parser demo</a>.</li>
|
||||
<li>In <span class="version">v2.12</span>, added <code>group_callback</code> & <code>group_complete</code> options. See options section below for details.</li>
|
||||
<li>In <span class="version">v2.11</span>:
|
||||
<ul>
|
||||
<li>The grouping widget now works across multiple tbodies.</li>
|
||||
<li>Added <code>group-false</code> header option which disables the grouping widget for a specific column.</li>
|
||||
<li>Added the <code>group_collapsed</code> option - get more details in the options block below.</li>
|
||||
<li>You can now toggle <strong>all</strong> group rows by holding down the <kbd>Shift</kbd> key while clicking on a group header.</li>
|
||||
<li>This widget now works properly with the pager addon (pager addon updated).</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Clicking on any of the sortable header cells will cause the column below it to sort and add a group header.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Options</a></h3>
|
||||
<div>
|
||||
<h4>Group widget default options (added inside of tablesorter <code>widgetOptions</code>)</h4>
|
||||
<div class="tip">
|
||||
<span class="label label-info">TIP!</span> Click on the link in the option 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="tablesorter-blue options">
|
||||
<thead>
|
||||
<tr><th>Option</th><th>Default</th><th class="sorter-false">Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr id="group_collapsible">
|
||||
<td><span class="permalink">group_collapsible</span></td>
|
||||
<td><code>true</code></td>
|
||||
<td>
|
||||
when <code>true</code>, the group headers become clickable and collapse the rows below it.
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="group_collapsed">
|
||||
<td><span class="permalink">group_collapsed</span></td>
|
||||
<td><code>false</code></td>
|
||||
<td>
|
||||
when <code>true</code> and <code>group_collapsible</code> is also <code>true</code>, all groups will start collapsed (<span class="version">v2.11</span>)
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="group_savegroups">
|
||||
<td><a href="#" class="permalink">group_saveGroups</a></td>
|
||||
<td><code>true</code></td>
|
||||
<td>Remember collapsed groups (<span class="version">v2.15.6</span>)
|
||||
<div class="collapsible">
|
||||
<ul>
|
||||
<li>This option saves the currently collapsed groups, using the group name.</li>
|
||||
<li>Collapsed groups are saved by column and group class name, so that the groups can be dynamically changed and still remember the correct collapsed groups. Try changing the group names (using the sliders) in the demo below & then collapsing some groups several times; go back to previous groups and it will remember which groups were collapsed.</li>
|
||||
<li>Because the group name is saved, groups with a number range (e.g. "group-number-10"; see the "Numeric" column below) will show a different range depending on sort direction; in this situation, each sort direction is saved independently.</li>
|
||||
<li>This option requires the <code>$.tablesorter.storage</code> utility contained within the <code>jquery.tablesorter.widgets.js</code> file.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="group_savereset">
|
||||
<td><a href="#" class="permalink">group_saveReset</a></td>
|
||||
<td><code>null</code></td>
|
||||
<td>Element used to clear saved collapsed groups (<span class="version">v2.15.6</span>)
|
||||
<div class="collapsible">
|
||||
<ul>
|
||||
<li>This option should contain a jQuery selector string or jQuery object pointing to an element to be used to reset (clear) the list of collapsed groups.</li>
|
||||
<li>You can also clear the saved collapsed groups by calling this function: <code>$.tablesorter.grouping.clearSavedGroups(table);</code> (table would be either the table DOM or table jQuery object).</li>
|
||||
<li>This option requires the <code>$.tablesorter.storage</code> utility contained within the <code>jquery.tablesorter.widgets.js</code> file.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="group_count">
|
||||
<td><span class="permalink">group_count</span></td>
|
||||
<td><code>" ({num})"</code></td>
|
||||
<td>
|
||||
Allows you to add custom formatting, or remove, the group count within the group header. Set it to <code>false</code> or an empty string to remove the count.
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="group_separator">
|
||||
<td><a href="#" class="permalink">group_separator</a></td>
|
||||
<td><code>"-"</code></td>
|
||||
<td>
|
||||
When the <code>group-separator</code> class name is added, it uses the setting from this option to split the table cell content for grouping <span class="version">v2.13</span>.<br>
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
If your content has mixed separators (e.g. <code>images/cats/burger-time.jpg</code>), you can set this option to use a regular expression:
|
||||
<pre class="prettyprint lang-js">// the above example becomes: ["images", "cats", "burger-time", "jpg"]
|
||||
group_separator : /[/.]/</pre>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="group_formatter">
|
||||
<td><a href="#" class="permalink">group_formatter</a></td>
|
||||
<td><code>null</code></td>
|
||||
<td>
|
||||
Use this function to modify the group header text before it gets applied.
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
It provides various parameters (<code>txt, col, table, c, wo</code>) to make it work for any of the table columns and data. See the comments in the example below for more details.
|
||||
<ul>
|
||||
<li><code>txt</code> - current text of the group header.</li>
|
||||
<li><code>col</code> - current table column being grouped (zero-based index).</li>
|
||||
<li><code>table</code> - current table (DOM).</li>
|
||||
<li><code>c</code> - table configuration data from <code>table.config</code>.</li>
|
||||
<li><code>wo</code> - table widget options from <code>table.config.widgetOptions</code>.</li>
|
||||
</ul>
|
||||
<pre class="prettyprint lang-js">group_formatter : function(txt, col, table, c, wo) {
|
||||
// If there are empty cells, name the group "Empty"
|
||||
return txt === "" ? "Empty" : txt;
|
||||
}</pre>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="group_callback">
|
||||
<td><a href="#" class="permalink">group_callback</a></td>
|
||||
<td><code>null</code></td>
|
||||
<td>
|
||||
Use this function to further modify the group header to include more information (i.e. group totals). Parameters include (<code>$cell, $rows, column, table</code>). See the example below for more details <span class="version">v2.12</span>.
|
||||
<div class="collapsible">
|
||||
<ul>
|
||||
<li><code>$cell</code> - current group header table cell (jQuery object).</li>
|
||||
<li><code>$rows</code> - current group rows (jQuery object).</li>
|
||||
<li><code>column</code> - current table column being grouped (zero-based index).</li>
|
||||
<li><code>table</code> - current table (DOM).</li>
|
||||
</ul>
|
||||
<pre class="prettyprint lang-js">group_callback : function($cell, $rows, column, table){
|
||||
$cell.find('.group-name').append(' group'); // adds "group" to the end of the group name
|
||||
}</pre>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="group_complete">
|
||||
<td><a href="#" class="permalink">group_complete</a></td>
|
||||
<td><code>"groupingComplete"</code></td>
|
||||
<td>
|
||||
Event triggered on the table when the grouping widget has finished work <span class="version">v2.12</span>.
|
||||
<div class="collapsible">
|
||||
<pre class="prettyprint lang-js">$('table').on('groupingComplete', function(){
|
||||
// always hide empty groups ("Empty" can be added by the group_formatter function)
|
||||
$(this).find('.group-header:contains("Empty")').trigger('toggleGroup');
|
||||
});</pre>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="group_months">
|
||||
<td>
|
||||
<a href="#" class="permalink">group_months</a><br>
|
||||
group_week<br>
|
||||
group_time
|
||||
</td>
|
||||
<td>(see description)</td>
|
||||
<td>
|
||||
Name arrays included so that the language of the date groups can be modified easily. Defaults (English):
|
||||
<ul>
|
||||
<li>group_months: (<code>[ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ]</code>) - Month names.</li>
|
||||
<li>group_week: (<code>[ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ]</code>) - Named days of the week.</li>
|
||||
<li>group_time: (<code>[ "AM", "PM" ]</code>) - Time of day.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="group_datestring">
|
||||
<td><a href="#" class="permalink">group_dateString</a></td>
|
||||
<td>(see description)</td>
|
||||
<td>
|
||||
When the <code>"group-date"</code> class name is set on a column, this function is used to format the date string. This is the default function:
|
||||
<div class="collapsible">
|
||||
<pre class="prettyprint lang-js">// you can just return date, date.toLocaleString(), date.toLocaleDateString() or d.toLocaleTimeString()
|
||||
group_dateString : function(date) {
|
||||
return date.toLocaleString();
|
||||
}</pre>
|
||||
Other functions that can be used are <code>date</code> (alone), <code>date.toLocaleString()</code>, <code>date.toLocaleDateString()</code> or <code>d.toLocaleTimeString()</code>. See <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#Conversion_getter">this reference</a> for more details.
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Header Class Names</a></h3>
|
||||
<div>
|
||||
<h4>Group header class names (when changing the grouping, notice that the <em>sort doesn't change, just the position and names of the group headers</em>):</h4>
|
||||
<table class="tablesorter-blue classes">
|
||||
<thead>
|
||||
<tr><th>Group type</th><th>Group class name</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Disable</td>
|
||||
<td><code>"group-false"</code></td>
|
||||
<td>Disable grouping of rows for a column (<span class="version">v2.11</span>).</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td rowspan="4">Text</td>
|
||||
<td><code>"group-word"</code></td>
|
||||
<td>Group the rows using the first word it finds in the column's parsed data (same as <code>"group-word-1"</code>).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>"group-word-n"</code><span class="remark">*</span></td>
|
||||
<td>Group the rows using the nth word in the column (<code>"n"</code> can be any number).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>"group-letter"</code></td>
|
||||
<td>Group the rows using the first letter it finds in the column's parsed data (same as <code>"group-letter-1"</code>).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>"group-letter-n"</code><span class="remark">*</span></td>
|
||||
<td>Group the rows using letters 1 through n (if n = 2, then it's the first 2 letters) in the column's parsed data (<code>"n"</code> can be any number).</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td rowspan="2">Number</td>
|
||||
<td><code>"group-number"</code></td>
|
||||
<td>Group the rows by the number it finds in the column (step of one; same as <code>"group-number-1"</code>).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>"group-number-n"</code><span class="remark">*</span></td>
|
||||
<td>Group the rows into blocks of every n values. So, if n = 10, the groups will be 0-9, 10-19, 20-29, etc (<code>"n"</code> can be any number).</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td rowspan="2">Separator</td>
|
||||
<td><code>"group-separator"</code></td>
|
||||
<td>Group the rows using the text between the start and first separator that it finds in the column's parsed data (same as <code>"group-separator-1"</code>) (<span class="version">v2.13</span>).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>"group-separator-n"</code><span class="remark">*</span></td>
|
||||
<td>Group the rows using the nth separated group in the column (<code>"n"</code> can be any number) (<span class="version">v2.13</span>).</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td rowspan="6">Date</td>
|
||||
<td><code>"group-date"</code></td>
|
||||
<td>Group the rows by full date (this shows the current UTC time corrected for your time zone).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>"group-date-year"</code><span class="remark">*</span></td>
|
||||
<td>Group the rows by year.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>"group-date-month"</code><span class="remark">*</span></td>
|
||||
<td>Group the rows by month.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>"group-date-week"</code><span class="remark">*</span></td>
|
||||
<td>Group the rows by day of the week.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>"group-date-day"</code><span class="remark">*</span></td>
|
||||
<td>Group the rows by month/day.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>"group-date-time"</code><span class="remark">*</span></td>
|
||||
<td>Group the rows by time.</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
<span class="remark">*</span> When sorting some columns, different group headers with the same group name may exist (try "group-date-week" and "group-date-time"). To make these columns sort specifically by the group you want, you'll need to modify the parser.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p></p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
|
||||
<span class="demo-label">Numeric column:</span> <div id="slider0"></div> <span class="numberclass"></span> (includes subtotals)<br>
|
||||
<span class="demo-label">Animals column:</span> <div id="slider1"></div> <span class="animalclass"></span><br>
|
||||
<span class="demo-label">Date column:</span> <div id="slider2"></div> <span class="dateclass"></span>
|
||||
<br><br>
|
||||
<button class="group_reset">Reset Saved Collapsed Groups</button>
|
||||
<div id="demo"><table id="groups">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="group-word"></th> <!-- checkbox status -->
|
||||
<th class="group-number">Quality (number)</th> <!-- notice this uses the same class name as the Numeric column, it's just left at 1 -->
|
||||
<th class="group-number-10">Numeric (every <span>10</span>)</th>
|
||||
<th class="group-letter-1">Priority (letter)</th>
|
||||
<th class="group-letter-1">Animals (first <span>letter</span>)</th>
|
||||
<th class="group-word-1">Natural Sort (first word)</th>
|
||||
<th class="group-word-2">Inputs (second word)</th>
|
||||
<!-- try "group-date", "group-date-year", "group-date-month", "group-date-day", "group-date-week" or "group-date-time" -->
|
||||
<th class="group-date">Date (<span>Full</span>)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Quality</th>
|
||||
<th>Numeric</th>
|
||||
<th>Priority</th>
|
||||
<th>Animals</th>
|
||||
<th>Natural Sort</th>
|
||||
<th>Inputs</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr><td><input type="checkbox" checked></td><td>1</td><td>10</td><td><select><option selected>A</option><option>B</option><option>C</option></select></td><td>Koala</td><td>abc 123</td><td><input type="text" value="item: truck" /></td><td>1/13/2013 12:01 AM</td></tr>
|
||||
<tr><td><input type="checkbox"></td><td>3</td><td>29</td><td><select><option>A</option><option>B</option><option selected>C</option></select></td><td>Kangaroo</td><td>abc 1</td><td><input type="text" value="item: car" /></td><td>1/15/2013</td></tr>
|
||||
<tr><td><input type="checkbox"></td><td>2</td><td>10</td><td><select><option>A</option><option>B</option><option selected>C</option></select></td><td>Ant</td><td>abc 9</td><td><input type="text" value="item: motorcycle" /></td><td>1/13/2013</td></tr>
|
||||
<tr><td><input type="checkbox"></td><td>3</td><td>81</td><td><select><option>A</option><option selected>B</option><option>C</option></select></td><td>Bee</td><td>zyx 24</td><td><input type="text" value="item: golf cart" /></td><td>1/11/2013</td></tr>
|
||||
<tr><td><input type="checkbox" checked></td><td>3</td><td>21</td><td><select><option>A</option><option selected>B</option><option>C</option></select></td><td>Aardwolf</td><td>zyx 55</td><td><input type="text" value="item: scooter" /></td><td>1/13/2013 03:30 AM</td></tr>
|
||||
<tr><td><input type="checkbox"></td><td>1</td><td>3</td><td><select><option selected>A</option><option>B</option><option>C</option></select></td><td>Bear</td><td>abc 11</td><td><input type="text" /></td><td>1/15/2013</td></tr>
|
||||
<tr><td><input type="checkbox"></td><td>4</td><td>12</td><td><select><option>A</option><option selected>B</option><option>C</option></select></td><td>Armadillo</td><td>zyx 2</td><td><input type="text" /></td><td>1/15/2013 12:30 PM</td></tr>
|
||||
<tr><td><input type="checkbox" checked></td><td>2</td><td>56</td><td><select><option selected>A</option><option>B</option><option>C</option></select></td><td>Aardvark</td><td>abc 2</td><td><input type="text" value="item: skateboard" /></td><td>1/22/2013</td></tr>
|
||||
<tr><td><input type="checkbox"></td><td>1</td><td>55</td><td><select><option selected>A</option><option>B</option><option>C</option></select></td><td>Lion</td><td>abc 9</td><td><input type="text" /></td><td>2/15/2013</td></tr>
|
||||
<tr><td><input type="checkbox" checked></td><td>4</td><td>87</td><td><select><option>A</option><option selected>B</option><option>C</option></select></td><td>Anteater</td><td>ABC 10</td><td><input type="text" value="item: skates" /></td><td>1/3/2013</td></tr>
|
||||
<tr><td><input type="checkbox" checked></td><td>2</td><td>98</td><td><select><option>A</option><option>B</option><option selected>C</option></select></td><td>Lemur</td><td>zyx 1</td><td><input type="text" /></td><td>1/11/2013</td></tr>
|
||||
<tr><td><input type="checkbox"></td><td>1</td><td>20</td><td><select><option>A</option><option>B</option><option selected>C</option></select></td><td>Llama</td><td>zyx 12</td><td><input type="text" /></td><td>12/13/2012</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h1>Page Header</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><!-- Tablesorter: required -->
|
||||
<link href="../css/theme.blue.css" rel="stylesheet">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<!-- Grouping widget -->
|
||||
<script src="../js/parsers/parser-input-select.js"></script>
|
||||
<script src="../js/widgets/widget-grouping.js"></script></pre>
|
||||
</div>
|
||||
|
||||
<h1>Script</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-js"></pre>
|
||||
</div>
|
||||
|
||||
<h1>CSS</h1>
|
||||
<div id="css">
|
||||
<pre class="prettyprint lang-css"></pre>
|
||||
</div>
|
||||
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* DEMO ONLY CODE */
|
||||
$(function(){
|
||||
var startBlock = 10,
|
||||
startVal = 1,
|
||||
curGroup = 0,
|
||||
numcol = 2,
|
||||
letcol = 4,
|
||||
datecol = 7,
|
||||
dateGroups = [ '', 'year', 'month', 'day', 'week', 'time' ];
|
||||
// Numeric column slider
|
||||
$( "#slider0" ).slider({
|
||||
value: startBlock,
|
||||
min: 10,
|
||||
max: 50,
|
||||
step: 10,
|
||||
create: function(){
|
||||
$('.numberclass').html(' "group-number-' + startBlock + '"');
|
||||
$('#groups .tablesorter-header-inner:eq(' + numcol + ')').find('span').html(startBlock);
|
||||
},
|
||||
slide: function( event, ui ) {
|
||||
$('#groups')[0].config.$headers.eq(numcol)
|
||||
.attr('class', function(i,v){
|
||||
return v.replace(/group-number-\d+/, 'group-number-' + ui.value);
|
||||
})
|
||||
.trigger('sorton', [ [[numcol,0]] ]);
|
||||
$('.numberclass').html(' "group-number-' + ui.value + '"');
|
||||
$('#groups .tablesorter-header-inner:eq(' + numcol + ')').find('span').html(ui.value);
|
||||
}
|
||||
});
|
||||
// animal (letter) column slider
|
||||
$( "#slider1" ).slider({
|
||||
value: startVal,
|
||||
min: 1,
|
||||
max: 5,
|
||||
step: 1,
|
||||
create: function(){
|
||||
$('.animalclass').html(' "group-letter-' + startVal + '"');
|
||||
$('#groups .tablesorter-header-inner:eq(' + letcol + ')').find('span').html(startVal === 1 ? 'letter' : startVal + ' letters');
|
||||
},
|
||||
slide: function( event, ui ) {
|
||||
$('#groups')[0].config.$headers.eq(letcol)
|
||||
.attr('class', function(i,v){
|
||||
return v.replace(/group-letter-\d+/, 'group-letter-' + ui.value);
|
||||
})
|
||||
.trigger('sorton', [ [[letcol,0]] ]);
|
||||
$('.animalclass').html(' "group-letter-' + ui.value + '"');
|
||||
$('#groups .tablesorter-header-inner:eq(' + letcol + ')').find('span').html(ui.value === 1 ? 'letter' : ui.value + ' letters');
|
||||
}
|
||||
});
|
||||
// date column slider
|
||||
$( "#slider2" ).slider({
|
||||
value: curGroup,
|
||||
min: 0,
|
||||
max: 5,
|
||||
step: 1,
|
||||
create: function(){
|
||||
$('.dateclass').html(' "group-date' + (curGroup > 0 ? '-' + dateGroups[curGroup] : '') + '"');
|
||||
$('#groups .tablesorter-header-inner:eq(' + datecol + ')').find('span').html(curGroup === 0 ? 'full' : dateGroups[curGroup]);
|
||||
},
|
||||
slide: function( event, ui ) {
|
||||
$('#groups')[0].config.$headers.eq(datecol)
|
||||
.attr('class', function(i,v){
|
||||
return v.replace(/group-date(-\w+)?/, 'group-date' + (ui.value > 0 ? '-' + dateGroups[ui.value] : ''));
|
||||
})
|
||||
.trigger('sorton', [ [[datecol,0]] ]);
|
||||
$('.dateclass').html(' "group-date' + (ui.value > 0 ? '-' + dateGroups[ui.value] : '') + '"');
|
||||
$('#groups .tablesorter-header-inner:eq(' + datecol + ')').find('span').html(ui.value === 0 ? 'full' : dateGroups[ui.value]);
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,321 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - headerTitles widget</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">
|
||||
<link href="css/tipsy.css" rel="stylesheet">
|
||||
<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
|
||||
<script src="js/jquery-ui-latest.min.js"></script>
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
<script src="js/jquery.tipsy.min.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<!-- Tablesorter: optional -->
|
||||
<script src="../js/widgets/widget-headerTitles.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
var updateTooltips = function($cell, txt) {
|
||||
// dynamically update tipsy
|
||||
if ($cell.is(':hover')) {
|
||||
$cell
|
||||
.attr({ title : txt, 'original-title': txt })
|
||||
// hide, then show the tooltip to force updating & realignment
|
||||
.tipsy('hide')
|
||||
.tipsy('show');
|
||||
}
|
||||
return txt;
|
||||
};
|
||||
|
||||
$("#table1").tablesorter({
|
||||
theme : 'blue',
|
||||
sortList: [[0,0]],
|
||||
headers : { 4: { sorter: false } },
|
||||
widgets: ['zebra', 'headerTitles'],
|
||||
widgetOptions: {
|
||||
headerTitle_useAria : true,
|
||||
// add tooltip class
|
||||
headerTitle_tooltip : 'tooltip',
|
||||
// manipulate the title as desired
|
||||
headerTitle_callback : updateTooltips
|
||||
}
|
||||
});
|
||||
|
||||
// This table is showing all of the headerTitle widget options
|
||||
$("#table2").tablesorter({
|
||||
theme : 'blue',
|
||||
sortList: [[0,0]],
|
||||
// third click resets the sort
|
||||
sortReset: true,
|
||||
headers : { 4: { sorter: false } },
|
||||
widgets: ['zebra', 'headerTitles'],
|
||||
widgetOptions: {
|
||||
// headerTitle_prefix : 'Sort: ', // option has been deprecated
|
||||
// use aria-label text
|
||||
// e.g. "First Name: Ascending sort applied, activate to apply a descending sort"
|
||||
headerTitle_useAria : false,
|
||||
// add tooltip class
|
||||
headerTitle_tooltip : 'tooltip',
|
||||
// custom titles [ "ascending", "descending", "unsorted" ]
|
||||
headerTitle_cur_text : [ 'Ascending text sort applied', 'Descending text sort applied', 'Currently unsorted' ],
|
||||
headerTitle_cur_numeric : [ 'Ascending numeric sort applied', 'Descending numeric sort applied', 'Currently unsorted' ],
|
||||
headerTitle_nxt_text : [ ' apply ascending text sort', ' apply descending text sort', 'remove sort' ],
|
||||
headerTitle_nxt_numeric : [ ' apply ascending numeric sort', ' apply descending numeric sort', 'remove sort' ],
|
||||
|
||||
// title display; {prefix} adds above prefix
|
||||
// {type} adds the current sort order from above (text or numeric)
|
||||
// {next} adds the next sort direction using the sort order above
|
||||
headerTitle_output_sorted : '{current}; activate to {next}',
|
||||
headerTitle_output_unsorted : '{current}; activate to {next}',
|
||||
headerTitle_output_nosort : 'No sort available',
|
||||
// use this type to override the parser detection result
|
||||
// e.g. use for numerically parsed columns (e.g. dates), but you
|
||||
// want the user to see a text sort, e.g. [ 'text', '', 'numeric' ]
|
||||
// use '' (empty string) to use the default
|
||||
headerTitle_type : ['', '', '', '', '', 'text'],
|
||||
// manipulate the title as desired
|
||||
headerTitle_callback : updateTooltips
|
||||
}
|
||||
});
|
||||
|
||||
// using defaults, no tooltips
|
||||
$("#table3").tablesorter({
|
||||
theme : 'blue',
|
||||
sortList: [[0,0]],
|
||||
headers : { 4: { sorter: false } },
|
||||
widgets: ['zebra', 'headerTitles']
|
||||
});
|
||||
|
||||
// add tooltip
|
||||
$('.tooltip').tipsy({ gravity: 's' });
|
||||
|
||||
// switch aria mode
|
||||
var $state = $('#usearia'),
|
||||
$table1 = $('#table1'),
|
||||
// first table only
|
||||
wo = $table1[0].config.widgetOptions;
|
||||
$('button').on('click', function(){
|
||||
wo.headerTitle_useAria = !wo.headerTitle_useAria;
|
||||
// show current state in demo
|
||||
$state.text( wo.headerTitle_useAria );
|
||||
// force headerTitles widget to update
|
||||
$table1.trigger('refreshHeaderTitle');
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>headerTitles Widget</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
|
||||
<p></p>
|
||||
<br>
|
||||
|
||||
<div class="accordion">
|
||||
|
||||
<h3><a href="#">Notes</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>In <span class="version">2.15.7</span>,
|
||||
<ul>
|
||||
<li>Sorry for all of these breaking changes, I should have left this widget in beta.</li>
|
||||
<li>The <code>headerTitle_prefix</code>, <code>headerTitle_text</code>, <code>headerTitle_numeric</code> options has been replaced, in lieu of the new ouput options; sorry for no deprecation notice.</li>
|
||||
<li>Added <code>headerTitle_useAria</code>, <code>headerTitle_tooltip</code>, <code>headerTitle_output_sorted</code>, <code>headerTitle_output_unsorted</code>, <code>headerTitle_output_nosort</code>, <code>headerTitle_cur_text</code>, <code>headerTitle_cur_numeric</code>, <code>headerTitle_nxt_text</code>, <code>headerTitle_nxt_numeric</code>, <code>headerTitle_type</code> & <code>headerTitle_callback</code> options. See the options section below for more details.</li>
|
||||
<li>Added <code>"refreshHeaderTitle"</code> method to force the widget to update.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<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>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Options</a></h3>
|
||||
<div>
|
||||
<table class="tablesorter-blue">
|
||||
<colgroup>
|
||||
<col style="width:50px;">
|
||||
<col style="width:120px;">
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr><th>Option</th><th>Default</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>headerTitle_useAria</td>
|
||||
<td><code>false</code></td>
|
||||
<td>
|
||||
When <code>true</code>, the headers titles are extracted from the <code>aria-label</code>. The text in that label is built from the <a href="http://mottie.github.io/tablesorter/docs/#variable-language"><code>$.tablesorter.language</code> option</a>.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>headerTitle_tooltip</td>
|
||||
<td><code>""</code></td>
|
||||
<td>
|
||||
Add a (tooltip) class name to the header, yeah you could have used the <a href="http://mottie.github.io/tablesorter/docs/#cssheader"><code>cssHeader</code> option</a> to do the same thing, but this option allows adding classes using an array.
|
||||
<pre class="prettyprint lang-js">headerTitle_tooltip : [ 'tooltip-text', 'tooltip-text', 'tooltip-numeric', 'tooltip-numeric', '', 'tooltip-text']</pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
headerTitle_cur_text<br>
|
||||
headerTitle_cur_numeric
|
||||
</td>
|
||||
<td>(see description)</td>
|
||||
<td>
|
||||
When any of the header title output options use the <code>{current}</code> tag, it is replaced by values from either the current ("cur") text or numeric option array as determined by the column unsorted state or sort direction.<br>
|
||||
<br>
|
||||
The array must contain text for ascending, descending and unsorted state (in that order). Defaults:
|
||||
<pre class="prettyprint lang-js">headerTitle_cur_text : [ ' sort: A - Z', ' sort: Z - A', 'ly unsorted' ],
|
||||
headerTitle_cur_numeric : [ ' sort: 0 - 9', ' sort: 9 - 0', 'ly unsorted' ]</pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
headerTitle_nxt_text<br>
|
||||
headerTitle_nxt_numeric
|
||||
</td>
|
||||
<td>(see description)</td>
|
||||
<td>
|
||||
When any of the header title output options use the <code>{next}</code> tag, it is replaced by values from either the next ("nxt") text or numeric option array as determined by the column unsorted state or sort direction.<br>
|
||||
<br>
|
||||
The array must contain text for when the next state is ascending, descending and unsorted (in that order). Defaults:
|
||||
<pre class="prettyprint lang-js">headerTitle_nxt_text : [ ' sort: A - Z', ' sort: Z - A', 'remove sort' ],
|
||||
headerTitle_nxt_numeric : [ ' sort: 0 - 9', ' sort: 9 - 0', 'remove sort' ]</pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
headerTitle_output_sorted<br>
|
||||
headerTitle_output_unsorted<br>
|
||||
headerTitle_output_nosort
|
||||
</td>
|
||||
<td>(see description)</td>
|
||||
<td>
|
||||
Set the output string for each sort condition: sorted, unsorted or sorting disabled.<br>
|
||||
<br>
|
||||
Each of these option strings can include a <code>{name}</code>, <code>{current}</code> and <code>{next}</code> tag.
|
||||
<ul>
|
||||
<li>The <code>{name}</code> tag is replaced by the header text.</li>
|
||||
<li>The <code>{current}</code> tag is replaced by the type-appropriate text from either the <code>headerTitle_cur_text</code> or <code>headerTitle_cur_numeric</code> option.</li>
|
||||
<li>The <code>{next}</code> tag is replaced by the type-appropriate text from either the <code>headerTitle_nxt_text</code> or <code>headerTitle_nxt_numeric</code> option.</li>
|
||||
</ul>
|
||||
Defaults:
|
||||
<pre class="prettyprint lang-js">headerTitle_output_sorted : 'current{current}; activate to {next}',
|
||||
headerTitle_output_unsorted : 'current{current}; activate to {next} ',
|
||||
headerTitle_output_nosort : 'No sort available'</pre>
|
||||
Note: the reason "activate" is used instead of "click" is because the user can also <kbd>Tab</kbd> to the header cell and press <kbd>Enter</kbd> to initiate a sort.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>headerTitle_type</td>
|
||||
<td><code>[]</code></td>
|
||||
<td>Each column type is determined by the parser <code>type</code> value. So, if you want to override a column default type, set this option with an array with the specified column changed to either "text" or "numeric". This is useful when a date column shows as a numeric sort, but you want your users to see it as a text sort.<br>
|
||||
<br>
|
||||
As seen in the second table initialization code below, if an array element is undefined or an empty string, it will not override the default type.
|
||||
<pre class="prettyprint lang-js">headerTitle_type : ['', '', '', '', '', 'text']</pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>headerTitle_callback</td>
|
||||
<td><code>null</code></td>
|
||||
<td>
|
||||
This callback function is executed after the title text string has completed processing. Any additional changes, or modifications can be done within this function. This function has two parameters <code>$cell</code> (the header cell as a jQuery object), and the processed text (<code>txt</code>). The function <strong>must</strong> return the text!
|
||||
<pre class="prettyprint lang-js">headerTitle_callback : function($cell, txt) {
|
||||
return txt;
|
||||
}</pre>In this demo, you will notice that this function is used to dynamically update the tooltip.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Method</a></h3>
|
||||
<div>
|
||||
<h3>Force headerTitle widget update</h3>
|
||||
If you need to programmically force the header title to update, trigger a <code>refreshHeaderTitle</code> event on the table:
|
||||
<pre class="prettyprint lang-js">$('table').trigger('refreshHeaderTitle');</pre>
|
||||
In this demo, this method is used when switching between the default header title and aria-label text.
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo">
|
||||
|
||||
<h3>Tooltip plugin using togglable aria-label text</h3>
|
||||
<button>use aria-label</button>: <span id="usearia" class="bright">true</span>
|
||||
|
||||
<table id="table1">
|
||||
<thead>
|
||||
<tr><th>First Name</th><th>Last Name</th><th>Age</th><th>Total</th><th>Discount</th><th>Date</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>Peter</td><td>Parker</td><td>28</td><td>$9.99</td><td>20%</td><td>Jan 18, 2001 9:12 AM</td></tr>
|
||||
<tr><td>John</td><td>Evans</td><td>33</td><td>$9.99</td><td>25%</td><td>Dec 10, 2002 5:14 AM</td></tr>
|
||||
<tr><td>Clark</td><td>Kent</td><td>22</td><td>$15.89</td><td>44%</td><td>Jan 12, 2003 11:14 AM</td></tr>
|
||||
<tr><td>Bruce</td><td>Almighty</td><td>45</td><td>$15.89</td><td>44%</td><td>Jan 18, 2001 9:12 AM</td></tr>
|
||||
<tr><td>Bruce</td><td>Evans</td><td>22</td><td>$13.19</td><td>11%</td><td>Jul 6, 2006 8:14 AM</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>Tooltip plugin with alternative titles</h3>
|
||||
<table id="table2">
|
||||
<thead>
|
||||
<tr><th>First Name</th><th>Last Name</th><th>Age</th><th>Total</th><th>Discount</th><th>Date</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>Peter</td><td>Parker</td><td>28</td><td>$9.99</td><td>20%</td><td>Jan 18, 2001 9:12 AM</td></tr>
|
||||
<tr><td>John</td><td>Evans</td><td>33</td><td>$9.99</td><td>25%</td><td>Dec 10, 2002 5:14 AM</td></tr>
|
||||
<tr><td>Clark</td><td>Kent</td><td>22</td><td>$15.89</td><td>44%</td><td>Jan 12, 2003 11:14 AM</td></tr>
|
||||
<tr><td>Bruce</td><td>Almighty</td><td>45</td><td>$15.89</td><td>44%</td><td>Jan 18, 2001 9:12 AM</td></tr>
|
||||
<tr><td>Bruce</td><td>Evans</td><td>22</td><td>$13.19</td><td>11%</td><td>Jul 6, 2006 8:14 AM</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>No Tooltip Plugin</h3>
|
||||
<table id="table3">
|
||||
<thead>
|
||||
<tr><th>First Name</th><th>Last Name</th><th>Age</th><th>Total</th><th>Discount</th><th>Date</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>Peter</td><td>Parker</td><td>28</td><td>$9.99</td><td>20%</td><td>Jan 18, 2001 9:12 AM</td></tr>
|
||||
<tr><td>John</td><td>Evans</td><td>33</td><td>$9.99</td><td>25%</td><td>Dec 10, 2002 5:14 AM</td></tr>
|
||||
<tr><td>Clark</td><td>Kent</td><td>22</td><td>$15.89</td><td>44%</td><td>Jan 12, 2003 11:14 AM</td></tr>
|
||||
<tr><td>Bruce</td><td>Almighty</td><td>45</td><td>$15.89</td><td>44%</td><td>Jan 18, 2001 9:12 AM</td></tr>
|
||||
<tr><td>Bruce</td><td>Evans</td><td>22</td><td>$13.19</td><td>11%</td><td>Jul 6, 2006 8:14 AM</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
636
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-widget-math.html
Executable file
636
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-widget-math.html
Executable file
@@ -0,0 +1,636 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Math Widget (beta)</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
|
||||
<script src="js/jquery-ui-latest.min.js"></script>
|
||||
<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="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<script src="../js/widgets/widget-math.js"></script>
|
||||
|
||||
<style>
|
||||
#table2 th:nth-child(1) { width: 300px; }
|
||||
.source { width: 550px; height: 250px; position: relative; float: left; margin-bottom: 5px; }
|
||||
.resultz { width: 550px; height: 250px; position: relative; top: 0; float: left; margin: 0 0 0 10px; overflow-y: auto; padding: 5px 10px; font-size: 13px; }
|
||||
.red { color: red; }
|
||||
.blue { color: #0080ff; }
|
||||
.prefix, .suffix { width: 300px; }
|
||||
</style>
|
||||
<style id="css">/* make all calculated values bold */
|
||||
.tablesorter tbody td[data-math] {
|
||||
font-weight: bold;
|
||||
}
|
||||
/* darken first & last column */
|
||||
.tablesorter tbody th,
|
||||
.tablesorter tbody tr td.totals {
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
background-color: #ddd;
|
||||
text-shadow: none;
|
||||
}
|
||||
/* even darker tbody info row & tfoot */
|
||||
.tablesorter tbody.tablesorter-infoOnly th,
|
||||
.tablesorter tfoot th,
|
||||
.tablesorter tfoot th.tablesorter-headerAsc,
|
||||
.tablesorter tfoot th.tablesorter-headerDesc {
|
||||
background-color: #aaa;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
background-color: #aaa;
|
||||
text-shadow: none;
|
||||
}
|
||||
/* align decimals in Grand Total column */
|
||||
.align-decimal {
|
||||
width: 100px;
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
var process = function () {
|
||||
var results = [],
|
||||
table = $('#table1')[0],
|
||||
num = $('.value').val(),
|
||||
prefix = $('.prefix').val(),
|
||||
suffix = $('.suffix').val(),
|
||||
vals = $('.source').val().split(/\n/g);
|
||||
$.each(vals, function (i, v) {
|
||||
results.push( v ? $.tablesorter.formatMask(v, num, prefix, suffix) : '' );
|
||||
});
|
||||
$('.resultz').html(results.join('<br>'));
|
||||
};
|
||||
|
||||
$(function(){
|
||||
$('.options').tablesorter({
|
||||
widthFixed: true,
|
||||
widgets: [ "stickyHeaders" ]
|
||||
});
|
||||
|
||||
$('button').click(function () {
|
||||
process();
|
||||
});
|
||||
process();
|
||||
});
|
||||
</script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
// Demo #1 - Basic Functionality
|
||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
// call the tablesorter plugin and assign widgets with id "zebra" (Default widget in the core) and the newly created "repeatHeaders"
|
||||
$('#table1').tablesorter({
|
||||
theme: 'blue',
|
||||
delayInit: true,
|
||||
widgets: ['zebra', 'filter', 'math'],
|
||||
widgetOptions: {
|
||||
math_data : 'math', // data-math attribute
|
||||
math_ignore : [0, 1],
|
||||
math_mask : '#,##0.00',
|
||||
math_complete : function($cell, wo, result, value, arry) {
|
||||
var txt = '<span class="align-decimal">$ ' + result + '</span>';
|
||||
if ($cell.attr('data-math') === 'all-sum') {
|
||||
// when the "all-sum" is processed, add a count to the end
|
||||
return txt + ' (Sum of ' + arry.length + ' cells)';
|
||||
}
|
||||
return txt;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
// Demo #2 - Default & Custom equations
|
||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
// adding a custom equation... named "custom"
|
||||
// access from data-math="row-custom" (or "above-custom", or "col-custom")
|
||||
$.tablesorter.equations['custom'] = function(arry) {
|
||||
// (a+b+c)*d - (e/f)*100
|
||||
return (arry[0] + arry[1] + arry[2]) * arry[3] - (arry[4]/arry[5]) * 100;
|
||||
};
|
||||
|
||||
// adding a custom equation... named "product"
|
||||
// access from data-math="row-product" (or "above-product", or "col-product")
|
||||
$.tablesorter.equations['product'] = function(arry) {
|
||||
// multiple all array values together
|
||||
var product = 1;
|
||||
$.each(arry, function(i,v){
|
||||
// oops, we shouldn't have any zero values in the array
|
||||
if (v !== 0) {
|
||||
product *= v;
|
||||
}
|
||||
});
|
||||
return product;
|
||||
};
|
||||
|
||||
// Add expected results to the cell
|
||||
var resultIndex = 0,
|
||||
expectedResults = [ 6, 100, 60, 5, 20, 4, 2, "1 & 2", 8, 2.25, 1.5, 2.7, 1.64, 150, 1200 ],
|
||||
resultLen = expectedResults.length;
|
||||
|
||||
$('#table2').tablesorter({
|
||||
theme: 'blue',
|
||||
delayInit: true,
|
||||
widgets: ['zebra', 'math'],
|
||||
widgetOptions: {
|
||||
math_data : 'math', // data-math attribute
|
||||
math_ignore : [0],
|
||||
math_mask : '#,##0.##',
|
||||
math_complete : function($cell, wo, result) {
|
||||
var txt = result + ' (<span class="results">' + expectedResults[resultIndex++ % resultLen] + '</span>)';
|
||||
// mode will return an array if there is a tie
|
||||
return $.isArray(result) ? 'Tie: ' + txt : txt;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Math Widget (beta)</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
|
||||
<p></p>
|
||||
<br>
|
||||
|
||||
<div id="root" class="accordion">
|
||||
|
||||
<h3><a href="#">Notes</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>In <span class="version">v2.17.1</span>,
|
||||
<ul>
|
||||
<li>Values added to the data-attribute set by the <a href="../#textattribute"><code>textAttribute</code> option</a> will now be used in the calculation instead of the actual cell content.</li>
|
||||
<li>The Grand Total cells now shows a higher precision value to emphasize this point.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>In <span class="version">v2.16.4</span>, added:
|
||||
<ul>
|
||||
<li>Two new options: <code>math_prefix</code> and <code>math_suffix</code>, which will be added before or after the prefix or suffix, respectively.</li>
|
||||
<li>Added "Mask Examples" section with examples, and how to use the <code>$.tablesorter.formatMask</code> function.</li>
|
||||
</ul><br>
|
||||
</li>
|
||||
<li>This widget will <strong>only work</strong> in tablesorter version 2.16+ and jQuery version 1.7+.</li>
|
||||
<li>It adds basic math capabilities. A full list of default formulas is listed in the "Attribute Settings" section.</li>
|
||||
<li>Add your own custom formulas which manipulating an array of values gathered from the table by row, column or a column block (above).</li>
|
||||
<li>This is by no means a comprehensive widget that performs like a spreadsheet, but you can customize the data gathering "type" and available "formula", as desired.</li>
|
||||
<li>The widget will update the calculations based on filtered rows, and will update if any data within the table changes (using update events).</li>
|
||||
<li>This widget is not optimized for very large tables, for two reasons:
|
||||
<ul>
|
||||
<li>On initialization, it cycles through every table row, calculates the column index, and adds a <code>data-column</code> attribute.</li>
|
||||
<li>It uses the update method whenever it recalculates values to make the results sortable. This occurs when any of the update methods are used and after the table is filtered.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>When setting tablesorter's <code>debug</code> option to <code>true</code>, this widget will output each <code>{type}-{formula}</code> value found, the array of numbers used and the result.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Options</a></h3>
|
||||
<div>
|
||||
<h3>Math widget default options (added inside of tablesorter <code>widgetOptions</code>)</h3>
|
||||
<div class="tip">
|
||||
<span class="label label-info">TIP!</span> Click on the link in the option 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="tablesorter-blue options">
|
||||
<thead>
|
||||
<tr><th>Option</th><th>Default</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
<tr id="math_data">
|
||||
<td><span class="permalink">math_data</span></td>
|
||||
<td><code>'math'</code></td>
|
||||
<td>
|
||||
Set this option to point to the named data-attribute. For example, when set to <code>'math'</code>, the widget looks for settings within the <code>data-math</code> attribute.
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="math_ignore">
|
||||
<td><a href="#" class="permalink">math_ignore</a></td>
|
||||
<td><code>[ ]</code></td>
|
||||
<td>
|
||||
Set this option the column index of columns of data to ignore.
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
To ignore the first and second columns in a table, set this option using zero-based column indexs as follows:
|
||||
<pre class="prettyprint lang-js">// column index(es) to ignore
|
||||
math_ignore : [0,1]</pre>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="math_mask">
|
||||
<td><a href="#" class="permalink">math_mask</a></td>
|
||||
<td><code>'#,##0.00'</code></td>
|
||||
<td>
|
||||
Set this option with an output formatting mask to use <sup class="remark">*</sup>
|
||||
<div class="collapsible">
|
||||
As of <span class="version">v2.16.2</span>, you can set a mask for each math cell by adding a <code>data-math-mask</code> data-attribute (the <code>math</code> part of the data-attribute is obtained from the <code>math_data</code> setting).
|
||||
<pre class="prettyprint lang-html"><th data-math="all-sum" data-math-mask="##0.00">all-sum</th></pre>
|
||||
<hr>
|
||||
<h3>Javascript-number-formatter details</h3>
|
||||
<h3>Features</h3>
|
||||
<ul>
|
||||
<li>Short, fast, flexible yet standalone. Only 75 lines including MIT license info, blank lines & comments.</li>
|
||||
<li>Accept standard number formatting like <code>#,##0.00</code> or with negation <code>-000.####</code>.</li>
|
||||
<li>Accept any country format like <code># ##0,00</code>, <code>#,###.##</code>, <code>#'###.##</code> or any type of non-numbering symbol.</li>
|
||||
<li>Accept any numbers of digit grouping. <code>#,##,#0.000</code> or <code>#,###0.##</code> are all valid.</li>
|
||||
<li>Accept any redundant/fool-proof formatting. <code>##,###,##.#</code> or <code>0#,#00#.###0#</code> are all OK.</li>
|
||||
<li>Auto number rounding.</li>
|
||||
<li>Include a prefix & suffix with the mask</li>
|
||||
<li>Simple interface, just supply mask & value like this: <code>$.tablesorter.formatMask( "0.0000", 3.141592, "prefix ", " suffix" );</code>
|
||||
<pre class="prettyprint lang-js">$.tablesorter.formatMask( "$ 0.0000 USD", 1234.567, "prefix ", " suffix" );
|
||||
// prefix $ 1234.5670 USD suffix</pre>
|
||||
</li>
|
||||
</ul>
|
||||
<h3>Limitation</h3>
|
||||
<ul>
|
||||
<li>No scientific/engineering formatting.</li>
|
||||
<li>Not for date or phone formation.</li>
|
||||
<li>No color control.</li>
|
||||
<li><del>No prefix or suffix is allowed except leading negation symbol. So <code>$#,##0.00</code> or <code>#,###.##USD</code> will not yield expected outcome. Use <code>'$'+ $.tablesorter.formatMask('#,##0.00', 123.45)</code> or <code>$.tablesorter.formatMask('#,##0.00', 456.789) + 'USD'</code></del></li>
|
||||
<li>The prefix or suffix can not include any numbers (<code>0-9</code>), hashes (<code>#</code>), dashes (<code>-</code>), or plus signs (<code>+</code>)</li>
|
||||
</ul>
|
||||
<h3>Note</h3>
|
||||
<ul>
|
||||
<li>When there's only one symbol is supplied, system will always treat the single symbol as Decimal. For instance, <code>$.tablesorter.formatMask( '#,###', 1234567.890)</code> will output <code>1234567,890</code>.</li>
|
||||
<li>To force a single symbol as Separator, add a trailing dot to the end like this: <code>$.tablesorter.formatMask( '#,###.', 1234567.890)</code> which will then output <code>1,234,567</code>.</li>
|
||||
<li><a href="http://www.integraxor.com/developer/codes/js-formatter/format-sample.htm">Original plugin demo</a></li>
|
||||
</ul>
|
||||
<span class="remark">*</span> The number formatter code was copied from <a href="https://code.google.com/p/javascript-number-formatter/">javascript-number-formatter</a> (<a href="http://opensource.org/licenses/mit-license.php">MIT</a>) - now forked on <a href="https://github.com/Mottie/javascript-number-formatter">GitHub</a>.
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="math_complete">
|
||||
<td><a href="#" class="permalink">math_complete</a></td>
|
||||
<td><code>null</code></td>
|
||||
<td>
|
||||
This function is called after each calculation is made to allow re-formatting, adding prefixes, suffixes, etc to the result.
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
Use this option as follows:
|
||||
<pre class="prettyprint lang-js">// complete executed after each function
|
||||
math_complete : function($cell, wo, result, value, arry){
|
||||
return '$ ' + result + $cell.attr('data-suffix');
|
||||
}</pre>
|
||||
<ul>
|
||||
<li><code>$cell</code> - the target cell (jQuery object)</li>
|
||||
<li><code>wo</code> - tablesorter's widget options (from <code>table.config.widgetOptions</code>).</li>
|
||||
<li><code>result</code> - the formatted result of the calculation.</li>
|
||||
<li><code>value</code> - an unformatted result of the calculation.</li>
|
||||
<li><code>arry</code> - the array of values gathered by the widget.</li>
|
||||
</ul>
|
||||
In this function, if a anything is returned, it will be automatically added to the <code>$cell</code> as html. Or, return <code>false</code> and no change is made to the cell contents; use this method if you manipulate the <code>$cell</code> contents and don't want the widget to do it.<br>
|
||||
<br>
|
||||
If you need to format the data output after manipulating the <code>value</code>, you can use <code>wo.math_mask</code>, or a different mask, by using the <code>$.tablesorter.formatMask( mask, value );</code> function. For example:
|
||||
<pre class="prettyprint lang-js">math_complete : function($cell, wo, result, value, arry){
|
||||
var percent = Math.round( value * 1e4 ) / 100; // percent with two decimal places
|
||||
return $.tablesorter.formatMask( wo.math_mask, percent ) + ' %';
|
||||
}</pre>
|
||||
More details can be found in the <code>math_mask</code> description.
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="math_priority">
|
||||
<td><a href="#" class="permalink">math_priority</a></td>
|
||||
<td><code>[ 'row', 'above', 'col' ]</code></td>
|
||||
<td>
|
||||
This is the order of calculations.
|
||||
<div class="collapsible">
|
||||
<ul>
|
||||
<li>By default, the widget cycles through the calculated cells as follows:
|
||||
<ul>
|
||||
<li>Search all non-informational tbodies for <code>data-math</code> table cells (data-attribute set by <code>math_data</code> option).</li>
|
||||
<li>Cycle through these cells by priority: row, above, col (set by this option).</li>
|
||||
<li>Search all informational tbodies, and <code>tfoot</code> for <code>data-math</code> table cells.</li>
|
||||
<li>Cycle through these cells by priority: row, above, col (set by this option).</li>
|
||||
<li>Search the entire table for <code>data-math</code> cells of the "all" type.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>So, all row calculations are made first, followed by "above" calculations then "col" (column) calculations.</li>
|
||||
<li>The "all" type calculations are always performed last, and therefore the type is not included in this list.</li>
|
||||
<li>Change this order if the order of calculations needs to be made column first, followed by rows.</li>
|
||||
<li>For more details about the differences between "col" and "above" types, see the next section.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="math_prefix">
|
||||
<td><a href="#" class="permalink">math_prefix</a></td>
|
||||
<td><code>''</code></td>
|
||||
<td>
|
||||
Add content before the value formatted by the <code>math_mask</code> option (<span class="version">v2.16.4</span>).
|
||||
<div class="collapsible">
|
||||
<ul>
|
||||
<li>This option adds content before the mask.</li>
|
||||
<li>If the mask includes any content for the prefix, then this value is added before it.</li>
|
||||
<li>If this option contains a <code>{content}</code> tag, the prefix within the mask will replace this tag.
|
||||
<pre class="prettyprint lang-js">math_mask : '$ #,##0.00',
|
||||
math_prefix : '<span class="blue">{content}</span>'
|
||||
|
||||
// result of the value 12345.67
|
||||
// <span class="blue">$ </span>12,345.67</pre>
|
||||
You can experiment with this option in the "Mask Examples" section.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="math_suffix">
|
||||
<td><a href="#" class="permalink">math_suffix</a></td>
|
||||
<td><code>''</code></td>
|
||||
<td>
|
||||
Add content after the value formatted by the <code>math_mask</code> option (<span class="version">v2.16.4</span>).
|
||||
<div class="collapsible">
|
||||
<ul>
|
||||
<li>This option adds content after the mask.</li>
|
||||
<li>If the mask includes any content for the suffix, then this value is added after it.</li>
|
||||
<li>If this option contains a <code>{content}</code> tag, the suffix within the mask will replace this tag.
|
||||
<pre class="prettyprint lang-js">math_mask : '#,##0.00 USD',
|
||||
math_suffix : '{content}<span class="red">!</span>'
|
||||
|
||||
// result of the value 12345.67
|
||||
// 12,345.67 USD<span class="red">!</span></pre>
|
||||
You can experiment with this option in the "Mask Examples" section.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Attribute Settings</a></h3>
|
||||
<div>
|
||||
The math widget data-attibute setting requires two parts: type & formula
|
||||
<pre class="prettyprint lang-html"><td data-math="{type}-{formula}"></td></pre>
|
||||
When set, the data is gathered based on the math type ("row", "column", "above" or "all") and passed to the formula as an array.
|
||||
<h3><code>{type}</code> (data gathering)</h3>
|
||||
<ul>
|
||||
<li><code>row</code> - gather the table cell values from the same row as the <code>data-math</code> attribute.</li>
|
||||
<li><code>above</code> - gather the table cell values from the same column as the <code>data-math</code> attribute, but stop when the first table cell is reached, or when another cell with a data-attribute with an "above" type is reached; see the first table demo below to see why this is useful.</li>
|
||||
<li><code>col</code> - gather the table cell values from the same column as the <code>data-math</code> attribute.</li>
|
||||
<li><code>all</code> - gather all table cell values with a data-math attribute that start with "all".</li>
|
||||
</ul>
|
||||
<h3><code>{formula}</code> (defaults)</h3>
|
||||
<ul>
|
||||
<li><code>count</code> - returns the count (length) of the data set.</li>
|
||||
<li><code>sum</code> - returns the sum of all values in the data set.</li>
|
||||
<li><code>max</code> - returns the maximum value in the data set.</li>
|
||||
<li><code>min</code> - returns the minimum values in the data set.</li>
|
||||
<li><code>mean</code> - returns the mean (average) of all values in the data set; it uses the <code>sum</code> formula in part of the calculation.</li>
|
||||
<li><code>median</code> - returns the median (middle value) of the data set.</li>
|
||||
<li><code>mode</code> - returns an array of the mode(s) (most frequent value or values) in the data set; an array is always returned, even if only one mode exists (see the second demo below).</li>
|
||||
<li><code>range</code> - returns the range (highest minus lowest value) of the data set.</li>
|
||||
<li><code>varp</code> - returns the variance of the data set (population).</li>
|
||||
<li><code>vars</code> - returns the variance of the data set (sample).</li>
|
||||
<li><code>stdevp</code> - returns the standard deviation of the data set (population).</li>
|
||||
<li><code>stdevs</code> - returns the standard deviation of the data set (sample).</li>
|
||||
<li><code>custom</code> (not a default)
|
||||
<ul>
|
||||
<li>Custom formulas can have any name</li>
|
||||
<li>Return your result after making whatever calculation from the array of data passed to the formula</li>
|
||||
<li>For example:
|
||||
<pre class="prettyprint lang-js">// adding a custom equation... named "product"
|
||||
// access from data-math="row-product" (or "above-product", or "col-product")
|
||||
$.tablesorter.equations['product'] = function(arry) {
|
||||
// multiple all array values together
|
||||
var product = 1;
|
||||
$.each(arry, function(i,v){
|
||||
// oops, we shouldn't have any zero values in the array
|
||||
if (v !== 0) {
|
||||
product *= v;
|
||||
}
|
||||
});
|
||||
return product;
|
||||
};</pre>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<h4>Ignoring cells</h4>
|
||||
<ul>
|
||||
<li>Entire row: if the <code><tr></code> math data-attribute contains the keyword <code>"ignore"</code> then that entire row of cells will be skipped when building the array of data to be used for calculations.
|
||||
<pre class="prettyprint lang-html"><tr data-math="ignore"><td>1</td><td>2</td><td>3</td></tr></pre>
|
||||
</li>
|
||||
<li>Cell: if the table cell math data-attribute contains the keyword <code>"ignore"</code> then that cell will be skipped when building the array of data to be used for calculations.
|
||||
<pre class="prettyprint lang-html"><td data-math="ignore">1</td></pre>
|
||||
</li>
|
||||
<li>Column: set the widget <code>math_ignore</code> option with an array of zero-based column indexes of columns to ignore or skip when building the array of data for calculations.
|
||||
<pre class="prettyprint lang-js">math_ignore : [0,1]</pre>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Mask Examples</a></h3>
|
||||
<div>
|
||||
The formatting function can be used separately from the math widget:
|
||||
<pre class="prettyprint lang-js">// $.tablesorter.formatMask(mask, value, prefix, suffix);
|
||||
$.tablesorter.formatMask('$#,##0.00 USD', 12345.678, 'prefix ', ' suffix');
|
||||
// result: "prefix $12,345.68 USD suffix"</pre>
|
||||
<ul>
|
||||
<li>The <code>$.tablesorter.formatMask</code> function has the following parameters:
|
||||
<ul>
|
||||
<li><code>mask</code> - please refer to the <code>math_mask</code> option for more details.</li>
|
||||
<li><code>value</code> - number to be formatted.</li>
|
||||
<li><code>prefix</code> - please refer to the <code>math_prefix</code> option for more details (<span class="version updated">v2.16.4</span>).</li>
|
||||
<li><code>suffix</code> - please refer to the <code>math_suffix</code> option for more details (<span class="version updated">v2.16.4</span>).</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h4>Experiment with the mask:</h4>
|
||||
<textarea class="source">$#,##0.00 USD
|
||||
##.000,00 ¥
|
||||
£-##¿000$00 xx
|
||||
test:### ###. ing
|
||||
prefix with a comma, ok? #.00 yep!
|
||||
prefix with a periods? ok?... #.00 yep!
|
||||
prefix with spaces ##^000*00 suffix, with comma
|
||||
prefix (#,###.00) suffix
|
||||
|
||||
BAD => mask starts with a decimal .00 <= BAD
|
||||
BAD => mask starts with a comma ,##.00 <= BAD
|
||||
BAD => No hash (#) outside of mask $#,###.00 No # in suffix <= BAD
|
||||
BAD => No plus (+) here! #,###.00 ¢ or [+] here <= BAD
|
||||
BAD => No minus (-) here! $#,###.00 or [-] here either <= BAD</textarea>
|
||||
<pre class="resultz"></pre>
|
||||
<br class="clear">
|
||||
Value to use: <input class="value" type="text" value="1234567.8955" /><br>
|
||||
Prefix: <input class="prefix" type="text" value='<span class="red">{content}</span>' /> ( add <code>{content}</code> to include the mask prefix )<br>
|
||||
Suffix: <input class="suffix" type="text" value='<span class="blue">{content}</span>' /> ( add <code>{content}</code> to include the mask suffix )<br>
|
||||
<button>Process</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<p></p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
|
||||
<div id="demo"><h3>Row & Column Sums</h3>
|
||||
<table id="table1" class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="sorter-false filter-select" data-placeholder="Select region">Region</th>
|
||||
<th>Salesman</th>
|
||||
<th>FastCar</th>
|
||||
<th>RapidZoo</th>
|
||||
<th>SuperGlue</th>
|
||||
<th class="filter-false">Grand Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th colspan="2">Column Totals</th>
|
||||
<th data-math="col-sum">col-sum</th>
|
||||
<th data-math="col-sum">col-sum</th>
|
||||
<th data-math="col-sum">col-sum</th>
|
||||
<th data-math="col-sum">col-sum</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="5">Grand Total</th>
|
||||
<th data-math="all-sum" data-math-mask="##0.0000">all-sum</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
|
||||
<tbody>
|
||||
<tr><th>Middle</th><td>Joseph</td><td>$ 423</td><td>$ 182</td><td>$ 255</td><td class="totals" data-math="row-sum">row-sum</td></tr>
|
||||
<tr><th>Middle</th><td>Lawrence</td><td>$ 5,908</td><td>$ 4,642</td><td>$ 4,593</td><td class="totals" data-math="row-sum">row-sum</td></tr>
|
||||
<tr><th>Middle</th><td>Maria</td><td>$ 6,502</td><td>$ 3,969</td><td>$ 5,408</td><td class="totals" data-math="row-sum">row-sum</td></tr>
|
||||
<tr><th>Middle</th><td>Matt</td><td>$ 4,170</td><td>$ 6,093</td><td>$ 5,039</td><td class="totals" data-math="row-sum">row-sum</td></tr>
|
||||
</tbody>
|
||||
|
||||
<tbody class="tablesorter-infoOnly">
|
||||
<tr>
|
||||
<th colspan="2">Middle Total</th>
|
||||
<th data-math="above-sum">above-sum</th>
|
||||
<th data-math="above-sum">above-sum</th>
|
||||
<th data-math="above-sum">above-sum</th>
|
||||
<th data-math="above-sum">above-sum</th>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
<tbody>
|
||||
<tr><th>North</th><td>Joseph</td><td>$ 3,643</td><td>$ 5,846</td><td>$ 6,574</td><td class="totals" data-math="row-sum">row-sum</td></tr>
|
||||
<tr><th>North</th><td>Lawrence</td><td>$ 4,456</td><td>$ 6,658</td><td data-text="$ 7,685.0049">$ 7,685</td><td class="totals" data-math="row-sum">row-sum</td></tr>
|
||||
<tr><th>North</th><td>Maria</td><td>$ 6,235</td><td>$ 4,616.99</td><td data-text="3612.3267">$ 3,612.33</td><td class="totals" data-math="row-sum">row-sum</td></tr>
|
||||
<tr><th>North</th><td>Matt</td><td>$ 3,868</td><td>$ 3,926</td><td>$ 3,254</td><td class="totals" data-math="row-sum">row-sum</td></tr>
|
||||
</tbody>
|
||||
|
||||
<tbody class="tablesorter-infoOnly">
|
||||
<tr>
|
||||
<th colspan="2">North Total</th>
|
||||
<th data-math="above-sum">above-sum</th>
|
||||
<th data-math="above-sum">above-sum</th>
|
||||
<th data-math="above-sum">above-sum</th>
|
||||
<th data-math="above-sum">above-sum</th>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
<tbody>
|
||||
<tr><th>West</th><td>Joseph</td><td>$ 5,507</td><td>$ 5,186</td><td>$ 4,882</td><td class="totals" data-math="row-sum">row-sum</td></tr>
|
||||
<tr><th>West</th><td>Lawrence</td><td>$ 4,082</td><td>$ 5,272</td><td>$ 6,124</td><td class="totals" data-math="row-sum">row-sum</td></tr>
|
||||
<tr><th>West</th><td>Maria</td><td>$ 5,520</td><td>$ 5,461</td><td>$ 4,872</td><td class="totals" data-math="row-sum">row-sum</td></tr>
|
||||
<tr><th>West</th><td>Matt</td><td>$ 6,737</td><td>$ 4,598</td><td>$ 4,233</td><td class="totals" data-math="row-sum">row-sum</td></tr>
|
||||
</tbody>
|
||||
|
||||
<tbody class="tablesorter-infoOnly">
|
||||
<tr>
|
||||
<th colspan="2">West Total</th>
|
||||
<th data-math="above-sum">above-sum</th>
|
||||
<th data-math="above-sum">above-sum</th>
|
||||
<th data-math="above-sum">above-sum</th>
|
||||
<th data-math="above-sum">above-sum</th>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
|
||||
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
|
||||
<h3>Math Formulas</h3>
|
||||
<table id="table2" class="tablesorter">
|
||||
<thead>
|
||||
<tr><th>Formula</th><th>A</th><th>B</th><th>C</th><th>D</th><th>E</th><th>F</th><th>Result (expected result)</th></tr>
|
||||
</thead>
|
||||
<tbody class="tablesorter-infoOnly">
|
||||
<tr><th colspan="8">Default Formulas</th></tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr><td>Count (row-count)</td><td>10</td><td>10</td><td>10</td><td>10</td><td>20</td><td>20</td><td data-math="row-count"></td></tr>
|
||||
<tr><td>Sum (row-sum)</td><td>10</td><td>20</td><td>10</td><td>10</td><td>30</td><td>20</td><td data-math="row-sum"></td></tr>
|
||||
<tr><td>Max (row-max)</td><td>20</td><td>60</td><td>30</td><td>15</td><td>30</td><td>5</td><td data-math="row-max"></td></tr>
|
||||
<tr><td>Min (row-min)</td><td>20</td><td>60</td><td>30</td><td>15</td><td>30</td><td>5</td><td data-math="row-min"></td></tr>
|
||||
<tr><td>Mean (row-mean)</td><td>10</td><td>20</td><td>30</td><td>10</td><td>30</td><td>20</td><td data-math="row-mean"></td></tr>
|
||||
<tr><td>Median (row-median)</td><td>10</td><td>5</td><td>3</td><td>4</td><td>4</td><td>3</td><td data-math="row-median"></td></tr>
|
||||
<tr><td>Mode (row-mode)</td><td>1</td><td>2</td><td>2</td><td>2</td><td>3</td><td>2</td><td data-math="row-mode"></td></tr>
|
||||
<tr><td>Mode (row-mode)</td><td>1</td><td>2</td><td>2</td><td>1</td><td>3</td><td>4</td><td data-math="row-mode"></td></tr>
|
||||
<tr><td>Range (row-range)</td><td>1</td><td>-2</td><td>2</td><td>4</td><td>6</td><td>0</td><td data-math="row-range"></td></tr>
|
||||
<tr><td>Variance [population] (row-varp)</td><td>2</td><td>7</td><td>4</td><td>5</td><td>5</td><td>4</td><td data-math="row-varp"></td></tr>
|
||||
<tr><td>Standard Deviation [population] (row-stdevp)</td><td>2</td><td>7</td><td>4</td><td>5</td><td>5</td><td>4</td><td data-math="row-stdevp"></td></tr>
|
||||
<tr><td>Variance [sample] (row-vars)</td><td>2</td><td>7</td><td>4</td><td>5</td><td>5</td><td>4</td><td data-math="row-vars"></td></tr>
|
||||
<tr><td>Standard Deviation [sample] (row-stdevs)</td><td>2</td><td>7</td><td>4</td><td>5</td><td>5</td><td>4</td><td data-math="row-stdevs"></td></tr>
|
||||
</tbody>
|
||||
<tbody class="tablesorter-infoOnly">
|
||||
<tr><th colspan="8">Custom Formulas</th></tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr><td>Custom ( (A+B+C)*D - (E/F)*100 )</td><td>5</td><td>2</td><td>3</td><td>20</td><td>1</td><td>2</td><td data-math="row-custom"></td></tr>
|
||||
<tr><td>Product ( A*B*C*D*E*F )</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>10</td><td data-math="row-product"></td></tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
|
||||
<h1>CSS</h1>
|
||||
<div id="css">
|
||||
<pre class="prettyprint lang-css"></pre>
|
||||
</div>
|
||||
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
935
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-widget-output.html
Executable file
935
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-widget-output.html
Executable file
@@ -0,0 +1,935 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Output Widget</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
|
||||
<script src="js/jquery-ui-latest.min.js"></script>
|
||||
<link rel="stylesheet" href="css/bootstrap.min.css">
|
||||
<script src="js/bootstrap.min.js"></script><!-- -->
|
||||
<link href="css/jq.css" rel="stylesheet">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<link href="css/tipsy.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
<script src="js/jquery.tipsy.min.js"></script>
|
||||
<style>
|
||||
.red {
|
||||
color: red;
|
||||
}
|
||||
.accordion a {
|
||||
color: #2A6496;
|
||||
}
|
||||
.ts-pager, select.btn-sm {
|
||||
display: inline-block;
|
||||
}
|
||||
select.btn-sm {
|
||||
width: 50px;
|
||||
height: 30px;
|
||||
vertical-align: top;
|
||||
}
|
||||
.dropdown-menu {
|
||||
min-width: 280px;
|
||||
font-size: 12px;
|
||||
padding: 10px;
|
||||
}
|
||||
.dropdown-menu h5 {
|
||||
text-align: right;
|
||||
margin-right: 4px;
|
||||
}
|
||||
div.output-download-popup {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.output-separator, .output-replacequotes, .output-quotes {
|
||||
font-family: Tahoma, Geneva, sans-serif;
|
||||
min-width: 18px;
|
||||
height: 22px;
|
||||
}
|
||||
.output-separator-input, .output-replacequotes {
|
||||
width: 26px;
|
||||
}
|
||||
pre {
|
||||
/* override bootstrap setting */
|
||||
overflow-y: hidden !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.bootstrap.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
<script src="../js/widgets/widget-output.js"></script>
|
||||
|
||||
<!-- Tablesorter: optional -->
|
||||
<link rel="stylesheet" href="../addons/pager/jquery.tablesorter.pager.css">
|
||||
<script src="../addons/pager/jquery.tablesorter.pager.js"></script>
|
||||
<script>
|
||||
$(function(){
|
||||
$('#output-options').tablesorter({
|
||||
theme: 'bootstrap',
|
||||
widthFixed : true,
|
||||
headerTemplate : '{content} {icon}',
|
||||
widgets: ["zebra", "stickyHeaders", "uitheme"]
|
||||
});
|
||||
|
||||
// External search
|
||||
// buttons set up like this:
|
||||
// <button type="button" data-filter-column="4" data-filter-text="2?%">Saved Search</button>
|
||||
$('button[data-filter-column]').click(function(){
|
||||
/*** first method *** data-filter-column="1" data-filter-text="!son"
|
||||
add search value to Discount column (zero based index) input */
|
||||
var filters = [],
|
||||
$t = $(this),
|
||||
col = $t.data('filter-column'), // zero-based index
|
||||
txt = $t.data('filter-text') || $t.text(); // text to add to filter
|
||||
filters[col] = txt;
|
||||
// using "table.hasFilters" here to make sure we aren't targetting a sticky header
|
||||
$.tablesorter.setFilters( $('table.hasFilters'), filters, true ); // new v2.9
|
||||
return false;
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
// set up demo for two table groups
|
||||
var demos = ['.group1', '.group2'];
|
||||
|
||||
$.each(demos, function(groupIndex){
|
||||
var $this = $(demos[groupIndex]);
|
||||
|
||||
// call the tablesorter plugin
|
||||
$this.find("table").tablesorter({
|
||||
theme: 'bootstrap',
|
||||
widthFixed : true,
|
||||
headerTemplate : '{content} {icon}',
|
||||
widgets: ["zebra", "filter", "uitheme", "output"],
|
||||
widgetOptions : {
|
||||
filter_filteredRow : 'filtered',
|
||||
filter_reset : demos[groupIndex] + ' .reset',
|
||||
output_separator : ',', // ',' 'json', 'array' or separator (e.g. ',')
|
||||
output_ignoreColumns : [], // columns to ignore [0, 1,... ] (zero-based index)
|
||||
output_dataAttrib : 'data-name', // data-attribute containing alternate cell text
|
||||
output_headerRows : true, // output all header rows (multiple rows)
|
||||
output_delivery : 'p', // (p)opup, (d)ownload
|
||||
output_saveRows : 'f', // (a)ll, (f)iltered or (v)isible
|
||||
output_duplicateSpans: true, // duplicate output data in tbody colspan/rowspan
|
||||
output_replaceQuote : '\u201c;', // change quote to left double quote
|
||||
output_includeHTML : true, // output includes all cell HTML (except the header cells)
|
||||
output_trimSpaces : false, // remove extra white-space characters from beginning & end
|
||||
output_wrapQuotes : false, // wrap every cell output in quotes
|
||||
output_popupStyle : 'width=580,height=310',
|
||||
output_saveFileName : 'mytable.csv',
|
||||
// callbackJSON used when outputting JSON & any header cells has a colspan - unique names required
|
||||
output_callbackJSON : function($cell, txt, cellIndex) { return txt + '(' + cellIndex + ')'; },
|
||||
// callback executed when processing completes
|
||||
// return true to continue download/output
|
||||
// return false to stop delivery & do something else with the data
|
||||
output_callback : function(config, data) { return true; },
|
||||
|
||||
// the need to modify this for Excel no longer exists
|
||||
output_encoding : 'data:application/octet-stream;charset=utf8,'
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
// add pager to first table
|
||||
if (groupIndex === 0) {
|
||||
$this.find("table").tablesorterPager({
|
||||
container: $(".ts-pager"),
|
||||
output: '{startRow} - {endRow} / {filteredRows} ({totalRows})',
|
||||
size: 5
|
||||
});
|
||||
}
|
||||
|
||||
$this.find('.dropdown-toggle').click(function(e){
|
||||
// this is needed because clicking inside the dropdown will close
|
||||
// the menu with only bootstrap controlling it.
|
||||
$this.find('.dropdown-menu').toggle();
|
||||
return false;
|
||||
});
|
||||
// make separator & replace quotes buttons update the value
|
||||
$this.find('.output-separator').click(function(){
|
||||
$this.find('.output-separator').removeClass('active');
|
||||
var txt = $(this).addClass('active').html()
|
||||
$this.find('.output-separator-input').val( txt );
|
||||
$this.find('.output-filename').val(function(i, v){
|
||||
// change filename extension based on separator
|
||||
var filetype = (txt === 'json' || txt === 'array') ? 'js' :
|
||||
txt === ',' ? 'csv' : 'txt';
|
||||
return v.replace(/\.\w+$/, '.' + filetype);
|
||||
});
|
||||
return false;
|
||||
});
|
||||
$this.find('.output-quotes').click(function(){
|
||||
$this.find('.output-quotes').removeClass('active');
|
||||
$this.find('.output-replacequotes').val( $(this).addClass('active').text() );
|
||||
return false;
|
||||
});
|
||||
|
||||
// clicking the download button; all you really need is to
|
||||
// trigger an "output" event on the table
|
||||
$this.find('.download').click(function(){
|
||||
var typ,
|
||||
$table = $this.find('table'),
|
||||
wo = $table[0].config.widgetOptions,
|
||||
saved = $this.find('.output-filter-all :checked').attr('class');
|
||||
wo.output_separator = $this.find('.output-separator-input').val();
|
||||
wo.output_delivery = $this.find('.output-download-popup :checked').attr('class') === "output-download" ? 'd' : 'p';
|
||||
wo.output_saveRows = saved === "output-filter" ? 'f' : saved === 'output-visible' ? 'v' : 'a';
|
||||
wo.output_replaceQuote = $this.find('.output-replacequotes').val();
|
||||
wo.output_trimSpaces = $this.find('.output-trim').is(':checked');
|
||||
wo.output_includeHTML = $this.find('.output-html').is(':checked');
|
||||
wo.output_wrapQuotes = $this.find('.output-wrap').is(':checked');
|
||||
wo.output_headerRows = $this.find('.output-headers').is(':checked');
|
||||
wo.output_saveFileName = $this.find('.output-filename').val();
|
||||
$table.trigger('outputTable');
|
||||
return false;
|
||||
});
|
||||
|
||||
// add tooltip
|
||||
$this.find('.dropdown-menu [title]').tipsy({ gravity: 's' });
|
||||
|
||||
});
|
||||
|
||||
});</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Output Widget (beta)</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<p></p>
|
||||
<br>
|
||||
|
||||
<div id="root" class="accordion">
|
||||
|
||||
<h3><a href="#">Notes</a></h3>
|
||||
<div>
|
||||
|
||||
<h4>Changes</h4>
|
||||
<ul>
|
||||
<li>In <span class="version">v2.17.5</span>, the need to modify the server's content disposition no longer exists.</li>
|
||||
<li>In <span class="version">v2.17.0</span>,
|
||||
<ul>
|
||||
<li>Added the <code>output_ignoreColumns</code> option & modified the <code>output_callback</code> parameters.</li>
|
||||
<li>Added <code>output_duplicateSpans</code> option to duplicate (when <code>true</code>) colspan & rowspan content across cells.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>In <span class="version">v2.16.4</span>, added the <code>output_encoding</code> option.</li>
|
||||
</ul>
|
||||
|
||||
<h4>Requirements</h4>
|
||||
<ul>
|
||||
<li>This widget will <strong>only work</strong> in tablesorter version 2.8+ and jQuery version 1.7+.</li>
|
||||
<li><del>To download a file with the set filename and extension, the server's <code>Content-disposition</code> needs to be set</del></li>
|
||||
<li>This widget now uses a method available in modern browsers (IE10+) to download files without the need for server side modifications</li>
|
||||
<li>Support in older browsers (IE9 and older) have not been throughly tested.</li>
|
||||
</ul>
|
||||
|
||||
<h4>Features & Usage</h4>
|
||||
<ul>
|
||||
<li>This widget can output the table data to:
|
||||
<ul>
|
||||
<li>JSON</li>
|
||||
<li>Array of arrays</li>
|
||||
<li>Text with any separator (comma, tab, etc).</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Rowspan and colspan are supported by this widget. Please take note of additional information in the "Rowspan and colspan" section below.</li>
|
||||
<li>This demo uses Bootstrap to create the download button dropdown for each table allowing the user to choose the settings
|
||||
<ul>
|
||||
<li>Using Bootstrap was kind of a pain in the butt... any click inside would close the dropdown.</li>
|
||||
<li>I am sure there are better alternatives as the download button and popup are all completely customizable.</li>
|
||||
<li>The download dropdown code is probably overly complicated because it is set up for two tables & allows modifying almost all of the options.</li>
|
||||
<li>The only thing needed to output the table code (download or open a popup) is to trigger the following event after all of your widget options are set as desired: <pre class="prettyprint lang-js">$table.trigger('outputTable');</pre></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<h4>Credit</h4>
|
||||
<ul>
|
||||
<li>This widget uses heavily modified code from:
|
||||
<ul>
|
||||
<li><a href="http://www.kunalbabre.com/projects/table2CSV.php">HTML Table to CSV</a> (License unknown)</li>
|
||||
<li><a href="https://github.com/PixelsCommander/Download-File-JS">Download-File-JS</a> (<a href="http://www.apache.org/licenses/LICENSE-2.0">Apache v2.0</a>)</li>
|
||||
<li><a href="http://html5-demos.appspot.com/static/a.download.html">Download demo</a> from <a href="https://github.com/ebidel/html5demos">ebidel/html5demos</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Basic Setup</a></h3>
|
||||
<div>
|
||||
Using the default settings of this widget will:
|
||||
<ul>
|
||||
<li>Output csv to a popup window.</li>
|
||||
<li>Only include the last header row (if there are more than one rows).</li>
|
||||
<li>Only include filtered rows (all rows will be included, even if the filter widget isn't being used).</li>
|
||||
<li>Will only output the table cell text (ignoring any HTML).</li>
|
||||
</ul>
|
||||
Of course, all of the above behavior can be modified using the options.<br>
|
||||
This is an example of how to setup a table using only the default settings:
|
||||
<h4>HTML</h4>
|
||||
<pre class="prettyprint lang-html"><button class="download">Get CSV</button>
|
||||
<table class="tablesorter">
|
||||
<!-- .... -->
|
||||
</table></pre>
|
||||
<h4>Script</h4>
|
||||
<pre class="prettyprint lang-js">$(function () {
|
||||
var $table = $('table');
|
||||
|
||||
$('.download').click(function(){
|
||||
// tell the output widget do it's thing
|
||||
$table.trigger('outputTable');
|
||||
});
|
||||
|
||||
$table.tablesorter({
|
||||
theme: 'blue',
|
||||
widgets: ['zebra', 'output']
|
||||
});
|
||||
});</pre>
|
||||
Modification of the <code>.htaccess</code> is no longer required
|
||||
<div class="fade">
|
||||
<h4>.htaccess</h4>
|
||||
The Content-disposition headers <em>may need to be set</em> in order to make downloads work properly in IE. So <code>.htaccess</code> can look like:
|
||||
<pre class="prettyprint lang-xml"><FilesMatch "\.(?i:csv|txt)$">
|
||||
ForceType application/octet-stream
|
||||
Header set Content-Disposition attachment
|
||||
</FilesMatch></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Setup Example (php)</a></h3>
|
||||
<div>
|
||||
Thanks to <a href="https://github.com/TheSin-">TheSin-</a> for sharing this setup which includes the necessary php to allow file download with the proper filename and extension (<a href="https://gist.github.com/TheSin-/3303c23f033bd973bf34">original Gist</a>)
|
||||
<p>
|
||||
<script src="https://gist.github.com/TheSin-/3303c23f033bd973bf34.js"></script>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Rowspan and colspan</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>Even though tablesorter does not currently support <code>rowspan</code> and <code>colspan</code> within the tbody (except in child rows), this widget does support them.<br><br></li>
|
||||
<li>When the widget encounters a <code>colspan</code>:
|
||||
<ul>
|
||||
<li>The colspan will be processed such that the data will be applied to each cell as if the colspan did not exist. So a header row that looks like this:
|
||||
<pre class="prettyprint lang-html"><th>data</th><th colspan="2">values</th></pre>
|
||||
will produce an output like this:
|
||||
<pre class="prettyprint lang-js">data, values, values</pre>
|
||||
</li>
|
||||
<li><span class="label label-info">Important</span> But, if a JSON output is chosen, the resulting object for a row cannot contain duplicate keys.<br>
|
||||
<br>
|
||||
<pre class="prettyprint lang-js">[{ "data" : "0", "values" : "1", "values" : "2" }]
|
||||
// becomes [{ "data" : "0", "values" : "2" }]</pre>
|
||||
So, in order to fix this, any key (header name) with a colspan will have the column index added to the end (see the <code>output_callbackJSON</code> option). So the same HTML above will produce the following output:
|
||||
<pre class="prettyprint lang-js">[{ "data" : "0", "values" : "1", "values(2)" : "2" }]</pre>
|
||||
</li>
|
||||
</ul>
|
||||
<br>
|
||||
</li>
|
||||
<li>When the widget encounters a <code>rowspan</code>:
|
||||
<ul>
|
||||
<li>The rowspan will be processed such that the data will be applied to each cell as if the rowspan did not exist. So if two header rows looks like this:
|
||||
<pre class="prettyprint lang-html"><tr>
|
||||
<th rowspan="2">line</th>
|
||||
<th colspan="3">values</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>value1</th>
|
||||
<th>value2</th>
|
||||
<th>value3</th>
|
||||
</tr></pre>
|
||||
And the <code>output_headerRows</code> is <code>true</code>, the output will look like this:
|
||||
<pre class="prettyprint lang-js">line,values,values,values
|
||||
line,value1,value2,value3
|
||||
1,1.1,1.2,1.3
|
||||
1,1.4,1.5,1.5</pre>
|
||||
</li>
|
||||
<li>
|
||||
<span class="label label-info">Important</span> But, if a JSON output is chosen, and <code>output_headerRows</code> is set to <code>false</code>, only header names from the last row will be applied to the output. The HTML above will produce this output:<br>
|
||||
<br>
|
||||
<pre class="prettyprint lang-js">[
|
||||
{ "line" : "1", "value1" : "1.1", "value2" : "1.2", "value3" : "1.3" },
|
||||
{ "line" : "1", "value1" : "1.4", "value2" : "1.5", "value3" : "1.5" }
|
||||
]</pre>
|
||||
If the <code>output_headerRows</code> is set to <code>true</code>, the header names from the second row will be applied to alternating rows and the header with a <code>colspan</code> will get uniques names using the <code>output_callbackJSON</code> option. So the same HTML above will produce the following output:
|
||||
<pre class="prettyprint lang-js">[
|
||||
{ "line" : "1", "values" : "1.1", "values(2)" : "1.2", "values(3)" : "1.3" },
|
||||
{ "line" : "1", "value1" : "1.4", "value2" : "1.5", "value3" : "1.5" }
|
||||
]</pre>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Options</a></h3>
|
||||
<div>
|
||||
<h4>Output widget default options (added inside of tablesorter <code>widgetOptions</code>)</h4>
|
||||
<div class="tip">
|
||||
<span class="label label-info">TIP!</span> Click on the link in the option 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>
|
||||
<br>
|
||||
<table id="output-options" class="tablesorter-bootstrap options">
|
||||
<colgroup><col style="width:135px"><col style="width:100px"></colgroup>
|
||||
<thead>
|
||||
<tr><th>Option</th><th>Default</th><th class="sorter-false">Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr id="output_separator">
|
||||
<td><a href="#" class="permalink">output_separator</a></td>
|
||||
<td><code>','</code></td>
|
||||
<td>
|
||||
This option allows you to set the output as JSON, Array, or change the separator between cell data with text output:
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
When the output is created, and it this option doesn't match either <code>"json"</code> or <code>"array"</code>, each block of table cell data will be separated by this setting.<br>
|
||||
<br>
|
||||
This is the result with this option set to <code>","</code> and with the table filtered with Rank <button type="button" data-filter-column="0" data-filter-text=">100">>100</button> :
|
||||
<br>
|
||||
<pre class="prettyprint lang-js">Rank,First,Last,Age,Total,Discount,Date
|
||||
111,Peter,Parker,28,$9.99,20%,"Jul 6, 2006 8:14 AM"
|
||||
166,Bruce Lee,Evans,22,$13.19,11%,"Jan 18, 2007 9:12 AM"</pre>
|
||||
When this option is set to <code>"array"</code>, this will be the resulting output:
|
||||
<pre class="prettyprint lang-js">[
|
||||
[ "Rank", "First", "Last", "Age", "Total", "Discount", "Date" ],
|
||||
[ "111", "Peter", "Parker", "28", "$9.99", "20%", "Jul 6, 2006 8:14 AM" ],
|
||||
[ "166", "Bruce Lee", "Evans", "22", "$13.19", "11%", "Jan 18, 2007 9:12 AM" ],
|
||||
]</pre><span class="label label-info">Note</span> this requires <a href="http://caniuse.com/#feat=json"><code>JSON.stringify</code></a>, or the result will be a flattened array.<br>
|
||||
<br>
|
||||
And when this option is set to <code>"json"</code>, the resulting output will be a valid JSON format:<br>
|
||||
<pre class="prettyprint lang-js">[
|
||||
{
|
||||
"Rank" : "111",
|
||||
"First": "Peter",
|
||||
"Last": "Parker",
|
||||
"Age": "28",
|
||||
"Total": "$9.99",
|
||||
"Discount": "20%",
|
||||
"Date": "Jul 6, 2006 8:14 AM"
|
||||
}, {
|
||||
"Rank": "166",
|
||||
"First": "Bruce Lee",
|
||||
"Last": "Evans",
|
||||
"Age": "22",
|
||||
"Total": "$13.19",
|
||||
"Discount": "11%",
|
||||
"Date": "Jan 18, 2007 9:12 AM"
|
||||
}
|
||||
]</pre><span class="label label-info">Note</span> this also requires <a href="http://caniuse.com/#feat=json"><code>JSON.stringify</code></a>, or the result will show <code>[ [object Object], ... ]</code> in the output.
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="output_ignorecolumns">
|
||||
<td><a href="#" class="permalink">output_ignoreColumns</a></td>
|
||||
<td><code>[ ]</code></td>
|
||||
<td>
|
||||
Add the zero-based column index to this array to ignore specific columns (<span class="version">v2.17.0</span>)
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
For example, to use this option to hide the first column, set it as follows:
|
||||
<pre class="prettyprint lang-js">output_ignoreColumns : [ 0 ]</pre>
|
||||
<br>
|
||||
<span class="label label-info">Note</span> This option will work properly with tables that contain rowspans & colspans.
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="output_dataattrib">
|
||||
<td><a href="#" class="permalink">output_dataAttrib</a></td>
|
||||
<td><code>'data-name'</code></td>
|
||||
<td>
|
||||
This option allows you to override any table cell (<code>thead</code> or <code>tbody</code>) text with the contents of this data-attribute
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
In the below example, the header text is obtained from this set data-attribute. If the data-attribute doesn't exist, then the header name is obtained from the actual header text.<br>
|
||||
<pre class="prettyprint lang-html"><thead>
|
||||
<tr>
|
||||
<th>Rank</th>
|
||||
<th data-name="First">First Name</th>
|
||||
<th data-name="Last">Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead></pre>
|
||||
<br>
|
||||
Notice in this output that the "First" and "Last" columns match the contents of the <code>data-name</code> attribute and not the header text:
|
||||
<pre class="prettyprint lang-js">Rank,First,Last,Age,Total,Discount,Date</pre>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="output_headerrows">
|
||||
<td><a href="#" class="permalink">output_headerRows</a></td>
|
||||
<td><code>false</code></td>
|
||||
<td>
|
||||
Setting this option to <code>true</code> will include all header rows while processing a JSON output.
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
If this option is set to <code>false</code>, only the <strong>last row</strong> of the table header will be used as a key names for the tbody values; this does assume that the last table row in the header contains all of the header cell names & does not contain any <code>colspan</code>.
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="output_delivery">
|
||||
<td><a href="#" class="permalink">output_delivery</a></td>
|
||||
<td><code>'popup'</code></td>
|
||||
<td>
|
||||
Change this option to either <code>'popup'</code> or <code>'download'</code> to set the destination of the output.
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
When setting this option, only the first letter is required (<code>'p'</code> or <code>'d'</code>) :
|
||||
<br>
|
||||
<pre class="prettyprint lang-js">output_delivery : 'p'</pre>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="output_saverows">
|
||||
<td><a href="#" class="permalink">output_saveRows</a></td>
|
||||
<td><code>'filtered'</code></td>
|
||||
<td>
|
||||
Change this option to either <code>'filtered'</code>, <code>'visible'</code> or <code>'all'</code> to set which rows will be added to the output.
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
Even if this option is set to <code>'filtered'</code> and the filter widget is not being used, all of the rows will be added to the output.<br>
|
||||
<br>
|
||||
When setting this option, only the first letter is required (<code>'f'</code>, <code>'v'</code> or <code>'a'</code>) :
|
||||
<br>
|
||||
<pre class="prettyprint lang-js">output_saveRows : 'f'</pre>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="output_duplicatespans">
|
||||
<td><a href="#" class="permalink">output_duplicateSpans</a></td>
|
||||
<td><code>true</code></td>
|
||||
<td>
|
||||
When <code>true</code>, colspan & rowspan content is duplicated in the output
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
By default, any <em>tbody</em> cells that are included in the colspan or rowspan will have the cell's content duplicated in the output. When set to <code>false</code>, the cells within the colspan or rowspan will be empty.<br>
|
||||
Here is an example of the second table output with this option set to <code>false</code>:
|
||||
<pre class="prettyprint lang-js">line,values,values,values
|
||||
line,value1,value2,value3
|
||||
1,1.1,1.2,1.3
|
||||
,1.4,1.5,
|
||||
2,2.1,2.2,2.3
|
||||
,2.4,2.5,
|
||||
3,3.1,3.2,3.3
|
||||
,3.4,3.5,
|
||||
4,4.1,,4.2
|
||||
,,,4.3</pre>This option does not affect thead cells, they will always have duplicated content.
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="output_replacequote">
|
||||
<td><a href="#" class="permalink">output_replaceQuote</a></td>
|
||||
<td><code>'\u201c;'</code></td>
|
||||
<td>
|
||||
When a table cell contains a quote, it needs to be modified to differentiate it from cell content that is wrapped in quotes.
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
Quotes are necessary to maintain the integrity of the output data when any cell content contains either the separator or carriage returns. In order to do this, this widget replaces any quotes within cell content with this character.<br>
|
||||
<br>
|
||||
By default, this replacement character is a left double quote (<code>“</code>, shown as it's unicode equivalent <code>'\u201c;'</code>).
|
||||
<pre class="prettyprint lang-js">output_replaceQuote : '\u201c;' // left double quote</pre>
|
||||
In the demo below, additional examples of a single quote (<code>'</code>) and escaped double quote (<code>\"</code>) are added as selectable buttons.
|
||||
|
||||
<pre class="prettyprint lang-js">Rank,First,Last,Age,Total,Discount,Date
|
||||
1,Philip Aaron Wong,Johnson Sr Esq,25,$5.95,22%,"Jun 26, 2004 7:22 AM"
|
||||
21,John,“Robin“\n\tHood,33,$19.99,25%,"Dec 10, 2002 5:14 AM"
|
||||
013,Clark,“Old man“ Kent Sr.,18,$15.89,44%,"Jan 12, 2003 11:14 AM"
|
||||
16,Jim,“Jimmy“ Franco,24,-$14.19,24%,"Jan 14, 2004 11:23 AM"
|
||||
55,Dennis,“Charley“ Bronson,65,$123.00,32%,"Jan 20, 2001 1:12 PM"</pre>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="output_includehtml">
|
||||
<td><a href="#" class="permalink">output_includeHTML</a></td>
|
||||
<td><code>false</code></td>
|
||||
<td>
|
||||
This option, if <code>true</code> tells the widget to include any HTML within the table cells.
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
Only cells within the table body will include HTML. The table header has a lot of extra markup for the sorting arrows, so it is automatically stripped of HTML.
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="output_trimspaces">
|
||||
<td><a href="#" class="permalink">output_trimSpaces</a></td>
|
||||
<td><code>true</code></td>
|
||||
<td>
|
||||
This option, if <code>true</code> tells the widget to remove any leading and trailing (white)space characters
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
Leading and trailing whitespace characters include newlines, spaces, non-breaking spaces and tabs. Any of these whitespace characters in the middle of the table cell will always be preserved.
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="output_wrapquotes">
|
||||
<td><a href="#" class="permalink">output_wrapQuotes</a></td>
|
||||
<td><code>false</code></td>
|
||||
<td>
|
||||
This option, if <code>true</code> wrap the output of all table cell content in quotes.
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
This is the output of the widget when the age column is filtered for results in the range <button type="button" data-filter-column="3" data-filter-text="25 - 35">25 - 35</button>.
|
||||
<pre class="prettyprint lang-js">"Rank","First","Last","Age","Total","Discount","Date"
|
||||
"1","Philip Aaron Wong","Johnson Sr Esq","25","$5.95","22%","Jun 26, 2004 7:22 AM"
|
||||
"111","Peter","Parker","28","$9.99","20%","Jul 6, 2006 8:14 AM"
|
||||
"21","John","'Robin'\n\tHood","33","$19.99","25%","Dec 10, 2002 5:14 AM"
|
||||
"9","Martha","delFuego","25","$22.09","12%","Jun 11, 2011 10:55 AM"</pre>
|
||||
Notice that every block of data is wrapped in a quote. When this option is <code>false</code>, only blocks that contain a newline or separator (comma, by default) will be wrapped in quotes. Here is the same data set without this option set:
|
||||
<pre class="prettyprint lang-js">Rank,First,Last,Age,Total,Discount,Date
|
||||
1,Philip Aaron Wong,Johnson Sr Esq,25,$5.95,22%,"Jun 26, 2004 7:22 AM"
|
||||
111,Peter,Parker,28,$9.99,20%,"Jul 6, 2006 8:14 AM"
|
||||
21,John,'Robin'\n\tHood,33,$19.99,25%,"Dec 10, 2002 5:14 AM"
|
||||
9,Martha,delFuego,25,$22.09,12%,"Jun 11, 2011 10:55 AM"</pre>
|
||||
Only the dates, which contain commas, are wrapped in quotes.
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="output_popupstyle">
|
||||
<td><a href="#" class="permalink">output_popupStyle</a></td>
|
||||
<td><code>'width=500,height=300'</code></td>
|
||||
<td>If the data is sent to a popup window, the features set by this option are applied (do not include any spaces).
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
Set the desired popup window features within this string. For a full list of features, please refer to the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window.open">Mozilla Developer Network: Window.open</a> documentation page (look for <code>strWindowFeatures</code> parameters).<br>
|
||||
<br>
|
||||
The <code><textarea></code> within the popup window is set with 100% width and height.
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="output_savefilename">
|
||||
<td><span class="permalink">output_saveFileName</span></td>
|
||||
<td><code>'mytable.csv'</code></td>
|
||||
<td>When downloading, this option sets the filename of the output.</td>
|
||||
</tr>
|
||||
<tr id="output_callback">
|
||||
<td><a href="#" class="permalink">output_callback</a></td>
|
||||
<td>{see description}</td>
|
||||
<td>Return <code>true</code> in this callback to continue the download or open the popup (<span class="version updated">v2.17.0</span>).
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
As of v2.17.0, the callback function was modified to pass two parameters:
|
||||
<ul>
|
||||
<li><code>config</code> - the <code>table.config</code> settings.</li>
|
||||
<li><code>data</code> - the output data as a string</li>
|
||||
</ul>
|
||||
Default setting:
|
||||
<pre class="prettyprint lang-js">function(config, data){ return true; }</pre>
|
||||
After table processing has completed, this callback function is exectued. If <code>true</code> is not returned, the processed data will not open a popup, nor download the data.
|
||||
<pre class="prettyprint lang-js">output_callback : function(config, data) {
|
||||
// send output to the console only
|
||||
console.log(data);
|
||||
return false;
|
||||
}</pre>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="output_callbackjson">
|
||||
<td><a href="#" class="permalink">output_callbackJSON</a></td>
|
||||
<td>{see description}</td>
|
||||
<td>JSON callback executed when a colspan is encountered in the header.
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
Default setting & how to use this option:
|
||||
<pre class="prettyprint lang-js">output_callbackJSON : function($cell, txt, cellIndex) {
|
||||
return txt + '(' + (cellIndex + col) + ')';
|
||||
}</pre>For more details on why this option is necessary, see the "Rowspan and colspan" section above.
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="output_encoding">
|
||||
<td><a href="#" class="permalink">output_encoding</a></td>
|
||||
<td>{see description}</td>
|
||||
<td>Default encoding setting (<span class="version">2.16.4</span>; <span class="version updated">2.17.5</span>)
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
As of <span class="version updated">2.17.5</span>, this option no longer needs to be modified to specifically make this widget download files that will work in Excel.<br>
|
||||
<br>
|
||||
The method used to download has been completely changed. The downloads still need an encoding setting, but this option is now set to a default of
|
||||
<pre class="prettyprint lang-js">output_encoding : 'data:application/octet-stream;charset=utf8,'</pre>
|
||||
<hr>
|
||||
The information below is no longer relavant:
|
||||
<div class="fade">
|
||||
With the default settings (utf-8 no BOM), Excel does not properly encode accented characters unless the csv file is imported. Depending on the characters used, there are various methods which will allow proper encoding, but no one method is ideal. So this option can be set to allow the user to try different encodings. Set it as follows:
|
||||
<pre class="prettyprint lang-js">// output data type (with BOM or Windows-1252 is needed for excel)
|
||||
// NO BOM : 'data:text/csv;charset=utf8,'
|
||||
// With BOM : 'data:text/csv;charset=utf8,%EF%BB%BF'
|
||||
// WIN 1252 : 'data:text/csv;charset=windows-1252,' // ANSI (subset of ISO-8859-1)
|
||||
output_encoding : 'data:text/csv;charset=utf8,'</pre><span class="label label-info">Note</span> The commas are important!
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
<span class="label label-info">Note</span> If you need to change the carriage return and/or the tab replacement strings, modify them as follows:
|
||||
<blockquote>
|
||||
<pre class="prettyprint lang-js">$.tablesorter.output.replaceCR = '\\n';
|
||||
$.tablesorter.output.replaceTab = '\\t';</pre>
|
||||
</blockquote>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<p></p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<br>
|
||||
Search <button type="button" data-filter-column="5" data-filter-text=">15">>15</button> in the Discount column<br>
|
||||
<br>
|
||||
|
||||
<div id="demo"><div class="group1">
|
||||
<h4>Table showing filter & pager support</h4>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-default reset">Reset</button> <!-- targeted by the "filter_reset" option -->
|
||||
|
||||
<!-- Split button -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-default download">Download</button>
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
||||
<span class="caret"></span>
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li><h5><strong>Output options</strong></h5></li>
|
||||
<li>
|
||||
<label>Separator: <input class="output-separator-input" type="text" size="2" value="," /></label>
|
||||
<button type="button" class="output-separator btn btn-default btn-xs active" title="comma">,</button>
|
||||
<button type="button" class="output-separator btn btn-default btn-xs" title="semi-colon">;</button>
|
||||
<button type="button" class="output-separator btn btn-default btn-xs" title="tab"> </button>
|
||||
<button type="button" class="output-separator btn btn-default btn-xs" title="space"> </button>
|
||||
<button type="button" class="output-separator btn btn-default btn-xs" title="output JSON">json</button>
|
||||
<button type="button" class="output-separator btn btn-default btn-xs" title="output Array (see note)">array</button>
|
||||
</li>
|
||||
<li>
|
||||
<div class="btn-group output-download-popup" data-toggle="buttons" title="Download file or open in Popup window">
|
||||
<label class="btn btn-default btn-sm active">
|
||||
<input type="radio" name="delivery1" class="output-popup" checked> Popup
|
||||
</label>
|
||||
<label class="btn btn-default btn-sm">
|
||||
<input type="radio" name="delivery1" class="output-download"> Download
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="btn-group output-filter-all" data-toggle="buttons" title="Output only filtered, visible or all rows">
|
||||
<label class="btn btn-default btn-sm active">
|
||||
<input type="radio" name="getrows1" class="output-filter" checked="checked"> Filtered
|
||||
</label>
|
||||
<label class="btn btn-default btn-sm">
|
||||
<input type="radio" name="getrows1" class="output-visible"> Visible
|
||||
</label>
|
||||
<label class="btn btn-default btn-sm">
|
||||
<input type="radio" name="getrows1" class="output-all"> All
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li>
|
||||
<label>Replace quotes: <input class="output-replacequotes" type="text" size="2" value="'" /></label>
|
||||
<button type="button" class="output-quotes btn btn-default btn-xs active" title="single quote">'</button>
|
||||
<button type="button" class="output-quotes btn btn-default btn-xs" title="left double quote">“</button>
|
||||
<button type="button" class="output-quotes btn btn-default btn-xs" title="escaped quote">\"</button>
|
||||
</li>
|
||||
<li><label title="Remove extra white space from each cell">Trim spaces: <input class="output-trim" type="checkbox" checked /></label></li>
|
||||
<li><label title="Include HTML from cells in output">Include HTML: <input class="output-html" type="checkbox" /></label></li>
|
||||
<li><label title="Wrap all values in quotes">Wrap in Quotes: <input class="output-wrap" type="checkbox" /></label></li>
|
||||
<li><label title="Choose a download filename">Filename: <input class="output-filename" type="text" size="15" value="mytable.csv"/></label></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ts-pager form-horizontal">
|
||||
<button type="button" class="btn btn-default btn-sm first"><i class="icon-step-backward glyphicon glyphicon-step-backward"></i></button>
|
||||
<button type="button" class="btn btn-default btn-sm prev"><i class="icon-arrow-left glyphicon glyphicon-backward"></i></button>
|
||||
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
|
||||
<button type="button" class="btn btn-default btn-sm next"><i class="icon-arrow-right glyphicon glyphicon-forward"></i></button>
|
||||
<button type="button" class="btn btn-default btn-sm last"><i class="icon-step-forward glyphicon glyphicon-step-forward"></i></button>
|
||||
<select class="pagesize form-control btn-sm" title="Select page size">
|
||||
<option selected="selected" value="5">5</option>
|
||||
<option value="10">10</option>
|
||||
</select>
|
||||
<select class="gotoPage form-control btn-sm" title="Select page number"></select>
|
||||
</div>
|
||||
|
||||
<table id="table" class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Rank</th>
|
||||
<th data-name="First">First Name</th>
|
||||
<th data-name="Last">Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>1</td><td>Philip Aaron Wong</td><td>Johnson Sr Esq</td><td>25</td><td>$5.95</td><td>22%</td><td>Jun 26, 2004 7:22 AM</td></tr>
|
||||
<tr><td>11</td><td>Aaron</td><td>"doc" Hibert</td><td>12</td><td>$2.99</td><td>5%</td><td>Aug 21, 2009 12:21 PM</td></tr>
|
||||
<tr><td>12</td><td>Brandon Clark</td><td>Henry Jr</td><td>51</td><td>$42.29</td><td>18%</td><td>Oct 13, 2000 1:15 PM</td></tr>
|
||||
<tr><td>111</td><td>Peter</td><td>Parker</td><td>28</td><td>$9.99</td><td>20%</td><td>Jul 6, 2006 8:14 AM</td></tr>
|
||||
<tr><td>21</td><td><span class="red">John</span></td><td> "Robin"<br> Hood </td><td>33</td><td>$19.99</td><td>25%</td><td>Dec 10, 2002 5:14 AM</td></tr>
|
||||
<tr><td>013</td><td>Clark</td><td>"Old man" Kent Sr.</td><td>18</td><td>$15.89</td><td>44%</td><td>Jan 12, 2003 11:14 AM</td></tr>
|
||||
<tr><td>005</td><td>Bruce</td><td>Almighty <span class="red">Esq</span></td><td>45</td><td>$153.19</td><td>44%</td><td>Jan 18, 2021 9:12 AM</td></tr>
|
||||
<tr><td>10</td><td>Alex</td><td>Dumass</td><td>13</td><td>$5.29</td><td>4%</td><td>Jan 8, 2012 5:11 PM</td></tr>
|
||||
<tr><td>16</td><td>Jim</td><td>"Jimmy" Franco</td><td>24</td><td><span class="red">-$14.19</span></td><td>24%</td><td>Jan 14, 2004 11:23 AM</td></tr>
|
||||
<tr><td>166</td><td>Bruce Lee</td><td>Evans</td><td>22</td><td>$13.19</td><td>11%</td><td>Jan 18, 2007 9:12 AM</td></tr>
|
||||
<tr><td>100</td><td>Brenda Dexter</td><td>McMasters</td><td>18</td><td>$55.20</td><td>15%</td><td>Feb 12, 2010 7:23 PM</td></tr>
|
||||
<tr><td>55</td><td>Dennis</td><td><span class="red">"Charley"</span> Bronson</td><td>65</td><td>$123.00</td><td>32%</td><td>Jan 20, 2001 1:12 PM</td></tr>
|
||||
<tr><td>9</td><td>Martha</td><td>delFuego</td><td>25</td><td>$22.09</td><td>12%</td><td>Jun 11, 2011 10:55 AM</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="group2">
|
||||
<h4>Table showing output widget rowspan & colspan support</h4>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-default reset">Reset</button> <!-- targeted by the "filter_reset" option -->
|
||||
|
||||
<!-- Split button -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-default download">Download</button>
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
||||
<span class="caret"></span>
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li><h5><strong>Output options</strong></h5></li>
|
||||
<li>
|
||||
<label>Separator: <input class="output-separator-input" type="text" size="2" value="," /></label>
|
||||
<button type="button" class="output-separator btn btn-default btn-xs active" title="comma">,</button>
|
||||
<button type="button" class="output-separator btn btn-default btn-xs" title="semi-colon">;</button>
|
||||
<button type="button" class="output-separator btn btn-default btn-xs" title="tab"> </button>
|
||||
<button type="button" class="output-separator btn btn-default btn-xs" title="space"> </button>
|
||||
<button type="button" class="output-separator btn btn-default btn-xs" title="output JSON">json</button>
|
||||
<button type="button" class="output-separator btn btn-default btn-xs" title="output Array (see note)">array</button>
|
||||
</li>
|
||||
<li>
|
||||
<div class="btn-group output-download-popup" data-toggle="buttons" title="Download file or open in Popup window">
|
||||
<label class="btn btn-default btn-sm active">
|
||||
<input type="radio" name="delivery2" class="output-popup" checked> Popup
|
||||
</label>
|
||||
<label class="btn btn-default btn-sm">
|
||||
<input type="radio" name="delivery2" class="output-download"> Download
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="btn-group output-filter-all" data-toggle="buttons" title="Output only filtered, visible or all rows">
|
||||
<label class="btn btn-default btn-sm active">
|
||||
<input type="radio" name="getrows2" class="output-filter" checked> Filtered
|
||||
</label>
|
||||
<label class="btn btn-default btn-sm">
|
||||
<input type="radio" name="getrows2" class="output-visible"> Visible
|
||||
</label>
|
||||
<label class="btn btn-default btn-sm">
|
||||
<input type="radio" name="getrows2" class="output-all"> All
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li>
|
||||
<label>Replace quotes: <input class="output-replacequotes" type="text" size="2" value="'" /></label>
|
||||
<button type="button" class="output-quotes btn btn-default btn-xs active" title="single quote">'</button>
|
||||
<button type="button" class="output-quotes btn btn-default btn-xs" title="left double quote">“</button>
|
||||
<button type="button" class="output-quotes btn btn-default btn-xs" title="escaped quote">\"</button>
|
||||
</li>
|
||||
<li><label title="Remove extra white space from each cell">Trim spaces: <input class="output-trim" type="checkbox" checked /></label></li>
|
||||
<li><label title="Include HTML from cells in output">Include HTML: <input class="output-html" type="checkbox" /></label></li>
|
||||
<li><label title="Wrap all values in quotes">Wrap in Quotes: <input class="output-wrap" type="checkbox" /></label></li>
|
||||
<li><label title="Include both header rows in output">Include both header rows: <input class="output-headers" type="checkbox" checked /></label></li>
|
||||
<li><label title="Choose a download filename">Filename: <input class="output-filename" type="text" size="15" value="mytable.csv"/></label></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<table id="table2">
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowspan="2">line</th>
|
||||
<th colspan="3">values</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>value1</th>
|
||||
<th>value2</th>
|
||||
<th>value3</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td rowspan="2">1</td>
|
||||
<td>1.1</td>
|
||||
<td>1.2</td>
|
||||
<td><span class="red">1.3</span></td>
|
||||
</tr>
|
||||
<tr class="tablesorter-childRow">
|
||||
<td>1.4</td>
|
||||
<td colspan="2">1.5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="2">2</td>
|
||||
<td>2.1</td>
|
||||
<td><span class="red">2.2</span></td>
|
||||
<td>2.3</td>
|
||||
</tr>
|
||||
<tr class="tablesorter-childRow">
|
||||
<td>2.4</td>
|
||||
<td colspan="2">2.5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="2">3</td>
|
||||
<td>3.1</td>
|
||||
<td>3.2</td>
|
||||
<td>3.3</td>
|
||||
</tr>
|
||||
<tr class="tablesorter-childRow">
|
||||
<td>3.4</td>
|
||||
<td colspan="2"><span class="red">3.5</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="2">4</td>
|
||||
<td rowspan="2" colspan="2"><span class="red">4.1</span></td>
|
||||
<td>4.2</td>
|
||||
</tr>
|
||||
<tr class="tablesorter-childRow">
|
||||
<td>4.3</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1>Script</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-js"></pre>
|
||||
</div>
|
||||
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,371 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Pager Widget - Ajax</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 href="../css/theme.blue.css" rel="stylesheet">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<!-- Tablesorter: optional -->
|
||||
<link rel="stylesheet" href="../addons/pager/jquery.tablesorter.pager.css">
|
||||
<script src="../js/widgets/widget-pager.js"></script>
|
||||
|
||||
<!-- Tablesorter: optional -->
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<script id="js">$(function(){
|
||||
|
||||
// Initialize tablesorter
|
||||
// ***********************
|
||||
$("table")
|
||||
.tablesorter({
|
||||
theme: 'blue',
|
||||
widthFixed: true,
|
||||
sortLocaleCompare: true, // needed for accented characters in the data
|
||||
sortList: [ [0,1] ],
|
||||
widgets: ['zebra', 'filter', 'pager'],
|
||||
widgetOptions: {
|
||||
|
||||
// output default: '{page}/{totalPages}'
|
||||
// possible variables: {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {totalRows}
|
||||
pager_output: '{startRow} - {endRow} / {filteredRows} ({totalRows})', //'{startRow} 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,
|
||||
|
||||
// starting page of the pager (zero based index)
|
||||
pager_startPage: 0,
|
||||
|
||||
// Number of visible rows
|
||||
pager_size: 25,
|
||||
|
||||
// Save pager page & size if the storage script is loaded (requires $.tablesorter.storage in jquery.tablesorter.widgets.js)
|
||||
pager_savePages: true,
|
||||
|
||||
// if true, the table will remain the same height no matter how many records are displayed. The space is made up by an empty
|
||||
// table row set to a height to compensate; default is false
|
||||
pager_fixedHeight: false,
|
||||
|
||||
// remove rows from the table to speed up the sort of large tables.
|
||||
// setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
|
||||
pager_removeRows: false, // removing rows in larger tables speeds up the sort
|
||||
|
||||
// use this format: "http://mydatabase.com?page={page}&size={size}&{sortList:col}&{filterList:fcol}"
|
||||
// where {page} is replaced by the page number, {size} is replaced by the number of records to show,
|
||||
// {sortList:col} adds the sortList to the url into a "col" array, and {filterList:fcol} adds
|
||||
// the filterList to the url into an "fcol" array.
|
||||
// So a sortList = [[2,0],[3,0]] becomes "&col[2]=0&col[3]=0" in the url
|
||||
// and a filterList = [[2,Blue],[3,13]] becomes "&fcol[2]=Blue&fcol[3]=13" in the url
|
||||
pager_ajaxUrl: 'assets/City{page}.json?{filterList:filter}&{sortList:column}',
|
||||
|
||||
// modify the url after all processing has been applied
|
||||
pager_customAjaxUrl: function(table, url) {
|
||||
// manipulate the url string as you desire
|
||||
// url += '&cPage=' + window.location.pathname;
|
||||
// trigger my custom event
|
||||
$(table).trigger('changingUrl', url);
|
||||
// send the server the current page
|
||||
return url;
|
||||
},
|
||||
|
||||
// modify the $.ajax object to allow complete control over your ajax requests
|
||||
pager_ajaxObject: {
|
||||
dataType: 'json'
|
||||
},
|
||||
|
||||
// process ajax so that the following information is returned:
|
||||
// [ total_rows (number), rows (array of arrays), headers (array; optional) ]
|
||||
// example:
|
||||
// [
|
||||
// 100, // total rows
|
||||
// [
|
||||
// [ "row1cell1", "row1cell2", ... "row1cellN" ],
|
||||
// [ "row2cell1", "row2cell2", ... "row2cellN" ],
|
||||
// ...
|
||||
// [ "rowNcell1", "rowNcell2", ... "rowNcellN" ]
|
||||
// ],
|
||||
// [ "header1", "header2", ... "headerN" ] // optional
|
||||
// ]
|
||||
pager_ajaxProcessing: function(data){
|
||||
if (data && data.hasOwnProperty('rows')) {
|
||||
var r, row, c, d = data.rows,
|
||||
// total number of rows (required)
|
||||
total = data.total_rows,
|
||||
// array of header names (optional)
|
||||
headers = data.headers,
|
||||
// all rows: array of arrays; each internal array has the table cell data for that row
|
||||
rows = [],
|
||||
// len should match pager set size (c.size)
|
||||
len = d.length;
|
||||
// this will depend on how the json is set up - see City0.json
|
||||
// rows
|
||||
for ( r=0; r < len; r++ ) {
|
||||
row = []; // new row array
|
||||
// cells
|
||||
for ( c in d[r] ) {
|
||||
if (typeof(c) === "string") {
|
||||
row.push(d[r][c]); // add each table cell data to row array
|
||||
}
|
||||
}
|
||||
rows.push(row); // add new row array to rows array
|
||||
}
|
||||
// in version 2.10, you can optionally return $(rows) a set of table rows within a jQuery object
|
||||
return [ total, rows, headers ];
|
||||
}
|
||||
},
|
||||
|
||||
// css class names of pager arrows
|
||||
pager_css: {
|
||||
container : 'tablesorter-pager',
|
||||
errorRow : 'tablesorter-errorRow', // error information row (don't include period at beginning)
|
||||
disabled : 'disabled' // class added to arrows @ extremes (i.e. prev/first arrows "disabled" on first page)
|
||||
},
|
||||
|
||||
// jQuery selectors
|
||||
pager_selectors: {
|
||||
container : '.pager', // target the pager markup (wrapper)
|
||||
first : '.first', // go to first page arrow
|
||||
prev : '.prev', // previous page arrow
|
||||
next : '.next', // next page arrow
|
||||
last : '.last', // go to last page arrow
|
||||
goto : '.gotoPage', // go to page selector - select dropdown that sets the current page
|
||||
pageDisplay : '.pagedisplay', // location of where the "output" is displayed
|
||||
pageSize : '.pagesize' // page size selector - select dropdown that sets the "size" option
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
});</script>
|
||||
|
||||
</head>
|
||||
<body id="pager-demo">
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Pager Widget - Ajax</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>This pager WIDGET <em>can not</em> be applied to the original tablesorter.</li>
|
||||
<li>Do not use this widget along with the pager plugin.</li>
|
||||
<li>The pager.css file also works with this pager widget.</li>
|
||||
<li>This widget is still in <span class="beta">development</span> as it has not been throughly tested.</li>
|
||||
<li>Extensive documentation has not been included, as all functioning is essentially identical to the pager addon, but here are some important differences:
|
||||
<ul>
|
||||
<li>All of the options are now set within the <code>widgetOptions</code>.</li>
|
||||
<li>Most option names have only been modified by adding <code>pager_</code> as a prefix.</li>
|
||||
<li>Exceptions include moving all applied css class names into a <code>pager_css</code> option and all selectors into <code>pager_selectors</code>, including the original <code>container</code> option.</li>
|
||||
<li>See the Javascript code below for a full example of how to use this widget with <strong>ajax</strong>.</li>
|
||||
</ul>
|
||||
</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>
|
||||
|
||||
<h1>Demo</h1>
|
||||
Original Ajax url: <span id="origurl"></span><br>
|
||||
Current Ajax url: <span id="url"></span>
|
||||
<br>
|
||||
<table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<td class="pager sorter-false" colspan="5">
|
||||
<img src="../addons/pager/icons/first.png" class="first" alt="First" />
|
||||
<img src="../addons/pager/icons/prev.png" class="prev" alt="Prev" />
|
||||
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
|
||||
<img src="../addons/pager/icons/next.png" class="next" alt="Next" />
|
||||
<img src="../addons/pager/icons/last.png" class="last" alt="Last" />
|
||||
<select class="pagesize">
|
||||
<option value="25">25</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th data-value=">30">1</th>
|
||||
<th>2</th>
|
||||
<th>3</th>
|
||||
<th>4</th>
|
||||
<th>5</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>1</th>
|
||||
<th>2</th>
|
||||
<th>3</th>
|
||||
<th>4</th>
|
||||
<th>5</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="pager" colspan="5">
|
||||
<img src="../addons/pager/icons/first.png" class="first" alt="First" />
|
||||
<img src="../addons/pager/icons/prev.png" class="prev" alt="Prev" />
|
||||
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
|
||||
<img src="../addons/pager/icons/next.png" class="next" alt="Next" />
|
||||
<img src="../addons/pager/icons/last.png" class="last" alt="Last" />
|
||||
<select class="pagesize">
|
||||
<option value="25">25</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
|
||||
<h1>CSS</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-css">/* pager wrapper, div */
|
||||
.pager {
|
||||
padding: 5px;
|
||||
}
|
||||
/* pager wrapper, in thead/tfoot */
|
||||
td.pager {
|
||||
background-color: #e6eeee;
|
||||
}
|
||||
/* pager navigation arrows */
|
||||
.pager img {
|
||||
vertical-align: middle;
|
||||
margin-right: 2px;
|
||||
}
|
||||
/* pager output text */
|
||||
.pager .pagedisplay {
|
||||
font-size: 11px;
|
||||
padding: 0 5px 0 5px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*** loading ajax indeterminate progress indicator ***/
|
||||
#tablesorterPagerLoading {
|
||||
background: rgba(255,255,255,0.8) url(icons/loading.gif) center center no-repeat;
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
/*** css used when "updateArrows" option is true ***/
|
||||
/* the pager itself gets a disabled class when the number of rows is less than the size */
|
||||
.pager.disabled {
|
||||
display: none;
|
||||
}
|
||||
/* hide or fade out pager arrows when the first or last row is visible */
|
||||
.pager img.disabled {
|
||||
/* visibility: hidden */
|
||||
opacity: 0.5;
|
||||
filter: alpha(opacity=50);
|
||||
}</pre>
|
||||
</div>
|
||||
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"><!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link href="css/theme.blue.css" rel="stylesheet">
|
||||
<script src="js/jquery.tablesorter.js"></script>
|
||||
<script src="js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<!-- Tablesorter: pager widget -->
|
||||
<link href="css/jquery.tablesorter.pager.css" rel="stylesheet">
|
||||
<script src="js/widget-pager.js"></script>
|
||||
|
||||
<table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<td class="pager" colspan="5">
|
||||
<img src="../addons/pager/icons/first.png" class="first"/>
|
||||
<img src="../addons/pager/icons/prev.png" class="prev"/>
|
||||
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
|
||||
<img src="../addons/pager/icons/next.png" class="next"/>
|
||||
<img src="../addons/pager/icons/last.png" class="last"/>
|
||||
<select class="pagesize">
|
||||
<option value="25">25</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>1</th> <!-- thead text will be updated from the JSON; make sure the number of columns matches the JSON data -->
|
||||
<th>2</th>
|
||||
<th>3</th>
|
||||
<th>4</th>
|
||||
<th>5</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>1</th> <!-- tfoot text will be updated at the same time as the thead -->
|
||||
<th>2</th>
|
||||
<th>3</th>
|
||||
<th>4</th>
|
||||
<th>5</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="pager" colspan="5">
|
||||
<img src="../addons/pager/icons/first.png" class="first"/>
|
||||
<img src="../addons/pager/icons/prev.png" class="prev"/>
|
||||
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
|
||||
<img src="../addons/pager/icons/next.png" class="next"/>
|
||||
<img src="../addons/pager/icons/last.png" class="last"/>
|
||||
<select class="pagesize">
|
||||
<option value="25">25</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody> <!-- tbody will be loaded via JSON -->
|
||||
</tbody>
|
||||
</table></pre>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-pager-filtered.html">Pager plugin + filter widget ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var $url = $('#url');
|
||||
$('table')
|
||||
|
||||
// show current URL for the DEMO ONLY
|
||||
.on('changingUrl', function(e, url){
|
||||
$url.html(url);
|
||||
})
|
||||
|
||||
.on('pagerInitialized', function(){
|
||||
// allow THIS demo to sort the content; this variable is automatically set to true when ajax
|
||||
// is used as there isn't any way to sort the server side data from the client side.
|
||||
this.config.serverSideSorting = false;
|
||||
// show original highlighted URL
|
||||
$('#origurl').html( this.config.widgetOptions.pager_ajaxUrl.replace(/(\{.*?\})/g, '<span class="results">$1</span>') );
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
650
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-widget-pager.html
Executable file
650
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-widget-pager.html
Executable file
@@ -0,0 +1,650 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Pager Widget</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 href="../css/theme.blue.css" rel="stylesheet">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<!-- Tablesorter: optional -->
|
||||
<link rel="stylesheet" href="../addons/pager/jquery.tablesorter.pager.css">
|
||||
<script src="../js/widgets/widget-pager.js"></script>
|
||||
|
||||
<script id="js">$(function(){
|
||||
|
||||
$("table")
|
||||
|
||||
// Initialize tablesorter
|
||||
// ***********************
|
||||
.tablesorter({
|
||||
theme: 'blue',
|
||||
widthFixed: true,
|
||||
widgets: ['zebra', 'pager'],
|
||||
|
||||
widgetOptions: {
|
||||
|
||||
// output default: '{page}/{totalPages}'
|
||||
// possible variables: {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {totalRows}
|
||||
// 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,
|
||||
|
||||
// starting page of the pager (zero based index)
|
||||
pager_startPage: 0,
|
||||
|
||||
// Number of visible rows
|
||||
pager_size: 10,
|
||||
|
||||
// Save pager page & size if the storage script is loaded (requires $.tablesorter.storage in jquery.tablesorter.widgets.js)
|
||||
pager_savePages: true,
|
||||
|
||||
// if true, the table will remain the same height no matter how many records are displayed. The space is made up by an empty
|
||||
// table row set to a height to compensate; default is false
|
||||
pager_fixedHeight: false,
|
||||
|
||||
// remove rows from the table to speed up the sort of large tables.
|
||||
// setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
|
||||
pager_removeRows: false, // removing rows in larger tables speeds up the sort
|
||||
|
||||
// use this format: "http://mydatabase.com?page={page}&size={size}&{sortList:col}&{filterList:fcol}"
|
||||
// where {page} is replaced by the page number, {size} is replaced by the number of records to show,
|
||||
// {sortList:col} adds the sortList to the url into a "col" array, and {filterList:fcol} adds
|
||||
// the filterList to the url into an "fcol" array.
|
||||
// So a sortList = [[2,0],[3,0]] becomes "&col[2]=0&col[3]=0" in the url
|
||||
// and a filterList = [[2,Blue],[3,13]] becomes "&fcol[2]=Blue&fcol[3]=13" in the url
|
||||
pager_ajaxUrl: null,
|
||||
|
||||
// modify the url after all processing has been applied
|
||||
pager_customAjaxUrl: function(table, url) { return url; },
|
||||
|
||||
// modify the $.ajax object to allow complete control over your ajax requests
|
||||
pager_ajaxObject: {
|
||||
dataType: 'json'
|
||||
},
|
||||
|
||||
// process ajax so that the following information is returned:
|
||||
// [ total_rows (number), rows (array of arrays), headers (array; optional) ]
|
||||
// example:
|
||||
// [
|
||||
// 100, // total rows
|
||||
// [
|
||||
// [ "row1cell1", "row1cell2", ... "row1cellN" ],
|
||||
// [ "row2cell1", "row2cell2", ... "row2cellN" ],
|
||||
// ...
|
||||
// [ "rowNcell1", "rowNcell2", ... "rowNcellN" ]
|
||||
// ],
|
||||
// [ "header1", "header2", ... "headerN" ] // optional
|
||||
// ]
|
||||
pager_ajaxProcessing: function(ajax){ return [ 0, [], null ]; },
|
||||
|
||||
// css class names of pager arrows
|
||||
pager_css: {
|
||||
container : 'tablesorter-pager',
|
||||
errorRow : 'tablesorter-errorRow', // error information row (don't include period at beginning)
|
||||
disabled : 'disabled' // class added to arrows @ extremes (i.e. prev/first arrows "disabled" on first page)
|
||||
},
|
||||
|
||||
// jQuery selectors
|
||||
pager_selectors: {
|
||||
container : '.pager', // target the pager markup (wrapper)
|
||||
first : '.first', // go to first page arrow
|
||||
prev : '.prev', // previous page arrow
|
||||
next : '.next', // next page arrow
|
||||
last : '.last', // go to last page arrow
|
||||
goto : '.gotoPage', // go to page selector - select dropdown that sets the current page
|
||||
pageDisplay : '.pagedisplay', // location of where the "output" is displayed
|
||||
pageSize : '.pagesize' // page size selector - select dropdown that sets the "size" option
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
// bind to pager events
|
||||
// *********************
|
||||
.bind('pagerChange pagerComplete pagerInitialized pageMoved', function(e, c){
|
||||
var p = c.pager, // NEW with the widget... it returns config, instead of config.pager
|
||||
msg = '"</span> event triggered, ' + (e.type === 'pagerChange' ? 'going to' : 'now on') +
|
||||
' page <span class="typ">' + (p.page + 1) + '/' + p.totalPages + '</span>';
|
||||
$('#display')
|
||||
.append('<li><span class="str">"' + e.type + msg + '</li>')
|
||||
.find('li:first').remove();
|
||||
})
|
||||
|
||||
// Add two new rows using the "addRows" method
|
||||
// the "update" method doesn't work here because not all rows are
|
||||
// present in the table when the pager is applied ("removeRows" is false)
|
||||
// ***********************************************************************
|
||||
var r, $row, num = 50,
|
||||
row = '<tr><td>Student{i}</td><td>{m}</td><td>{g}</td><td>{r}</td><td>{r}</td><td>{r}</td><td>{r}</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>' +
|
||||
'<tr><td>Student{j}</td><td>{m}</td><td>{g}</td><td>{r}</td><td>{r}</td><td>{r}</td><td>{r}</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>';
|
||||
$('button:contains(Add)').click(function(){
|
||||
// add two rows of random data!
|
||||
r = row.replace(/\{[gijmr]\}/g, function(m){
|
||||
return {
|
||||
'{i}' : num + 1,
|
||||
'{j}' : num + 2,
|
||||
'{r}' : Math.round(Math.random() * 100),
|
||||
'{g}' : Math.random() > 0.5 ? 'male' : 'female',
|
||||
'{m}' : Math.random() > 0.5 ? 'Mathematics' : 'Languages'
|
||||
}[m];
|
||||
});
|
||||
num = num + 2;
|
||||
$row = $(r);
|
||||
$('table')
|
||||
.find('tbody').append($row)
|
||||
.trigger('addRows', [$row]);
|
||||
return false;
|
||||
});
|
||||
|
||||
// Delete a row
|
||||
// *************
|
||||
$('table').delegate('button.remove', 'click' ,function(){
|
||||
var t = $('table');
|
||||
// disabling the pager will restore all table rows
|
||||
// t.trigger('disable.pager');
|
||||
// remove chosen row
|
||||
$(this).closest('tr').remove();
|
||||
// restore pager
|
||||
// t.trigger('enable.pager');
|
||||
t.trigger('update');
|
||||
return false;
|
||||
});
|
||||
|
||||
// Destroy pager / Restore pager
|
||||
// **************
|
||||
$('button:contains(Destroy)').click(function(){
|
||||
// Exterminate, annhilate, destroy! http://www.youtube.com/watch?v=LOqn8FxuyFs
|
||||
var $t = $(this);
|
||||
if (/Destroy/.test( $t.text() )){
|
||||
$('table')[0].config.widgets = ['zebra'];
|
||||
$('table').trigger('refreshWidgets');
|
||||
|
||||
//.trigger('destroy.pager');
|
||||
$t.text('Restore Pager');
|
||||
} else {
|
||||
$('table')[0].config.widgets = ['zebra', 'pager'];
|
||||
$('table').trigger('applyWidgets');
|
||||
$t.text('Destroy Pager');
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
// Disable / Enable
|
||||
// **************
|
||||
$('.toggle').click(function(){
|
||||
var mode = /Disable/.test( $(this).text() );
|
||||
$('table').trigger( (mode ? 'disable' : 'enable') + '.pager');
|
||||
$(this).text( (mode ? 'Enable' : 'Disable') + 'Pager');
|
||||
return false;
|
||||
});
|
||||
$('table').bind('pagerChange', function(){
|
||||
// pager automatically enables when table is sorted.
|
||||
$('.toggle').text('Disable Pager');
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body id="pager-demo">
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Pager Widget</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>This pager WIDGET <em>can not</em> be applied to the original tablesorter.</li>
|
||||
<li>Do not use this widget along with the pager plugin.</li>
|
||||
<li>The pager.css file also works with this pager widget.</li>
|
||||
<li>This widget is still in <span class="beta">development</span> as it has not been throughly tested.</li>
|
||||
<li>Extensive documentation has not been included, as all functioning is essentially identical to the pager addon, but here are some important differences:
|
||||
<ul>
|
||||
<li>All of the options are now set within the <code>widgetOptions</code>.</li>
|
||||
<li>Pager events (pagerChange pagerComplete pagerInitialized pageMoved) now return <code>table.config</code> instead of <code>table.config.pager</code>.</li>
|
||||
<li>Most option names have only been modified by adding <code>pager_</code> as a prefix.</li>
|
||||
<li>Exceptions include moving all applied css class names into a <code>pager_css</code> option and all selectors into <code>pager_selectors</code>, including the original <code>container</code> option.</li>
|
||||
<li>Because I stopped trying so hard to make widgets compatible with jQuery v1.2.6, this widget requires at least v1.3+.</li>
|
||||
<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>
|
||||
|
||||
<h1>Triggered Events</h1>
|
||||
<ul id="display">
|
||||
<li>Pager events will appear here.</li>
|
||||
<li> </li>
|
||||
<li> </li>
|
||||
</ul>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<br>
|
||||
<button type="button">Add Rows</button> <button type="button" class="toggle">Disable Pager</button> <button type="button">Destroy Pager</button>
|
||||
<br><br>
|
||||
<div class="pager">
|
||||
<img src="../addons/pager/icons/first.png" class="first" alt="First" />
|
||||
<img src="../addons/pager/icons/prev.png" class="prev" alt="Prev" />
|
||||
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
|
||||
<img src="../addons/pager/icons/next.png" class="next" alt="Next" />
|
||||
<img src="../addons/pager/icons/last.png" class="last" alt="Last" />
|
||||
<select class="pagesize" title="Select page size">
|
||||
<option value="10">10</option>
|
||||
<option value="20">20</option>
|
||||
<option value="30">30</option>
|
||||
<option value="40">40</option>
|
||||
</select>
|
||||
<select class="gotoPage" title="Select page number"></select>
|
||||
</div>
|
||||
|
||||
<table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Major</th>
|
||||
<th>Sex</th>
|
||||
<th>English</th>
|
||||
<th>Japanese</th>
|
||||
<th>Calculus</th>
|
||||
<th>Geometry</th>
|
||||
<th class="remove sorter-false"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Major</th>
|
||||
<th>Sex</th>
|
||||
<th>English</th>
|
||||
<th>Japanese</th>
|
||||
<th>Calculus</th>
|
||||
<th>Geometry</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Student01</td>
|
||||
<td>Languages</td>
|
||||
<td>male</td>
|
||||
<td>80</td>
|
||||
<td>70</td>
|
||||
<td>75</td>
|
||||
<td>80</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student02</td>
|
||||
<td>Mathematics</td>
|
||||
<td>male</td>
|
||||
<td>90</td>
|
||||
<td>88</td>
|
||||
<td>100</td>
|
||||
<td>90</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student03</td>
|
||||
<td>Languages</td>
|
||||
<td>female</td>
|
||||
<td>85</td>
|
||||
<td>95</td>
|
||||
<td>80</td>
|
||||
<td>85</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student04</td>
|
||||
<td>Languages</td>
|
||||
<td>male</td>
|
||||
<td>60</td>
|
||||
<td>55</td>
|
||||
<td>100</td>
|
||||
<td>100</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student05</td>
|
||||
<td>Languages</td>
|
||||
<td>female</td>
|
||||
<td>68</td>
|
||||
<td>80</td>
|
||||
<td>95</td>
|
||||
<td>80</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student06</td>
|
||||
<td>Mathematics</td>
|
||||
<td>male</td>
|
||||
<td>100</td>
|
||||
<td>99</td>
|
||||
<td>100</td>
|
||||
<td>90</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student07</td>
|
||||
<td>Mathematics</td>
|
||||
<td>male</td>
|
||||
<td>85</td>
|
||||
<td>68</td>
|
||||
<td>90</td>
|
||||
<td>90</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student08</td>
|
||||
<td>Languages</td>
|
||||
<td>male</td>
|
||||
<td>100</td>
|
||||
<td>90</td>
|
||||
<td>90</td>
|
||||
<td>85</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student09</td>
|
||||
<td>Mathematics</td>
|
||||
<td>male</td>
|
||||
<td>80</td>
|
||||
<td>50</td>
|
||||
<td>65</td>
|
||||
<td>75</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student10</td>
|
||||
<td>Languages</td>
|
||||
<td>male</td>
|
||||
<td>85</td>
|
||||
<td>100</td>
|
||||
<td>100</td>
|
||||
<td>90</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student11</td>
|
||||
<td>Languages</td>
|
||||
<td>male</td>
|
||||
<td>86</td>
|
||||
<td>85</td>
|
||||
<td>100</td>
|
||||
<td>100</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student12</td>
|
||||
<td>Mathematics</td>
|
||||
<td>female</td>
|
||||
<td>100</td>
|
||||
<td>75</td>
|
||||
<td>70</td>
|
||||
<td>85</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student13</td>
|
||||
<td>Languages</td>
|
||||
<td>female</td>
|
||||
<td>100</td>
|
||||
<td>80</td>
|
||||
<td>100</td>
|
||||
<td>90</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student14</td>
|
||||
<td>Languages</td>
|
||||
<td>female</td>
|
||||
<td>50</td>
|
||||
<td>45</td>
|
||||
<td>55</td>
|
||||
<td>90</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student15</td>
|
||||
<td>Languages</td>
|
||||
<td>male</td>
|
||||
<td>95</td>
|
||||
<td>35</td>
|
||||
<td>100</td>
|
||||
<td>90</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student16</td>
|
||||
<td>Languages</td>
|
||||
<td>female</td>
|
||||
<td>100</td>
|
||||
<td>50</td>
|
||||
<td>30</td>
|
||||
<td>70</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student17</td>
|
||||
<td>Languages</td>
|
||||
<td>female</td>
|
||||
<td>80</td>
|
||||
<td>100</td>
|
||||
<td>55</td>
|
||||
<td>65</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student18</td>
|
||||
<td>Mathematics</td>
|
||||
<td>male</td>
|
||||
<td>30</td>
|
||||
<td>49</td>
|
||||
<td>55</td>
|
||||
<td>75</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student19</td>
|
||||
<td>Languages</td>
|
||||
<td>male</td>
|
||||
<td>68</td>
|
||||
<td>90</td>
|
||||
<td>88</td>
|
||||
<td>70</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student20</td>
|
||||
<td>Mathematics</td>
|
||||
<td>male</td>
|
||||
<td>40</td>
|
||||
<td>45</td>
|
||||
<td>40</td>
|
||||
<td>80</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student21</td>
|
||||
<td>Languages</td>
|
||||
<td>male</td>
|
||||
<td>50</td>
|
||||
<td>45</td>
|
||||
<td>100</td>
|
||||
<td>100</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student22</td>
|
||||
<td>Mathematics</td>
|
||||
<td>male</td>
|
||||
<td>100</td>
|
||||
<td>99</td>
|
||||
<td>100</td>
|
||||
<td>90</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr><td>Student23</td><td>Mathematics</td><td>male</td><td>82</td><td>77</td><td>0</td><td>79</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student24</td><td>Languages</td><td>female</td><td>100</td><td>91</td><td>13</td><td>82</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student25</td><td>Mathematics</td><td>male</td><td>22</td><td>96</td><td>82</td><td>53</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student26</td><td>Languages</td><td>female</td><td>37</td><td>29</td><td>56</td><td>59</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student27</td><td>Mathematics</td><td>male</td><td>86</td><td>82</td><td>69</td><td>23</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student28</td><td>Languages</td><td>female</td><td>44</td><td>25</td><td>43</td><td>1</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student29</td><td>Mathematics</td><td>male</td><td>77</td><td>47</td><td>22</td><td>38</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student30</td><td>Languages</td><td>female</td><td>19</td><td>35</td><td>23</td><td>10</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student31</td><td>Mathematics</td><td>male</td><td>90</td><td>27</td><td>17</td><td>50</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student32</td><td>Languages</td><td>female</td><td>60</td><td>75</td><td>33</td><td>38</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student33</td><td>Mathematics</td><td>male</td><td>4</td><td>31</td><td>37</td><td>15</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student34</td><td>Languages</td><td>female</td><td>77</td><td>97</td><td>81</td><td>44</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student35</td><td>Mathematics</td><td>male</td><td>5</td><td>81</td><td>51</td><td>95</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student36</td><td>Languages</td><td>female</td><td>70</td><td>61</td><td>70</td><td>94</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student37</td><td>Mathematics</td><td>male</td><td>60</td><td>3</td><td>61</td><td>84</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student38</td><td>Languages</td><td>female</td><td>63</td><td>39</td><td>0</td><td>11</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student39</td><td>Mathematics</td><td>male</td><td>50</td><td>46</td><td>32</td><td>38</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student40</td><td>Languages</td><td>female</td><td>51</td><td>75</td><td>25</td><td>3</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student41</td><td>Mathematics</td><td>male</td><td>43</td><td>34</td><td>28</td><td>78</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student42</td><td>Languages</td><td>female</td><td>11</td><td>89</td><td>60</td><td>95</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student43</td><td>Mathematics</td><td>male</td><td>48</td><td>92</td><td>18</td><td>88</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student44</td><td>Languages</td><td>female</td><td>82</td><td>2</td><td>59</td><td>73</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student45</td><td>Mathematics</td><td>male</td><td>91</td><td>73</td><td>37</td><td>39</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student46</td><td>Languages</td><td>female</td><td>4</td><td>8</td><td>12</td><td>10</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student47</td><td>Mathematics</td><td>male</td><td>89</td><td>10</td><td>6</td><td>11</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student48</td><td>Languages</td><td>female</td><td>90</td><td>32</td><td>21</td><td>18</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student49</td><td>Mathematics</td><td>male</td><td>42</td><td>49</td><td>49</td><td>72</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student50</td><td>Languages</td><td>female</td><td>56</td><td>37</td><td>67</td><td>54</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="pager">
|
||||
<img src="../addons/pager/icons/first.png" class="first" alt="First" />
|
||||
<img src="../addons/pager/icons/prev.png" class="prev" alt="Prev" />
|
||||
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
|
||||
<img src="../addons/pager/icons/next.png" class="next" alt="Next" />
|
||||
<img src="../addons/pager/icons/last.png" class="last" alt="Last" />
|
||||
<select class="pagesize" title="Select page size">
|
||||
<option value="10">10</option>
|
||||
<option value="20">20</option>
|
||||
<option value="30">30</option>
|
||||
<option value="40">40</option>
|
||||
</select>
|
||||
<select class="gotoPage" title="Select page number"></select>
|
||||
</div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
|
||||
<h1>CSS</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-css">/* pager wrapper, div */
|
||||
.tablesorter-pager {
|
||||
padding: 5px;
|
||||
}
|
||||
/* pager wrapper, in thead/tfoot */
|
||||
td.tablesorter-pager {
|
||||
background-color: #e6eeee;
|
||||
margin: 0; /* needed for bootstrap .pager gets a 18px bottom margin */
|
||||
}
|
||||
/* pager navigation arrows */
|
||||
.tablesorter-pager img {
|
||||
vertical-align: middle;
|
||||
margin-right: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* pager output text */
|
||||
.tablesorter-pager .pagedisplay {
|
||||
padding: 0 5px 0 5px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* pager element reset (needed for bootstrap) */
|
||||
.tablesorter-pager select {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*** css used when "updateArrows" option is true ***/
|
||||
/* the pager itself gets a disabled class when the number of rows is less than the size */
|
||||
.tablesorter-pager.disabled {
|
||||
display: none;
|
||||
}
|
||||
/* hide or fade out pager arrows when the first or last row is visible */
|
||||
.tablesorter-pager .disabled {
|
||||
/* visibility: hidden */
|
||||
opacity: 0.5;
|
||||
filter: alpha(opacity=50);
|
||||
cursor: default;
|
||||
}</pre>
|
||||
</div>
|
||||
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"><!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link href="css/theme.blue.css" rel="stylesheet">
|
||||
<script src="js/jquery.tablesorter.js"></script>
|
||||
<script src="js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<!-- Tablesorter: pager widget -->
|
||||
<link href="css/jquery.tablesorter.pager.css" rel="stylesheet">
|
||||
<script src="js/widget-pager.js"></script>
|
||||
|
||||
<table class="tablesorter">
|
||||
<!-- view page source to see the entire table -->
|
||||
</table>
|
||||
|
||||
<!-- pager -->
|
||||
<div id="pager" class="pager">
|
||||
<form>
|
||||
<img src="first.png" class="first"/>
|
||||
<img src="prev.png" class="prev"/>
|
||||
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
|
||||
<img src="next.png" class="next"/>
|
||||
<img src="last.png" class="last"/>
|
||||
<select class="pagesize">
|
||||
<option value="10">10</option>
|
||||
<option value="20">20</option>
|
||||
<option value="30">30</option>
|
||||
<option value="40">40</option>
|
||||
</select>
|
||||
</form>
|
||||
</div></pre>
|
||||
|
||||
</div>
|
||||
|
||||
<a id="change-log"></a>
|
||||
<h1>Pager Change Log</h1>
|
||||
<ul>
|
||||
<li>Moved to <a href="https://github.com/Mottie/tablesorter/wiki/Changes">wiki pages</a>.</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
321
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-widget-print.html
Executable file
321
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-widget-print.html
Executable file
@@ -0,0 +1,321 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Print Widget (beta)</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
|
||||
<script src="js/jquery-ui-latest.min.js"></script>
|
||||
<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="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<script src="../js/widgets/widget-columnSelector.js"></script>
|
||||
<script src="../js/widgets/widget-print.js"></script>
|
||||
|
||||
<style>
|
||||
.options th.narrow {
|
||||
width: 150px;
|
||||
}
|
||||
.columnSelectorWrapper {
|
||||
position: relative;
|
||||
padding: 1px 6px;
|
||||
display: inline-block;
|
||||
}
|
||||
.columnSelector, .hidden {
|
||||
display: none;
|
||||
}
|
||||
#colSelect1:checked + label {
|
||||
color: #307ac5;
|
||||
}
|
||||
#colSelect1:checked ~ #columnSelector {
|
||||
display: block;
|
||||
}
|
||||
.columnSelector {
|
||||
width: 120px;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
padding: 10px;
|
||||
background: #fff;
|
||||
border: #99bfe6 1px solid;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.columnSelector label {
|
||||
display: block;
|
||||
text-align: left;
|
||||
}
|
||||
.columnSelector label:nth-child(1) {
|
||||
border-bottom: #99bfe6 solid 1px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.columnSelector input {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.columnSelector .disabled {
|
||||
color: #ddd;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
$(".tablesorter").tablesorter({
|
||||
theme: 'blue',
|
||||
widgets: ["zebra", "filter", "print", "columnSelector"],
|
||||
widgetOptions : {
|
||||
columnSelector_container : $('#columnSelector'),
|
||||
columnSelector_name : 'data-name',
|
||||
|
||||
print_title : '', // this option > caption > table id > "table"
|
||||
print_dataAttrib : 'data-name', // header attrib containing modified header name
|
||||
print_rows : 'f', // (a)ll, (v)isible or (f)iltered
|
||||
print_columns : 's', // (a)ll, (v)isible or (s)elected (columnSelector widget)
|
||||
print_extraCSS : '', // add any extra css definitions for the popup window here
|
||||
print_styleSheet : '../css/theme.blue.css', // add the url of your print stylesheet
|
||||
// callback executed when processing completes - default setting is null
|
||||
print_callback : function(config, $table, printStyle){
|
||||
// do something to the $table (jQuery object of table wrapped in a div)
|
||||
// or add to the printStyle string, then...
|
||||
// print the table using the following code
|
||||
$.tablesorter.printTable.printOutput( config, $table.html(), printStyle );
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('.print').click(function(){
|
||||
$('.tablesorter').trigger('printTable');
|
||||
});
|
||||
|
||||
});</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Print Widget (beta)</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<p></p>
|
||||
<br>
|
||||
|
||||
<div id="root" class="accordion">
|
||||
|
||||
<h3><a href="#">Notes</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>In <span class="version">v2.17.2</span>, the print popup window now closes with the dialog window & jQuery version requirement was changed from v1.7+ to v1.2+.</li>
|
||||
<li>
|
||||
In <span class="version">v2.17.0</span>, added the <code>print_callback</code> option.<br>
|
||||
<br>
|
||||
</li>
|
||||
<li>This widget will <strong>only work</strong> in tablesorter version 2.8+ and jQuery version <del>1.7+</del> 1.2.6+ (<span class="version updated">v2.17.2</span>; but filter & columnSelector widgets still require jQuery 1.7+).</li>
|
||||
<li>The user can print all, visible or filtered rows. And, choose to print all or selected columns (using the columnSelector widget).</li>
|
||||
<li>By default, the widget is set to only print filtered rows & visible columns.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Options</a></h3>
|
||||
<div>
|
||||
<h3>Print widget default options (added inside of tablesorter <code>widgetOptions</code>)</h3>
|
||||
<div class="tip">
|
||||
<span class="label label-info">TIP!</span> Click on the link in the option 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="tablesorter-blue options">
|
||||
<thead>
|
||||
<tr><th class="narrow">Option</th><th class="narrow">Default</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
<tr id="print_title">
|
||||
<td><a href="#" class="permalink">print_title</a></td>
|
||||
<td><code>''</code></td>
|
||||
<td>
|
||||
This option sets the title of the popup window & ends up being printed at the top of each page.
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
If this option is blank, the print title is obtained from the table caption, then the table id, then just "table", in that order.
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="print_dataattrib">
|
||||
<td><a href="#" class="permalink">print_dataAttrib</a></td>
|
||||
<td><code>'data-name'</code></td>
|
||||
<td>
|
||||
This option contains the data-attribute name which contains the modified table header content.
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
In this demo, the column selector widget is set up to also use the "data-name" attribute so the column selector popup and print header will display this alternate text.<pre class="prettyprint lang-html"><th data-name="First">First Name</th></pre>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="print_rows">
|
||||
<td><a href="#" class="permalink">print_rows</a></td>
|
||||
<td><code>'filtered'</code></td>
|
||||
<td>
|
||||
Set this option to designate which rows are printed.
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
This option has three settings (only the first letter is necessary):
|
||||
<ul>
|
||||
<li><code>'all'</code> or <code>'a'</code> - always print all rows (this will not work if the pager has `removeRows` set to `true`).</li>
|
||||
<li><code>'filtered'</code> or <code>'f'</code> - only filtered rows are printed (even if the pager is applied).</li>
|
||||
<li><code>'visible'</code> or <code>'v'</code> - only visible rows are printed (the current pager page).</li>
|
||||
</ul>
|
||||
<span class="label label-info">Note</span> only rows contained within the table are printed; i.e. if ajax is being used to populate the table, only the currently loaded rows will print.
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="print_columns">
|
||||
<td><a href="#" class="permalink">print_columns</a></td>
|
||||
<td><code>'selected'</code></td>
|
||||
<td>
|
||||
Set this option to designate which columns are printed.
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
This option has three settings (only the first letter is necessary):
|
||||
<ul>
|
||||
<li><code>'all'</code> or <code>'a'</code> - always print all columns; including any intentionally hidden table cells.</li>
|
||||
<li><code>'selected'</code> or <code>'s'</code> - only selected (visible) columns are printed (as set by the columnSelector widget).</li>
|
||||
<li><code>'visible'</code> or <code>'v'</code> - set this option to print the table columns as is... no extra css is added to force table cells to be visible.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="print_extracss">
|
||||
<td><a href="#" class="permalink">print_extraCSS</a></td>
|
||||
<td><code>''</code></td>
|
||||
<td>
|
||||
If you have any custom css to add to the print popup window, include it in this option
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
Use this option as follows:
|
||||
<pre class="prettyprint lang-js">print_extraCSS : ".caption { display: none; }"</pre>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="print_stylesheet">
|
||||
<td><a href="#" class="permalink">print_styleSheet</a></td>
|
||||
<td><code>''</code></td>
|
||||
<td>
|
||||
If you have stylesheet you want to add to the print popup window, include the url in this option
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
Use this option as follows:
|
||||
<pre class="prettyprint lang-js">print_styleSheet : "../css/theme.blue.css"</pre>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="print_callback">
|
||||
<td><a href="#" class="permalink">print_callback</a></td>
|
||||
<td><code>null</code></td>
|
||||
<td>
|
||||
This callback allows further processing of the table & style (<span class="version">v2.17.0</span>)
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
When this callback is executed, three parameters are provided:
|
||||
<ul>
|
||||
<li><code>config</code> - The table config settings.</li>
|
||||
<li><code>$table</code> - The table wrapped in a div, as a jQuery object. It contains all the rows & cells of the original table, but the content of cells will be replaced by the contents of the associated <code>data-name</code> attribute.</li>
|
||||
<li><code>printStyle</code> - This is the print style associated with the table. It contains styles to show or hide selected rows & columns, including the columnSelector style to hide specific columns.</li>
|
||||
</ul>
|
||||
When any processing within this callback is complete, you must manually call the print function to continue printing as follows:
|
||||
<pre class="prettyprint lang-js">// print callback example
|
||||
print_callback : function( config, $table, printStyle ) {
|
||||
// do something to the table or printStyle string
|
||||
// use the following code to continue printing
|
||||
$.tablesorter.printTable.printOutput( config, $table.html(), printStyle );
|
||||
}</pre>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Method</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>To make the print widget work programmatically, trigger a "printTable" event.
|
||||
<pre class="prettyprint lang-js">$('.print').click(function(){
|
||||
$('.tablesorter').trigger('printTable');
|
||||
});</pre>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><button type="button" class="print">Print</button>
|
||||
|
||||
<button class="columnSelectorWrapper">
|
||||
<input id="colSelect1" type="checkbox" class="hidden">
|
||||
<label class="columnSelectorButton" for="colSelect1">Column</label>
|
||||
<div id="columnSelector" class="columnSelector">
|
||||
<!-- this div is where the column selector is added -->
|
||||
</div>
|
||||
</button>
|
||||
<table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="filter-select" data-placeholder="Select a name" data-priority="2" data-name="First">First Name</th>
|
||||
<th data-placeholder="Exact matches only" data-priority="critical">Last Name</th>
|
||||
<th data-placeholder="Choose a city" data-priority="4">City</th>
|
||||
<th data-placeholder="Enter an age" data-priority="3">Age</th>
|
||||
<th data-placeholder="Select a filter">Total</th>
|
||||
<th class="filter-select">Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>Aaron</td><td>Johnson Sr</td><td>Atlanta</td><td>35</td><td>$5.95</td><td>22%</td><td>Jun 26, 2004 7:22 AM</td></tr>
|
||||
<tr><td>Aaron</td><td>Johnson</td><td>Yuma</td><td>12</td><td>$2.99</td><td>5%</td><td>Aug 21, 2009 12:21 PM</td></tr>
|
||||
<tr><td>Clark</td><td>Henry Jr</td><td>Tampa</td><td>51</td><td>$42.29</td><td>18%</td><td>Oct 13, 2000 1:15 PM</td></tr>
|
||||
<tr><td>Denni</td><td>Henry</td><td>New York</td><td>28</td><td>$9.99</td><td>20%</td><td>Jul 6, 2006 8:14 AM</td></tr>
|
||||
<tr><td>John</td><td>Hood</td><td>Boston</td><td>33</td><td>$19.99</td><td>25%</td><td>Dec 10, 2002 5:14 AM</td></tr>
|
||||
<tr><td>Clark</td><td>Kent Sr</td><td>Los Angeles</td><td>18</td><td>$15.89</td><td>44%</td><td>Jan 12, 2003 11:14 AM</td></tr>
|
||||
<tr><td>Peter</td><td>Kent Esq</td><td>Seattle</td><td>45</td><td>$153.19</td><td>44%</td><td>Jan 18, 2021 9:12 AM</td></tr>
|
||||
<tr><td>Peter</td><td>Johns</td><td>Milwaukee</td><td>13</td><td>$5.29</td><td>4%</td><td>Jan 8, 2012 5:11 PM</td></tr>
|
||||
<tr><td>Aaron</td><td>Evan</td><td>Chicago</td><td>24</td><td>$14.19</td><td>14%</td><td>Jan 14, 2004 11:23 AM</td></tr>
|
||||
<tr><td>Bruce</td><td>Evans</td><td>Upland</td><td>22</td><td>$13.19</td><td>11%</td><td>Jan 18, 2007 9:12 AM</td></tr>
|
||||
<tr><td>Clark</td><td>McMasters</td><td>Pheonix</td><td>18</td><td>$55.20</td><td>15%</td><td>Feb 12, 2010 7:23 PM</td></tr>
|
||||
<tr><td>Dennis</td><td>Masters</td><td>Indianapolis</td><td>65</td><td>$123.00</td><td>32%</td><td>Jan 20, 2001 1:12 PM</td></tr>
|
||||
<tr><td>John</td><td>Hood</td><td>Fort Worth</td><td>25</td><td>$22.09</td><td>17%</td><td>Jun 11, 2011 10:55 AM</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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
719
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-widget-reflow.html
Executable file
719
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-widget-reflow.html
Executable file
@@ -0,0 +1,719 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Table Reflow Widget (beta)</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
|
||||
<script src="js/jquery-ui-latest.min.js"></script>
|
||||
<link rel="stylesheet" href="css/bootstrap.min.css">
|
||||
<script src="js/bootstrap.min.js"></script>
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/tipsy.css" rel="stylesheet">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
<script src="js/jquery.tipsy.min.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<style>
|
||||
/* override bootstrap link colors */
|
||||
.ui-widget-content a {
|
||||
color: #428BCA;
|
||||
}
|
||||
.ui-widget-content a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
/*** column selector custom css only popup ***/
|
||||
.columnSelectorWrapper {
|
||||
position: relative;
|
||||
margin: 10px 0;
|
||||
display: inline-block;
|
||||
}
|
||||
.columnSelector, .hidden {
|
||||
display: none;
|
||||
}
|
||||
.columnSelectorButton {
|
||||
background: #99bfe6;
|
||||
border: #888 1px solid;
|
||||
color: #111;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
}
|
||||
#colSelect1:checked + label {
|
||||
background: #5797d7;
|
||||
border-color: #555;
|
||||
}
|
||||
#colSelect1:checked ~ #columnSelector {
|
||||
display: block;
|
||||
}
|
||||
.columnSelector {
|
||||
width: 120px;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
padding: 10px;
|
||||
background: #fff;
|
||||
border: #99bfe6 1px solid;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.columnSelector label {
|
||||
display: block;
|
||||
}
|
||||
.columnSelector label:nth-child(1) {
|
||||
border-bottom: #99bfe6 solid 1px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.columnSelector input {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.columnSelector .disabled {
|
||||
color: #ddd;
|
||||
}
|
||||
.frame-wrapper {
|
||||
max-width: 100%;
|
||||
transition: all 1s ease 0s;
|
||||
}
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
}
|
||||
.sizes, .toggle {
|
||||
display: inline-block;
|
||||
height: 30px;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
.resize-frame {
|
||||
list-style: none;
|
||||
width: 250px;
|
||||
height: 35px;
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
.resize-frame li {
|
||||
background-image: url(img/screens.png);
|
||||
background-repeat: no-repeat;
|
||||
width: 35px;
|
||||
height: 28px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
.resize-frame li:hover, .resize-frame li.active {
|
||||
color: #00488c;
|
||||
background-color: #eee;
|
||||
background-image: url(img/screens-blue.png);
|
||||
border-radius: 3px;
|
||||
}
|
||||
.resize-frame li.setauto {
|
||||
vertical-align: top;
|
||||
background-image: none;
|
||||
font-weight: bold;
|
||||
font-family: Menlo, Monaco, Consolas, monospace;
|
||||
font-size: 12px;
|
||||
text-indent: 4px;
|
||||
padding-top: 4px;
|
||||
}
|
||||
.setdktp { background-position: 0 2px; }
|
||||
.settbll { background-position: -35px 2px; }
|
||||
.settblp { background-position: -70px 2px; }
|
||||
.setsmtl { background-position: -105px 2px; }
|
||||
.setsmtp { background-position: -142px 2px; }
|
||||
|
||||
.full { width: 100%; height: 420px; } /* full browser */
|
||||
.desktop { width: 1440px; height: 420px; } /* desktop 1440x1024 */
|
||||
.tablet-l { width: 1024px; height: 420px; } /* tablet landscape 1024x768 */
|
||||
.tablet-p { width: 768px; height: 420px; } /* tablet portrait 768x1024 */
|
||||
.smart-l { width: 480px; height: 320px; } /* smartphone landscape 480x320 */
|
||||
.smart-p { width: 320px; height: 420px; } /* smartphone portrait 320x480 */
|
||||
</style>
|
||||
<script src="../js/widgets/widget-columnSelector.js"></script>
|
||||
|
||||
<style>
|
||||
/* REQUIRED CSS: change your reflow breakpoint here (35em below) */
|
||||
@media ( max-width: 35em ) {
|
||||
.ui-table-reflow td,
|
||||
.ui-table-reflow th {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
float: right;
|
||||
/* if not using the stickyHeaders widget (not the css3 version)
|
||||
* the "!important" flag, and "height: auto" can be removed */
|
||||
width: 100% !important;
|
||||
height: auto !important;
|
||||
}
|
||||
/* reflow widget */
|
||||
.ui-table-reflow tbody td[data-title]:before {
|
||||
color: #469;
|
||||
font-size: .9em;
|
||||
content: attr(data-title);
|
||||
float: left;
|
||||
width: 50%;
|
||||
white-space: pre-wrap;
|
||||
text-align: bottom;
|
||||
display: inline-block;
|
||||
}
|
||||
/* reflow2 widget */
|
||||
table.ui-table-reflow .ui-table-cell-label.ui-table-cell-label-top {
|
||||
display: block;
|
||||
padding: .4em 0;
|
||||
margin: .4em 0;
|
||||
text-transform: uppercase;
|
||||
font-size: .9em;
|
||||
font-weight: 400;
|
||||
}
|
||||
table.ui-table-reflow .ui-table-cell-label {
|
||||
padding: .4em;
|
||||
min-width: 30%;
|
||||
display: inline-block;
|
||||
margin: -.4em 1em -.4em -.4em;
|
||||
}
|
||||
}
|
||||
.ui-table-reflow .ui-table-cell-label {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<script src="../js/widgets/widget-reflow.js"></script>
|
||||
<script>
|
||||
$(function(){
|
||||
// screen size class names
|
||||
var j = 0,
|
||||
allClasses = '',
|
||||
sizes = [
|
||||
[ 'full', '100% width' ],
|
||||
[ 'desktop', 'Desktop 1440x1024' ],
|
||||
[ 'tablet-l', 'Tablet landscape 1024x768' ],
|
||||
[ 'tablet-p', 'tablet portrait 768x1024' ],
|
||||
[ 'smart-l', 'smartphone landscape 480x320' ],
|
||||
[ 'smart-p', 'smartphone portrait 320x480' ]
|
||||
];
|
||||
$('.resize-frame li')
|
||||
.each(function(i){
|
||||
// add tooltip to each table size button
|
||||
$(this).attr('title', sizes[j][1]);
|
||||
j = (j + 1) % 6;
|
||||
if (i < 6) {
|
||||
allClasses += sizes[i][0] + ' ';
|
||||
}
|
||||
})
|
||||
.on('click', function(){
|
||||
var $t = $(this),
|
||||
indx = $t.index();
|
||||
$t.addClass('active').siblings().removeClass('active');
|
||||
$t.parent().nextAll('div:first').removeClass(allClasses).addClass( sizes[indx][0] );
|
||||
});
|
||||
// toggle thead in iframe
|
||||
$('button.toggle').click(function(){
|
||||
$(this).nextAll('div:first').find('iframe').contents().find('thead').toggleClass('hide-header');
|
||||
});
|
||||
|
||||
// add tooltip
|
||||
$('.resize-frame li, .toggle').tipsy({ gravity: 's' });
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Table Reflow Widget (beta)</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
|
||||
<p></p>
|
||||
<br>
|
||||
|
||||
<div class="accordion">
|
||||
|
||||
<h3><a href="#">Notes</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>This widget will <strong>only work</strong> in tablesorter version 2.8+ and jQuery version 1.7+.</li>
|
||||
<li>The <strong>required css</strong>, shown below, is needed to make this widget work, but is completely customizable.</li>
|
||||
<li>This demo sets the reflow breakpoint to 35em; so you'll need to resize your browser window to see this widget in action.</li>
|
||||
<li>This widget is compatible with the column selector widget; but please note:
|
||||
<ul>
|
||||
<li>When a column is hidden, it will not show up when the table reflow occurs</li>
|
||||
<li>For an example, see the second demo "Reflow + columnSelector widget" below.</li>
|
||||
<li>The column selector widget, by default, has an additional breakpoint at "30em". So if the column selector is set to "Auto" and you continue to reduce the browser width after the table reflows, you'll see "Geometry" row disappear.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>It may not have been necessary to create two versions of this widget, but it was done because:
|
||||
<ul>
|
||||
<li>The first "reflow" widget does not add additional content to the tbody table cells, but it did not work well when attempting to add multiple content rows within the data-attribute. It would work if the css explicitly has the content set with a break like this (<a href="http://www.w3.org/TR/CSS2/generate.html#x18">ref</a>):
|
||||
<pre class="prettyprint lang-css">content: "row1 \A row2";</pre>
|
||||
But sadly, this method does not work when a data-attribute with the same content is used:
|
||||
<pre class="prettyprint lang-css">content: attr(data-title);</pre>
|
||||
The second method ignores the backslash and shows <code>"row1 \A row2"</code>
|
||||
</li>
|
||||
<li><span class="label label-info">Update</span>: After some discussion in <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=988694">bugzilla</a>, I discovered that it is possible to add multiple lines of content usigin a data-attribute by setting a <code>white-space: pre;</code> css definition and using <code>&#10</code> instead of <code>\A</code> (<a href="http://jsfiddle.net/96pwE/5/">demo</a>), but I think I'll keep the second reflow version because it actually allows styling.</li>
|
||||
<li>Adding bold elements to every table tbody cell is the method used by jQuery Mobile; so, a second reflow widget "reflow2" was created to do the same, and work properly with a thead containing multiple rows.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
If you do not want the sortable headers to show when the table reflows, include this css within the media query:<br>
|
||||
<br>
|
||||
<pre class="prettyprint lang-css">table.ui-table-reflow thead { display: none; }</pre>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Reflow Widget</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>This version adds a <code>data-title</code> attribute (modifiable by the <code>reflow_dataAttrib</code> option), to every table body cell.</li>
|
||||
<li>The required css shows the contents of this data-attribute when the browser width reaches the set break point.</li>
|
||||
<li>So, this widget does not add any additional content to the table cells; which might be preferred if the table content should not be changed.</li>
|
||||
<li>Do not use this version of the widget for a table with more than one header row.</li>
|
||||
</ul>
|
||||
|
||||
<h4>Reflow widget default options (added inside of tablesorter <code>widgetOptions</code>)</h4>
|
||||
<table class="tablesorter-blue">
|
||||
<thead>
|
||||
<tr><th>Option</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
<tr class="odd">
|
||||
<td>reflow_className</td>
|
||||
<td>
|
||||
This class name is added to the table to make it responsive. The class name is the same as that used by <a href="http://demos.jquerymobile.com/1.4.2/table-reflow/">jQuery Mobile</a>.<br>
|
||||
<br>
|
||||
<pre class="prettyprint lang-html"><table class="tablesorter tablesorter-blue ui-table-reflow">...</table></pre>
|
||||
<br>
|
||||
Default value: <code>"ui-table-reflow"</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>reflow_headerAttrib</td>
|
||||
<td>
|
||||
Set this option to use your desired data-attribute. The set data-attribute contains the alternative header title added to every table body cell when the table reflows.<br>
|
||||
<br>
|
||||
For example, the "Sex" column below is renamed to "Gender" within the reflow cells:
|
||||
<pre class="prettyprint lang-html"><th data-name="Gender">Sex</th></pre>
|
||||
<br>
|
||||
Default value: <code>"data-name"</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<td>reflow_dataAttrib</td>
|
||||
<td>
|
||||
Set this option to use your desired data-attribute which is added to every table body cell. It will contain the header name which is shown once the table reflows.<br>
|
||||
<br>
|
||||
For example, all of table body cells will show the contents from the set data-attribute when the table reflows:
|
||||
<pre class="prettyprint lang-html"><td data-title="Gender">female</td></pre>
|
||||
<br>
|
||||
Default value: <code>"data-title"</code>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Reflow2 Widget</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>This version of the reflow widget adds a bold element (<code><b></code>), containing the header cell name, to every table body cell.</li>
|
||||
<li>The required css shows these elements when the browser width reaches the set break point.</li>
|
||||
<li>Use this version of the widget for a table with <strong>more than one</strong> header row.</li>
|
||||
<li>So, this widget does add additional content to the table tbody cells; this might not be preferred if the table content should not be changed.</li>
|
||||
<li>If an update occurs, this widget will remove all cell elements, and replace them, even if the headers have changed.</li>
|
||||
<li>In very large tables, initialization of the table may be slightly delayed.</li>
|
||||
</ul>
|
||||
|
||||
<h4>Reflow2 widget default options (added inside of tablesorter <code>widgetOptions</code>)</h4>
|
||||
<table class="tablesorter-blue">
|
||||
<thead>
|
||||
<tr><th>Option</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
<tr class="odd">
|
||||
<td>reflow2_className</td>
|
||||
<td>
|
||||
This class name is added to the table to make it responsive. The class name is the same as that used by <a href="http://demos.jquerymobile.com/1.4.2/table-reflow/">jQuery Mobile</a>.<br>
|
||||
<br>
|
||||
<pre class="prettyprint lang-html"><table class="tablesorter tablesorter-blue ui-table-reflow">...</table></pre>
|
||||
<br>
|
||||
Default value: <code>"ui-table-reflow"</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>reflow2_classIgnore</td>
|
||||
<td>
|
||||
Set this option to use your desired class name. Any header cell with this class name will have it's contents ignored.<br>
|
||||
<br>
|
||||
For example, this is the "Paris" header cell in table3 below:
|
||||
<pre class="prettyprint lang-html"><th class="ui-table-reflow-ignore sorter-false">Paris</th></pre>
|
||||
<br>
|
||||
Default value: <code>"ui-table-reflow-ignore"</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<td>reflow2_headerAttrib</td>
|
||||
<td>
|
||||
Set this option to use your desired data-attribute. The set data-attribute contains the alternative header title added to every table body cell when the table reflows.<br>
|
||||
<br>
|
||||
For example, the "Sex" column below is renamed to "Gender" within the reflow cells:
|
||||
<pre class="prettyprint lang-html"><th data-name="Gender">Sex</th></pre>
|
||||
<br>
|
||||
Default value: <code>"data-name"</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>reflow2_labelClass</td>
|
||||
<td>
|
||||
Set this option to use your desired class name.<br>
|
||||
<br>
|
||||
When the table reflows, the bold element (<code><b></code>) with this class name will be revealed; it must also be defined within the media query to display this element as an "inline-block", so it shares the row with the cell content
|
||||
<h4>CSS</h4>
|
||||
<pre class="prettyprint lang-css">/* additional selectors needed to increase css specificity */
|
||||
table.ui-table-reflow .ui-table-cell-label {
|
||||
padding: .4em;
|
||||
min-width: 30%;
|
||||
display: inline-block;
|
||||
margin: -.4em 1em -.4em -.4em;
|
||||
}</pre>
|
||||
<h4>HTML</h4>
|
||||
<pre class="prettyprint lang-html"><th>
|
||||
<b class="remove-me ui-table-cell-label">Month</b>
|
||||
Jaunuary
|
||||
</th></pre>
|
||||
<br>
|
||||
Default value: <code>"ui-table-cell-label"</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<td>reflow2_labelTop</td>
|
||||
<td>
|
||||
Set this option to use your desired class name.<br>
|
||||
<br>
|
||||
When the table reflows, the all upper header cell content is also included in every corresponding column table cell within a bold element (<code><b></code>); it must also be defined within the media query to display this element as a "block"
|
||||
<h4>CSS</h4>
|
||||
<pre class="prettyprint lang-css">/* additional selectors needed to increase css specificity */
|
||||
table.ui-table-reflow .ui-table-cell-label.ui-table-cell-label-top {
|
||||
display: block;
|
||||
padding: .4em 0;
|
||||
margin: .4em 0;
|
||||
text-transform: uppercase;
|
||||
font-size: .9em;
|
||||
font-weight: 400;
|
||||
}</pre>
|
||||
<h4>HTML</h4>
|
||||
<pre class="prettyprint lang-html"><td>
|
||||
<b class="remove-me ui-table-cell-label ui-table-cell-label-top">Average Temperatures (C)</b>
|
||||
<b class="remove-me ui-table-cell-label">Minimum Temp</b>
|
||||
3
|
||||
</td>
|
||||
</pre>
|
||||
<br>
|
||||
Default value: <code>"ui-table-cell-label-top"</code>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Required CSS</a></h3>
|
||||
<div>
|
||||
The reflow widgets require the following css to hide/show header cell content within each table cell. Remove the css for whichever reflow widget that is not being used, as desired.<br>
|
||||
<br>
|
||||
<pre class="prettyprint lang-css">/* REQUIRED CSS: change your reflow breakpoint here (35em below) */
|
||||
@media ( max-width: 35em ) {
|
||||
|
||||
/* uncomment out the line below if you don't want the sortable headers to show */
|
||||
/* table.ui-table-reflow thead { display: none; } */
|
||||
|
||||
/* css for reflow & reflow2 widgets */
|
||||
.ui-table-reflow td,
|
||||
.ui-table-reflow th {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
float: right;
|
||||
/* if not using the stickyHeaders widget (not the css3 version)
|
||||
* the "!important" flag, and "height: auto" can be removed */
|
||||
width: 100% !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
/* reflow widget only */
|
||||
.ui-table-reflow tbody td[data-title]:before {
|
||||
color: #469;
|
||||
font-size: .9em;
|
||||
content: attr(data-title);
|
||||
float: left;
|
||||
width: 50%;
|
||||
white-space: pre-wrap;
|
||||
text-align: bottom;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* reflow2 widget only */
|
||||
table.ui-table-reflow .ui-table-cell-label.ui-table-cell-label-top {
|
||||
display: block;
|
||||
padding: .4em 0;
|
||||
margin: .4em 0;
|
||||
text-transform: uppercase;
|
||||
font-size: .9em;
|
||||
font-weight: 400;
|
||||
}
|
||||
table.ui-table-reflow .ui-table-cell-label {
|
||||
padding: .4em;
|
||||
min-width: 30%;
|
||||
display: inline-block;
|
||||
margin: -.4em 1em -.4em -.4em;
|
||||
}
|
||||
|
||||
} /* end media query */
|
||||
|
||||
/* reflow2 widget */
|
||||
.ui-table-reflow .ui-table-cell-label {
|
||||
display: none;
|
||||
}</pre>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<p>
|
||||
|
||||
<h1>Demo <small>(Pick a table width or resize the browser window)</small></h1>
|
||||
<div id="demo"><h3>Reflow widget only</h3>
|
||||
<span class="sizes">Set table width:</span>
|
||||
<ul class="resize-frame">
|
||||
<li class="setauto active">Auto</li>
|
||||
<li class="setdktp"></li>
|
||||
<li class="settbll"></li>
|
||||
<li class="settblp"></li>
|
||||
<li class="setsmtl"></li>
|
||||
<li class="setsmtp"></li>
|
||||
</ul>
|
||||
<button class="toggle" title="Hide/show table header when the breakpoint is reached">Toggle Headers</button>
|
||||
<div class="frame-wrapper full">
|
||||
<iframe src="example-widget-reflow1.html"></iframe>
|
||||
</div>
|
||||
|
||||
<h3>Reflow + columnSelector widget</h3>
|
||||
<span class="sizes">Set table width:</span>
|
||||
<ul class="resize-frame">
|
||||
<li class="setauto active">Auto</li>
|
||||
<li class="setdktp"></li>
|
||||
<li class="settbll"></li>
|
||||
<li class="settblp"></li>
|
||||
<li class="setsmtl"></li>
|
||||
<li class="setsmtp"></li>
|
||||
</ul>
|
||||
<button class="toggle" title="Hide/show table header when the breakpoint is reached">Toggle Headers</button>
|
||||
<div class="frame-wrapper full">
|
||||
<iframe src="example-widget-reflow2.html"></iframe>
|
||||
</div>
|
||||
|
||||
<h3>Reflow2 widget (multiple thead rows)</h3>
|
||||
<span class="sizes">Set table width:</span>
|
||||
<ul class="resize-frame">
|
||||
<li class="setauto active">Auto</li>
|
||||
<li class="setdktp"></li>
|
||||
<li class="settbll"></li>
|
||||
<li class="settblp"></li>
|
||||
<li class="setsmtl"></li>
|
||||
<li class="setsmtp"></li>
|
||||
</ul>
|
||||
<button class="toggle" title="Hide/show table header when the breakpoint is reached">Toggle Headers</button>
|
||||
<div class="frame-wrapper full">
|
||||
<iframe src="example-widget-reflow3.html"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<h1>HTML</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><h3>Reflow widget only</h3>
|
||||
<table id="table1">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Rank</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>1</td><td>25</td><td>$5.95</td><td>22%</td><td>Jun 26, 2013 7:22 AM</td></tr>
|
||||
<tr><td>11</td><td>12</td><td>$82.99</td><td>5%</td><td>Aug 21, 2013 12:21 PM</td></tr>
|
||||
<tr><td>12</td><td>51</td><td>$99.29</td><td>18%</td><td>Oct 13, 2013 1:15 PM</td></tr>
|
||||
<tr><td>51</td><td>28</td><td>$9.99</td><td>20%</td><td>Jul 6, 2013 8:14 AM</td></tr>
|
||||
<tr><td>21</td><td>33</td><td>$19.99</td><td>25%</td><td>Dec 10, 2012 5:14 AM</td></tr>
|
||||
<tr><td>013</td><td>18</td><td>$65.89</td><td>45%</td><td>Jan 12, 2013 11:14 AM</td></tr>
|
||||
<tr><td>005</td><td>45</td><td>$153.19</td><td>45%</td><td>Jan 18, 2014 9:12 AM</td></tr>
|
||||
<tr><td>10</td><td>3</td><td>$5.29</td><td>4%</td><td>Jan 8, 2013 5:11 PM</td></tr>
|
||||
<tr><td>16</td><td>24</td><td>$14.19</td><td>14%</td><td>Jan 14, 2014 11:23 AM</td></tr>
|
||||
<tr><td>66</td><td>22</td><td>$13.19</td><td>11%</td><td>Jan 18, 2013 9:12 AM</td></tr>
|
||||
<tr><td>100</td><td>18</td><td>$55.20</td><td>15%</td><td>Feb 12, 2013 7:23 PM</td></tr>
|
||||
<tr><td>55</td><td>65</td><td>$123.00</td><td>32%</td><td>Jan 20, 2014 1:12 PM</td></tr>
|
||||
<tr><td>9</td><td>25</td><td>$22.09</td><td>17%</td><td>Jun 11, 2013 10:55 AM</td></tr>
|
||||
<tr><td>13</td><td>12</td><td>$19.99</td><td>18%</td><td>Jan 20, 2014 7:45 PM</td></tr>
|
||||
<tr><td>73</td><td>58</td><td>$129.19</td><td>39%</td><td>Jan 20, 2014 10:11 AM</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>Reflow columnSelector widget</h3>
|
||||
<!-- This selector markup is completely customizable -->
|
||||
<div class="columnSelectorWrapper">
|
||||
<input id="colSelect1" type="checkbox" class="hidden">
|
||||
<label class="columnSelectorButton" for="colSelect1">Column</label>
|
||||
<div id="columnSelector" class="columnSelector">
|
||||
<!-- this div is where the column selector is added -->
|
||||
</div>
|
||||
</div> (When "Auto" is set, the table becomes responsive; resize the browser window to see it work)
|
||||
|
||||
<table id="table2">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-priority="critical">Name</th>
|
||||
<th data-priority="critical">Major</th>
|
||||
<th data-priority="6" data-name="Gender">Sex</th>
|
||||
<th data-priority="4">English</th>
|
||||
<th data-priority="5">Japanese</th>
|
||||
<th data-priority="3">Calculus</th>
|
||||
<th data-priority="2">Geometry</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr><th>Name</th><th>Major</th><th>Sex</th><th>English</th><th>Japanese</th><th>Calculus</th><th>Geometry</th></tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr><td>Student03</td><td>Languages</td><td>female</td><td>85</td><td>95</td><td>80</td><td>85</td></tr>
|
||||
<tr><td>Student04</td><td>Languages</td><td>male</td><td>60</td><td>55</td><td>100</td><td>100</td></tr>
|
||||
<tr><td>Student05</td><td>Languages</td><td>female</td><td>68</td><td>80</td><td>95</td><td>80</td></tr>
|
||||
<tr><td>Student12</td><td>Mathematics</td><td>female</td><td>100</td><td>75</td><td>70</td><td>85</td></tr>
|
||||
<tr><td>Student13</td><td>Languages</td><td>female</td><td>100</td><td>80</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student14</td><td>Languages</td><td>female</td><td>50</td><td>45</td><td>55</td><td>90</td></tr>
|
||||
<tr><td>Student15</td><td>Languages</td><td>male</td><td>95</td><td>35</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student16</td><td>Languages</td><td>female</td><td>100</td><td>50</td><td>30</td><td>70</td></tr>
|
||||
<tr><td>Student17</td><td>Languages</td><td>female</td><td>80</td><td>100</td><td>55</td><td>65</td></tr>
|
||||
<tr><td>Student18</td><td>Mathematics</td><td>male</td><td>30</td><td>49</td><td>55</td><td>75</td></tr>
|
||||
<tr><td>Student19</td><td>Languages</td><td>male</td><td>68</td><td>90</td><td>88</td><td>70</td></tr>
|
||||
<tr><td>Student20</td><td>Mathematics</td><td>male</td><td>40</td><td>45</td><td>40</td><td>80</td></tr>
|
||||
<tr><td>Student01</td><td>Languages</td><td>male</td><td>80</td><td>70</td><td>75</td><td>80</td></tr>
|
||||
<tr><td>Student02</td><td>Mathematics</td><td>male</td><td>90</td><td>88</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student06</td><td>Mathematics</td><td>male</td><td>100</td><td>99</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student07</td><td>Mathematics</td><td>male</td><td>85</td><td>68</td><td>90</td><td>90</td></tr>
|
||||
<tr><td>Student08</td><td>Languages</td><td>male</td><td>100</td><td>90</td><td>90</td><td>85</td></tr>
|
||||
<tr><td>Student09</td><td>Mathematics</td><td>male</td><td>80</td><td>50</td><td>65</td><td>75</td></tr>
|
||||
<tr><td>Student10</td><td>Languages</td><td>male</td><td>85</td><td>100</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student11</td><td>Languages</td><td>male</td><td>86</td><td>85</td><td>100</td><td>100</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>Reflow2 widget (multiple thead rows)</h3>
|
||||
<table id="table3">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="ui-table-reflow-ignore sorter-false">Paris</th>
|
||||
<th colspan="2">Average Temperatures (C)</th>
|
||||
<th colspan="2">Average Rainfall</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Month</th>
|
||||
<th>Minimum Temp</th>
|
||||
<th>Maximum Temp</th>
|
||||
<th>Precipitaion (mm)</th>
|
||||
<th>Rainfall Days</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><th>Jaunuary</th><td>3</td><td>8</td><td>17.8</td><td>10</td></tr>
|
||||
<tr><th>February</th><td>2</td><td>9</td><td>21.7</td><td>9</td></tr>
|
||||
<tr><th>March</th><td>4</td><td>13</td><td>24.2</td><td>10</td></tr>
|
||||
<tr><th>April</th><td>6</td><td>15</td><td>24.6</td><td>11</td></tr>
|
||||
<tr><th>May</th><td>10</td><td>20</td><td>26.2</td><td>10</td></tr>
|
||||
<tr><th>June</th><td>13</td><td>23</td><td>25.1</td><td>9</td></tr>
|
||||
<tr><th>July</th><td>15</td><td>25</td><td>21.7</td><td>7</td></tr>
|
||||
<tr><th>August</th><td>15</td><td>25</td><td>21.4</td><td>7</td></tr>
|
||||
<tr><th>September</th><td>11</td><td>21</td><td>15.6</td><td>8</td></tr>
|
||||
<tr><th>October</th><td>9</td><td>17</td><td>25.3</td><td>11</td></tr>
|
||||
<tr><th>November</th><td>5</td><td>11</td><td>22.4</td><td>12</td></tr>
|
||||
<tr><th>December</th><td>3</td><td>8</td><td>26.6</td><td>12</td></tr>
|
||||
</tbody>
|
||||
</table></pre>
|
||||
</div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-js">$(function() {
|
||||
|
||||
// simple reflow widget (table with 1 header row)
|
||||
$("#table1").tablesorter({
|
||||
theme: 'blue',
|
||||
widgets: ['zebra', 'reflow'],
|
||||
widgetOptions : {
|
||||
// class name added to make it responsive (class name within media query)
|
||||
reflow_className : 'ui-table-reflow',
|
||||
// header attribute containing modified header name
|
||||
reflow_headerAttrib : 'data-name',
|
||||
// data attribute added to each tbody cell
|
||||
// it contains the header cell text, visible upon reflow
|
||||
reflow_dataAttrib : 'data-title'
|
||||
}
|
||||
});
|
||||
|
||||
// simple reflow widget + columnSelector & stickyHeaders widgets
|
||||
$("#table2").tablesorter({
|
||||
theme: 'blue',
|
||||
widgets: ['zebra', 'reflow', 'columnSelector', 'stickyHeaders'],
|
||||
widgetOptions : {
|
||||
// target the column selector markup
|
||||
columnSelector_container : $('#columnSelector'),
|
||||
// data attribute containing column name to use in the selector container
|
||||
// make it use the same as reflow_headerAttrib
|
||||
columnSelector_name : 'data-name',
|
||||
|
||||
// header attribute containing modified header name
|
||||
reflow_headerAttrib : 'data-name'
|
||||
}
|
||||
});
|
||||
|
||||
// reflow2 widget (table with multiple header rows)
|
||||
$("#table3").tablesorter({
|
||||
theme: 'blue',
|
||||
widgets: ['zebra', 'reflow2'],
|
||||
widgetOptions: {
|
||||
// class name added to make it responsive (class name within media query)
|
||||
reflow2_className : 'ui-table-reflow',
|
||||
// ignore header cell content with this class name
|
||||
reflow2_classIgnore : 'ui-table-reflow-ignore',
|
||||
// header attribute containing modified header name
|
||||
reflow2_headerAttrib : 'data-name',
|
||||
// class name applied to thead labels
|
||||
reflow2_labelClass : 'ui-table-cell-label',
|
||||
// class name applied to first row thead label
|
||||
reflow2_labelTop : 'ui-table-cell-label-top'
|
||||
}
|
||||
});
|
||||
|
||||
});</pre>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
104
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-widget-reflow1.html
Executable file
104
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-widget-reflow1.html
Executable file
@@ -0,0 +1,104 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Table Reflow Widget (beta)</title>
|
||||
|
||||
<!-- demo -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
<script src="../js/widgets/widget-reflow.js"></script>
|
||||
|
||||
<style>
|
||||
/* REQUIRED CSS: change your reflow breakpoint here (35em below) */
|
||||
@media ( max-width: 35em ) {
|
||||
.ui-table-reflow td,
|
||||
.ui-table-reflow th {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
float: right;
|
||||
/* if not using the stickyHeaders widget (not the css3 version)
|
||||
* the "!important" flag, and "height: auto" can be removed */
|
||||
width: 100% !important;
|
||||
height: auto !important;
|
||||
}
|
||||
/* reflow widget */
|
||||
.ui-table-reflow tbody td[data-title]:before {
|
||||
color: #469;
|
||||
font-size: .9em;
|
||||
content: attr(data-title);
|
||||
float: left;
|
||||
width: 50%;
|
||||
white-space: pre-wrap;
|
||||
text-align: bottom;
|
||||
display: inline-block;
|
||||
}
|
||||
/* allow toggle of thead */
|
||||
thead.hide-header {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.ui-table-reflow .ui-table-cell-label {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<script>$(function() {
|
||||
|
||||
// simple reflow widget (table with 1 header row)
|
||||
$("#table1").tablesorter({
|
||||
theme: 'blue',
|
||||
widgets: ['zebra', 'reflow'],
|
||||
widgetOptions : {
|
||||
// class name added to make it responsive (class name within media query)
|
||||
reflow_className : 'ui-table-reflow',
|
||||
// header attribute containing modified header name
|
||||
reflow_headerAttrib : 'data-name',
|
||||
// data attribute added to each tbody cell
|
||||
// it contains the header cell text, visible upon reflow
|
||||
reflow_dataAttrib : 'data-title'
|
||||
}
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<table id="table1">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Rank</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>1</td><td>25</td><td>$5.95</td><td>22%</td><td>Jun 26, 2013 7:22 AM</td></tr>
|
||||
<tr><td>11</td><td>12</td><td>$82.99</td><td>5%</td><td>Aug 21, 2013 12:21 PM</td></tr>
|
||||
<tr><td>12</td><td>51</td><td>$99.29</td><td>18%</td><td>Oct 13, 2013 1:15 PM</td></tr>
|
||||
<tr><td>51</td><td>28</td><td>$9.99</td><td>20%</td><td>Jul 6, 2013 8:14 AM</td></tr>
|
||||
<tr><td>21</td><td>33</td><td>$19.99</td><td>25%</td><td>Dec 10, 2012 5:14 AM</td></tr>
|
||||
<tr><td>013</td><td>18</td><td>$65.89</td><td>45%</td><td>Jan 12, 2013 11:14 AM</td></tr>
|
||||
<tr><td>005</td><td>45</td><td>$153.19</td><td>45%</td><td>Jan 18, 2014 9:12 AM</td></tr>
|
||||
<tr><td>10</td><td>3</td><td>$5.29</td><td>4%</td><td>Jan 8, 2013 5:11 PM</td></tr>
|
||||
<tr><td>16</td><td>24</td><td>$14.19</td><td>14%</td><td>Jan 14, 2014 11:23 AM</td></tr>
|
||||
<tr><td>66</td><td>22</td><td>$13.19</td><td>11%</td><td>Jan 18, 2013 9:12 AM</td></tr>
|
||||
<tr><td>100</td><td>18</td><td>$55.20</td><td>15%</td><td>Feb 12, 2013 7:23 PM</td></tr>
|
||||
<tr><td>55</td><td>65</td><td>$123.00</td><td>32%</td><td>Jan 20, 2014 1:12 PM</td></tr>
|
||||
<tr><td>9</td><td>25</td><td>$22.09</td><td>17%</td><td>Jun 11, 2013 10:55 AM</td></tr>
|
||||
<tr><td>13</td><td>12</td><td>$19.99</td><td>18%</td><td>Jan 20, 2014 7:45 PM</td></tr>
|
||||
<tr><td>73</td><td>58</td><td>$129.19</td><td>39%</td><td>Jan 20, 2014 10:11 AM</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
250
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-widget-reflow2.html
Executable file
250
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-widget-reflow2.html
Executable file
@@ -0,0 +1,250 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Table Reflow Widget (beta)</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
|
||||
<script src="js/jquery-ui-latest.min.js"></script>
|
||||
<link rel="stylesheet" href="css/bootstrap.min.css">
|
||||
<script src="js/bootstrap.min.js"></script>
|
||||
<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="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<style>
|
||||
/* override bootstrap link colors */
|
||||
.ui-widget-content a {
|
||||
color: #428BCA;
|
||||
}
|
||||
.ui-widget-content a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
/*** column selector custom css only popup ***/
|
||||
.columnSelectorWrapper {
|
||||
position: relative;
|
||||
margin: 10px 0;
|
||||
display: inline-block;
|
||||
}
|
||||
.columnSelector, .hidden {
|
||||
display: none;
|
||||
}
|
||||
.columnSelectorButton {
|
||||
background: #99bfe6;
|
||||
border: #888 1px solid;
|
||||
color: #111;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
}
|
||||
#colSelect1:checked + label {
|
||||
background: #5797d7;
|
||||
border-color: #555;
|
||||
}
|
||||
#colSelect1:checked ~ #columnSelector {
|
||||
display: block;
|
||||
}
|
||||
.columnSelector {
|
||||
width: 120px;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
padding: 10px;
|
||||
background: #fff;
|
||||
border: #99bfe6 1px solid;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.columnSelector label {
|
||||
display: block;
|
||||
}
|
||||
.columnSelector label:nth-child(1) {
|
||||
border-bottom: #99bfe6 solid 1px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.columnSelector input {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.columnSelector .disabled {
|
||||
color: #ddd;
|
||||
}
|
||||
.frame-wrapper {
|
||||
max-width: 98%;
|
||||
height: 250px;
|
||||
}
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<script src="../js/widgets/widget-columnSelector.js"></script>
|
||||
|
||||
<style>
|
||||
/* REQUIRED CSS: change your reflow breakpoint here (35em below) */
|
||||
@media ( max-width: 35em ) {
|
||||
.ui-table-reflow td,
|
||||
.ui-table-reflow th {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
float: right;
|
||||
/* if not using the stickyHeaders widget (not the css3 version)
|
||||
* the "!important" flag, and "height: auto" can be removed */
|
||||
width: 100% !important;
|
||||
height: auto !important;
|
||||
}
|
||||
/* reflow widget */
|
||||
.ui-table-reflow tbody td[data-title]:before {
|
||||
color: #469;
|
||||
font-size: .9em;
|
||||
content: attr(data-title);
|
||||
float: left;
|
||||
width: 50%;
|
||||
white-space: pre-wrap;
|
||||
text-align: bottom;
|
||||
display: inline-block;
|
||||
}
|
||||
/* reflow2 widget */
|
||||
table.ui-table-reflow .ui-table-cell-label.ui-table-cell-label-top {
|
||||
display: block;
|
||||
padding: .4em 0;
|
||||
margin: .4em 0;
|
||||
text-transform: uppercase;
|
||||
font-size: .9em;
|
||||
font-weight: 400;
|
||||
}
|
||||
table.ui-table-reflow .ui-table-cell-label {
|
||||
padding: .4em;
|
||||
min-width: 30%;
|
||||
display: inline-block;
|
||||
margin: -.4em 1em -.4em -.4em;
|
||||
}
|
||||
/* allow toggle of thead */
|
||||
thead.hide-header {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.ui-table-reflow .ui-table-cell-label {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<script src="../js/widgets/widget-reflow.js"></script>
|
||||
<script>
|
||||
$(function(){
|
||||
$('#table1').resizable({
|
||||
handles : 'e'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<script id="js">$(function() {
|
||||
|
||||
// simple reflow widget (table with 1 header row)
|
||||
$("#table1").tablesorter({
|
||||
theme: 'blue',
|
||||
widgets: ['zebra', 'reflow'],
|
||||
widgetOptions : {
|
||||
// class name added to make it responsive (class name within media query)
|
||||
reflow_className : 'ui-table-reflow',
|
||||
// header attribute containing modified header name
|
||||
reflow_headerAttrib : 'data-name',
|
||||
// data attribute added to each tbody cell
|
||||
// it contains the header cell text, visible upon reflow
|
||||
reflow_dataAttrib : 'data-title'
|
||||
}
|
||||
});
|
||||
|
||||
// simple reflow widget + columnSelector & stickyHeaders widgets
|
||||
$("#table2").tablesorter({
|
||||
theme: 'blue',
|
||||
widgets: ['zebra', 'reflow', 'columnSelector', 'stickyHeaders'],
|
||||
widgetOptions : {
|
||||
// target the column selector markup
|
||||
columnSelector_container : $('#columnSelector'),
|
||||
// data attribute containing column name to use in the selector container
|
||||
// make it use the same as reflow_headerAttrib
|
||||
columnSelector_name : 'data-name',
|
||||
|
||||
// header attribute containing modified header name
|
||||
reflow_headerAttrib : 'data-name'
|
||||
}
|
||||
});
|
||||
|
||||
// reflow2 widget (table with multiple header rows)
|
||||
$("#table3").tablesorter({
|
||||
theme: 'blue',
|
||||
widgets: ['zebra', 'reflow2'],
|
||||
widgetOptions: {
|
||||
// class name added to make it responsive (class name within media query)
|
||||
reflow2_className : 'ui-table-reflow',
|
||||
// ignore header cell content with this class name
|
||||
reflow2_classIgnore : 'ui-table-reflow-ignore',
|
||||
// header attribute containing modified header name
|
||||
reflow2_headerAttrib : 'data-name',
|
||||
// class name applied to thead labels
|
||||
reflow2_labelClass : 'ui-table-cell-label',
|
||||
// class name applied to first row thead label
|
||||
reflow2_labelTop : 'ui-table-cell-label-top'
|
||||
}
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- This selector markup is completely customizable -->
|
||||
<div class="columnSelectorWrapper">
|
||||
<input id="colSelect1" type="checkbox" class="hidden">
|
||||
<label class="columnSelectorButton" for="colSelect1">Column</label>
|
||||
<div id="columnSelector" class="columnSelector">
|
||||
<!-- this div is where the column selector is added -->
|
||||
</div>
|
||||
</div> (When "Auto" is set, the table becomes responsive; resize the browser window to see it work)
|
||||
|
||||
<table id="table2">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-priority="critical">Name</th>
|
||||
<th data-priority="critical">Major</th>
|
||||
<th data-priority="6" data-name="Gender">Sex</th>
|
||||
<th data-priority="4">English</th>
|
||||
<th data-priority="5">Japanese</th>
|
||||
<th data-priority="3">Calculus</th>
|
||||
<th data-priority="2">Geometry</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr><th>Name</th><th>Major</th><th>Sex</th><th>English</th><th>Japanese</th><th>Calculus</th><th>Geometry</th></tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr><td>Student03</td><td>Languages</td><td>female</td><td>85</td><td>95</td><td>80</td><td>85</td></tr>
|
||||
<tr><td>Student04</td><td>Languages</td><td>male</td><td>60</td><td>55</td><td>100</td><td>100</td></tr>
|
||||
<tr><td>Student05</td><td>Languages</td><td>female</td><td>68</td><td>80</td><td>95</td><td>80</td></tr>
|
||||
<tr><td>Student12</td><td>Mathematics</td><td>female</td><td>100</td><td>75</td><td>70</td><td>85</td></tr>
|
||||
<tr><td>Student13</td><td>Languages</td><td>female</td><td>100</td><td>80</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student14</td><td>Languages</td><td>female</td><td>50</td><td>45</td><td>55</td><td>90</td></tr>
|
||||
<tr><td>Student15</td><td>Languages</td><td>male</td><td>95</td><td>35</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student16</td><td>Languages</td><td>female</td><td>100</td><td>50</td><td>30</td><td>70</td></tr>
|
||||
<tr><td>Student17</td><td>Languages</td><td>female</td><td>80</td><td>100</td><td>55</td><td>65</td></tr>
|
||||
<tr><td>Student18</td><td>Mathematics</td><td>male</td><td>30</td><td>49</td><td>55</td><td>75</td></tr>
|
||||
<tr><td>Student19</td><td>Languages</td><td>male</td><td>68</td><td>90</td><td>88</td><td>70</td></tr>
|
||||
<tr><td>Student20</td><td>Mathematics</td><td>male</td><td>40</td><td>45</td><td>40</td><td>80</td></tr>
|
||||
<tr><td>Student01</td><td>Languages</td><td>male</td><td>80</td><td>70</td><td>75</td><td>80</td></tr>
|
||||
<tr><td>Student02</td><td>Mathematics</td><td>male</td><td>90</td><td>88</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student06</td><td>Mathematics</td><td>male</td><td>100</td><td>99</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student07</td><td>Mathematics</td><td>male</td><td>85</td><td>68</td><td>90</td><td>90</td></tr>
|
||||
<tr><td>Student08</td><td>Languages</td><td>male</td><td>100</td><td>90</td><td>90</td><td>85</td></tr>
|
||||
<tr><td>Student09</td><td>Mathematics</td><td>male</td><td>80</td><td>50</td><td>65</td><td>75</td></tr>
|
||||
<tr><td>Student10</td><td>Languages</td><td>male</td><td>85</td><td>100</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student11</td><td>Languages</td><td>male</td><td>86</td><td>85</td><td>100</td><td>100</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
125
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-widget-reflow3.html
Executable file
125
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-widget-reflow3.html
Executable file
@@ -0,0 +1,125 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Table Reflow Widget (beta)</title>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
<script src="../js/widgets/widget-reflow.js"></script>
|
||||
|
||||
<style>
|
||||
/* REQUIRED CSS: change your reflow breakpoint here (35em below) */
|
||||
@media ( max-width: 35em ) {
|
||||
.ui-table-reflow td,
|
||||
.ui-table-reflow th {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
float: right;
|
||||
/* if not using the stickyHeaders widget (not the css3 version)
|
||||
* the "!important" flag, and "height: auto" can be removed */
|
||||
width: 100% !important;
|
||||
height: auto !important;
|
||||
}
|
||||
/* reflow widget */
|
||||
.ui-table-reflow tbody td[data-title]:before {
|
||||
color: #469;
|
||||
font-size: .9em;
|
||||
content: attr(data-title);
|
||||
float: left;
|
||||
width: 50%;
|
||||
white-space: pre-wrap;
|
||||
text-align: bottom;
|
||||
display: inline-block;
|
||||
}
|
||||
/* reflow2 widget */
|
||||
table.ui-table-reflow .ui-table-cell-label.ui-table-cell-label-top {
|
||||
display: block;
|
||||
padding: .4em 0;
|
||||
margin: .4em 0;
|
||||
text-transform: uppercase;
|
||||
font-size: .9em;
|
||||
font-weight: 400;
|
||||
}
|
||||
table.ui-table-reflow .ui-table-cell-label {
|
||||
padding: .4em;
|
||||
min-width: 30%;
|
||||
display: inline-block;
|
||||
margin: -.4em 1em -.4em -.4em;
|
||||
}
|
||||
/* allow toggle of thead */
|
||||
thead.hide-header {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.ui-table-reflow .ui-table-cell-label {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>$(function() {
|
||||
|
||||
// reflow2 widget (table with multiple header rows)
|
||||
$("#table3").tablesorter({
|
||||
theme: 'blue',
|
||||
widgets: ['zebra', 'reflow2'],
|
||||
widgetOptions: {
|
||||
// class name added to make it responsive (class name within media query)
|
||||
reflow2_className : 'ui-table-reflow',
|
||||
// ignore header cell content with this class name
|
||||
reflow2_classIgnore : 'ui-table-reflow-ignore',
|
||||
// header attribute containing modified header name
|
||||
reflow2_headerAttrib : 'data-name',
|
||||
// class name applied to thead labels
|
||||
reflow2_labelClass : 'ui-table-cell-label',
|
||||
// class name applied to first row thead label
|
||||
reflow2_labelTop : 'ui-table-cell-label-top'
|
||||
}
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<table id="table3">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="ui-table-reflow-ignore sorter-false">Paris</th>
|
||||
<th colspan="2">Average Temperatures (C)</th>
|
||||
<th colspan="2">Average Rainfall</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Month</th>
|
||||
<th>Minimum Temp</th>
|
||||
<th>Maximum Temp</th>
|
||||
<th>Precipitaion (mm)</th>
|
||||
<th>Rainfall Days</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><th>Jaunuary</th><td>3</td><td>8</td><td>17.8</td><td>10</td></tr>
|
||||
<tr><th>February</th><td>2</td><td>9</td><td>21.7</td><td>9</td></tr>
|
||||
<tr><th>March</th><td>4</td><td>13</td><td>24.2</td><td>10</td></tr>
|
||||
<tr><th>April</th><td>6</td><td>15</td><td>24.6</td><td>11</td></tr>
|
||||
<tr><th>May</th><td>10</td><td>20</td><td>26.2</td><td>10</td></tr>
|
||||
<tr><th>June</th><td>13</td><td>23</td><td>25.1</td><td>9</td></tr>
|
||||
<tr><th>July</th><td>15</td><td>25</td><td>21.7</td><td>7</td></tr>
|
||||
<tr><th>August</th><td>15</td><td>25</td><td>21.4</td><td>7</td></tr>
|
||||
<tr><th>September</th><td>11</td><td>21</td><td>15.6</td><td>8</td></tr>
|
||||
<tr><th>October</th><td>9</td><td>17</td><td>25.3</td><td>11</td></tr>
|
||||
<tr><th>November</th><td>5</td><td>11</td><td>22.4</td><td>12</td></tr>
|
||||
<tr><th>December</th><td>3</td><td>8</td><td>26.6</td><td>12</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,261 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Resizable Columns Widget</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-1.4.4.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="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<!-- Tablesorter: optional -->
|
||||
<!-- <script src="../addons/pager/jquery.tablesorter.pager.js"></script> -->
|
||||
|
||||
<style id="css">th.tablesorter-header.resizable-false {
|
||||
background-color: #e6bf99;
|
||||
}
|
||||
/* ensure box-sizing is set to content-box, if using jQuery versions older than 1.8;
|
||||
this page is using jQuery 1.4 */
|
||||
*, *:before, *:after {
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
}</style>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
$("table:first").tablesorter({
|
||||
theme : 'blue',
|
||||
// initialize zebra striping and resizable widgets on the table
|
||||
widgets: [ "zebra", "resizable" ],
|
||||
widgetOptions: {
|
||||
resizable_addLastColumn : true
|
||||
}
|
||||
});
|
||||
|
||||
$("table:last").tablesorter({
|
||||
theme : 'blue',
|
||||
// initialize zebra striping and resizable widgets on the table
|
||||
widgets: [ "zebra", "resizable" ],
|
||||
widgetOptions: {
|
||||
resizable: true,
|
||||
// These are the default column widths which are used when the table is
|
||||
// initialized or resizing is reset; note that the "Age" column is not
|
||||
// resizable, but the width can still be set to 40px here
|
||||
resizable_widths : [ '10%', '10%', '40px', '10%', '100px' ]
|
||||
}
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Resizable Columns Widget</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><span class="label label-info">IMPORTANT</span> If using jQuery versions older than 1.8, css box-sizing for the table <em>MUST</em> be set as <code>box-sizing: content-box;</code> or the resizable widget will not work properly.</li>
|
||||
<li>In <span class="version">v2.17.4</span>, modified the bindings so the mouse move will now work on the document instead of only within the table header; this makes interaction consistent with what the user expects.</li>
|
||||
<li>In <span class="version">v2.15.12</span>, added <code>resizable_widths</code> option which allows the setting of default & reset header widths.</li>
|
||||
<li>As of tablesorter version 2.9+, this widget can no longer be applied to versions of tablesorter prior to version 2.8.</li>
|
||||
<li>This widget now saves all changed column widths to local storage, or it falls back to a cookie! (v2.1)</li>
|
||||
<li>Column width saving requires the new "$.tablesorter.storage()" function included with the "jquery.tablesorter.widgets.js" file (v2.1).</li>
|
||||
<li>Right clicking (opening the context menu) will now reset the resized columns (v2.4).</li>
|
||||
<li>Holding down the shift key while resizing will force the last column or the table to resize instead of the next column, but only if the table is full width (v2.7.4).</li>
|
||||
<li>Prevent resizing a column by adding any of the following (they all do the same thing), set in order of priority (v2.7.4):
|
||||
<ul>
|
||||
<li>jQuery data <code>data-resizable="false"</code>.</li>
|
||||
<li>metadata <code>class="{ resizable: 'false'}"</code>. This requires the metadata plugin.</li>
|
||||
<li>headers option <code>headers : { 0 : { resizable : 'false' } }</code>.</li>
|
||||
<li>header class name <code>class="resizable-false"</code>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Setting the <code>resizable</code> widget option to <code>false</code>, will only prevent the saving of resized columns, it has nothing to do with preventing a column from being resized.</li>
|
||||
<li>Because this widget uses jQuery's <code>closest()</code> (jQuery 1.3+) and <code>index()</code> (jQuery 1.4+) functions, it requires these newer versions of jQuery in order to work.</li>
|
||||
<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>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo">
|
||||
<h3>Non-full width table <small>(individual columns resize)</small></h3>
|
||||
<table class="tablesorter" style="width:auto">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th class="resizable-false">Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>$153.19</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>Full width table <small>(use shift to force last column to resize)</small></h3>
|
||||
<table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th class="resizable-false">Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>$153.19</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h1>Page Header</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><!-- blue theme stylesheet with additional css styles added in v2.0.17 -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<!-- tablesorter plugin -->
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<!-- tablesorter widget file - loaded after the plugin -->
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script></pre>
|
||||
</div>
|
||||
|
||||
<h1>CSS</h1>
|
||||
<div id="css">
|
||||
<pre class="prettyprint lang-css"></pre>
|
||||
</div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
|
||||
<h1>HTML</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><!-- The Age column is set to not be resizable -->
|
||||
<table class="tablesorter" style="width:auto">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th class="resizable-false">Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
...
|
||||
</tbody>
|
||||
</table></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-widget-savesort.html">Applying the save sort widget ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,196 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Save Sort Widget</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-1.4.4.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="../js/jquery.tablesorter.widgets.js"></script>
|
||||
<script src="../js/parsers/parser-ignore-articles.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
// call the tablesorter plugin
|
||||
$("table").tablesorter({
|
||||
theme: 'blue',
|
||||
|
||||
// use save sort widget
|
||||
widgets: ["saveSort", "zebra"]
|
||||
|
||||
});
|
||||
|
||||
$('button').click(function(){
|
||||
$('table')
|
||||
.trigger('saveSortReset') // clear saved sort
|
||||
.trigger("sortReset"); // reset current table sort
|
||||
return false;
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Save Sort Widget</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>As of tablesorter version 2.9+, this widget can no longer be applied to versions of tablesorter prior to version 2.8.</li>
|
||||
<li>Sort one or more columns, then reload the page to see that this widget remembers the last table sort.</li>
|
||||
<li>Sort saving requires the new "$.tablesorter.storage()" function included with the "jquery.tablesorter.widgets.js" file (v2.1).</li>
|
||||
<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>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><button type="button">Reset Sort</button>
|
||||
<br>
|
||||
<table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Account #</th>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Diff</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>A43</td>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>9.99</td>
|
||||
<td>20.3%</td>
|
||||
<td>+3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A255</td>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>19.99</td>
|
||||
<td>25.1%</td>
|
||||
<td>-7</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A33</td>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>15.89</td>
|
||||
<td>44.2%</td>
|
||||
<td>-15</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A1</td>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>153.19</td>
|
||||
<td>44%</td>
|
||||
<td>+19</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A102</td>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>56</td>
|
||||
<td>153.19</td>
|
||||
<td>23%</td>
|
||||
<td>+9</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- IMDB top 5 movies (3/2012) -->
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Rank</th>
|
||||
<th>Rating</th>
|
||||
<th class="sorter-ignoreArticles">Title</th>
|
||||
<th>Votes</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1.</td>
|
||||
<td>9.2</td>
|
||||
<td><a href="http://www.imdb.com/title/tt0111161/">The Shawshank Redemption</a> (1994)</td>
|
||||
<td>734,327</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2.</td>
|
||||
<td>9.2</td>
|
||||
<td><a href="http://www.imdb.com/title/tt0068646/">The Godfather</a> (1972)</td>
|
||||
<td>548,857</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3.</td>
|
||||
<td>9.0</td>
|
||||
<td><a href="http://www.imdb.com/title/tt0071562/">The Godfather: Part II</a> (1974)</td>
|
||||
<td>346,072</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4.</td>
|
||||
<td>8.9</td>
|
||||
<td><a href="http://www.imdb.com/title/tt0110912/">Pulp Fiction</a> (1994)</td>
|
||||
<td>577,426</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5.</td>
|
||||
<td>8.9</td>
|
||||
<td><a href="http://www.imdb.com/title/tt0060196/">The Good, the Bad and the Ugly</a> (1966)</td>
|
||||
<td>229,564</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Page Header</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html">
|
||||
<link rel="stylesheet" href="css/blue/style.css">
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
<script src="js/jquery.tablesorter.min.js"></script>
|
||||
<script src="js/jquery.tablesorter.widgets.min.js"></script></pre>
|
||||
</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-widget-sticky-header.html">Applying the sticky header widget ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,253 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Scroller Widget</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-1.4.4.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: theme -->
|
||||
<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
|
||||
<link class="ui-theme" rel="stylesheet" href="../css/theme.jui.css">
|
||||
<link class="theme default" rel="stylesheet" href="../css/theme.default.css">
|
||||
<link class="theme blue" rel="stylesheet" href="../css/theme.blue.css">
|
||||
<link class="theme green" rel="stylesheet" href="../css/theme.green.css">
|
||||
<link class="theme grey" rel="stylesheet" href="../css/theme.grey.css">
|
||||
<link class="theme ice" rel="stylesheet" href="../css/theme.ice.css">
|
||||
<link class="theme black-ice" rel="stylesheet" href="../css/theme.black-ice.css">
|
||||
<link class="theme dark" rel="stylesheet" href="../css/theme.dark.css">
|
||||
<link class="theme dropbox" rel="stylesheet" href="../css/theme.dropbox.css">
|
||||
|
||||
<!-- Tablesorter script: required -->
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
<script src="../js/widgets/widget-scroller.js"></script>
|
||||
|
||||
<style id="css">.name { width: 20%; }
|
||||
.major { width: 35%; }
|
||||
.sex { width: 16%; }
|
||||
.english{ width: 8%; }
|
||||
.japanese { width: 8%; }
|
||||
.calculus { width: 8%; }
|
||||
.geometry { width: 100px; }</style>
|
||||
|
||||
<script id="js">$(function(){
|
||||
|
||||
$("table").tablesorter({
|
||||
widthFixed : true,
|
||||
showProcessing: true,
|
||||
headerTemplate : '{content} {icon}',
|
||||
widgets: [ 'uitheme', 'zebra', 'filter', 'scroller' ],
|
||||
widgetOptions : {
|
||||
scroller_height : 300,
|
||||
scroller_barWidth : 18,
|
||||
scroller_upAfterSort: true,
|
||||
scroller_jumpToHeader: true,
|
||||
scroller_idPrefix : 's_'
|
||||
}
|
||||
});
|
||||
|
||||
});</script>
|
||||
<script>
|
||||
$(function() {
|
||||
$('link.theme, link.ui-theme').each(function(){ this.disabled = true; });
|
||||
|
||||
var b = true, $tbl,
|
||||
$c = $('#case'),
|
||||
themes = 'default blue green grey ice black-ice dark dropbox',
|
||||
i, o = '', t = themes.split(' ');
|
||||
for (i = 0; i < t.length; i++) {
|
||||
o += '<option>' + t[i] + '</option>';
|
||||
}
|
||||
|
||||
$('select')
|
||||
.append(o)
|
||||
.change(function(){
|
||||
var theme = $(this).val().toLowerCase(),
|
||||
name = theme === 'jui' ? 'ui-theme' : theme,
|
||||
// ui-theme is added by the themeswitcher
|
||||
files = $('link.theme, link.ui-theme').each(function(){
|
||||
this.disabled = true;
|
||||
});
|
||||
files.filter('.' + name).each(function(){
|
||||
this.disabled = false;
|
||||
});
|
||||
$('table')
|
||||
.removeClass('tablesorter-' + t.join(' tablesorter-') + ' tablesorter-jui')
|
||||
.addClass('tablesorter-' + theme.replace(/-/,''));
|
||||
// make sure columns align
|
||||
$(window).trigger('resize');
|
||||
}).change();
|
||||
|
||||
$tbl = $('.tablesorter-scroller-table table');
|
||||
$('button').click(function(){
|
||||
b = !b;
|
||||
$tbl.each(function(){
|
||||
this.config.widgetOptions.scroller_jumpToHeader = b;
|
||||
$c.html(b + '');
|
||||
});
|
||||
return false;
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Scroller Widget</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.17+</span>
|
||||
<ul>
|
||||
<li>The scroller widget will now work properly with predefined column widths.</li>
|
||||
<li>Shrinking the browser window will now hide the header overflow.</li>
|
||||
<li>Horizontal scrolling of the table body will now properly horizontally scroll the header.</li>
|
||||
<li>Changed the default scroll bar width from <code>17</code> to <code>18</code>.</li>
|
||||
<li>Added <code>scroller_upAfterSort</code> option.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>This widget can not be applied to the original plugin and requires jQuery version 1.4+ to function properly; if you need to make it work with older versions of jQuery and the plugin, please use <a href="http://tconnell.com/samples/scroller/">this version</a> of the widget.</li>
|
||||
<li>This widget was originally written by <a href="http://tconnell.com/samples/scroller/">Connell & Associates, Inc.</a> and is dual-licensed under the MIT and GPL licenses. It has been modified to work with tablesorter version 2.9+.</li>
|
||||
<li>Scroller widget options include:
|
||||
<ul>
|
||||
<li><code>scroller_height</code> - Set the height of the scroll window in pixels (default is <code>300</code>).</li>
|
||||
<li><code>scroller_barWidth</code> - Set the width (default is <code>17</code>) of the scroll bar in pixels. This will need to be changed if using a custom scroll bar plugin.</li>
|
||||
<li><code>scroller_idPrefix</code> - This option contains a prefix string which is added to a random number. This id is then assigned to the wrapping scroll element. Modification is not necessary unless the prefix interferes with ID's already on your page.</li>
|
||||
<li><code>scroller_upAfterSort</code> - when <code>true</code> (default), the scroller automatically scrolls the inner window back to the top after sorting. Set this option to <code>false</code> to prevent this, or stop the window from scrolling after interacting with a table cell (e.g. clicking on a checkbox); new in <span class="version">v2.17.3</span>.</li>
|
||||
<li><code>scroller_jumpToHeader</code> - When <code>true</code>, this option makes the table header jump into view when the table body is not scolled to the top and while scrolling up the page. It's not perfect, but it works. Disable it as desired.<br>
|
||||
<span class="remark">*</span> <em>To see the difference, toggle the button in the demo below, then scroll down & up the page using a mouse wheel with the cursor at the horizontal center of the page and about 100 pixels from the top, so the cursor is within the table body.</em></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
|
||||
<h1>Demo</h1>
|
||||
Choose Theme:
|
||||
<select>
|
||||
<option value="jui">Jquery UI</option>
|
||||
</select><br>
|
||||
<br>
|
||||
<button type="button">Toggle</button> scroller_jumpToHeader : <span id="case">true</span> (see the note above)<span class="remark">*</span>
|
||||
<br>
|
||||
|
||||
<table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="name">Name</th>
|
||||
<th class="major">Major</th><th>Sex</th>
|
||||
<th class="english">English</th>
|
||||
<th class="japanese">Japanese</th>
|
||||
<th class="calculus">Calculus</th>
|
||||
<th class="geometry filter-false sorter-false">Geometry</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr><th>Name</th><th>Major</th><th>Sex</th><th>English</th><th>Japanese</th><th>Calculus</th><th>Geometry</th></tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr><td>Student01</td><td>Languages</td><td>male</td><td>80</td><td>70</td><td>75</td><td>80</td></tr>
|
||||
<tr><td>Student02</td><td>Mathematics</td><td>male</td><td>90</td><td>88</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student03</td><td>Languages</td><td>female</td><td>85</td><td>95</td><td>80</td><td>85</td></tr>
|
||||
<tr><td>Student04</td><td>Languages</td><td>male</td><td>60</td><td>55</td><td>100</td><td>100</td></tr>
|
||||
<tr><td>Student05</td><td>Languages</td><td>female</td><td>68</td><td>80</td><td>95</td><td>80</td></tr>
|
||||
<tr><td>Student06</td><td>Mathematics</td><td>male</td><td>100</td><td>99</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student07</td><td>Mathematics</td><td>male</td><td>85</td><td>68</td><td>90</td><td>90</td></tr>
|
||||
<tr><td>Student08</td><td>Languages</td><td>male</td><td>100</td><td>90</td><td>90</td><td>85</td></tr>
|
||||
<tr><td>Student09</td><td>Mathematics</td><td>male</td><td>80</td><td>50</td><td>65</td><td>75</td></tr>
|
||||
<tr><td>Student10</td><td>Languages</td><td>male</td><td>85</td><td>100</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student11</td><td>Languages</td><td>male</td><td>86</td><td>85</td><td>100</td><td>100</td></tr>
|
||||
<tr><td>Student12</td><td>Mathematics</td><td>female</td><td>100</td><td>75</td><td>70</td><td>85</td></tr>
|
||||
<tr><td>Student13</td><td>Languages</td><td>female</td><td>100</td><td>80</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student14</td><td>Languages</td><td>female</td><td>50</td><td>45</td><td>55</td><td>90</td></tr>
|
||||
<tr><td>Student15</td><td>Languages</td><td>male</td><td>95</td><td>35</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student16</td><td>Languages</td><td>female</td><td>100</td><td>50</td><td>30</td><td>70</td></tr>
|
||||
<tr><td>Student17</td><td>Languages</td><td>female</td><td>80</td><td>100</td><td>55</td><td>65</td></tr>
|
||||
<tr><td>Student18</td><td>Mathematics</td><td>male</td><td>30</td><td>49</td><td>55</td><td>75</td></tr>
|
||||
<tr><td>Student19</td><td>Languages</td><td>male</td><td>68</td><td>90</td><td>88</td><td>70</td></tr>
|
||||
<tr><td>Student20</td><td>Mathematics</td><td>male</td><td>40</td><td>45</td><td>40</td><td>80</td></tr>
|
||||
<tr><td>Student21</td><td>Languages</td><td>male</td><td>50</td><td>45</td><td>100</td><td>100</td></tr>
|
||||
<tr><td>Student22</td><td>Mathematics</td><td>male</td><td>100</td><td>99</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student23</td><td>Languages</td><td>female</td><td>85</td><td>80</td><td>80</td><td>80</td></tr>
|
||||
<tr><td>student23</td><td>Mathematics</td><td>male</td><td>82</td><td>77</td><td>0</td><td>79</td></tr>
|
||||
<tr><td>student24</td><td>Languages</td><td>female</td><td>100</td><td>91</td><td>13</td><td>82</td></tr>
|
||||
<tr><td>student25</td><td>Mathematics</td><td>male</td><td>22</td><td>96</td><td>82</td><td>53</td></tr>
|
||||
<tr><td>student26</td><td>Languages</td><td>female</td><td>37</td><td>29</td><td>56</td><td>59</td></tr>
|
||||
<tr><td>student27</td><td>Mathematics</td><td>male</td><td>86</td><td>82</td><td>69</td><td>23</td></tr>
|
||||
<tr><td>student28</td><td>Languages</td><td>female</td><td>44</td><td>25</td><td>43</td><td>1</td></tr>
|
||||
<tr><td>student29</td><td>Mathematics</td><td>male</td><td>77</td><td>47</td><td>22</td><td>38</td></tr>
|
||||
<tr><td>student30</td><td>Languages</td><td>female</td><td>19</td><td>35</td><td>23</td><td>10</td></tr>
|
||||
<tr><td>student31</td><td>Mathematics</td><td>male</td><td>90</td><td>27</td><td>17</td><td>50</td></tr>
|
||||
<tr><td>student32</td><td>Languages</td><td>female</td><td>60</td><td>75</td><td>33</td><td>38</td></tr>
|
||||
<tr><td>student33</td><td>Mathematics</td><td>male</td><td>4</td><td>31</td><td>37</td><td>15</td></tr>
|
||||
<tr><td>student34</td><td>Languages</td><td>female</td><td>77</td><td>97</td><td>81</td><td>44</td></tr>
|
||||
<tr><td>student35</td><td>Mathematics</td><td>male</td><td>5</td><td>81</td><td>51</td><td>95</td></tr>
|
||||
<tr><td>student36</td><td>Languages</td><td>female</td><td>70</td><td>61</td><td>70</td><td>94</td></tr>
|
||||
<tr><td>student37</td><td>Mathematics</td><td>male</td><td>60</td><td>3</td><td>61</td><td>84</td></tr>
|
||||
<tr><td>student38</td><td>Languages</td><td>female</td><td>63</td><td>39</td><td>0</td><td>11</td></tr>
|
||||
<tr><td>student39</td><td>Mathematics</td><td>male</td><td>50</td><td>46</td><td>32</td><td>38</td></tr>
|
||||
<tr><td>student40</td><td>Languages</td><td>female</td><td>51</td><td>75</td><td>25</td><td>3</td></tr>
|
||||
<tr><td>student41</td><td>Mathematics</td><td>male</td><td>43</td><td>34</td><td>28</td><td>78</td></tr>
|
||||
<tr><td>student42</td><td>Languages</td><td>female</td><td>11</td><td>89</td><td>60</td><td>95</td></tr>
|
||||
<tr><td>student43</td><td>Mathematics</td><td>male</td><td>48</td><td>92</td><td>18</td><td>88</td></tr>
|
||||
<tr><td>student44</td><td>Languages</td><td>female</td><td>82</td><td>2</td><td>59</td><td>73</td></tr>
|
||||
<tr><td>student45</td><td>Mathematics</td><td>male</td><td>91</td><td>73</td><td>37</td><td>39</td></tr>
|
||||
<tr><td>student46</td><td>Languages</td><td>female</td><td>4</td><td>8</td><td>12</td><td>10</td></tr>
|
||||
<tr><td>student47</td><td>Mathematics</td><td>male</td><td>89</td><td>10</td><td>6</td><td>11</td></tr>
|
||||
<tr><td>student48</td><td>Languages</td><td>female</td><td>90</td><td>32</td><td>21</td><td>18</td></tr>
|
||||
<tr><td>student49</td><td>Mathematics</td><td>male</td><td>42</td><td>49</td><td>49</td><td>72</td></tr>
|
||||
<tr><td>student50</td><td>Languages</td><td>female</td><td>56</td><td>37</td><td>67</td><td>54</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="narrow-block">
|
||||
<table class="tablesorter">
|
||||
<thead>
|
||||
<tr><th>Account #</th><th>First Name</th><th>Last Name</th><th>Age</th><th>Total</th><th>Discount</th><th>Diff</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>A43</td><td>Peter</td><td>Parker</td><td>28</td><td>9.99</td><td>20.3%</td><td>+3</td></tr>
|
||||
<tr><td>A255</td><td>John</td><td>Hood</td><td>33</td><td>19.99</td><td>25.1%</td><td>-7</td></tr>
|
||||
<tr><td>A33</td><td>Clark</td><td>Kent</td><td>18</td><td>15.49</td><td>44.2%</td><td>-13</td></tr>
|
||||
<tr><td>A11</td><td>Bruce</td><td>Almighty</td><td>45</td><td>153.19</td><td>44%</td><td>+19</td></tr>
|
||||
<tr><td>A102</td><td>Bruce</td><td>Evans</td><td>56</td><td>153.19</td><td>23%</td><td>+9</td></tr>
|
||||
<tr><td>A23</td><td>Mike</td><td>Peters</td><td>22</td><td>5.69</td><td>20.3%</td><td>+2</td></tr>
|
||||
<tr><td>A55</td><td>Leslie</td><td>Kent</td><td>33</td><td>15.99</td><td>25.1%</td><td>-3</td></tr>
|
||||
<tr><td>A3</td><td>Frank</td><td>Mint</td><td>44</td><td>12.59</td><td>44.2%</td><td>-12</td></tr>
|
||||
<tr><td>A21</td><td>Joe</td><td>Thomas</td><td>45</td><td>15.25</td><td>44%</td><td>+12</td></tr>
|
||||
<tr><td>A12</td><td>Tess</td><td>Evans</td><td>66</td><td>13.59</td><td>23%</td><td>+4</td></tr>
|
||||
<tr><td>A21</td><td>Peter</td><td>Dunn</td><td>12</td><td>2.99</td><td>21.1%</td><td>+2</td></tr>
|
||||
<tr><td>A33</td><td>Harry</td><td>Jones</td><td>13</td><td>19.49</td><td>22.2%</td><td>-6</td></tr>
|
||||
<tr><td>A13</td><td>John</td><td>James</td><td>16</td><td>13.89</td><td>42.1%</td><td>-13</td></tr>
|
||||
<tr><td>A71</td><td>Nick</td><td>Parker</td><td>45</td><td>13.89</td><td>44%</td><td>+29</td></tr>
|
||||
<tr><td>A21</td><td>Charles</td><td>Dunn</td><td>19</td><td>15.49</td><td>22%</td><td>+3</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="spacer"></div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,278 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Static Row Widget (beta)</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
|
||||
<script src="js/jquery-ui-latest.min.js"></script>
|
||||
<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="../js/widgets/widget-staticRow.js"></script>
|
||||
<style>
|
||||
.options th:not(.sorter-false) {
|
||||
width: 10%;
|
||||
}
|
||||
#alphimals * {
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
$('.options').tablesorter({
|
||||
widthFixed: true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style id="css">#alphimals td {
|
||||
text-align: center;
|
||||
}
|
||||
.tablesorter tbody tr.static td {
|
||||
background-color: #999;
|
||||
color: #fff;
|
||||
}</style>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
$('#alphimals, #table2').tablesorter({
|
||||
theme: 'blue',
|
||||
widgets: ['zebra', 'staticRow']
|
||||
})
|
||||
// (ctrl or mac command) + click to toggle static row
|
||||
.find('tbody tr').click(function(event){
|
||||
if (event.ctrlKey || event.metaKey) {
|
||||
$(this)
|
||||
.toggleClass('static')
|
||||
.trigger('staticRowsRefresh');
|
||||
}
|
||||
});
|
||||
|
||||
$('.addrow').click(function(){
|
||||
$('#alphimals tbody')
|
||||
.append('<tr><td>AA</td><td>0</td><td>Aardvark</td></tr>')
|
||||
.trigger('update');
|
||||
});
|
||||
|
||||
// move row up or down
|
||||
$('.move').click(function(){
|
||||
var direction = $(this).hasClass('up'),
|
||||
$rows = $('#alphimals tr'),
|
||||
$ig = $rows.filter(':contains(Iguana)').addClass('static'),
|
||||
len = $rows.length - 3, // subtract two because there are two other static rows
|
||||
v = $ig.data('row-index');
|
||||
v = direction ? --v : ++v;
|
||||
v = v > len ? len : v <= 0 ? 0 : v;
|
||||
$ig.data('row-index', v);
|
||||
$rows.trigger('staticRowsRefresh');
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Static Row Widget (beta)</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<p></p>
|
||||
<br>
|
||||
<div class="accordion">
|
||||
|
||||
<h3 id="notes"><a href="#">Notes</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>This widget will only work in tablesorter version 2.8+.</li>
|
||||
<li>The widget was modified from <a href="https://github.com/ascii-soup/Tablesorter-Static-Row-Plugin">Tablesorter-Static-Row-Plugin</a> by <a href="https://github.com/ascii-soup">ascii-soup</a> (<a href="https://github.com/ascii-soup/Tablesorter-Static-Row-Plugin/blob/master/LICENSE">MIT license</a>).</li>
|
||||
<li>It has been updated to work in tables with multiple tbodies, but not within information-only tbodies.</li>
|
||||
<li>This widget was not tested, nor was it meant to be used with the pager.</li>
|
||||
<li><span class="label label-info">Note</span> This demo was updated to allow toggling of static rows.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Options</a></h3>
|
||||
<div>
|
||||
<h3>Group widget default options (added inside of tablesorter <code>widgetOptions</code>)</h3>
|
||||
<div class="tip">
|
||||
<span class="label label-info">TIP!</span> Click on the link in the option 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="tablesorter-blue options">
|
||||
<thead>
|
||||
<tr><th>Option</th><th>Default</th><th class="sorter-false">Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr id="staticrow_class">
|
||||
<td><span class="permalink">staticRow_class</span></td>
|
||||
<td><code>".static"</code></td>
|
||||
<td>
|
||||
Set a class name to use to lock a row in place, include a period.
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="staticrow_data">
|
||||
<td><span class="permalink">staticRow_data</span></td>
|
||||
<td><code>"static-index"</code></td>
|
||||
<td>
|
||||
Set the jQuery data name to use with the row element. This data name saves the row index, and is only available as an option to avoid conflicts.
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="staticrow_index">
|
||||
<td><a href="#" class="permalink">staticRow_index</a></td>
|
||||
<td><code>"row-index"</code></td>
|
||||
<td>
|
||||
Use this data-attribute to set the desired static row location
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
Set the desired location using either of these two methods:
|
||||
<ul>
|
||||
<li>
|
||||
Use a zero-based index of the row
|
||||
<pre class="prettyprint lang-html"><tr data-row-index="5">...</tr></pre>
|
||||
<span class="label label-info">Note</span> setting this index to much more than the number of table rows ensures that it will stay at the bottom when adding new rows.<br>
|
||||
<br>
|
||||
</li>
|
||||
<li>
|
||||
Use a percentage if total rows within it's tbody
|
||||
<pre class="prettyprint lang-html"><tr data-row-index="50%">...</tr></pre>
|
||||
</li>
|
||||
</ul>
|
||||
These values take priority over the actual row index, so as shown in the "Single tbody" demo below, the header row is set to 50%, but initially, it is located at the top of the table.<br>
|
||||
<br>
|
||||
If these values are changed dynamically, the static row location can be updated
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Methods / Events</a></h3>
|
||||
<div>
|
||||
<h3>Method</h3>
|
||||
If adding or removing rows from the table, using any of the update methods will automatically refresh the static row indexes. Use the "Add Row" button below to test this.<br>
|
||||
<br>
|
||||
To modify or refresh the static row indexing without updating, trigger a <code>staticRowsRefresh</code> event on the table:
|
||||
<pre class="prettyprint lang-js">var $row = $("tr:contains('Iguana')");
|
||||
// move Iguana row down one (remember, this only works on static rows)
|
||||
$row.data('row-index', $row.data('row-index') + 1);
|
||||
$(table).trigger('staticRowsRefresh');</pre>
|
||||
this allows moving a static row dynamically; try the Move "Ignuana" row buttons above the "Single tbody" demo.
|
||||
<h3>Event</h3>
|
||||
A <code>staticRowsComplete</code> event is triggered after the static rows widget has completed moving the static rows back into place. Use it as follows:
|
||||
<pre class="prettyprint lang-js">$(table).bind('staticRowsComplete', function(table){
|
||||
console.log('static rows applied to ' + table.id);
|
||||
});</pre>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<table id="alphimals" class="tablesorter">
|
||||
<thead>
|
||||
<tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="static" data-row-index="50%"><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr>
|
||||
<tr><td>D</td><td>4</td><td>Dog</td></tr>
|
||||
<tr><td>E</td><td>5</td><td>Emu</td></tr>
|
||||
<tr><td>F</td><td>6</td><td>Frog</td></tr>
|
||||
<tr><td>G</td><td>7</td><td>Goat</td></tr>
|
||||
<tr><td>A</td><td>1</td><td>Anteater</td></tr>
|
||||
<tr><td>B</td><td>2</td><td>Bear</td></tr>
|
||||
<tr><td>C</td><td>3</td><td>Cat</td></tr>
|
||||
<tr><td>H</td><td>8</td><td>Horse</td></tr>
|
||||
<!-- index of next row set to one less because of static row above set to 50% -->
|
||||
<tr class="static" data-row-index="8"><td>I</td><td>9</td><td>Iguana</td></tr>
|
||||
<tr><td>J</td><td>10</td><td>Jellyfish</td></tr>
|
||||
<tr><td>V</td><td>22</td><td>Vole</td></tr>
|
||||
<tr><td>W</td><td>23</td><td>Walrus</td></tr>
|
||||
<tr><td>X</td><td>24</td><td>Xantis</td></tr>
|
||||
<tr><td>K</td><td>11</td><td>Koala</td></tr>
|
||||
<tr><td>L</td><td>12</td><td>Lemur</td></tr>
|
||||
<tr><td>Q</td><td>17</td><td>Quail</td></tr>
|
||||
<tr><td>R</td><td>18</td><td>Rhino</td></tr>
|
||||
<tr><td>S</td><td>19</td><td>Seal</td></tr>
|
||||
<tr><td>M</td><td>13</td><td>Mink</td></tr>
|
||||
<tr><td>N</td><td>14</td><td>Nightingale</td></tr>
|
||||
<tr><td>O</td><td>15</td><td>Octopus</td></tr>
|
||||
<tr><td>P</td><td>16</td><td>Pig</td></tr>
|
||||
<tr><td>T</td><td>20</td><td>Tiger</td></tr>
|
||||
<tr><td>U</td><td>21</td><td>Urchin</td></tr>
|
||||
<tr><td>Y</td><td>25</td><td>Yak</td></tr>
|
||||
<tr><td>Z</td><td>26</td><td>Zebra</td></tr>
|
||||
<tr class="static" data-row-index="50"><td>Total Count</td><td>Lots!</td><td> </td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h4>Multiple tbody</h4>
|
||||
<table id="table2" class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Rank</th>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>1</td><td>Philip Aaron Wong</td><td>Johnson Sr Esq</td><td>25</td><td>$5.95</td><td>22%</td><td>Jun 26, 2004 7:22 AM</td></tr>
|
||||
<tr><td>11</td><td>Aaron</td><td>Hibert</td><td>12</td><td>$2.99</td><td>5%</td><td>Aug 21, 2009 12:21 PM</td></tr>
|
||||
<tr class="static"><td>12</td><td>Brandon Clark</td><td>Henry Jr</td><td>51</td><td>$42.29</td><td>18%</td><td>Oct 13, 2000 1:15 PM</td></tr>
|
||||
<tr><td>111</td><td>Peter</td><td>Parker</td><td>28</td><td>$9.99</td><td>20%</td><td>Jul 6, 2006 8:14 AM</td></tr>
|
||||
<tr><td>21</td><td>John</td><td>Hood</td><td>33</td><td>$19.99</td><td>25%</td><td>Dec 10, 2002 5:14 AM</td></tr>
|
||||
<tr><td>013</td><td>Clark</td><td>Kent Sr.</td><td>18</td><td>$15.89</td><td>44%</td><td>Jan 12, 2003 11:14 AM</td></tr>
|
||||
</tbody>
|
||||
<tbody class="tablesorter-infoOnly">
|
||||
<tr><th colspan="7">Second tbody</th></tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr><td>005</td><td>Bruce</td><td>Almighty Esq</td><td>45</td><td>$153.19</td><td>44%</td><td>Jan 18, 2021 9:12 AM</td></tr>
|
||||
<tr><td>10</td><td>Alex</td><td>Dumass</td><td>13</td><td>$5.29</td><td>4%</td><td>Jan 8, 2012 5:11 PM</td></tr>
|
||||
<tr><td>16</td><td>Jim</td><td>Franco</td><td>24</td><td>$14.19</td><td>14%</td><td>Jan 14, 2004 11:23 AM</td></tr>
|
||||
<tr><td>166</td><td>Bruce Lee</td><td>Evans</td><td>22</td><td>$13.19</td><td>11%</td><td>Jan 18, 2007 9:12 AM</td></tr>
|
||||
<tr><td>100</td><td>Brenda Dexter</td><td>McMasters</td><td>18</td><td>$55.20</td><td>15%</td><td>Feb 12, 2010 7:23 PM</td></tr>
|
||||
<tr><td>55</td><td>Dennis</td><td>Bronson</td><td>65</td><td>$123.00</td><td>32%</td><td>Jan 20, 2001 1:12 PM</td></tr>
|
||||
<tr class="static"><td>9</td><td>Martha</td><td>delFuego</td><td>25</td><td>$22.09</td><td>17%</td><td>Jun 11, 2011 10:55 AM</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
<h1>CSS</h1>
|
||||
<div id="css">
|
||||
<pre class="prettyprint lang-css"></pre>
|
||||
</div>
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,269 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Sticky Header Widget</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-1.4.4.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: theme -->
|
||||
<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
|
||||
<link class="ui-theme" rel="stylesheet" href="../css/theme.jui.css">
|
||||
<link class="theme default" rel="stylesheet" href="../css/theme.default.css">
|
||||
<link class="theme blue" rel="stylesheet" href="../css/theme.blue.css">
|
||||
<link class="theme green" rel="stylesheet" href="../css/theme.green.css">
|
||||
<link class="theme grey" rel="stylesheet" href="../css/theme.grey.css">
|
||||
<link class="theme ice" rel="stylesheet" href="../css/theme.ice.css">
|
||||
<link class="theme black-ice" rel="stylesheet" href="../css/theme.black-ice.css">
|
||||
<link class="theme dark" rel="stylesheet" href="../css/theme.dark.css">
|
||||
<link class="theme dropbox" rel="stylesheet" href="../css/theme.dropbox.css">
|
||||
|
||||
<style id="css">/* wrapper of table 2 */
|
||||
.wrapper {
|
||||
position: relative;
|
||||
padding: 0 5px;
|
||||
height: 250px;
|
||||
overflow-y: auto;
|
||||
}</style>
|
||||
|
||||
<!-- Tablesorter script: required -->
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<script id="js">$(function(){
|
||||
|
||||
var options = {
|
||||
widthFixed : true,
|
||||
showProcessing: true,
|
||||
headerTemplate : '{content} {icon}', // Add icon for jui theme; new in v2.7!
|
||||
|
||||
widgets: [ 'uitheme', 'zebra', 'stickyHeaders', 'filter' ],
|
||||
|
||||
widgetOptions: {
|
||||
|
||||
// extra class name added to the sticky header row
|
||||
stickyHeaders : '',
|
||||
// number or jquery selector targeting the position:fixed element
|
||||
stickyHeaders_offset : 0,
|
||||
// added to table ID, if it exists
|
||||
stickyHeaders_cloneId : '-sticky',
|
||||
// trigger "resize" event on headers
|
||||
stickyHeaders_addResizeEvent : true,
|
||||
// if false and a caption exist, it won't be included in the sticky header
|
||||
stickyHeaders_includeCaption : true,
|
||||
// The zIndex of the stickyHeaders, allows the user to adjust this to their needs
|
||||
stickyHeaders_zIndex : 2,
|
||||
// jQuery selector or object to attach sticky header to
|
||||
stickyHeaders_attachTo : null,
|
||||
// scroll table top into view after filtering
|
||||
stickyHeaders_filteredToTop: true,
|
||||
|
||||
// adding zebra striping, using content and default styles - the ui css removes the background from default
|
||||
// even and odd class names included for this demo to allow switching themes
|
||||
zebra : ["ui-widget-content even", "ui-state-default odd"],
|
||||
// use uitheme widget to apply defauly jquery ui (jui) class names
|
||||
// see the uitheme demo for more details on how to change the class names
|
||||
uitheme : 'jui'
|
||||
}
|
||||
};
|
||||
|
||||
$("#table1").tablesorter(options);
|
||||
|
||||
/* make second table scroll within its wrapper */
|
||||
options.widgetOptions.stickyHeaders_attachTo = '.wrapper'; // or $('.wrapper')
|
||||
$("#table2").tablesorter(options);
|
||||
|
||||
});</script>
|
||||
<script>
|
||||
$(function() {
|
||||
$('link.theme, link.ui-theme').each(function(){ this.disabled = true; });
|
||||
|
||||
var themes = 'default blue green grey ice black-ice dark dropbox',
|
||||
i, o = '', t = themes.split(' ');
|
||||
for (i = 0; i < t.length; i++) {
|
||||
o += '<option>' + t[i] + '</option>';
|
||||
}
|
||||
|
||||
$('select:first')
|
||||
.append(o)
|
||||
.change(function(){
|
||||
var theme = $(this).val().toLowerCase(),
|
||||
name = theme === 'jui' ? 'ui-theme' : theme,
|
||||
// ui-theme is added by the themeswitcher
|
||||
files = $('link.theme, link.ui-theme').each(function(){
|
||||
this.disabled = true;
|
||||
})
|
||||
files.filter('.' + name).each(function(){
|
||||
this.disabled = false;
|
||||
});
|
||||
$('table')
|
||||
.removeClass('tablesorter-' + t.join(' tablesorter-') + ' tablesorter-jui')
|
||||
.addClass('tablesorter-' + theme.replace(/-/,''));
|
||||
}).change();
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Sticky Header Widget</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 updated">v2.16.2</span>, added a <code>stickyHeaders_filteredToTop</code> option which when <code>true</code> will scroll table top into view after filtering</li>
|
||||
<li>As of tablesorter version 2.9+, this widget can no longer be applied to versions of tablesorter prior to version 2.8.</li>
|
||||
<li>Added <code>cssStickyHeaders_attachTo</code> option (default set to <code>null</code>) in <span class="version">v2.14.4</span>.
|
||||
<ul>
|
||||
<li>Setting this option with either a jQuery selector string (<code>".wrapper"</code>) or jQuery object (<code>$(".wrapper")</code>).</li>
|
||||
<li>This option contains the target to which the sticky header will attach - see the <a href="#table2">second example</a> below.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Added a widget option named <code>stickyHeaders_cloneId</code> (<span class="version">v2.9</span>)
|
||||
<ul>
|
||||
<li>It contains a suffix to add to any table id.</li>
|
||||
<li>Its default value is <code>-sticky</code> </li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>To access the added sticky table content from your code without worrying about using the ID, you can use <code>table.config.widgetOptions.$sticky</code>.</li>
|
||||
<li>Table captions and any additional rows (filter widget row) will also be included in the sticky header (<span class="version">v2.9</span>).</li>
|
||||
<li>You will need to modify the <code>headerTemplate</code> option to include the jQuery UI icon! See the example in the code (v2.7).</li>
|
||||
<li>Scroll down the page to see the headers stick. Then sort the columns using the sticky headers!</li>
|
||||
<li>Added a widget option named <code>stickyHeaders</code> option which contains the css class name applied to the actual sticky header (v2.1). Modified in <span class="version">v2.11</span> so that "tablesorter-stickyHeader" class is always added and this option only adds additional classes.</li>
|
||||
<li>Multiple rows in the header will become sticky (v2.1.17).</li>
|
||||
<li>The filter widget adds a row to the table header, but that row will not be included in the sticky header.</li>
|
||||
<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>
|
||||
|
||||
<h1>CSS</h1>
|
||||
<div id="css">
|
||||
<pre class="prettyprint lang-css"></pre>
|
||||
</div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
|
||||
<h1>Demo</h1>
|
||||
Choose Theme:
|
||||
<select>
|
||||
<option value="jui">Jquery UI</option>
|
||||
</select>
|
||||
<br><br>
|
||||
|
||||
<table id="table1" class="tablesorter">
|
||||
<caption>Student Grades</caption>
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Major</th><th>Sex</th><th>English</th><th>Japanese</th><th>Calculus</th><th class="filter-false sorter-false">Geometry</th></tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr><th>Name</th><th>Major</th><th>Sex</th><th>English</th><th>Japanese</th><th>Calculus</th><th>Geometry</th></tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr><td>Student01</td><td>Languages</td><td>male</td><td>80</td><td>70</td><td>75</td><td>80</td></tr>
|
||||
<tr><td>Student02</td><td>Mathematics</td><td>male</td><td>90</td><td>88</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student03</td><td>Languages</td><td>female</td><td>85</td><td>95</td><td>80</td><td>85</td></tr>
|
||||
<tr><td>Student04</td><td>Languages</td><td>male</td><td>60</td><td>55</td><td>100</td><td>100</td></tr>
|
||||
<tr><td>Student05</td><td>Languages</td><td>female</td><td>68</td><td>80</td><td>95</td><td>80</td></tr>
|
||||
<tr><td>Student06</td><td>Mathematics</td><td>male</td><td>100</td><td>99</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student07</td><td>Mathematics</td><td>male</td><td>85</td><td>68</td><td>90</td><td>90</td></tr>
|
||||
<tr><td>Student08</td><td>Languages</td><td>male</td><td>100</td><td>90</td><td>90</td><td>85</td></tr>
|
||||
<tr><td>Student09</td><td>Mathematics</td><td>male</td><td>80</td><td>50</td><td>65</td><td>75</td></tr>
|
||||
<tr><td>Student10</td><td>Languages</td><td>male</td><td>85</td><td>100</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student11</td><td>Languages</td><td>male</td><td>86</td><td>85</td><td>100</td><td>100</td></tr>
|
||||
<tr><td>Student12</td><td>Mathematics</td><td>female</td><td>100</td><td>75</td><td>70</td><td>85</td></tr>
|
||||
<tr><td>Student13</td><td>Languages</td><td>female</td><td>100</td><td>80</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student14</td><td>Languages</td><td>female</td><td>50</td><td>45</td><td>55</td><td>90</td></tr>
|
||||
<tr><td>Student15</td><td>Languages</td><td>male</td><td>95</td><td>35</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student16</td><td>Languages</td><td>female</td><td>100</td><td>50</td><td>30</td><td>70</td></tr>
|
||||
<tr><td>Student17</td><td>Languages</td><td>female</td><td>80</td><td>100</td><td>55</td><td>65</td></tr>
|
||||
<tr><td>Student18</td><td>Mathematics</td><td>male</td><td>30</td><td>49</td><td>55</td><td>75</td></tr>
|
||||
<tr><td>Student19</td><td>Languages</td><td>male</td><td>68</td><td>90</td><td>88</td><td>70</td></tr>
|
||||
<tr><td>Student20</td><td>Mathematics</td><td>male</td><td>40</td><td>45</td><td>40</td><td>80</td></tr>
|
||||
<tr><td>Student21</td><td>Languages</td><td>male</td><td>50</td><td>45</td><td>100</td><td>100</td></tr>
|
||||
<tr><td>Student22</td><td>Mathematics</td><td>male</td><td>100</td><td>99</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student23</td><td>Languages</td><td>female</td><td>85</td><td>80</td><td>80</td><td>80</td></tr>
|
||||
<tr><td>student23</td><td>Mathematics</td><td>male</td><td>82</td><td>77</td><td>0</td><td>79</td></tr>
|
||||
<tr><td>student24</td><td>Languages</td><td>female</td><td>100</td><td>91</td><td>13</td><td>82</td></tr>
|
||||
<tr><td>student25</td><td>Mathematics</td><td>male</td><td>22</td><td>96</td><td>82</td><td>53</td></tr>
|
||||
<tr><td>student26</td><td>Languages</td><td>female</td><td>37</td><td>29</td><td>56</td><td>59</td></tr>
|
||||
<tr><td>student27</td><td>Mathematics</td><td>male</td><td>86</td><td>82</td><td>69</td><td>23</td></tr>
|
||||
<tr><td>student28</td><td>Languages</td><td>female</td><td>44</td><td>25</td><td>43</td><td>1</td></tr>
|
||||
<tr><td>student29</td><td>Mathematics</td><td>male</td><td>77</td><td>47</td><td>22</td><td>38</td></tr>
|
||||
<tr><td>student30</td><td>Languages</td><td>female</td><td>19</td><td>35</td><td>23</td><td>10</td></tr>
|
||||
<tr><td>student31</td><td>Mathematics</td><td>male</td><td>90</td><td>27</td><td>17</td><td>50</td></tr>
|
||||
<tr><td>student32</td><td>Languages</td><td>female</td><td>60</td><td>75</td><td>33</td><td>38</td></tr>
|
||||
<tr><td>student33</td><td>Mathematics</td><td>male</td><td>4</td><td>31</td><td>37</td><td>15</td></tr>
|
||||
<tr><td>student34</td><td>Languages</td><td>female</td><td>77</td><td>97</td><td>81</td><td>44</td></tr>
|
||||
<tr><td>student35</td><td>Mathematics</td><td>male</td><td>5</td><td>81</td><td>51</td><td>95</td></tr>
|
||||
<tr><td>student36</td><td>Languages</td><td>female</td><td>70</td><td>61</td><td>70</td><td>94</td></tr>
|
||||
<tr><td>student37</td><td>Mathematics</td><td>male</td><td>60</td><td>3</td><td>61</td><td>84</td></tr>
|
||||
<tr><td>student38</td><td>Languages</td><td>female</td><td>63</td><td>39</td><td>0</td><td>11</td></tr>
|
||||
<tr><td>student39</td><td>Mathematics</td><td>male</td><td>50</td><td>46</td><td>32</td><td>38</td></tr>
|
||||
<tr><td>student40</td><td>Languages</td><td>female</td><td>51</td><td>75</td><td>25</td><td>3</td></tr>
|
||||
<tr><td>student41</td><td>Mathematics</td><td>male</td><td>43</td><td>34</td><td>28</td><td>78</td></tr>
|
||||
<tr><td>student42</td><td>Languages</td><td>female</td><td>11</td><td>89</td><td>60</td><td>95</td></tr>
|
||||
<tr><td>student43</td><td>Mathematics</td><td>male</td><td>48</td><td>92</td><td>18</td><td>88</td></tr>
|
||||
<tr><td>student44</td><td>Languages</td><td>female</td><td>82</td><td>2</td><td>59</td><td>73</td></tr>
|
||||
<tr><td>student45</td><td>Mathematics</td><td>male</td><td>91</td><td>73</td><td>37</td><td>39</td></tr>
|
||||
<tr><td>student46</td><td>Languages</td><td>female</td><td>4</td><td>8</td><td>12</td><td>10</td></tr>
|
||||
<tr><td>student47</td><td>Mathematics</td><td>male</td><td>89</td><td>10</td><td>6</td><td>11</td></tr>
|
||||
<tr><td>student48</td><td>Languages</td><td>female</td><td>90</td><td>32</td><td>21</td><td>18</td></tr>
|
||||
<tr><td>student49</td><td>Mathematics</td><td>male</td><td>42</td><td>49</td><td>49</td><td>72</td></tr>
|
||||
<tr><td>student50</td><td>Languages</td><td>female</td><td>56</td><td>37</td><td>67</td><td>54</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="narrow-block wrapper">
|
||||
<table id="table2" class="tablesorter">
|
||||
<caption>Student Grades</caption>
|
||||
<thead>
|
||||
<tr><th>Account #</th><th>First Name</th><th>Last Name</th><th>Age</th><th>Total</th><th>Discount</th><th>Diff</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>A43</td><td>Peter</td><td>Parker</td><td>28</td><td>9.99</td><td>20.3%</td><td>+3</td></tr>
|
||||
<tr><td>A255</td><td>John</td><td>Hood</td><td>33</td><td>19.99</td><td>25.1%</td><td>-7</td></tr>
|
||||
<tr><td>A33</td><td>Clark</td><td>Kent</td><td>18</td><td>15.49</td><td>44.2%</td><td>-13</td></tr>
|
||||
<tr><td>A11</td><td>Bruce</td><td>Almighty</td><td>45</td><td>153.19</td><td>44%</td><td>+19</td></tr>
|
||||
<tr><td>A102</td><td>Bruce</td><td>Evans</td><td>56</td><td>153.19</td><td>23%</td><td>+9</td></tr>
|
||||
<tr><td>A23</td><td>Mike</td><td>Peters</td><td>22</td><td>5.69</td><td>20.3%</td><td>+2</td></tr>
|
||||
<tr><td>A55</td><td>Leslie</td><td>Kent</td><td>33</td><td>15.99</td><td>25.1%</td><td>-3</td></tr>
|
||||
<tr><td>A3</td><td>Frank</td><td>Mint</td><td>44</td><td>12.59</td><td>44.2%</td><td>-12</td></tr>
|
||||
<tr><td>A21</td><td>Joe</td><td>Thomas</td><td>45</td><td>15.25</td><td>44%</td><td>+12</td></tr>
|
||||
<tr><td>A12</td><td>Tess</td><td>Evans</td><td>66</td><td>13.59</td><td>23%</td><td>+4</td></tr>
|
||||
<tr><td>A21</td><td>Peter</td><td>Dunn</td><td>12</td><td>2.99</td><td>21.1%</td><td>+2</td></tr>
|
||||
<tr><td>A33</td><td>Harry</td><td>Jones</td><td>13</td><td>19.49</td><td>22.2%</td><td>-6</td></tr>
|
||||
<tr><td>A13</td><td>John</td><td>James</td><td>16</td><td>13.89</td><td>42.1%</td><td>-13</td></tr>
|
||||
<tr><td>A71</td><td>Nick</td><td>Parker</td><td>45</td><td>13.89</td><td>44%</td><td>+29</td></tr>
|
||||
<tr><td>A21</td><td>Charles</td><td>Dunn</td><td>19</td><td>15.49</td><td>22%</td><td>+3</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="spacer"></div>
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-widget-zebra.html">Zebra stripe widget ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,223 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - jQuery UITheme Widget (jQuery UI)</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>
|
||||
|
||||
<!-- jQuery UI theme switcher: https://github.com/pontikis/jui_theme_switch/ -->
|
||||
<style>
|
||||
.switcher_container { padding: 5px; }
|
||||
.switcher_list { padding: 2px; }
|
||||
.switcher_label { margin-right: 5px; }
|
||||
</style>
|
||||
<script src="js/jquery.jui_theme_switch.min.js"></script>
|
||||
|
||||
<!-- Tablesorter: required; also include any of the jQuery UI themes -->
|
||||
<link id="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
|
||||
<link href="../css/theme.jui.css" rel="stylesheet">
|
||||
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<!-- Tablesorter: optional -->
|
||||
<!-- <script src="../addons/pager/jquery.tablesorter.pager.js"></script> -->
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
// Extend the themes to change any of the default class names ** NEW **
|
||||
$.extend($.tablesorter.themes.jui, {
|
||||
// change default jQuery uitheme icons - find the full list of icons here: http://jqueryui.com/themeroller/ (hover over them for their name)
|
||||
table : 'ui-widget ui-widget-content ui-corner-all', // table classes
|
||||
caption : 'ui-widget-content ui-corner-all',
|
||||
header : 'ui-widget-header ui-corner-all ui-state-default', // header classes
|
||||
footerRow : '',
|
||||
footerCells: '',
|
||||
icons : 'ui-icon', // icon class added to the <i> in the header
|
||||
sortNone : 'ui-icon-carat-2-n-s',
|
||||
sortAsc : 'ui-icon-carat-1-n',
|
||||
sortDesc : 'ui-icon-carat-1-s',
|
||||
active : 'ui-state-active', // applied when column is sorted
|
||||
hover : 'ui-state-hover', // hover class
|
||||
filterRow : '',
|
||||
even : 'ui-widget-content', // odd row zebra striping
|
||||
odd : 'ui-state-default' // even row zebra striping
|
||||
});
|
||||
|
||||
// call the tablesorter plugin and apply the ui theme widget
|
||||
$("table").tablesorter({
|
||||
|
||||
theme : 'jui', // theme "jui" and "bootstrap" override the uitheme widget option in v2.7+
|
||||
|
||||
headerTemplate : '{content} {icon}', // needed to add icon for jui theme
|
||||
|
||||
// widget code now contained in the jquery.tablesorter.widgets.js file
|
||||
widgets : ['uitheme', 'zebra'],
|
||||
|
||||
widgetOptions : {
|
||||
// zebra striping class names - the uitheme widget adds the class names defined in
|
||||
// $.tablesorter.themes to the zebra widget class names
|
||||
zebra : ["even", "odd"],
|
||||
|
||||
// set the uitheme widget to use the jQuery UI theme class names
|
||||
// ** this is now optional, and will be overridden if the theme name exists in $.tablesorter.themes **
|
||||
// uitheme : 'jui'
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
});</script>
|
||||
|
||||
<script>
|
||||
$(function(){
|
||||
$('#switcher').jui_theme_switch({
|
||||
stylesheet_link_id : 'ui-theme',
|
||||
datasource_url : 'assets/theme_switcher.json'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>jQuery UITheme Widget (jQuery UI)</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>As of tablesorter version 2.9+, this widget can no longer be applied to versions of tablesorter prior to version 2.8.</li>
|
||||
<li>You will need to modify the <code>headerTemplate</code> option to include the bootstrap icon! See the example in the code (v2.7).</li>
|
||||
<li>The original "widgetUitheme" option has been replaced by "widgetOptions.uitheme". See the javascript block below for more details (v2.1).</li>
|
||||
<li>In tablesorter v2.4, the <code>uitheme</code> option has changed to indicate the theme instead of an array of icons to use:
|
||||
<ul>
|
||||
<li>All theme class names are now contained within <code>$.tablesorter.themes</code> with the jQuery UI theme saved to <code>$.tablesorter.themes.jui</code></li>
|
||||
<li>The themes variable allows you to modify the class names for the table, header, sort icons, active state, hover state, filter inputs and zebra striping. See the code below on how to extend these variables.</li>
|
||||
<li>Set the <code>uitheme</code> widget option to <code>"jui"</code> to set the widget to use the jQuery UI theme. See the <a href="example-widget-bootstrap-theme.html">bootstrap demo</a> for another example.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Earlier widget versions required jQuery 1.4+. The UITheme widget for tablesorter 2.4+ requires jQuery 1.2.6+.</li>
|
||||
</ul>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<br>
|
||||
jQuery UI Theme:
|
||||
<div id="switcher"></div>
|
||||
<br>
|
||||
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<caption>Some interesting caption</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>$153.19</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
|
||||
<h1>Page Header</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><!-- ui theme stylesheet - contents shown below -->
|
||||
<link rel="stylesheet" href="../css/theme.jui.css">
|
||||
<!-- jQuery UI theme (cupertino example here) -->
|
||||
<link rel="stylesheet" href="css/jquery-ui.min.css">
|
||||
|
||||
<!-- tablesorter plugin -->
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<!-- tablesorter widget file - loaded after the plugin -->
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script></pre>
|
||||
</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-widget-bootstrap-theme.html">UITheme widget - Bootstrap theme ››</a><br>
|
||||
Second time around: <a href="example-option-render-header.html">Modifying the Header during rendering ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
146
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-widget-zebra.html
Executable file
146
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-widget-zebra.html
Executable file
@@ -0,0 +1,146 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Zebra Stripe Widget</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>
|
||||
|
||||
<!-- Tablesorter: optional -->
|
||||
<!-- <script src="../addons/pager/jquery.tablesorter.pager.js"></script> -->
|
||||
|
||||
<style id="css">/* Extra selectors needed to override the default styling */
|
||||
table.tablesorter tbody tr.normal-row td {
|
||||
background: #888;
|
||||
color: #fff;
|
||||
}
|
||||
table.tablesorter tbody tr.alt-row td {
|
||||
background: #555;
|
||||
color: #fff;
|
||||
}</style>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
// call the tablesorter plugin
|
||||
$("table").tablesorter({
|
||||
theme: 'blue',
|
||||
// initialize zebra striping of the table
|
||||
widgets: ["zebra"],
|
||||
// change the default striping class names
|
||||
// updated in v2.1 to use widgetOptions.zebra = ["even", "odd"]
|
||||
// widgetZebra: { css: [ "normal-row", "alt-row" ] } still works
|
||||
widgetOptions : {
|
||||
zebra : [ "normal-row", "alt-row" ]
|
||||
}
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Zebra Stripe Widget</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>This widget is part of the plugin, but has been modified from the original.</li>
|
||||
<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>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>$153.19</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
<h1>CSS</h1>
|
||||
<div id="css">
|
||||
<pre class="prettyprint lang-css"></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-widgets.html">Widgets, writing your own ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
241
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-widgets.html
Executable file
241
modules/EcmReportsBackUp20151106/TableSorterNew/docs/example-widgets.html
Executable file
@@ -0,0 +1,241 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Writing custom widgets</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>
|
||||
|
||||
<!-- Tablesorter: optional -->
|
||||
<script src="../addons/pager/jquery.tablesorter.pager.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
// add new widget called repeatHeaders
|
||||
// ************************************
|
||||
$.tablesorter.addWidget({
|
||||
|
||||
id: "repeatHeaders",
|
||||
priority: 10,
|
||||
options: {
|
||||
rowsToSkip : 4
|
||||
},
|
||||
// format is called on init and when a sorting has finished
|
||||
format: function(table, c, wo) {
|
||||
var h = '', i, $tr, l, skip;
|
||||
// cache and collect all TH headers
|
||||
if (!wo.repeatHeaders) {
|
||||
// "remove-me" class was added in case the table needs to be updated, the "remove-me" rows will be
|
||||
// removed prior to the update to prevent including the rows in the update - see "selectorRemove" option
|
||||
h = '<tr class="repeated-header remove-me">';
|
||||
$.each(c.headerContent, function(i,t) {
|
||||
// table.config.headerContent stores the original table HTML (as text), but it is the HTML before
|
||||
// the headerTemplate option is applied to each header cell; and before the `onRender` callbacks are
|
||||
// executed
|
||||
h += '<th>' + t + '</th>';
|
||||
});
|
||||
wo.repeatHeaders = h + '</tr>';
|
||||
}
|
||||
|
||||
// number of rows to skip
|
||||
skip = wo && wo.rowsToSkip || 4;
|
||||
|
||||
// remove appended headers by classname
|
||||
c.$table.find("tr.repeated-header").remove();
|
||||
$tr = c.$tbodies.find('tr');
|
||||
l = $tr.length;
|
||||
// loop all tr elements and insert a copy of the "headers"
|
||||
for (i = skip; i < l; i += skip) {
|
||||
// insert a copy of the table head every X rows
|
||||
$tr.eq(i).before(wo.repeatHeaders);
|
||||
}
|
||||
},
|
||||
// this remove function is called when using the refreshWidgets method or when destroying the tablesorter plugin
|
||||
// this function only applies to tablesorter v2.4+
|
||||
remove: function(table, c){
|
||||
c.$table.find("tr.repeated-header").remove();
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
// call the tablesorter plugin and assign widgets with id "zebra" (Default widget in the core) and the newly created "repeatHeaders"
|
||||
$("table").tablesorter({
|
||||
theme: 'blue',
|
||||
|
||||
// apply both widgets
|
||||
widgets: ['zebra', 'repeatHeaders'],
|
||||
widgetOptions : {
|
||||
rowsToSkip : 4
|
||||
}
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Writing custom widgets</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
|
||||
<div class="tip">
|
||||
Notes about the <code>addWidget</code> template:
|
||||
<ul>
|
||||
<li>The <code>id</code> block:
|
||||
<ul>
|
||||
<li>The widget id, or name, must be unique!</li>
|
||||
<li>The id, or name, can contain special characters and/or spaces.</li>
|
||||
<li>This setting is required.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>The <code>priority</code> block (added <span class="version">v2.9</span>):
|
||||
<ul>
|
||||
<li>Set the widget priority using any number; think of it like setting the css z-index.</li>
|
||||
<li>This tells the plugin the order in which to run the widgets, lowest number priority first.</li>
|
||||
<li>The default widgets have priorities set in intervals of 10 (see the <a href="index.html#Widget-options"> widget priority table</a>), so to run your custom widget before a specific widget, set your widget priority to less than that number.</li>
|
||||
<li>This block is <strong>not supported in older versions</strong>!</li>
|
||||
<li>This setting is optional, but if no priority is specified, it defaults to <code>10</code>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>The <code>options</code> block (added <span class="version">v2.8</span>):
|
||||
<ul>
|
||||
<li>Include any widget options to be automatically be extended with any set widgetOptions (from <code>table.config.widgetOptions</code>).</li>
|
||||
<li>As of v2.8, no included widgets will be using this to maintain backwards compatibility with older versions. This changed when v2.9 was released.</li>
|
||||
<li>This block is <strong>not supported in older versions</strong>!</li>
|
||||
<li>This block is optional.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>The <code>init</code> block (added v2.0.28):
|
||||
<ul>
|
||||
<li>This code is called only after tablesorter has initialized, but before initial sort and before <strong>any</strong> of the widgets are applied (via the <code>format</code> block); it is only run once.</li>
|
||||
<li>Since, v2.0.28, only the saveSort widget uses this block to ensure that the stored sort is applied before; but some of the newer widgets (post v2.9) are using this code block.</li>
|
||||
<li>This block is <strong>not supported in older versions</strong>.</li>
|
||||
<li>This block is optional.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>The <code>format</code> block (modified v2.0.23):
|
||||
<ul>
|
||||
<li>This block is part of the original <code>addWidget</code> template and is required.</li>
|
||||
<li>In the original template, only the <code>table</code> parameter is provided. After v2.0.28, <code>config</code> and <code>widgetOptions</code> were provided as additional parameters (sorry the previous docs were incorrect).</li>
|
||||
<li>The <code>initFlag</code> is correctly set in v2.8+.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>The <code>remove</code> block (added v2.4):
|
||||
<ul>
|
||||
<li>This code is called when either the <a href="index.html#refreshwidgets"><code>refreshWidgets</code></a> or <a href="index.html#destroy"><code>destroy</code></a> methods are called.</li>
|
||||
<li>The code contained within this block must remove all additional content/elements added by the widget. Also, any rows or content that is hidden must be restored.</li>
|
||||
<li>If additional rows are added to the table, make sure to include the class name within the <a href="index.html#selectorremove"><code>selectorRemove</code></a> option.</li>
|
||||
<li>This block was added in v2.4, and <strong>not supported in older versions</strong>.</li>
|
||||
<li>This block is optional.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3>addWidget Template</h3>
|
||||
<div>
|
||||
<pre class="prettyprint lang-javascript">// addWidget Template
|
||||
// *******************
|
||||
// parameters:
|
||||
// table = table object (DOM)
|
||||
// config = config object (from table.config)
|
||||
// widgetOptions = all widget options (from table.config.widgetOptions)
|
||||
$.tablesorter.addWidget({
|
||||
id: 'myWidget',
|
||||
// set the priority of the widget (optional)
|
||||
priority: 10,
|
||||
// widget options (added v2.8) - added to table.config.widgetOptions
|
||||
options: {
|
||||
myWidget_option1 : 'setting1',
|
||||
myWidget_option2 : 'setting2'
|
||||
},
|
||||
// The init function (added v2.0.28) is called only after tablesorter has
|
||||
// initialized, but before initial sort & before any of the widgets are applied.
|
||||
init: function(table, thisWidget, config, widgetOptions){
|
||||
// widget initialization code - this is only *RUN ONCE*
|
||||
// but in this example, only the format function is called to from here
|
||||
// to keep the widget backwards compatible with the original tablesorter
|
||||
thisWidget.format(table, config, widgetOptions, true);
|
||||
},
|
||||
format: function(table, config, widgetOptions, initFlag) {
|
||||
// widget code to apply to the table *AFTER EACH SORT*
|
||||
// set the initFlag to true when this format is called from the init
|
||||
// function above otherwise initFlag is undefined
|
||||
// * see the saveSort widget for a full example *
|
||||
},
|
||||
remove: function(table, config, widgetOptions){
|
||||
// do what ever needs to be done to remove stuff added by your widget
|
||||
// unbind events, restore hidden content, etc.
|
||||
}
|
||||
});</pre>
|
||||
</div>
|
||||
|
||||
<h1>Demo</h1>
|
||||
|
||||
<table class="tablesorter">
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Major</th><th>Sex</th><th>English</th><th>Japanese</th><th>Calculus</th><th>Geometry</th></tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr><th>Name</th><th>Major</th><th>Sex</th><th>English</th><th>Japanese</th><th>Calculus</th><th>Geometry</th></tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr><td>Student12</td><td>Mathematics</td><td>female</td><td>100</td><td>75</td><td>70</td><td>85</td></tr>
|
||||
<tr><td>Student13</td><td>Languages</td><td>female</td><td>100</td><td>80</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student14</td><td>Languages</td><td>female</td><td>50</td><td>45</td><td>55</td><td>90</td></tr>
|
||||
<tr><td>Student15</td><td>Languages</td><td>male</td><td>95</td><td>35</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student16</td><td>Languages</td><td>female</td><td>100</td><td>50</td><td>30</td><td>70</td></tr>
|
||||
<tr><td>Student17</td><td>Languages</td><td>female</td><td>80</td><td>100</td><td>55</td><td>65</td></tr>
|
||||
<tr><td>Student18</td><td>Mathematics</td><td>male</td><td>30</td><td>49</td><td>55</td><td>75</td></tr>
|
||||
<tr><td>Student19</td><td>Languages</td><td>male</td><td>68</td><td>90</td><td>88</td><td>70</td></tr>
|
||||
<tr><td>Student20</td><td>Mathematics</td><td>male</td><td>40</td><td>45</td><td>40</td><td>80</td></tr>
|
||||
<tr><td>Student21</td><td>Languages</td><td>male</td><td>50</td><td>45</td><td>100</td><td>100</td></tr>
|
||||
<tr><td>Student22</td><td>Mathematics</td><td>male</td><td>100</td><td>99</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student23</td><td>Languages</td><td>female</td><td>85</td><td>80</td><td>80</td><td>80</td></tr>
|
||||
<tr><td>Student01</td><td>Languages</td><td>male</td><td>80</td><td>70</td><td>75</td><td>80</td></tr>
|
||||
<tr><td>Student02</td><td>Mathematics</td><td>male</td><td>90</td><td>88</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student03</td><td>Languages</td><td>female</td><td>85</td><td>95</td><td>80</td><td>85</td></tr>
|
||||
<tr><td>Student04</td><td>Languages</td><td>male</td><td>60</td><td>55</td><td>100</td><td>100</td></tr>
|
||||
<tr><td>Student05</td><td>Languages</td><td>female</td><td>68</td><td>80</td><td>95</td><td>80</td></tr>
|
||||
<tr><td>Student06</td><td>Mathematics</td><td>male</td><td>100</td><td>99</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student07</td><td>Mathematics</td><td>male</td><td>85</td><td>68</td><td>90</td><td>90</td></tr>
|
||||
<tr><td>Student08</td><td>Languages</td><td>male</td><td>100</td><td>90</td><td>90</td><td>85</td></tr>
|
||||
<tr><td>Student09</td><td>Mathematics</td><td>male</td><td>80</td><td>50</td><td>65</td><td>75</td></tr>
|
||||
<tr><td>Student10</td><td>Languages</td><td>male</td><td>85</td><td>100</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student11</td><td>Languages</td><td>male</td><td>86</td><td>85</td><td>100</td><td>100</td></tr>
|
||||
<tr><td>Student24</td><td>Languages</td><td>female</td><td>100</td><td>91</td><td>13</td><td>82</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<h3>Repeat Headers Widget</h3>
|
||||
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-pager.html">Pager plugin ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
6074
modules/EcmReportsBackUp20151106/TableSorterNew/docs/index.html
Executable file
6074
modules/EcmReportsBackUp20151106/TableSorterNew/docs/index.html
Executable file
File diff suppressed because it is too large
Load Diff
253
modules/EcmReportsBackUp20151106/TableSorterNew/docs/themes.html
Executable file
253
modules/EcmReportsBackUp20151106/TableSorterNew/docs/themes.html
Executable file
@@ -0,0 +1,253 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.4 - Themes</title>
|
||||
|
||||
<!-- demo css -->
|
||||
<style>
|
||||
.minitable {float:left;min-width:190px; min-height: 280px; margin:5px;}
|
||||
.minitable table {width:175px;margin:10px auto;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
|
||||
.minitable table th {font-size:11px;}
|
||||
.minitable table td {font-size:11px;padding:4px !important;text-align:center;}
|
||||
.minitable h3 {text-align:center;text-transform:capitalize;}
|
||||
</style>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
<!-- Tablesorter themes -->
|
||||
<!-- jquery ui -->
|
||||
<link href="css/jquery-ui.min.css" rel="stylesheet">
|
||||
<link href="../css/theme.jui.css" rel="stylesheet">
|
||||
|
||||
<!-- bootstrap -->
|
||||
<link href="css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../css/theme.bootstrap.css" rel="stylesheet">
|
||||
|
||||
<!-- more themes -->
|
||||
<link href="../css/theme.black-ice.css" rel="stylesheet">
|
||||
<link href="../css/theme.blue.css" rel="stylesheet">
|
||||
<link href="../css/theme.dark.css" rel="stylesheet">
|
||||
<link href="../css/theme.default.css" rel="stylesheet">
|
||||
<link href="../css/theme.dropbox.css" rel="stylesheet">
|
||||
<link href="../css/theme.green.css" rel="stylesheet">
|
||||
<link href="../css/theme.grey.css" rel="stylesheet">
|
||||
<link href="../css/theme.ice.css" rel="stylesheet">
|
||||
<link href="../css/theme.metro-dark.css" rel="stylesheet">
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$.extend($.tablesorter.defaults, {
|
||||
widthFixed: true,
|
||||
widgets : ['zebra','columns'],
|
||||
sortList : [ [0,0],[1,0],[2,0] ]
|
||||
});
|
||||
|
||||
$('.demo').tablesorter();
|
||||
|
||||
// grey & dropbox themes need the {icon} for header icons
|
||||
$('.tablesorter-dropbox,.tablesorter-grey').tablesorter({
|
||||
headerTemplate: '{content}{icon}' // dropbox theme doesn't like a space between the content & icon
|
||||
});
|
||||
|
||||
$('.tablesorter-bootstrap').tablesorter({
|
||||
theme : 'bootstrap',
|
||||
headerTemplate: '{content} {icon}',
|
||||
widgets : ['zebra','columns', 'uitheme']
|
||||
});
|
||||
|
||||
$('.tablesorter-jui').tablesorter({
|
||||
theme : 'jui',
|
||||
headerTemplate: '{content} {icon}',
|
||||
widgets : ['zebra','columns', 'uitheme']
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="main">
|
||||
|
||||
<div class="minitable">
|
||||
<h3>blackice</h3>
|
||||
<table class="demo tablesorter-blackice">
|
||||
<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead>
|
||||
<tfoot><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></tfoot>
|
||||
<tbody>
|
||||
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
|
||||
<tr><td>14</td><td>15</td><td>16</td><td>5</td></tr>
|
||||
<tr><td>13</td><td>20</td><td>17</td><td>6</td></tr>
|
||||
<tr><td>12</td><td>19</td><td>18</td><td>7</td></tr>
|
||||
<tr><td>11</td><td>10</td><td>9</td><td>8</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="minitable">
|
||||
<h3>blue</h3>
|
||||
<table class="demo tablesorter-blue">
|
||||
<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead>
|
||||
<tfoot><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></tfoot>
|
||||
<tbody>
|
||||
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
|
||||
<tr><td>14</td><td>15</td><td>16</td><td>5</td></tr>
|
||||
<tr><td>13</td><td>20</td><td>17</td><td>6</td></tr>
|
||||
<tr><td>12</td><td>19</td><td>18</td><td>7</td></tr>
|
||||
<tr><td>11</td><td>10</td><td>9</td><td>8</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="minitable">
|
||||
<h3>dark</h3>
|
||||
<table class="demo tablesorter-dark">
|
||||
<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead>
|
||||
<tfoot><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></tfoot>
|
||||
<tbody>
|
||||
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
|
||||
<tr><td>14</td><td>15</td><td>16</td><td>5</td></tr>
|
||||
<tr><td>13</td><td>20</td><td>17</td><td>6</td></tr>
|
||||
<tr><td>12</td><td>19</td><td>18</td><td>7</td></tr>
|
||||
<tr><td>11</td><td>10</td><td>9</td><td>8</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="minitable">
|
||||
<h3>default</h3>
|
||||
<table class="demo tablesorter-default">
|
||||
<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead>
|
||||
<tfoot><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></tfoot>
|
||||
<tbody>
|
||||
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
|
||||
<tr><td>14</td><td>15</td><td>16</td><td>5</td></tr>
|
||||
<tr><td>13</td><td>20</td><td>17</td><td>6</td></tr>
|
||||
<tr><td>12</td><td>19</td><td>18</td><td>7</td></tr>
|
||||
<tr><td>11</td><td>10</td><td>9</td><td>8</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="minitable">
|
||||
<h3>green</h3>
|
||||
<table class="demo tablesorter-green">
|
||||
<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead>
|
||||
<tfoot><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></tfoot>
|
||||
<tbody>
|
||||
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
|
||||
<tr><td>14</td><td>15</td><td>16</td><td>5</td></tr>
|
||||
<tr><td>13</td><td>20</td><td>17</td><td>6</td></tr>
|
||||
<tr><td>12</td><td>19</td><td>18</td><td>7</td></tr>
|
||||
<tr><td>11</td><td>10</td><td>9</td><td>8</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="minitable">
|
||||
<h3>grey</h3>
|
||||
<table class="tablesorter-grey">
|
||||
<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead>
|
||||
<tfoot><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></tfoot>
|
||||
<tbody>
|
||||
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
|
||||
<tr><td>14</td><td>15</td><td>16</td><td>5</td></tr>
|
||||
<tr><td>13</td><td>20</td><td>17</td><td>6</td></tr>
|
||||
<tr><td>12</td><td>19</td><td>18</td><td>7</td></tr>
|
||||
<tr><td>11</td><td>10</td><td>9</td><td>8</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="minitable">
|
||||
<h3>ice</h3>
|
||||
<table class="demo tablesorter-ice">
|
||||
<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead>
|
||||
<tfoot><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></tfoot>
|
||||
<tbody>
|
||||
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
|
||||
<tr><td>14</td><td>15</td><td>16</td><td>5</td></tr>
|
||||
<tr><td>13</td><td>20</td><td>17</td><td>6</td></tr>
|
||||
<tr><td>12</td><td>19</td><td>18</td><td>7</td></tr>
|
||||
<tr><td>11</td><td>10</td><td>9</td><td>8</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="minitable">
|
||||
<h3>Bootstrap</h3>
|
||||
<table class="tablesorter-bootstrap">
|
||||
<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead>
|
||||
<tfoot><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></tfoot>
|
||||
<tbody>
|
||||
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
|
||||
<tr><td>14</td><td>15</td><td>16</td><td>5</td></tr>
|
||||
<tr><td>13</td><td>20</td><td>17</td><td>6</td></tr>
|
||||
<tr><td>12</td><td>19</td><td>18</td><td>7</td></tr>
|
||||
<tr><td>11</td><td>10</td><td>9</td><td>8</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="minitable">
|
||||
<h3>jQuery UI</h3>
|
||||
<table class="tablesorter-jui">
|
||||
<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead>
|
||||
<tfoot><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></tfoot>
|
||||
<tbody>
|
||||
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
|
||||
<tr><td>14</td><td>15</td><td>16</td><td>5</td></tr>
|
||||
<tr><td>13</td><td>20</td><td>17</td><td>6</td></tr>
|
||||
<tr><td>12</td><td>19</td><td>18</td><td>7</td></tr>
|
||||
<tr><td>11</td><td>10</td><td>9</td><td>8</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="minitable">
|
||||
<h3>dropbox</h3>
|
||||
<table class="tablesorter-dropbox">
|
||||
<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead>
|
||||
<tfoot><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></tfoot>
|
||||
<tbody>
|
||||
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
|
||||
<tr><td>14</td><td>15</td><td>16</td><td>5</td></tr>
|
||||
<tr><td>13</td><td>20</td><td>17</td><td>6</td></tr>
|
||||
<tr><td>12</td><td>19</td><td>18</td><td>7</td></tr>
|
||||
<tr><td>11</td><td>10</td><td>9</td><td>8</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="minitable">
|
||||
<h3>Metro Dark</h3>
|
||||
<table class="tablesorter-metro-dark demo">
|
||||
<thead>
|
||||
<tr class="dark-row"><th class="sorter-false" colspan="4">Title</th></tr>
|
||||
<tr><th>A</th><th>B</th><th>C</th><th>D</th></tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr><th>A</th><th>B</th><th>C</th><th>D</th></tr>
|
||||
<tr class="dark-row"><th colspan="4"> </th></tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
|
||||
<tr><td>14</td><td>15</td><td>16</td><td>5</td></tr>
|
||||
<tr><td>13</td><td>20</td><td>17</td><td>6</td></tr>
|
||||
<tr><td>12</td><td>19</td><td>18</td><td>7</td></tr>
|
||||
<tr><td>11</td><td>10</td><td>9</td><td>8</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
62
modules/EcmReportsBackUp20151106/TableSorterNew/index.html
Executable file
62
modules/EcmReportsBackUp20151106/TableSorterNew/index.html
Executable file
@@ -0,0 +1,62 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Basic Tablesorter Demo</title>
|
||||
|
||||
<!-- Demo styling -->
|
||||
<link href="docs/css/jq.css" rel="stylesheet">
|
||||
|
||||
<!-- jQuery: required (tablesorter works with jQuery 1.2.3+) -->
|
||||
<script src="docs/js/jquery-1.2.6.min.js"></script>
|
||||
|
||||
<!-- Pick a theme, load the plugin & initialize plugin -->
|
||||
<link href="css/theme.default.css" rel="stylesheet">
|
||||
<script src="js/jquery.tablesorter.min.js"></script>
|
||||
<script src="js/jquery.tablesorter.widgets.min.js"></script>
|
||||
<script>
|
||||
$(function(){
|
||||
$('table').tablesorter({
|
||||
widgets : ['zebra', 'columns'],
|
||||
usNumberFormat : false,
|
||||
sortReset : true,
|
||||
sortRestart : true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="demo">
|
||||
<h1><a href="https://github.com/Mottie/tablesorter">table<em>sorter</em></a></h1>
|
||||
<p>By Christian Bach; github updates by <a href="https://github.com/Mottie/">Rob G</a><br>
|
||||
<a href="docs/index.html">Complete docs included</a> (updated with missing docs from <a href="http://wowmotty.blogspot.com/2011/06/jquery-tablesorter-missing-docs.html">this blog post</a>)
|
||||
</p>
|
||||
|
||||
<table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>AlphaNumeric Sort</th>
|
||||
<th>Currency</th>
|
||||
<th>Alphabetical</th>
|
||||
<th>Sites</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>abc 123</td><td>£10,40</td><td>Koala</td><td>http://www.google.com</td></tr>
|
||||
<tr><td>abc 1</td><td>£234,10</td><td>Ox</td><td>http://www.yahoo.com</td></tr>
|
||||
<tr><td>abc 9</td><td>£10,33</td><td>Girafee</td><td>http://www.facebook.com</td></tr>
|
||||
<tr><td>zyx 24</td><td>£10</td><td>Bison</td><td>http://www.whitehouse.gov/</td></tr>
|
||||
<tr><td>abc 11</td><td>£3,20</td><td>Chimp</td><td>http://www.ucla.edu/</td></tr>
|
||||
<tr><td>abc 2</td><td>£56,10</td><td>Elephant</td><td>http://www.wikipedia.org/</td></tr>
|
||||
<tr><td>abc 9</td><td>£3,20</td><td>Lion</td><td>http://www.nytimes.com/</td></tr>
|
||||
<tr><td>ABC 10</td><td>£87,00</td><td>Zebra</td><td>http://www.google.com</td></tr>
|
||||
<tr><td>zyx 1</td><td>£99,90</td><td>Koala</td><td>http://www.mit.edu/</td></tr>
|
||||
<tr><td>zyx 12</td><td>£234,10</td><td>Llama</td><td>http://www.nasa.gov/</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p>This is a quick demo of the columns & zebra widget with the "sortReset" option set to true (clicking on a sort header a third time will reset the sort)</p>
|
||||
|
||||
</div>
|
||||
</body></html>
|
||||
132
modules/EcmReportsBackUp20151106/TableSorterNew/test.html
Executable file
132
modules/EcmReportsBackUp20151106/TableSorterNew/test.html
Executable file
@@ -0,0 +1,132 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Tablesorter Testing (WIP)</title>
|
||||
<link rel="stylesheet" href="testing/qunit-1.14.0.css">
|
||||
<link rel="stylesheet" href="testing/testing.css">
|
||||
|
||||
<script src="testing/qunit-1.14.0.js"></script>
|
||||
<script src="testing/jshint-2.4.4.js"></script>
|
||||
<script src="docs/js/jquery-latest.min.js"></script>
|
||||
<script src="js/jquery.tablesorter.js"></script>
|
||||
<script src="js/jquery.tablesorter.widgets.js"></script>
|
||||
<script src="js/parsers/parser-ipv6.js"></script>
|
||||
<script src="js/jquery.metadata.js"></script>
|
||||
<script src="testing/testing.js"></script>
|
||||
<script src="testing/testing-ipv6.js"></script>
|
||||
<script src="testing/testing-widgets.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="qunit"></div>
|
||||
<div id="qunit-fixture"></div>
|
||||
|
||||
<h3>This is a work-in-progress. It does not yet comprehensively test all sorting methods. The following are on the to do list:</h3>
|
||||
<ul class="notes">
|
||||
<li>Core tests:
|
||||
<ul>
|
||||
<li>Test each option, event & callback</li>
|
||||
<li><del>Sorting empty cells</del>.</li>
|
||||
<li><del>Sorting strings in numeric columns</del>.</li>
|
||||
<li>Internal rendering, caching & indexing utilities.</li>
|
||||
<li><del>Update methods</del>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>All widgets.</li>
|
||||
<li>Pager plugin.</li>
|
||||
<li>Include <a href="https://github.com/overset/javascript-natural-sort">natural sort</a> unit tests?</li>
|
||||
</ul>
|
||||
|
||||
<table id="table1" class="tester" data-text-extraction="basic">
|
||||
<thead>
|
||||
<tr><th class="{sortValue:'zzz', poe:'nevermore'}">test-head</th><th>num</th></tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr><th>test-foot</th><th>txt</th></tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr><td data-text="test2">ignored</td><td>x2</td></tr>
|
||||
<tr><td data-text="test1">ignored</td><td>x3</td></tr>
|
||||
<tr><td data-text="test3">ignored</td><td>x1</td></tr>
|
||||
</tbody>
|
||||
<tbody class="tablesorter-infoOnly">
|
||||
<tr><td colspan="3">Info</td></tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr><td>testB</td><td>x5</td></tr>
|
||||
<tr><td>testC</td><td>x4</td></tr>
|
||||
<tr><td>testA</td><td>x6</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<table id="table2" class="tester">
|
||||
<thead>
|
||||
<tr> <!-- all headers set to sorter false; jQuery data > meta > headers option > header class name -->
|
||||
<th data-sorter="false" class="{sorter:'digit'} sorter-text">1</th> <!-- jQuery data -->
|
||||
<th class="{sorter:false} sorter-text">2</th> <!-- metadata -->
|
||||
<th class="sorter-text">3</th> <!-- headers option -->
|
||||
<th class="sorter-false">4</th> <!-- class name -->
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>a</td><td>b</td><td>c</td><td>d</td></tr>
|
||||
<tr><td>z</td><td>y</td><td>x</td><td>w</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<table id="table3" class="tester" data-text-extraction="x">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>1</th>
|
||||
<th>2</th>
|
||||
<th>3</th>
|
||||
<th>4</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td data-text="x43">A43</td><td>-35</td><td>01</td><td>-.1</td></tr>
|
||||
<tr><td>A255</td><td>33</td><td>02</td><td>N/A #1</td></tr>
|
||||
<tr><td>A33</td><td>2</td><td>03</td><td>N/A #2</td></tr>
|
||||
<tr><td>A1</td><td>-5</td><td>04</td><td>-8.4</td></tr>
|
||||
<tr><td>A102</td><td>NR</td><td>05</td><td>-2.2</td></tr>
|
||||
<tr><td>A10</td><td>-1</td><td>06</td><td>97.4</td></tr>
|
||||
<tr><td>A02</td><td>1</td><td>07</td><td>23.6</td></tr>
|
||||
<tr><td>A55</td><td>44</td><td></td><td>11.4</td></tr>
|
||||
<tr><td>A87</td><td>04</td><td>NR</td><td>5.2</td></tr>
|
||||
<tr><td></td><td></td><td>NR</td><td></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<table id="table4" class="tester">
|
||||
<thead>
|
||||
<tr><th>1</th><th class="te-test">2</th><th>3</th><th>4</th><th>5</th><th>6</th><th class="parser-false">7</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>F01</td><td>x<span>F11</span></td><td>x<span>A21</span></td><td>01</td><td>ZZS</td><td>WA</td><td>x</td></tr>
|
||||
<tr><td>F01</td><td>g<span>F11</span></td><td>g<span>A21</span></td><td>02</td><td>ZY</td><td>WB</td><td>x</td></tr>
|
||||
<tr><td>F02</td><td>z<span>F12</span></td><td>z<span>A22</span></td><td>03</td><td>ZZ</td><td>WA</td><td>x</td></tr>
|
||||
<tr><td>F02</td><td>b<span>F12</span></td><td>b<span>A22</span></td><td>04</td><td>ZZ</td><td>WB</td><td>x</td></tr>
|
||||
<tr><td>F02</td><td>d<span>F12</span></td><td>d<span>A23</span></td><td>05</td><td>ZY</td><td>WA</td><td>x</td></tr>
|
||||
<tr><td>F02</td><td>f<span>F12</span></td><td>f<span>A23</span></td><td>06</td><td>ZX</td><td>WB</td><td>x</td></tr>
|
||||
<tr><td>F02</td><td>h<span>F12</span></td><td>h<span>A23</span></td><td>07</td><td>ZX</td><td>WA</td><td>x</td></tr>
|
||||
<tr><td>F02</td><td>a<span>F13</span></td><td>a<span>A23</span></td><td>08</td><td>ZZ</td><td>WB</td><td>x</td></tr>
|
||||
<tr><td>F03</td><td>c<span>F13</span></td><td>c<span>A24</span></td><td>09</td><td>ZZ</td><td>WA</td><td>x</td></tr>
|
||||
<tr><td>F03</td><td>e<span>F13</span></td><td>e<span>A24</span></td><td>10</td><td>ZZ</td><td>WB</td><td>x</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- empty table -->
|
||||
<table id="table5" class="tester">
|
||||
<thead>
|
||||
<tr><th>1</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div id="testblock" class="tester"></div>
|
||||
<div id="testblock2" class="tester"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user