Skip to content

Home

Jump to bottom
aodin edited this page Mar 21, 2024 · 2 revisions

An example usage using https://www.jsdelivr.com:

<!doctype html>
<html>
  <head>
    <title></title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aodin/tablesorter@1.1.0/dist/styles.min.css">
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col">
          <table id="table1" class="table tablesorter">
            <thead>
              <tr>
                <th>Name</th>
                <th>Value</th>
                <th data-type="numeric">Data</th>
                <th class="no-sort">No Sort</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>b</td>
                <td>1.3</td>
                <td data-value="-10">negative 10</td>
                <td>a</td>
              </tr>
              <tr>
                <td>z</td>
                <td>-40</td>
                <td data-value="1.3">one point 3</td>
                <td>b</td>
              </tr>
              <tr>
                <td>A</td>
                <td>4022424</td>
                <td data-value="4022424">4.022424 * 10**6</td>
                <td>c</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/@aodin/tablesorter@1.1.0/dist/tablesorter.min.js"></script>
  <script>
const elem = document.getElementById("table1");
const table = new tablesorter.Table(elem);
elem.addEventListener("sort", evt => {
  console.log(evt.detail);
});
table.sortAsc(1)
  </script>
</html>
Clone this wiki locally