Home HTML & HTML5 Sort HTML Table Without jQuery Library | sorTable.js

Sort HTML Table Without jQuery Library | sorTable.js

HTML & HTML5 webcodeflow · January 28, 2023 · Comments off

sorTable.js is a non-jQuery HTML sorting table that is used to sort table rows by alphabet and number without any dependencies.

Must Read: Sorting HTML Table Vanilla JavaScript Library | Sortable.js

How to make use of it:

Add sorTable’s JS and CSS files to the HTML page.

<link rel="stylesheet" href="css/sorTable.css">
<script src="js/sorTable.js"></script>

Add a CSS class “Sortable” to the existing HTML table.

<table class="sortable">
  <thead>
  <tr>
    <th>No</th>
    <th>Content1</th>
    <th>Content2</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <th>1</th>
    <td>Alpha</td>
    <td>Charlie</td>
  </tr>
  <tr>
    <th>2</th>
    <td>Bravo</td>
    <td>Duff</td>
  </tr>
  <tr>
    <th>3</th>
    <td>Charlie</td>
    <td>Apple</td>
  </tr>
  <tr>
    <th>4</th>
    <td>Delta</td>
    <td>Butter</td>
  </tr>
  </tbody>
</table>