JavaScript Tablesort Example

03/01/2022

TableSort Example

Docs


Include the table sort files in your HTML file:

<!-- core -->
<script type="text/javascript" src="tablesort.min.js"></script>

<!-- additional libraries -->
<script type="text/javascript" src="tablesort.date.min.js"></script>
<script type="text/javascript" src="tablesort.number.min.js"></script>

Setup your html table:

<table class="table table-bordered table-hover table-condensed" id="mytable">
    <thead>
      <tr>
          <th data-sort-method="number">id</th>
          <th>first_name</th>
          <th>last_name</th>
          <th>email</th>
          <th data-sort-method="date">date</th>
          <th data-sort-method="number">amount</th>
      </tr>
    </thead>

    <!-- tbody rows -->
</table>

In your personal JavaScript file execute:

new Tablesort(document.getElementById('table'));

Then, you can click on a table column header and it will sort by that.

© 2024 by Ryan Rickgauer