stupid-table-plugin
Version:
Stupidly simple jquery table sorting plugin
342 lines (328 loc) • 9.61 kB
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Stupid-Table Tests</title>
<link rel="stylesheet" href="qunit.css">
<!--
WOW, Javascript dependencies galore. And people do this normally!
--!>
<script src="jquery.js"></script>
<script src="underscore.js"></script>
<script src="../stupidtable.min.js"></script>
<script src="qunit.js"></script>
<script src="tests.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture" class="test-hidden">
<div class="tablewrap">
<h2>Basic Table</h2>
<table id="basic">
<thead>
<tr>
<th data-sort="int">int</th>
<th data-sort="float">float</th>
<th data-sort="string">string</th>
</tr>
</thead>
<tbody>
<tr>
<td>15</td>
<td>-.18</td>
<td>banana</td>
</tr>
<tr class="awesome">
<td>95</td>
<td>36</td>
<td>coke</td>
</tr>
<tr>
<td data-sort-value=2>2</td>
<td>-152.5</td>
<td>apple</td>
</tr>
<tr>
<td>-53</td>
<td>88.5</td>
<td>zebra</td>
</tr>
<tr>
<td>195</td>
<td>-858</td>
<td>orange</td>
</tr>
</tbody>
</table>
</div>
<div class="tablewrap">
<h2>Basic Onload Table</h2>
<table id="basic-onload">
<thead>
<tr>
<th data-sort="int">int</th>
<th data-sort="float">float</th>
<th data-sort="string" data-sort-onload="yes">string</th>
</tr>
</thead>
<tbody>
<tr>
<td>15</td>
<td>-.18</td>
<td>banana</td>
</tr>
<tr class="awesome">
<td>95</td>
<td>36</td>
<td>coke</td>
</tr>
<tr>
<td data-sort-value=2>2</td>
<td>-152.5</td>
<td>apple</td>
</tr>
<tr>
<td>-53</td>
<td>88.5</td>
<td>zebra</td>
</tr>
<tr>
<td>195</td>
<td>-858</td>
<td>orange</td>
</tr>
</tbody>
</table>
</div>
<div class="tablewrap">
<h2>Complex Table</h2>
<table id="complex">
<thead>
<tr>
<th data-sort="int">int</th>
<th data-sort="float">float</th>
<th data-sort="string-ins">case</th>
<th>Can't sort me!</th>
<th data-sort="date">date</th>
<th data-sort="int">Letter frequency</th>
</tr>
</thead>
<tbody class="some-tbody-class" style="border: 2px;">
<tr>
<td>15</td>
<td>-.18</td>
<td>Homer</td>
<td>arbitrary</td>
<td>Sep 15, 2002</td>
<td data-sort-value="0">E</td>
</tr>
<tr class="awesome">
<td>95</td>
<td>36</td>
<td>purple</td>
<td>pointless</td>
<td>Aug 07, 2004</td>
<td data-sort-value="1">T</td>
</tr>
<tr>
<td>2</td>
<td>-152.5</td>
<td>is</td>
<td>silly</td>
<td>Mar 15, 1986</td>
<td data-sort-value="2">A</td>
</tr>
<tr>
<td>-53</td>
<td>88.5</td>
<td>a</td>
<td>eccentric</td>
<td>Feb 27, 2086</td>
<td data-sort-value="3">O</td>
</tr>
<tr>
<td>195</td>
<td>-858</td>
<td>fruit</td>
<td>garbage</td>
<td>Mar 15, 1986</td>
<td data-sort-value="4">I</td>
</tr>
</tbody>
</table>
</div>
<div class="tablewrap">
<h2>Basic Colspan Table</h2>
<table id="basic-colspan">
<thead>
<tr>
<th data-sort="string">Letter</td>
<th colspan="2" data-sort="string">colspan=2</th>
<th data-sort="int">Number</td>
</tr>
</thead>
<tbody>
<tr>
<td>def</td>
<td>X</td>
<td>9</td>
<td>1</td>
</tr>
<tr>
<td>abc</td>
<td>Z</td>
<td>8</td>
<td>2</td>
</tr>
<tr>
<td>bcd</td>
<td>Y</td>
<td>7</td>
<td>0</td>
</tr>
</tbody>
</table>
</div>
<div class="tablewrap">
<h2>Complex Colspan Table</h2>
<table id="complex-colspan">
<thead>
<tr>
<th colspan="4">The Big Table Header</th>
</tr>
<tr>
<th data-sort="string">Letter</td>
<th colspan="2" data-sort="string">colspan=2</th>
<th data-sort="int">Number</td>
</tr>
</thead>
<tbody>
<tr>
<td>def</td>
<td>X</td>
<td>9</td>
<td>1</td>
</tr>
<tr>
<td>abc</td>
<td>Z</td>
<td>8</td>
<td>2</td>
</tr>
<tr>
<td>bcd</td>
<td>Y</td>
<td>7</td>
<td>0</td>
</tr>
</tbody>
</table>
</div>
<div class="tablewrap">
<h2>Stability Testing Table</h2>
<table id="stability-test">
<thead>
<tr>
<th>(Unsortable) Index</th>
<th data-sort="string-ins">Key</th>
</tr>
</thead>
<tbody>
<tr><td>0</td><td>A</td></tr>
<tr><td>1</td><td>A</td></tr>
<tr><td>2</td><td>A</td></tr>
<tr><td>3</td><td>A</td></tr>
<tr><td>4</td><td>A</td></tr>
<tr><td>5</td><td>A</td></tr>
<tr><td>6</td><td>A</td></tr>
<tr><td>7</td><td>A</td></tr>
<tr><td>8</td><td>A</td></tr>
<tr><td>9</td><td>A</td></tr>
<tr><td>10</td><td>A</td></tr>
</tbody>
</table>
</div>
<div class=tablewrap">
<h2>Multicolumn sort</h2>
<table id='multicolumn-sort-test'>
<thead>
<tr>
<th id="int-column" data-sort="int" data-sort-multicolumn="1,string-column">int</th>
<th id="float-column" data-sort="float" data-sort-multicolumn="string-column,int-column">float</th>
<th id="string-column" data-sort="string" data-sort-multicolumn="1,0">string</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>10.0</td>
<td>a</td>
</tr>
<tr>
<td>1</td>
<td>10.0</td>
<td>a</td>
</tr>
<tr>
<td>2</td>
<td>10.0</td>
<td>b</td>
</tr>
<tr>
<td>0</td>
<td>20.0</td>
<td>c</td>
</tr>
<tr>
<td>1</td>
<td>30.0</td>
<td>b</td>
</tr>
<tr>
<td>2</td>
<td>30.0</td>
<td>a</td>
</tr>
<tr>
<td>0</td>
<td>10.0</td>
<td>b</td>
</tr>
<tr>
<td>0</td>
<td>20.0</td>
<td>a</td>
</tr>
<tr>
<td>0</td>
<td>10.0</td>
<td>c</td>
</tr>
<tr>
<td>1</td>
<td>20.0</td>
<td>a</td>
</tr>
<tr>
<td>2</td>
<td>10.0</td>
<td>b</td>
</tr>
<tr>
<td>3</td>
<td>30.0</td>
<td>a</td>
</tr>
<tr>
<td>2</td>
<td>30.0</td>
<td>b</td>
</tr>
</tbody>
</table>
</div>
</div><!--qunit-fixture-->
</body>
</html>