Icontem

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: 4 years ago
Size: 1,553 bytes
 

Contents

Class file image Download
<!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> &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>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>