tablesort
Version:
A sorting component for HTML tables
482 lines (420 loc) • 20.3 kB
HTML
<html>
<head>
<title>tablesort</title>
<meta charset='utf-8' />
<meta name='viewport' content='initial-scale=1,user-scalable=yes' />
<link href='style.css' rel='stylesheet'>
<link href='../tablesort.css' rel='stylesheet'>
<script src='../src/tablesort.js'></script>
<script src='../src/sorts/tablesort.date.js'></script>
<script src='../src/sorts/tablesort.dotsep.js'></script>
<script src='../src/sorts/tablesort.filesize.js'></script>
<script src='../src/sorts/tablesort.number.js'></script>
</head>
<body>
<header class='inner'>
<h1><a href='http://github.com/tristen/tablesort'>tablesort</a><span class='description'> a small & simple sorting component for tables. Written in JavaScript and dependency free.</span></h1>
<table id='sort' class='sort'>
<thead>
<tr>
<th data-sort-method='none' title='This column is not sortable, by adding no-sort class'>#</th>
<th>Name</th>
<th>Birthday</th>
<th>Grocery item</th>
<th>Price</th>
<th>Version</th>
<th>Filesize</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Gonzo the Great</td>
<td>12-2-70</td>
<td>Radishes</td>
<td>$0.63</td>
<td>31.0.1650.57</td>
<td>124k</td>
</tr>
<tr>
<td>2</td>
<td>Ernie</td>
<td>10/11/69</td>
<td>Fish</td>
<td>$12.09</td>
<td>11.0.1</td>
<td>134.56 GB</td>
</tr>
<tr>
<td>3</td>
<td>Bert</td>
<td>10/11/1969</td>
<td>Broccoli</td>
<td>$0.79</td>
<td>18.0.1284.49</td>
<td>134 B</td>
</tr>
<tr>
<td>4</td>
<td>Cookie Monster</td>
<td>1/09/1966</td>
<td>Oreo cookies</td>
<td>$2.78</td>
<td>3.0.0</td>
<td>4.13 TiB</td>
</tr>
<tr>
<td>5</td>
<td>Kermit</td>
<td>12-05-1955</td>
<td>Granola</td>
<td>$4.73</td>
<td>3.0.9</td>
<td>12 YB</td>
</tr>
<tr>
<td>6</td>
<td>Sam the Eagle</td>
<td>04/07/75</td>
<td>Corn dog</td>
<td>$5.50</td>
<td>3.1.2</td>
<td>19.4 K</td>
</tr>
</tbody>
</table>
</header>
<div class='limiter'>
<div class='clearfix col12 pill-group'>
<a class='col6 button stretch' href='https://github.com/tristen/tablesort/releases'>Latest release</a>
<a class='col6 button stretch' href='https://raw.github.com/tristen/tablesort/gh-pages/dist/tablesort.min.js'>Development version</a>
</div>
<div class='col12 center pad1y'>
<a href='https://github.com/tristen/tablesort'>tablesort on GitHub</a>
</div>
</div>
<script>
new Tablesort(document.getElementById('sort'));
</script>
<div class='limiter'><h2 id="quick-start">Quick start</h2>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><script </span><span class="na">src=</span><span class="s">'tablesort.min.js'</span><span class="nt">></script></span>
<span class="c"><!-- Include sort types you need --></span>
<span class="nt"><script </span><span class="na">src=</span><span class="s">'tablesort.number.js'</span><span class="nt">></script></span>
<span class="nt"><script </span><span class="na">src=</span><span class="s">'tablesort.date.js'</span><span class="nt">></script></span>
<span class="nt"><script></span>
<span class="k">new</span> <span class="nx">Tablesort</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'table-id'</span><span class="p">));</span>
<span class="nt"></script></span></code></pre></figure>
<h2 id="sort-types">Sort types</h2>
<p>See all available sort types in the <a href="https://github.com/tristen/tablesort/tree/gh-pages/src/sorts/">sort directory of the project</a>. Defaults to string if no sort types are provided.</p>
<h2 id="additional-options">Additional options</h2>
<h3 id="ascendingdescending">Ascending/Descending</h3>
<p>You can pass an alternate sort order as a second parameter. By default sort is ascending. To change this, set:</p>
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="k">new</span> <span class="nx">Tablesort</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'table-id'</span><span class="p">),</span> <span class="p">{</span>
<span class="na">descending</span><span class="p">:</span> <span class="kc">true</span>
<span class="p">});</span></code></pre></figure>
<div class="notice">**Note:** If you are using the default CSS provided you'll need to reverse the class names that style the arrows.</div>
<h3 id="exclude-columns-or-rows">Exclude columns or rows</h3>
<p>For columns or rows that do not require sorting, you can add attribute <code class="highlighter-rouge">data-sort-method='none'</code> to a columns <code class="highlighter-rouge">th</code> or a <code class="highlighter-rouge">tr</code> element.</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><th</span> <span class="na">data-sort-method=</span><span class="s">'none'</span><span class="nt">></span>Name<span class="nt"></th></span>
<span class="nt"><tr</span> <span class="na">data-sort-method=</span><span class="s">'none'</span><span class="nt">></span>
<span class="nt"><td></span>1<span class="nt"></td></span>
<span class="nt"><td></span>Gonzo the Great<span class="nt"></td></span>
<span class="nt"><td></span>12-2-70<span class="nt"></td></span>
<span class="nt"><td></span>Radishes<span class="nt"></td></span>
<span class="nt"><td></span>$0.63<span class="nt"></td></span>
<span class="nt"></tr></span></code></pre></figure>
<h3 id="override-data-that-is-sorted-on">Override data that is sorted on</h3>
<p>Sometimes text inside cells is not normalized. Using a <code class="highlighter-rouge">data-sort</code> attribute you can use optional data to sort on.</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><tr></span>
<span class="nt"><td></span>1<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">data-sort=</span><span class="s">'1357656438'</span><span class="nt">></span>01/08/13 @ 8:47:18am EST<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"><tr></span>
<span class="nt"><td></span>2<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">data-sort=</span><span class="s">'1078673085'</span><span class="nt">></span>3/7/2004 @ 9:24:45 EST<span class="nt"></td></span>
<span class="nt"></tr></span></code></pre></figure>
<h3 id="specify-the-sort-method-for-a-column">Specify the sort method for a column</h3>
<p>By adding a <code class="highlighter-rouge">data-sort-method</code> attribute to a table heading you can force Tablesort to use a specific sorting method rather than guessing it. The value of <code class="highlighter-rouge">data-sort-method</code> corresponds to the name of a sort function.</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><table></span>
<span class="nt"><thead></span>
<span class="nt"><tr></span>
<span class="nt"><th></span>Number<span class="nt"></th></span>
<span class="nt"><th</span> <span class="na">data-sort-method=</span><span class="s">'dotsep'</span><span class="nt">></span>Version<span class="nt"></th></span>
<span class="nt"></tr></span>
<span class="nt"></thead></span>
<span class="nt"><tbody></span>
<span class="nt"><tr></span>
<span class="nt"><td></span>1<span class="nt"></td></span>
<span class="nt"><td></span>3.7.2004<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"><tr></span>
<span class="nt"><td></span>2<span class="nt"></td></span>
<span class="nt"><td></span>1.08.2013<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"></tbody></span>
<span class="nt"></table></span></code></pre></figure>
<h3 id="specify-which-table-heading-row-enables-sorting">Specify which table heading row enables sorting</h3>
<p>If you have two or more table heading rows you can specify the one that enables sorting by adding a <code class="highlighter-rouge">data-sort-method='thead'</code> attribute to desired <code class="highlighter-rouge"><tr></code> element.</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><table></span>
<span class="nt"><thead></span>
<span class="nt"><tr</span> <span class="na">data-sort-method=</span><span class="s">'thead'</span><span class="nt">><th></span>Sort Row<span class="nt"></th></tr></span>
<span class="nt"><tr><th></span>Not Sort Row<span class="nt"></th></tr></span>
<span class="nt"></thead></span>
<span class="nt"><tbody></span>
<span class="nt"><tr><td></span>2<span class="nt"></td></tr></span>
<span class="nt"><tr><td></span>1<span class="nt"></td></tr></span>
<span class="nt"><tr><td></span>3<span class="nt"></td></tr></span>
<span class="nt"></tbody></span>
<span class="nt"></table></span></code></pre></figure>
<h3 id="events">Events</h3>
<p>Tablesort supports two custom events <code class="highlighter-rouge">beforeSort</code> & <code class="highlighter-rouge">afterSort</code>.</p>
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">table</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'table-id'</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">sort</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Tablesort</span><span class="p">(</span><span class="nx">table</span><span class="p">);</span>
<span class="nx">table</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">'beforeSort'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">alert</span><span class="p">(</span><span class="s1">'Table is about to be sorted!'</span><span class="p">);</span>
<span class="p">});</span>
<span class="nx">table</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">'afterSort'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">alert</span><span class="p">(</span><span class="s1">'Table sorted!'</span><span class="p">);</span>
<span class="p">});</span></code></pre></figure>
<table id="event-table" class="sort">
<thead>
<tr>
<th>Name</th>
<th>Born</th>
</tr>
</thead>
<tbody>
<tr>
<td>Roy Eldridge</td>
<td>1911</td>
</tr>
<tr>
<td>Tim Hagans</td>
<td>1954</td>
</tr>
<tr>
<td>Freddie Hubbard</td>
<td>1938</td>
</tr>
</tbody>
</table>
<h3 id="refresh-sort-on-appended-data">Refresh sort on appended data</h3>
<p>Tablesort supports sorting when new data has been added. Simply call the refresh method.</p>
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">table</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'table-id'</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">sort</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Tablesort</span><span class="p">(</span><span class="nx">table</span><span class="p">);</span>
<span class="c1">// Make some Ajax request to fetch new data and on success:</span>
<span class="nx">sort</span><span class="p">.</span><span class="nx">refresh</span><span class="p">();</span></code></pre></figure>
<table id="refresh-table" class="sort">
<thead>
<tr>
<th>Name</th>
<th>Born</th>
</tr>
</thead>
<tbody>
<tr>
<td>Roy Eldridge</td>
<td>1911</td>
</tr>
<tr>
<td>Tim Hagans</td>
<td>1954</td>
</tr>
<tr>
<td>Freddie Hubbard</td>
<td>1938</td>
</tr>
</tbody>
</table>
<p><a href="#" id="add" class="button">Append a row</a>
<a href="#" id="remove" class="button">Remove a row</a></p>
<h3 id="default-sort-on-tablesort-initialization">Default sort on tablesort initialization</h3>
<p>It is possible to automatically sort the table once you create a Tablesort instance by adding <code class="highlighter-rouge">data-sort-default</code> attribute.</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><th</span> <span class="na">data-sort-default</span><span class="nt">></span>Born<span class="nt"></th></span></code></pre></figure>
<table id="defaulting" class="sort">
<thead>
<tr>
<th>Name</th>
<th data-sort-default="">Born</th>
</tr>
</thead>
<tbody>
<tr>
<td>Roy Eldridge</td>
<td>1911</td>
</tr>
<tr>
<td>Tim Hagans</td>
<td>1954</td>
</tr>
<tr>
<td>Freddie Hubbard</td>
<td>1938</td>
</tr>
</tbody>
</table>
<h3 id="sorting-by-column-keys">Sorting by column keys</h3>
<p>Sometimes, tables can have more complex column structures, especially when using colspans. In these cases, you can
explicitly connect a header to the cells in each row that it should sort by, by using the <code class="highlighter-rouge">data-sort-column-key</code>
attribute.</p>
<p>This example sorts products by price, even though the prices are not in the same column as their header.</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><table</span> <span class="na">class=</span><span class="s">'sort'</span><span class="nt">></span>
<span class="nt"><thead></span>
<span class="nt"><tr></span>
<span class="nt"><th</span> <span class="nt">></span>Product<span class="nt"></th></span>
<span class="nt"><th</span> <span class="na">colspan=</span><span class="s">"2"</span> <span class="na">data-sort-column-key=</span><span class="s">"price"</span><span class="nt">></span>Price<span class="nt"></th></span>
<span class="nt"></tr></span>
<span class="nt"></thead></span>
<span class="nt"><tbody></span>
<span class="nt"><tr></span>
<span class="nt"><td></span>Apples<span class="nt"></td></span>
<span class="nt"><td></span>Sale!<span class="nt"></td></span>
<span class="nt"><td></span>20<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"><tr></span>
<span class="nt"><td></span>Bread<span class="nt"></td></span>
<span class="nt"><td></span>Out of stock<span class="nt"></td></span>
<span class="nt"><td></span>10<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"><tr></span>
<span class="nt"><td></span>Radishes<span class="nt"></td></span>
<span class="nt"><td></span>In Stock!<span class="nt"></td></span>
<span class="nt"><td></span>30<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"></tbody></span>
<span class="nt"></table></span></code></pre></figure>
<table id="column-keys" class="sort">
<thead>
<tr>
<th>Product</th>
<th colspan="2" data-sort-column-key="price">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apples</td>
<td>Sale!</td>
<td data-sort-column-key="price">20</td>
</tr>
<tr>
<td>Bread</td>
<td>Out of stock</td>
<td data-sort-column-key="price">10</td>
</tr>
<tr>
<td>Radishes</td>
<td>In Stock!</td>
<td data-sort-column-key="price">30</td>
</tr>
</tbody>
</table>
<h2 id="css-styling">CSS styling</h2>
<p>Add the styling from <a href="../tablesort.css">tablesort.css</a> file to your CSS or roll with your own.</p>
<h2 id="licence">Licence</h2>
<p>MIT</p>
<h2 id="bugs">Bugs?</h2>
<p><a href="https://github.com/tristen/tablesort/issues">File Them</a></p>
<script>
new Tablesort(document.getElementById('column-keys'));
new Tablesort(document.getElementById('defaulting'));
var events = document.getElementById('event-table')
new Tablesort(events);
addEvent(events, 'beforeSort', function(e) {
alert('Table is about to be sorted!');
});
addEvent(events, 'afterSort', function(e) {
alert('Table sorted!');
});
var trumpeters = [
{
"name": "Miles Davis",
"born": 1926
},
{
"name": "Dizzy Gillespie",
"born": 1917
},
{
"name": "Wynton Marsalis",
"born": 1961
},
{
"name": "Tom Harell",
"born": 1946
},
{
"name": "Roy Hargrove",
"born": 1969
},
{
"name": "Chet Baker",
"born": 1929
},
{
"name": "Nicholas Payton",
"born": 1973
},
{
"name": "Wallace Roney",
"born": 1960
},
{
"name": "Rex Stewart",
"born": 1907
},
{
"name": "Tim Hagans",
"born": 1954
},
{
"name": "Roy Eldridge",
"born": 1911
},
{
"name": "Freddie Hubbard",
"born": 1938
}
]
var r = document.getElementById('refresh-table');
var add = document.getElementById('add');
var remove = document.getElementById('remove');
var refresh = new Tablesort(r);
function cancel(event) {
(event.preventDefault) ? event.preventDefault() : event.returnValue = false;
(event.stopPropagation) ? event.stopPropagation() : event.cancelBubble = true;
}
function addEvent(object, event, method) {
if (object.attachEvent) {
object['e' + event + method] = method;
object[event + method] = function(){object['e' + event + method](window.event);};
object.attachEvent('on' + event, object[event + method]);
} else {
object.addEventListener(event, method, false);
}
};
addEvent(add, 'click', function(e) {
cancel(e);
var player = trumpeters[Math.floor(Math.random() * trumpeters.length)];
var rowCount = r.rows.length;
var row = r.insertRow(rowCount);
var cellName = row.insertCell(0);
cellName.innerHTML = player.name;
var cellBorn = row.insertCell(1);
cellBorn.innerHTML = player.born;
refresh.refresh();
});
addEvent(remove, 'click', function(e) {
cancel(e);
var rowCount = r.rows.length;
if (rowCount === 2) return;
r.deleteRow(rowCount - 1);
});
</script>
</div>
<script>
var analytics=analytics||[];(function(){var e=["identify","track","trackLink","trackForm","trackClick","trackSubmit","page","pageview","ab","alias","ready","group"],t=function(e){return function(){analytics.push([e].concat(Array.prototype.slice.call(arguments,0)))}};for(var n=0;n<e.length;n++)analytics[e[n]]=t(e[n])})(),analytics.load=function(e){var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src=("https:"===document.location.protocol?"https://":"http://")+"d2dq2ahtl5zl1z.cloudfront.net/analytics.js/v1/"+e+"/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n)};
analytics.load("ppyh4q5xb3");
</script>
</body>
</html>