283 lines
14 KiB
HTML
283 lines
14 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>jQuery tablesorter 2.0 - Theme Materialize</title>
|
||
|
|
|
||
|
|
<!-- jQuery -->
|
||
|
|
<script src="js/jquery-latest.min.js"></script>
|
||
|
|
|
||
|
|
<!-- Demo stuff -->
|
||
|
|
<link rel="stylesheet" href="css/jq.css">
|
||
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.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.materialize.css">
|
||
|
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
|
||
|
|
<script src="../js/jquery.tablesorter.js"></script>
|
||
|
|
<script src="../js/widgets/widget-filter.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">/* UL padding override - see https://github.com/Dogfalo/materialize/issues/2786#issuecomment-234809753 */
|
||
|
|
ul { padding-left: 20px; }
|
||
|
|
.btn { font-size: .8em; }
|
||
|
|
/* not sure why this is needed... */
|
||
|
|
.material-icons { vertical-align: bottom; }</style>
|
||
|
|
|
||
|
|
<script id="js">$(function() {
|
||
|
|
|
||
|
|
$("table").tablesorter({
|
||
|
|
theme : "materialize",
|
||
|
|
|
||
|
|
widthFixed: true,
|
||
|
|
// 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 : [ "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 materialize theming if you are using the filter widget, because rows are hidden
|
||
|
|
zebra : ["even", "odd"],
|
||
|
|
|
||
|
|
// reset filters button
|
||
|
|
filter_reset : ".reset",
|
||
|
|
|
||
|
|
// extra css class name (string or array) added to the filter element (input or select)
|
||
|
|
// select needs a "browser-default" class or it gets hidden
|
||
|
|
filter_cssFilter: ["", "", "browser-default"]
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.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('green');
|
||
|
|
$('table')
|
||
|
|
.toggleClass('striped')[0]
|
||
|
|
.config.widgets = (t) ? ["filter"] : ["filter", "zebra"];
|
||
|
|
$(this)
|
||
|
|
.toggleClass('red green')
|
||
|
|
.find('i')
|
||
|
|
.text(t ? 'clear' : 'done').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 Theme - Materialize</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>
|
||
|
|
</p>
|
||
|
|
<ul class="browser-default">
|
||
|
|
<li>Added Materialize theme style (<span class="version">v2.27.0</span> for <a href="http://materializecss.com/">materialize</a> v0.97.7).</li>
|
||
|
|
<li>Important Notes:
|
||
|
|
<ul>
|
||
|
|
<li>Any filter select is automatically hidden. It looks like javascript is needed to restyle the select, which this demo isn't using, so I had to include a <code>"browser-default"</code> class in the <code>filter_cssFilter</code> option to prevent it from being hidden.</li>
|
||
|
|
<li>The pager buttons are huge... I didn't see an option for small buttons, just button and large button.</li>
|
||
|
|
<li>Adding a <code>"input-field"</code> class to the filter row (it does wrap the inputs/select LOL), actually seems to break the desired action. The input turns white and the underline disappears. I guess I could just make the entire filter row white... I do miss the "x" inside the search input though.</li>
|
||
|
|
</ul>
|
||
|
|
<br>
|
||
|
|
</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 materialize's "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" data-column="5" data-filter=">80"><i class="material-icons">search</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" data-column="2" data-filter="male"><i class="material-icons">search</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.</li>
|
||
|
|
<li>The only down side is that for custom materialize themes, you'll need to edit the "theme.materialize.css" file.</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<h4>Demo</h4>
|
||
|
|
<!-- use the filter_reset : '.reset' option or include data-filter="" using the filter button demo code to reset the filters -->
|
||
|
|
<div class="materialize_buttons">
|
||
|
|
Reset filter : <button type="button" class="reset btn" data-column="0" data-filter=""><i class="material-icons">loop</i> Reset filters</button>
|
||
|
|
<p></p>
|
||
|
|
Zebra widget : <button type="button" class="zebra btn green"><i class="material-icons">done</i> <span>enabled</span></button>
|
||
|
|
</div>
|
||
|
|
<br>
|
||
|
|
|
||
|
|
<div id="demo"><table> <!-- add materialize classes, as desired -->
|
||
|
|
<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>
|
||
|
|
<!-- include "tablesorter-ignoreRow" class for pager rows in thead -->
|
||
|
|
<tr class="tablesorter-ignoreRow">
|
||
|
|
<th colspan="7" class="ts-pager form-horizontal">
|
||
|
|
<button type="button" class="btn first"><i class="small material-icons">first_page</i></button>
|
||
|
|
<button type="button" class="btn prev"><i class="small material-icons">navigate_before</i></button>
|
||
|
|
<span class="pagedisplay"></span>
|
||
|
|
<!-- this can be any element, including an input -->
|
||
|
|
<button type="button" class="btn next"><i class="small material-icons">navigate_next</i></button>
|
||
|
|
<button type="button" class="btn last"><i class="small material-icons">last_page</i></button>
|
||
|
|
<select class="pagesize browser-default" 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 browser-default" 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>
|
||
|
|
|
||
|
|
<h5>Page Header</h5>
|
||
|
|
<div>
|
||
|
|
<pre class="prettyprint lang-html"><!-- materialize stylesheet & icon font -->
|
||
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
|
||
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
||
|
|
<!-- materialize theme -->
|
||
|
|
<link rel="stylesheet" href="css/theme.materialize.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>
|
||
|
|
|
||
|
|
<!-- pager plugin -->
|
||
|
|
<link rel="stylesheet" href="css/jquery.tablesorter.pager.css">
|
||
|
|
<script src="js/jquery.tablesorter.pager.js"></script></pre>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h5>Javascript</h5>
|
||
|
|
<div id="javascript">
|
||
|
|
<pre class="prettyprint lang-javascript"></pre>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h5>CSS</h5>
|
||
|
|
<div id="css">
|
||
|
|
<pre class="prettyprint lang-css"></pre>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h5>HTML</h5>
|
||
|
|
<div id="html">
|
||
|
|
<pre class="prettyprint lang-html"></pre>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|