tablesort

<!DOCTYPE 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> a small & simple sorting component for tables. Written in JavaScript and dependency free.</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"><script src='tablesort.min.js'></script>  <script src='tablesort.number.js'></script> <script src='tablesort.date.js'></script> <script> new Tablesort(document.getElementById('table-id')); </script></code></pre></figure> <h2 id="sort-types">Sort types</h2> 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. <h2 id="additional-options">Additional options</h2> <h3 id="ascendingdescending">Ascending/Descending</h3> You can pass an alternate sort order as a second parameter. By default sort is ascending. To change this, set: <figure class="highlight"><pre><code class="language-js" data-lang="js">new Tablesort(document.getElementById('table-id'), { descending: true });</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> If you want to change the default sort order for only one column you can use the attribute <code class="language-plaintext highlighter-rouge">data-sort-reverse</code>. <figure class="highlight"><pre><code class="language-html" data-lang="html"><th data-sort-reverse>A table header</th></code></pre></figure> <h3 id="exclude-columns-or-rows">Exclude columns or rows</h3> For columns or rows that do not require sorting, you can add attribute <code class="language-plaintext highlighter-rouge">data-sort-method='none'</code> to a columns <code class="language-plaintext highlighter-rouge">th</code> or a <code class="language-plaintext highlighter-rouge">tr</code> element. <figure class="highlight"><pre><code class="language-html" data-lang="html"><th data-sort-method='none'>Name</th> <tr data-sort-method='none'> <td>1</td> <td>Gonzo the Great</td> <td>12-2-70</td> <td>Radishes</td> <td>$0.63</td> </tr></code></pre></figure> <h3 id="override-data-that-is-sorted-on">Override data that is sorted on</h3> Sometimes text inside cells is not normalized. Using a <code class="language-plaintext highlighter-rouge">data-sort</code> attribute you can use optional data to sort on. <figure class="highlight"><pre><code class="language-html" data-lang="html"><tr> <td>1</td> <td data-sort='1357656438'>01/08/13 @ 8:47:18am EST</td> </tr> <tr> <td>2</td> <td data-sort='1078673085'>3/7/2004 @ 9:24:45 EST</td> </tr></code></pre></figure> You can use a custom attribute (instead of <code class="language-plaintext highlighter-rouge">data-sort</code>) using the <code class="language-plaintext highlighter-rouge">sortAttribute</code> option: <figure class="highlight"><pre><code class="language-js" data-lang="js">var table = document.getElementById('table-id'); var sort = new Tablesort(table, { sortAttribute: 'data-custom-sort-val'});</code></pre></figure> <h3 id="specify-the-sort-method-for-a-column">Specify the sort method for a column</h3> By adding a <code class="language-plaintext 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="language-plaintext highlighter-rouge">data-sort-method</code> corresponds to the name of a sort function. <figure class="highlight"><pre><code class="language-html" data-lang="html"><table> <thead> <tr> <th>Number</th> <th data-sort-method='dotsep'>Version</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>3.7.2004</td> </tr> <tr> <td>2</td> <td>1.08.2013</td> </tr> </tbody> </table></code></pre></figure> <h3 id="specify-which-table-heading-row-enables-sorting">Specify which table heading row enables sorting</h3> If you have two or more table heading rows you can specify the one that enables sorting by adding a <code class="language-plaintext highlighter-rouge">data-sort-method='thead'</code> attribute to desired <code class="language-plaintext highlighter-rouge"><tr></code> element. <figure class="highlight"><pre><code class="language-html" data-lang="html"><table> <thead> <tr data-sort-method='thead'><th>Sort Row</th></tr> <tr><th>Not Sort Row</th></tr> </thead> <tbody> <tr><td>2</td></tr> <tr><td>1</td></tr> <tr><td>3</td></tr> </tbody> </table></code></pre></figure> <h3 id="events">Events</h3> Tablesort supports two custom events <code class="language-plaintext highlighter-rouge">beforeSort</code> & <code class="language-plaintext highlighter-rouge">afterSort</code>. <figure class="highlight"><pre><code class="language-js" data-lang="js">var table = document.getElementById('table-id'); var sort = new Tablesort(table); table.addEventListener('beforeSort', function() { alert('Table is about to be sorted!'); }); table.addEventListener('afterSort', function() { alert('Table sorted!'); });</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> Tablesort supports sorting when new data has been added. Simply call the refresh method. <figure class="highlight"><pre><code class="language-js" data-lang="js">var table = document.getElementById('table-id'); var sort = new Tablesort(table); // Make some Ajax request to fetch new data and on success: sort.refresh();</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> <a href="#" id="add" class="button">Append a row</a> <a href="#" id="remove" class="button">Remove a row</a> <h3 id="default-sort-on-tablesort-initialization">Default sort on tablesort initialization</h3> It is possible to automatically sort the table once you create a Tablesort instance by adding <code class="language-plaintext highlighter-rouge">data-sort-default</code> attribute. <figure class="highlight"><pre><code class="language-html" data-lang="html"><th data-sort-default>Born</th></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> 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="language-plaintext highlighter-rouge">data-sort-column-key</code> attribute. This example sorts products by price, even though the prices are not in the same column as their header. <figure class="highlight"><pre><code class="language-html" data-lang="html"><table 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></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> Add the styling from <a href="../tablesort.css">tablesort.css</a> file to your CSS or roll with your own. <h2 id="licence">Licence</h2> MIT <h2 id="bugs">Bugs?</h2> <a href="https://github.com/tristen/tablesort/issues">File Them</a> <script> new Tablesort(document.getElementById('defaulting')); new Tablesort(document.getElementById('column-keys')); 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>