<html> <head> <title></title> <style type="text/css"> body { font: normal 14px/21px Arial, serif; } .example { float: left; width: 40%; margin: 5%; } table { font-size: 1em; border-collapse: collapse; margin: 0 auto } table, th, td { border: 1px solid #999; padding: 8px 16px; text-align: left; } table.ex-2 { min-width: 100px; } th { background: #f4f4f4; cursor: pointer; } th:hover, th.sorted { background: #d4d4d4; } th.no-sort, th.no-sort:hover { background: #f4f4f4; cursor: not-allowed; } th.sorted.ascending:after { content: " \2191"; } th.sorted.descending:after { content: " \2193"; } .disabled { opacity: 0.5; } </style> </head> <body> <div class="example ex-1"> <table> <thead> <tr> <th>Name</th> <th>Band</th> <th>Date of Birth</th> <th class="number">Age</th> <th class="no-sort">Photo</th> </tr> </thead> <tbody> <tr> <td>Thom Yorke</td> <td>Radiohead</td> <td data-sort-value="2">October 7, 1968</td> <td>43</td> <td><img src="http://place-hoff.com/100/100" width="50"></td> </tr> <tr> <td>Justin Vernon</td> <td>Bon Iver</td> <td data-sort-value="4">April 30, 1981</td> <td>30</td> <th><img src="http://www.fillmurray.com/100/100" width="50"></td> </tr> <tr> <td>Paul McCartney</td> <td>The Beatles</td> <td data-sort-value="1">June 18, 1942</td> <td>69</td> <td><img src="https://www.placecage.com/100/100" width="50"></td> </tr> <tr> <td>Sam Beam</td> <td>Iron & Wine</td> <td data-sort-value="3">July 26, 1974</td> <td>37</td> <td><img src="http://www.stevensegallery.com/200/200" width="50"></td> </tr> </tbody> </table> </div> <div class="example ex-2"> <div id="sort-msg" style="float: right;" /> </div> <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> <script src="jquery.tablesort.min.js"></script> <script type="text/javascript"> $(function() { var table = $('<table class="ex-2"></table>'); table.append('<thead><tr><th class="number">Number</th></tr></thead>'); var tbody = $('<tbody></tbody>'); for(var i = 0; i<500; i++) { tbody.append('<tr><td>' + Math.floor(Math.random() * 100) + '</td></tr>'); } table.append(tbody); $('.example.ex-2').append(table); $('table').tablesort().data('tablesort'); $('thead th.number').data('sortBy', function(th, td, sorter) { return parseInt(td.text(), 10); }); //Sorting indicator example $('table.ex-2').on('tablesort:start', function(event, tablesort) { $('table.ex-2 tbody').addClass("disabled"); $('.ex-2 th.number').removeClass("sorted").text('Sorting..'); }); $('table.ex-2').on('tablesort:complete', function(event, tablesort) { $('table.ex-2 tbody').removeClass("disabled"); $('.ex-2 th.number').text('Number'); }); }); </script> </body> </html>