# tablesorter

## Sort table using a link outside the table

### Flexible client-side table sorting

Back to documentation

# Demo

NOTE!

- In v2.23.0, the direct sorton method was added with callback. See the "Toggle sort (Next)" block for an example.
- In v2.22.0, a "click" event can be triggered on the header cell to toggle the sort.
- In v2.17.0, added sorton values (a)scending, (d)escending, (n)ext, (s)ame & (o)pposite. Use the demo below help understand how to use these settings.
- In v2.9, a "sort" event can be triggered on the header cell to toggle the sort.

### Sort Ascending/Descending

Use `0` or `"a"` for ascending sorts, and `1` or `"d"` for descending sorts*
(`[[0,0]]`)
(`[[0,"a"],[1,"d"]]`)
(`[[0,1]]`)
(`[[0,"d"],[1,"a"]]`)

    $("#table1").trigger("sortReset");

* `"a"` & `"d"` values added v2.17.0.

First Name | Last Name | Age | Total | Discount | Date
--- | --- | --- | --- | --- | ---
Peter | Parker | 28 | $9.99 | 20% | Jul 6, 2006 8:14 AM
John | Hood | 33 | $19.99 | 25% | Dec 10, 2002 5:14 AM
Clark | Kent | 18 | $15.89 | 44% | Jan 12, 2003 11:14 AM
Bruce | Almighty | 45 | $153.19 | 44% | Jan 18, 2001 9:12 AM
Bruce | Evans | 22 | $13.19 | 11% | Jan 18, 2007 9:12 AM

### Toggle sort (Next)

Either trigger a `"sort"` on the desired column, or `"sorton"` on the table using the `"n"` value*.
Toggle the
option (`false`), then try these sorts (click a third time).
Trigger "sort" event:
(v2.9)

    $("#table2").find("th:contains(Discount)").trigger("sort");

Trigger "sorton" event using the direct method:
(v2.23)

    $.tablesorter.sortOn( $("#table2")[0].config, [ [1,"n"] ], function() {
      console.log("done"); /* callback after sort */
    });

(`[[0,"n"]]`)
(`[[0,"n"],[1,"n"]]`; columns are independent)

    $("#table2").trigger("sortReset");

* `"n"` value added v2.17.0.

First Name | Last Name | Age | Total | Discount | Date
--- | --- | --- | --- | --- | ---
Peter | Parker | 28 | $9.99 | 20% | Jul 6, 2006 8:14 AM
John | Hood | 33 | $19.99 | 25% | Dec 10, 2002 5:14 AM
Clark | Kent | 18 | $15.89 | 44% | Jan 12, 2003 11:14 AM
Bruce | Almighty | 45 | $153.19 | 44% | Jan 18, 2001 9:12 AM
Bruce | Evans | 22 | $13.19 | 11% | Jan 18, 2007 9:12 AM

### Sort Same/Opposite

The same (`"s"`) or opposite (`"o"`) sort values always set the column sort based on the primary column*.
Toggle the
option (`false`), then try these sorts (click a third time).
(`[[0,"s"]]`; always defaults to Asc sort if set on primary column)
(`[[0,0],[1,"s"]]`)
(`[[0,1],[1,"s"]]`)
(`[[0,"n"],[1,"s"]]`)
(`[[0,"n"],[1,"o"]]`)
(`[[0,"n"],[1,"o"],[2,"n"]]`)
(`[[0,"n"],[1,"o"],[2,"s"]]`)
(`[[0,"n"],[1,"o"],[2,"s"],[3,"o"]]`)

    $("#table3").trigger("sortReset");

* `"s"` & `"o"` values added v2.17.0.

First Name | Last Name | Age | Total | Discount | Date
--- | --- | --- | --- | --- | ---
Peter | Parker | 28 | $9.99 | 20% | Jul 6, 2006 8:14 AM
John | Hood | 33 | $19.99 | 25% | Dec 10, 2002 5:14 AM
Clark | Kent | 18 | $15.89 | 44% | Jan 12, 2003 11:14 AM
Bruce | Almighty | 45 | $153.19 | 44% | Jan 18, 2001 9:12 AM
Bruce | Evans | 22 | $13.19 | 11% | Jan 18, 2007 9:12 AM