mirror of
https://github.com/Mottie/tablesorter.git
synced 2024-10-08 13:44:18 +00:00
295 lines
15 KiB
HTML
295 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>jQuery plugin: Tablesorter 2.0 - jQuery UITheme Widget (Bootstrap)</title>
|
|
|
|
<!-- jQuery -->
|
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
|
|
|
|
<!-- Demo stuff -->
|
|
<link rel="stylesheet" href="css/jq.css">
|
|
<link rel="stylesheet" href="css/bootstrap.min.css">
|
|
<script src="js/chili/jquery.chili-2.2.js"></script>
|
|
<script src="js/chili/recipes.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 table-striped',
|
|
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',
|
|
sortDesc : 'icon-chevron-down',
|
|
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({
|
|
theme : "bootstrap", // this will
|
|
|
|
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
|
|
// uitheme : "bootstrap"
|
|
|
|
}
|
|
})
|
|
.tablesorterPager({
|
|
|
|
// target the pager markup - see the HTML block below
|
|
container: $(".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);
|
|
|
|
// the commented out code below will filter the rows
|
|
// without adding text to the filter input
|
|
// ******************
|
|
// var filter = [];
|
|
// filter[col] = txt; // get text to filter
|
|
// $('table').trigger('search', [filter]);
|
|
});
|
|
|
|
// toggle zebra widget
|
|
$('button.zebra').click(function(){
|
|
var t = $(this).find('i').hasClass('icon-ok');
|
|
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')[0].config.widgets = (t) ? ["uitheme", "filter"] : ["uitheme", "filter", "zebra"];
|
|
$(this)
|
|
.toggleClass('btn-danger btn-success')
|
|
.find('i')
|
|
.toggleClass('icon-ok icon-remove').end()
|
|
.find('span')
|
|
.text(t ? 'disabled' : 'enabled');
|
|
$('table').trigger('applyWidgets');
|
|
});
|
|
});
|
|
</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>This widget can be applied to the original plugin. The code is in the "jquery.tablesorter.widgets.js" file. But you'll need to add the <code><i></code> into the header manually.</li>
|
|
<li>You will need to modify the <code>headerTemplate</code> option to include the bootstrap icon! See the example in the code. <span class="tip"><em>New!</em></span> v2.7!</li>
|
|
|
|
<li><span class="label label-info">New!</span> 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 <code>uitheme</code> widget option 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-success">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 class="filter btn-primary" data-column="5" data-filter=">80"><i class="icon-white icon-filter"></i> Filter ">80"</button> in the "Calculus" column.</li>
|
|
<li>Try other filter searches with the zebra widget disabled, like <button class="filter btn-primary" data-column="2" data-filter="male"><i class="icon-white icon-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 will over-ride the <code>nth-child()</code> styling.</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 class="reset btn btn-primary" data-column="0" data-filter=""><i class="icon-white icon-refresh"></i> Reset filters</button>
|
|
<br>
|
|
Zebra widget : <button class="zebra btn btn-success"><i class="icon-white icon-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="pager form-horizontal">
|
|
<button class="btn first"><i class="icon-step-backward"></i></button>
|
|
<button class="btn prev"><i class="icon-arrow-left"></i></button>
|
|
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
|
|
<button class="btn next"><i class="icon-arrow-right"></i></button>
|
|
<button class="btn last"><i class="icon-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="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="js"></pre>
|
|
</div>
|
|
|
|
<div class="next-up">
|
|
<hr />
|
|
Next up: <a href="example-widget-resizable.html">Resizable Columns widget ››</a>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|
|
|