<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Simplest Use</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></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>
<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>123jones.george@example.com</td>
</tr>
<tr>
<td>2</td>
<td>Billy</td>
<td>Smith</td>
<td>smith.billy@example.com</td>
</tr>
<tr>
<td>3</td>
<td>Jon</td>
<td>Dowe</td>
<td>jon.dowe@example.com</td>
</tr>
<tr>
<td>4</td>
<td>Billy</td>
<td>Jones</td>
<td>jones.billy@example.com</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>
|
Download
