Minimalist jQuery Table Sort Plugin - tablesort

Just another simple-to-use jQuery table sort plugin which enables the visitor to sort table rows by numbers, strings, times, dates or custom sort types.

Basic usage:

1. Include jQuery library and the jQuery tablesort plugin on the html page.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquery.tablesort.js"></script>

2. Add the class 'sortable' to your table headers to make your table sortable. Add the data type to your table columns using data-sorttype attribute. The default data type is 'string'.

<table class="table table-striped">
  <thead>
    <tr>
      <th>Not Sortable</th>
      <th class="sortable" data-sorttype="number">Number</th>
      <th class="sortable">String</th>
      <th class="sortable" data-sorttype="date">Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>this</td>
      <td>1</td>
      <td>a</td>
      <td>2/3/2015</td>
    </tr>
    <tr>
      <td>column is</td>
      <td>2</td>
      <td>c</td>
      <td>3/4/15</td>
    </tr>
    <tr>
      <td>not sortable</td>
      <td>3</td>
      <td>b</td>
      <td>2015-01-01</td>
    </tr>
  </tbody>
</table>

3. Call the plugin on the table and then you can sort the table rows in ascending and descending by clicking on the table headers.

$("table").tablesort();

4. You can create a custom sort type using regular expressions.

<th class="sortable" data-sorttype="date-range">date range</th>

$("table").tablesort({
sorttypes: {
  "date-range": function (a, b) {
      var am = a.match(/^\d+\/\d+\/\d+/);
      var bm = b.match(/^\d+\/\d+\/\d+/);
      if (am === null || bm === null) {
          return 0;
      }
      var av = new Date(am[0]);
      var bv = new Date(bm[0]);
      if (av < bv) {
          return -1;
      } else if (av > bv) {
          return 1;
      } else {
          return 0;
      }
  }
}
});

5. Default settings.

sorttypes: {
  date: function (a, b) {
    var av = new Date(a);
    var bv = new Date(b);
    if (av < bv) {
      return -1;
    }
    if (av > bv) {
      return 1;
    }
    return 0;
  },
  time: function (a, b) {
    var av, bv;
    var aneg = (a.substring(0, 1) === "-");
    var bneg = (b.substring(0, 1) === "-");
    if (aneg && bneg) {
      av = new Date("2000-01-01 " + b.substring(1));
      bv = new Date("2000-01-01 " + a.substring(1));
    } else if (aneg || bneg) {
      av = +bneg;
      bv = +aneg;
    } else {
      av = new Date("2000-01-01 " + a);
      bv = new Date("2000-01-01 " + b);
    }
    if (av < bv) {
      return -1;
    }
    if (av > bv) {
      return 1;
    }
    return 0;
  },
  number: function (a, b) {
    var av = Number(a.replace(/,/g, ""));
    var bv = Number(b.replace(/,/g, ""));
    if (av < bv) {
      return -1;
    }
    if (av > bv) {
      return 1;
    }
    return 0;
  },
  string: function (a, b) {
    var av = a.toLowerCase();
    var bv = b.toLowerCase();
    if (av < bv) {
      return -1;
    }
    if (av > bv) {
      return 1;
    }
    return 0;
  }
},
initColumn: false,
initDirection: "asc"
},

Change log:

2015-05-20

• added initColumn, initDirection options

---

This awesome jQuery plugin is developed by UziTech. For more Advanced Usages, please check the demo page or visit the official website.