Skip to content

Ability to sort tables with multiple tbodies #195

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 2 commits into from
Closed

Ability to sort tables with multiple tbodies #195

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
472590a
Added ability to sort tables with multiple tbodies. Supports sorting …
Dec 17, 2012
65a2c10
Fixed a merging error.
Dec 18, 2012
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/example-meta-parsers.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ <h1>HTML</h1>

<div class="next-up">
<hr />
<a href="index.html">Back to documentation</a>
Next up: <a href="example-multibody.html">Sort between multiple tbodies, with inner rows remaining static. &rsaquo;&rsaquo;</a>
</div>

</div>
Expand Down
94 changes: 94 additions & 0 deletions docs/example-multibody-within.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Sort within multiple tbodies, whilst sorting the inner rows too</title>

<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<!-- Demo stuff -->
<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>

<!-- 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',
'sortBodies' : true,
// Return the 'key row' from a tbody, used for sorting the
// entire body
'primaryRow' : function(body) {
return $(body).find('tr').eq(0);
}
});

});</script>
</head>
<body>
<div id="banner">
<h1>table<em>sorter</em></h1>
<h2>Sort within multiple tbodies, whilst sorting the inner rows too</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>Superhero Name</th>
</tr>
</thead>
<tbody>
<tr><td>Bruce</td><td>Wayne</td><td>Batman</td></tr>
<tr><td colspan="3">Batman is the superhero protector of Gotham City, a man dressed like a bat who fights against evil and strikes terror into the hearts of criminals everywhere. In his secret identity he is Bruce Wayne, billionaire industrialist and notorious playboy. Although he has no superhuman powers, he is one of the world's smartest men and greatest fighters. His physical prowess and technical ingenuity make him an incredibly dangerous opponent. He is also a founding member of the Justice League and the Outsiders.</td></tr>
</tbody>

<tbody>
<tr><td>Hal</td><td>Jordan</td><td>Green Latern</td></tr>
<tr><td colspan="3">Hal Jordan is the most well-known Green Lantern. He was the first earthman ever inducted into the Green Lantern Corps, and has been heralded as possibly the greatest Green Lantern of all time. Green Lantern is also a founding member of the Justice League of America.</td></tr>
</tbody>

<tbody>
<tr><td>Clark</td><td>Kent</td><td>Superman</td></tr>
<tr><td colspan="3">Superman, also known as the Man of Steel, is one of the most powerful superheroes in the DC Universe. His abilities include incredible super-strength, super-speed, invulnerability, freezing breath, flight, and heat-vision.</td></tr>
</tbody>

<tbody>
<tr><td>Charles</td><td>Xavier</td><td>Professor X</td></tr>
<tr><td colspan="3">Charles Francis Xavier was born in New York City to the wealthy Brian Xavier, a well-respected nuclear scientist, and Sharon Xavier. After Brian died in an accident, his science partner Kurt Marko comforts and marries the grieving Sharon. When Xavier's telepathic mutant powers emerge, he discovers Kurt cares only about his mother's money.</td></tr>
</tbody>
</table>
</div>

<h1>Javascript</h1>
<div id="javascript">
<pre class="js"></pre>
</div>
<h1>HTML</h1>
<div id="html">
<pre class="html"></pre>
</div>

<div class="next-up">
<hr />
<a href="index.html">Back to documentation</a>
</div>

</div>

</body>
</html>
94 changes: 94 additions & 0 deletions docs/example-multibody.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Sort between multiple tbodies, with inner rows remaining static</title>

<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<!-- Demo stuff -->
<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>

<!-- 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',
'sortBodies' : true,
// Return the 'key row' from a tbody, used for sorting the
// entire body
'primaryRow' : function(body) {
return $(body).find('tr').eq(0);
}
});

});</script>
</head>
<body>
<div id="banner">
<h1>table<em>sorter</em></h1>
<h2>Sort between multiple tbodies, with inner rows remaining static</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>Superhero Name</th>
</tr>
</thead>
<tbody class="tablesorter-infoOnly">
<tr><td>Bruce</td><td>Wayne</td><td>Batman</td></tr>
<tr><td colspan="3">Batman is the superhero protector of Gotham City, a man dressed like a bat who fights against evil and strikes terror into the hearts of criminals everywhere. In his secret identity he is Bruce Wayne, billionaire industrialist and notorious playboy. Although he has no superhuman powers, he is one of the world's smartest men and greatest fighters. His physical prowess and technical ingenuity make him an incredibly dangerous opponent. He is also a founding member of the Justice League and the Outsiders.</td></tr>
</tbody>

<tbody class="tablesorter-infoOnly">
<tr><td>Hal</td><td>Jordan</td><td>Green Latern</td></tr>
<tr><td colspan="3">Hal Jordan is the most well-known Green Lantern. He was the first earthman ever inducted into the Green Lantern Corps, and has been heralded as possibly the greatest Green Lantern of all time. Green Lantern is also a founding member of the Justice League of America.</td></tr>
</tbody>

<tbody class="tablesorter-infoOnly">
<tr><td>Clark</td><td>Kent</td><td>Superman</td></tr>
<tr><td colspan="3">Superman, also known as the Man of Steel, is one of the most powerful superheroes in the DC Universe. His abilities include incredible super-strength, super-speed, invulnerability, freezing breath, flight, and heat-vision.</td></tr>
</tbody>

<tbody class="tablesorter-infoOnly">
<tr><td>Charles</td><td>Xavier</td><td>Professor X</td></tr>
<tr><td colspan="3">Charles Francis Xavier was born in New York City to the wealthy Brian Xavier, a well-respected nuclear scientist, and Sharon Xavier. After Brian died in an accident, his science partner Kurt Marko comforts and marries the grieving Sharon. When Xavier's telepathic mutant powers emerge, he discovers Kurt cares only about his mother's money.</td></tr>
</tbody>
</table>
</div>

<h1>Javascript</h1>
<div id="javascript">
<pre class="js"></pre>
</div>
<h1>HTML</h1>
<div id="html">
<pre class="html"></pre>
</div>

<div class="next-up">
<hr />
Next up: <a href="example-multibody-within.html">Sorting within multiple tbodies, whilst sorting the inner rows too. &rsaquo;&rsaquo;</a>
</div>

</div>

</body>
</html>
6 changes: 6 additions & 0 deletions docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -353,6 +353,12 @@ <h4 id="metadata">Metadata - setting inline options</h4>
<li><a href="example-meta-headers.html">Disable header using metadata</a></li>
<li><a href="example-meta-parsers.html">Setting column parser using metadata</a></li>
</ul>

<h4>Sorting between multiple tbodies</h4>
<ul>
<li><a href="example-multibody.html">Sort between multiple tbodies, with inner rows remaining static.</li>
<li><a href="example-multibody-within.html">Sort within multiple tbodies, whilst sorting the inner rows too.</li>
</ul>
</div>
<br class="clear">

Expand Down
2 changes: 1 addition & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@

<!-- 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.js"></script>
<script src="js/jquery.tablesorter.widgets.js"></script>
<script>
$(function(){
Expand Down
Loading