library-mirrors/tablesorter
1
0
Fork 0
mirror of https://github.com/Mottie/tablesorter.git synced 2024-11-15 23:54:22 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity
34b7423c6d
tablesorter/docs/example-widgets.html

357 lines
6.8 KiB
HTML
Raw Normal View History

Added missing docs!
2011-07-17 15:01:18 +00:00
<!DOCTYPE html>
<html>
alphanumeric sort
2011-06-22 23:19:27 +00:00
<head>
Added missing docs!
2011-07-17 15:01:18 +00:00
<meta charset="utf-8">
alphanumeric sort
2011-06-22 23:19:27 +00:00
<title>jQuery plugin: Tablesorter 2.0 - Writing custom widgets</title>
<!-- jQuery -->
updated jQuery to 1.7+
2012-03-03 01:38:02 +00:00
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
alphanumeric sort
2011-06-22 23:19:27 +00:00
<!-- Demo stuff -->
Added missing docs!
2011-07-17 15:01:18 +00:00
<link rel="stylesheet" href="css/jq.css">
<script src="js/chili/jquery.chili-2.2.js"></script>
<script src="js/chili/recipes.js"></script>
<script src="js/docs.js"></script>
alphanumeric sort
2011-06-22 23:19:27 +00:00
<!-- Tablesorter: required -->
Added missing docs!
2011-07-17 15:01:18 +00:00
<link rel="stylesheet" href="../css/blue/style.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
Fix for issue #27 - pager should not include childrows
2012-02-16 11:59:09 +00:00
// ************************************
Added missing docs!
2011-07-17 15:01:18 +00:00
$.tablesorter.addWidget({
alphanumeric sort
2011-06-22 23:19:27 +00:00
Added missing docs!
2011-07-17 15:01:18 +00:00
// give the widget an id
id: "repeatHeaders",
// format is called when the on init and when a sorting has finished
format: function(table) {
// cache and collect all TH headers
if (!this.headers) {
var h = this.headers = [];
$("thead th",table).each(function() {
h.push(
"<th>" + $(this).text() + "</th>"
);
});
}
alphanumeric sort
2011-06-22 23:19:27 +00:00
Added missing docs!
2011-07-17 15:01:18 +00:00
// remove appended headers by classname
$("tr.repeated-header",table).remove();
// loop all tr elements and insert a copy of the "headers"
for (var i = 0; i < table.tBodies[0].rows.length; i++) {
// insert a copy of the table head every X rows
// i mod 5 = 4, is true every 4th row, starting from the 4th.
// i mod 6 = 5, is true every 5th row, starting from the 5th, etc.
if ((i%5) === 4) {
$("tbody tr:eq(" + i + ")",table).before(
$("<tr></tr>").addClass("repeated-header").html(this.headers.join(""))
);
alphanumeric sort
2011-06-22 23:19:27 +00:00
}
}
Added missing docs!
2011-07-17 15:01:18 +00:00
}
});
alphanumeric sort
2011-06-22 23:19:27 +00:00
Added missing docs!
2011-07-17 15:01:18 +00:00
// call the tablesorter plugin and assign widgets with id "zebra" (Default widget in the core) and the newly created "repeatHeaders"
$("table").tablesorter({
// apply both widgets
widgets: ['zebra', 'repeatHeaders']
alphanumeric sort
2011-06-22 23:19:27 +00:00
});
Added missing docs!
2011-07-17 15:01:18 +00:00
});</script>
alphanumeric sort
2011-06-22 23:19:27 +00:00
</head>
<body>
Added missing docs!
2011-07-17 15:01:18 +00:00
<div id="banner">
alphanumeric sort
2011-06-22 23:19:27 +00:00
<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>
Added missing docs!
2011-07-17 15:01:18 +00:00
<div id="main">
<h1>Demo</h1>
alphanumeric sort
2011-06-22 23:19:27 +00:00
Added missing docs!
2011-07-17 15:01:18 +00:00
<table class="tablesorter">
alphanumeric sort
2011-06-22 23:19:27 +00:00
<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>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>
</tbody>
</table>
Added missing docs!
2011-07-17 15:01:18 +00:00
<h1>Javascript</h1>
Fix for issue #27 - pager should not include childrows
2012-02-16 11:59:09 +00:00
<h3>Add Widget Template</h3>
<div>
<pre class="js">// addWidget Template
// *******************
$.tablesorter.addWidget({
id: 'myWidget',
// The init function (added in v2.0.28) is called only after tablesorter has
// initialized, but before initial sort & before any of the widgets are applied.
init: function(table, allWidgets, thisWidget){
// 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, true);
},
format: function(table, initFlag) {
// widget code to apply to the table *AFTER EACH SORT*
// the initFlag is true when this format is called from the init
// function above otherwise initFlag is undefined
// * see the saveSort widget for a full example *
}
});</pre>
</div>
<h3>Repeat Headers Widget Code</h3>
Added missing docs!
2011-07-17 15:01:18 +00:00
<div id="javascript">
<pre class="js"></pre>
</div>
<div class="next-up">
<hr />
pager bug & resizable columns widget
2011-10-26 06:50:02 +00:00
Next up: <a href="example-pager.html">Pager plugin &rsaquo;&rsaquo;</a>
Added missing docs!
2011-07-17 15:01:18 +00:00
</div>
alphanumeric sort
2011-06-22 23:19:27 +00:00
</div>
</body>
</html>
Reference in New Issue Copy Permalink