JS Sortable Table: Make HTML tables sortable with clickable headers

Recommend this page to a friend!
     
  Info   Example   Demos   Screenshots   View files Files   Download Download   Reputation   Support forum   Blog    
Ratings Unique User Downloads Download Rankings
StarStarStarStar 79%Total: 323 All time: 136 This week: 4Up
Version License JavaScript version Categories
sortable-table 2.2GNU General Publi...1.1HTML, jQuery, Utilities and Tools
Description 

Author

Jackson Knowlton

This object can make any HTML table sortable using clickable headers.

It takes a given HTML table element and adds clickable arrow elements to the table headers. Table headers with the noSort class are excluded.

The object can sort the table rows in the ascending or descending order depending on the sort arrow that the user clicks.

The table may also be sorted programatically without requiring the users to click on the headers or even initializing the table by putting on the clickable arrow elements explicitly.

Innovation Award
JavaScript Programming Innovation award nominee
April 2015
Number 2

Prize: One downloadable e-book of choice by O'Reilly		 HTML tables are useful to display listings of records as a grid of rows and columns.

This object can change any table on a Web page, so it allows the user to sort the table by the values of any column when the user clicks on sorting arrow buttons that the object adds to the table.

Manuel Lemos
Picture of Jackson Knowlton
  Performance   Level  
Name: Jackson Knowlton <contact>
Classes: 4 packages by
Country: United States United States
Age: 26
All time rank: 536 in United States United States
Week rank: 6 Up2 in United States United States Up

Level 2 StarStar

 Innovation award
Innovation award
Nominee: 3x

Winner: 1x

Example

<!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>

<table class="sortable">
    <tr>
        <th>ID</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>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>

<script>
    var sTable = new sortableTable();
    sTable.init('.sortable');
</script>
</body>
</html>

  Example 1External page   Example 2External page  
Screenshots (2)  
  • Screenshot
  • Screenshot_2
  Files folder image Files (7)  
File Role Description
Files folder imageexamples (2 files)
Plain text file SortableTable.class.js Class Class source
Accessible without login Plain text file SortableTable.docs.js Doc. Documentation for SortableTable class
Accessible without login Plain text file sortableTable.css Data CSS file

  Files folder image Files (7)  /  examples  
File Role Description
  Accessible without login Plain text file Example1.html Example Basic Usage
  Accessible without login Plain text file Example2.html Example Uses the more complex functions of sortableTable

Downloadsortable-table-2015-07-23.zip 25KB
Downloadsortable-table-2015-07-23.tar.gz 24KB
 Version Control Unique User Downloads Download Rankings  
 0%
Total:323
This week:0
All time:136
This week:4Up
User Ratings User Comments (2)
 All time
Utility:100%StarStarStarStarStarStar
Consistency:100%StarStarStarStarStarStar
Documentation:91%StarStarStarStarStar
Examples:100%StarStarStarStarStarStar
Tests:-
Videos:-
Overall:79%StarStarStarStar
Rank:2
 
very nice code
7 years ago (Superluk)		77%StarStarStarStar
Nice docs
9 years ago (Matthew Knowlton)		80%StarStarStarStarStar
 

  Applications that use this package  
Demonstrates usage on codepen.io

Add link image If you know an application of this package, send a message to the author to add a link here.