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
70269e9315
tablesorter/docs/example-widget-sort-tbodies.html

376 lines
17 KiB
HTML
Raw Normal View History

SortTbodies: add new widget. Fixes #195 & #833
2015-06-11 01:35:37 +00:00
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Sort multiple tbodies by primary row</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.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>
<!-- Tablesorter: widgets (optional) -->
<!-- <script src="../js/jquery.tablesorter.widgets.js"></script> -->
<script src="../js/widgets/widget-filter.js"></script>
<script src="../js/widgets/widget-sortTbodies.js"></script>
<style>
caption { font-weight: bold; font-size: 18px; }
th.rank, #table3 th.rank { width: 5%; }
th, #table3 th.info { width: 30%; }
#table3 th { width: 15%; }
.info { background: #ffeaca; color: #333; padding: 2px 5px; border: #cdcdcd 1px solid; }
</style>
<style id="css">/* add different color to child rows - needed css because zebra striping is not applied to
info-only tbodies (first table), & row indexing is reset for each tbody (second table), so
with only a row + child row, would all end up the same color */
#table2 .tablesorter-childRow td {
background: #eee;
}
#table2 .tablesorter-childRow:hover td {
background: #ddd;
}
/* Make the primary row stand out */
.tablesorter tbody tr.main td {
background: #ffeaca;
color: #333;
}
/* dark border to make each tbody distinct */
#table1 tbody tr.main td,
#table2 tbody tr.main td {
border-top: 1px solid #777;
/* main row is clickable; toggle sibling/child rows */
cursor: pointer;
}
/* no-sort-tbody style 4b7fb4*/
.tablesorter-no-sort-tbody td {
background: #497baf;
color: #fff;
}
.tablesorter-no-sort-tbody tr:hover td {
color: #333;
}</style>
<script id="js">$( function() {
// settings work for all three demos
$( 'table' ).tablesorter({
widgets: [ 'sortTbody', 'filter', 'zebra' ],
widgetOptions: {
sortTbody_primaryRow : '.main',
sortTbody_sortRows : false,
sortTbody_noSort : 'tablesorter-no-sort-tbody',
// include child row content while filtering the second demo table
filter_childRows : true
}
});
// toggle rows in first two demos
$( '#table1, #table2' ).find( '.main' ).on( 'click', function() {
// hide other rows when clicking on primary row
// this is only meant to work with two rows, otherwise use .nextUntil()
$( this ).siblings().toggleClass( 'filtered' );
});
// third demo; toggle sort internal rows option
$( '.toggle' ).on( 'click', function() {
var $this = $( this ),
val = $this.text() === 'false';
$( '#table3' ).data( 'tablesorter' ).widgetOptions.sortTbody_sortRows = val;
$this.text( '' + val );
});
});</script>
</head>
<body>
<div id="banner">
<h1>table<em>sorter</em></h1>
<h2>Sort multiple tbodies by primary row (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 id="notes"><a href="#">Notes</a></h3>
<div>
<ul>
<li>This widget (<span class="version">v2.22.2</span>) allows the sorting of tbodies (not rows) based on a specified row set by the <code>sortTbody_primaryRow</code> option.</li>
<li>This widget replaces the <a href="index.html#cssinfoblock"><code>cssInfoBlock</code></a> setting:
<ul>
<li>The value is replaced with the value from <code>sortTbody_noSort</code> option so as to include info-only tbodies in the tbody sort.</li>
<li>Due to this modification, tbodies with <code>colspan</code> and <code>rowspan</code> cells may not sort or filter as expected, so it would be best to <em>avoid <code>colspan</code> and <code>rowspan</code> cells in the primary row!</em></li>
</ul>
<li>This widget also modifies the <a href="index.html#serversidesorting"><code>serverSideSorting</code></a> option:
<ul>
<li>This value is set to <code>true</code> to disable tbody internal row sorting.</li>
<li>This value is set to <code>false</code> (default) when the <code>sortTbody_sortRows</code> widget option is <code>true</code>.</li>
<li>This modification should not dramatically affect other widgets; at least none that I can think of right now.</li>
</ul>
<br>
</li>
<li>In these demos,
<ul>
<li>Primary Rows are styled with a <span class="info">light yellow background</span> as an indicator.</li>
<li>The primary row color difference is important in the <a href="#sort-internal-rows">third table</a> when the sorting of internal rows is enabled (<code>sortTbody_sortRows</code> is <code>true</code>).</li>
<li>The first two tables:
<ul>
<li>Primary rows are clickable. Clicking on them toggles the sibling rows (in the <a href="#table1">first table</a>), or child rows (in the <a href="#table2">second table</a>).</li>
<li>Primary rows have a dark top border to add a visual separation of each tbody.</li>
<li><span class="label warning">*NOTE*</span> when filtering the content of the <a href="#table1">first table</a>, sibling rows that do not match the query will be hidden. Toggling their view is only possible because the <code>"filtered"</code> class (used by the filter widget &amp; set by the <a href="index.html#widget-filter-filteredrow"><code>filter_filteredRow</code></a> widget option) is toggled.</li>
</ul>
</li>
</ul>
<br>
</li>
<li><span class="label alert">*ALERT*</span> This widget requires tablesorter v2.22.2+ and jQuery 1.4+</li>
</ul>
</div>
<h3><a href="#">Options</a></h3>
<div>
<div>
Docs: updates
2015-11-08 16:38:23 +00:00
<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.
SortTbodies: add new widget. Fixes #195 & #833
2015-06-11 01:35:37 +00:00
</div>
<table class="options tablesorter-blue" data-sortlist="[[0,0]]">
<thead>
<tr><th>Option</th><th class="defaults">Default</th><th class="sorter-false">Description</th></tr>
</thead>
<tbody>
<tr id="sorttbody-primaryrow">
<td><a href="#" class="permalink">sortTbody_primaryRow</a></td>
<td>null</td>
<td>Set this option to a string containing a jQuery selector pointing to the primary row to use for tbody sorting.
<div class="collapsible">
<br>
<p>If a sortable tbody does not contain a primary row, or the primary row is not found, it will be sorted at the bottom of the table.</p>
<p>In these demos, all primary rows have a class name of <code>"main"</code>, so this option is then set as follows:</p>
<pre class="prettyprint lang-js">sortTbody_primaryRow : '.main'</pre>
<p><span class="label label-info">*NOTE*</span> This will accept any jQuery selector, so it is possible to target multiple classes <code>'.main, .primary'</code>, but only the first found cell in the sorted column will be used when sorting the tbody.</p>
<p><span class="label warning">*WARNING*</span> This widget was not designed to deal with <code>colspan</code> or <code>rowspan</code> within the primary row, so it is best to avoid them.</p>
</div>
</td>
</tr>
<tr id="sorttbody-sortrows">
<td><span class="permalink">sortTbody_sortRows</span></td>
<td>false</td>
<td>When <code>true</code>, all rows within each <code>tbody</code> will also be sorted; the primary row is included!</td>
</tr>
<tr id="sorttbody-nosort">
<td><span class="permalink">sortTbody_noSort</span></td>
<td>'tablesorter-no-sort-tbody'</td>
<td>Add the class name from this option to any tbodies that are to remain static. They will not be sorted.</td>
</tr>
</tbody>
</table>
</div>
</div>
<p></p>
<h1>Demo</h1>
<div id="demo"><!--
***********************************
TABLE 1 DEMO
*********************************** -->
<table id="table1" class="tablesorter-blue">
<caption>Sort info-only tbodies by their primary row</caption>
<thead>
<tr>
<th class="rank">Rank</th>
<th>First Name</th>
<th>Last Name</th>
<th>Superhero Name</th>
</tr>
</thead>
<tbody class="tablesorter-infoOnly">
<tr class="main"><td>3</td><td>Bruce</td><td>Wayne</td><td>Batman</td></tr>
<tr><td colspan="4">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 class="main"><td>4</td><td>Hal</td><td>Jordan</td><td>Green Latern</td></tr>
<tr><td colspan="4">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 class="main"><td>2</td><td>Clark</td><td>Kent</td><td>Superman</td></tr>
<tr><td colspan="4">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 class="main"><td>5</td><td>Charles</td><td>Xavier</td><td>Professor X</td></tr>
<tr><td colspan="4">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>
<tbody class="tablesorter-infoOnly" id="invisible-woman">
<tr class="main"><td>1</td><td>Susan</td><td>Richards</td><td>Invisible Woman</td></tr>
<tr><td colspan="4">Susan's primary power deals with light waves, allowing her to render herself and others invisible.</td></tr>
</tbody>
</table>
<br>
<!--
***********************************
TABLE 2 DEMO
*********************************** -->
<table id="table2" class="tablesorter-blue">
<caption>Sort tbodies by their primary row (using child rows for extra info)</caption>
<thead>
<tr>
<th class="rank">Rank</th>
<th>First Name</th>
<th>Last Name</th>
<th>Superhero Name</th>
</tr>
</thead>
<tbody>
<tr class="main"><td>3</td><td>Bruce</td><td>Wayne</td><td>Batman</td></tr>
<tr class="tablesorter-childRow"><td colspan="4">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 class="main"><td>4</td><td>Hal</td><td>Jordan</td><td>Green Latern</td></tr>
<tr class="tablesorter-childRow"><td colspan="4">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 class="main"><td>2</td><td>Clark</td><td>Kent</td><td>Superman</td></tr>
<tr class="tablesorter-childRow"><td colspan="4">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 class="main"><td>5</td><td>Charles</td><td>Xavier</td><td>Professor X</td></tr>
<tr class="tablesorter-childRow"><td colspan="4">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>
<tbody id="invisible-woman">
<tr class="main"><td>1</td><td>Susan</td><td>Richards</td><td>Invisible Woman</td></tr>
<tr class="tablesorter-childRow"><td colspan="4">Susan's primary power deals with light waves, allowing her to render herself and others invisible.</td></tr>
</tbody>
</table>
<br>
<hr id="sort-internal-rows">
<!--
***********************************
TABLE 3 DEMO
*********************************** -->
<code>sortTbody_sortRows</code>: <button class="toggle" type="button">false</button> (sort internal rows)
<table id="table3" class="tablesorter-blue">
<caption>Sortable &amp; non-sortable tbodies</caption>
<thead>
<tr>
<th class="rank">#</th>
<th class="rank">ID</th>
<th>First</th>
<th>Last</th>
<th>State</th>
<th class="info">Info</th>
</tr>
</thead>
<tfoot>
<tr>
<th class="rank">#</th>
<th class="rank">ID</th>
<th>First</th>
<th>Last</th>
<th>State</th>
<th class="info">Info</th>
</tr>
</tfoot>
<tbody>
<tr class="main"><td>1</td><td>337</td><td>Denise</td><td>Harris</td><td>CT</td><td>lectus tortor vestibulum</td></tr>
<tr><td>2</td><td>268</td><td>Brien</td><td>Barrow</td><td>KY</td><td>ipsum aenean eros</td></tr>
<tr><td>3</td><td>665</td><td>Mikel</td><td>Absalom</td><td>FL</td><td>amet vestibulum adipiscing</td></tr>
<tr><td>4</td><td>540</td><td>LaShonda</td><td>Buikema</td><td>SD</td><td>pulvinar at consectetur</td></tr>
</tbody>
<tbody class="tablesorter-no-sort-tbody">
<tr><td colspan="6">Tbody "tablesorter-no-sort-tbody" spacer 1</td></tr>
</tbody>
<tbody>
<tr class="main"><td>5</td><td>212</td><td>Leif</td><td>Choate</td><td>UT</td><td>porttitor mattis sit</td></tr>
<tr><td>6</td><td>367</td><td>Ericka</td><td>Ragusa</td><td>MA</td><td>at sollicitudin hendrerit</td></tr>
<tr><td>7</td><td>136</td><td>Waddie</td><td>Maynard</td><td>NH</td><td>sollicitudin ac mi</td></tr>
<tr><td>8</td><td>305</td><td>Ken</td><td>Weissmann</td><td>AK</td><td>magna sit at</td></tr>
</tbody>
<tbody class="tablesorter-no-sort-tbody">
<tr><td colspan="6">Tbody "tablesorter-no-sort-tbody" spacer 2</td></tr>
</tbody>
<tbody>
<tr class="main"><td>9</td><td>983</td><td>Petr</td><td>Kunselman</td><td>WI</td><td>amet convallis eros</td></tr>
<tr><td>10</td><td>306</td><td>Melanie</td><td>Nabors</td><td>MA</td><td>tincidunt risus porttitor</td></tr>
<tr><td>11</td><td>345</td><td>Emil</td><td>Corson</td><td>MO</td><td>dui aliquam aliquam</td></tr>
<tr><td>12</td><td>335</td><td>Theodore</td><td>Brill</td><td>WV</td><td>sit pulvinar eros</td></tr>
</tbody>
<tbody class="tablesorter-no-sort-tbody">
<tr><td colspan="6">Tbody "tablesorter-no-sort-tbody" spacer 3</td></tr>
</tbody>
<tbody>
<tr class="main"><td>13</td><td>430</td><td>Nishal</td><td>Smith</td><td>DE</td><td>tortor tincidunt porttitor</td></tr>
<tr><td>14</td><td>470</td><td>Sheryl</td><td>Scheppe</td><td>ID</td><td>sed massa hendrerit</td></tr>
<tr><td>15</td><td>795</td><td>Christopher</td><td>Pollard</td><td>CT</td><td>sed lacus adipiscing</td></tr>
<tr><td>16</td><td>400</td><td>Raymond</td><td>Jessica</td><td>IN</td><td>mi vestibulum amet</td></tr>
</tbody>
<tbody class="tablesorter-no-sort-tbody">
<tr><td colspan="6">Tbody "tablesorter-no-sort-tbody" spacer 4</td></tr>
</tbody>
<tbody>
<tr class="main"><td>17</td><td>927</td><td>Donovan</td><td>Joslin</td><td>MN</td><td>amet augue aliquam</td></tr>
<tr><td>18</td><td>882</td><td>Ning</td><td>Mccollum</td><td>KS</td><td>sed egestas vestibulum</td></tr>
<tr><td>19</td><td>772</td><td>Sarah</td><td>Radist</td><td>DE</td><td>ipsum odio dui</td></tr>
<tr><td>20</td><td>975</td><td>Aisha</td><td>Badertscher</td><td>CT</td><td>mi nec massa</td></tr>
</tbody>
</table>
</div>
<h1>Page Header</h1>
<div>
<pre class="prettyprint lang-html">&lt;link rel=&quot;stylesheet&quot; href=&quot;../css/theme.blue.css&quot;&gt;
&lt;script src=&quot;js/jquery-latest.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../js/jquery.tablesorter.js&quot;&gt;&lt;/script&gt;
&lt;!-- Tablesorter: widgets (optional) --&gt;
&lt;script src=&quot;../js/jquery.tablesorter.widgets.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../js/widgets/widget-sortTbodies.js&quot;&gt;&lt;/script&gt;</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-js"></pre>
</div>
<h1>HTML</h1>
<div id="html">
<pre class="prettyprint lang-html"></pre>
</div>
</div>
</body>
</html>
Reference in New Issue Copy Permalink