This time I will share jQuery Plugin and tutorial about Stacking Tables On Small Screens with jQuery – stacktable, hope it will help you in programming stack.
stacktable.js is a jQuery Plugin for equalizing the height or width of elements. With this plugin, the wide tables will be converted to a format that works better on small screens.
How to use it:
1. Markup
01 |
<a id="run" href="#">run »</a> |
02 |
<table id="simple-example-table" cellspacing="0"> |
05 |
<th width="30%">Stuff</th> |
06 |
<th width="12%">Rate</th> |
07 |
<th width="12%">Amount</th> |
08 |
<th width="12%">Points</th> |
09 |
<th width="12%">Number</th> |
10 |
<th width="18%">Type</th> |
11 |
<th width="12%">Name</th> |
23 |
<td>Something Else</td> |
32 |
<td colspan="7" class="sub">Subgroup Header</td> |
35 |
<td>Another Thing</td> |
44 |
<td>Thing w/Less Stuff</td> |
58 |
<td>Meaning of Life</td> |
2. Include jQuery library and stacktable.js
1 |
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> |
2 |
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.8.1.min.js"></script>')</script> </script> |
3 |
<script src="stacktable.js" type="text/javascript"></script> |
3. Call the plugin
2 |
$(document).on('click', '#run', function(e) { |
4 |
$('#simple-example-table').stacktable({hideOriginal:true}); |
5 |
$(this).replaceWith('<span>ran</span>'); |
Change logs:
2017-06-10
- Adding support for thead as first row
2017-02-05
2016-06-12
2015-11-19
- deprecate unnecessary hideOriginal setting
- v1.0.1
2015-11-02
2015-01-17
2014-11-01
- Added support for headIndex, in order to choose what cell use as header.
- Some variable name changes (the two “index” became “rowIndex” and “cellIndex”, in order to avoid ambiguities).
2013-12-18
- fixed documentation on index.html; class variable should be myClass
- remove unused var.
This awesome jQuery plugin is developed by johnpolacek. For more Advanced Usages, please check the demo page or visit the official website.
