File: examples/Example2.html

Recommend this page to a friend!
  Classes of Jackson Knowlton   JS Sortable Table   examples/Example2.html   Download  
File: examples/Example2.html
Role: Example script
Content type: text/plain
Description: Uses the more complex functions of sortableTable
Class: JS Sortable Table
Make HTML tables sortable with clickable headers
Author: By
Last change: fixed bug
Date: 9 years ago
Size: 1,553 bytes


Class file image Download
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Simplest Use</title> <script src=""></script> <script language="javascript" src="../sortableTable.class.js"></script> <link rel="stylesheet" href="../sortableTable.css"/> <style> table, td, th{ border-collapse: collapse; border: 1px solid black; } </style> </head> <body> <button onclick="sTable.init('#sortableTable1')">Initialize Table</button> &nbsp; <button onclick="sTable.sort($('.noSort'), 'up')">Sort by the '.noSort' column</button> <br><br> <table id="sortableTable1"> <tr> <th>ID</th> <th>First Name</th> <th>Last Name</th> <th class="noSort">Email</th> </tr> <tr> <td>1</td> <td>George</td> <td>Jones</td> <td></td> </tr> <tr> <td>2</td> <td>Billy</td> <td>Smith</td> <td></td> </tr> <tr> <td>3</td> <td>Jon</td> <td>Dowe</td> <td></td> </tr> <tr> <td>4</td> <td>Billy</td> <td>Jones</td> <td></td> </tr> </table> <br> <p>The Email header contains the class 'noSort', which is why the arrows don't appear on initialization.</p> <script> var sTable = new sortableTable(); </script> </body> </html>