CODEWITHSUNDEEP
javascriptjquerytablesorter
Mason
Mason

Reputation: 1

Disable ascending sort with jQuery tablesorter 2.3

Is it possible to disable ascending sort on the jQuery plugin tablesorter?

I’m trying to get a table header when clicked to either be sorted in descending order or be unsorted and skip the ascending sort.

As a note, other posts I’ve seen talk about initial sort order and lock order, these solutions are not what I am looking for. I want the table to be initially unsorted, and I want the header column to loop between unsorted and sorted descending when clicked.

Thanks in advance.

Upvotes: 0

Views: 50

Answers (1)

Benilson
Benilson

Reputation: 734

According to the jQuery tablesorter documentation for lock sort order:

Columns can be locked using any of the following methods (they all do the same thing), in order of priority (v2.3+):

  • jQuery data data-lockedorder="asc". (equivalent to data-locked-order="asc").
  • metadata class="{ lockedOrder: 'asc'}". This requires the metadata plugin.
  • headers option headers: { 0 : { lockedOrder: 'asc' } }.
  • header class name class="lockedOrder-asc".

You can set the value to desc for descending instead asc for ascending.

$(function() {
  $("table").tablesorter({
    theme : 'blue',
    // pass the headers argument and passing a object
    headers: {
      0: {
        // lock the sort order of the first column to descending
        lockedOrder: 'desc'
      },
      1: {
        // lock the sort order of the second column to descending
        lockedOrder: 'desc'
      }
    }
  });
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/css/theme.blue.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/js/jquery.tablesorter.min.js"></script>
<table class="tablesorter">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th data-lockedorder="desc">Age</th> <!-- added as data-lockedOrder, but the DOM changes it to data-lockedorder -->
      <th>Total</th>
      <th class="lockedOrder-desc">Discount</th>
      <th>Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Peter</td>
      <td>Parker</td>
      <td>28</td>
      <td>$9.99</td>
      <td>20%</td>
      <td>Jul 6, 2006 8:14 AM</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Hood</td>
      <td>33</td>
      <td>$19.99</td>
      <td>25%</td>
      <td>Dec 10, 2002 5:14 AM</td>
    </tr>
    <tr>
      <td>Clark</td>
      <td>Kent</td>
      <td>18</td>
      <td>$15.89</td>
      <td>44%</td>
      <td>Jan 12, 2003 11:14 AM</td>
    </tr>
    <tr>
      <td>Bruce</td>
      <td>Almighty</td>
      <td>45</td>
      <td>$153.19</td>
      <td>44%</td>
      <td>Jan 18, 2001 9:12 AM</td>
    </tr>
    <tr>
      <td>Bruce</td>
      <td>Evans</td>
      <td>22</td>
      <td>$13.19</td>
      <td>11%</td>
      <td>Jan 18, 2007 9:12 AM</td>
    </tr>
  </tbody>
</table>

Upvotes: 0

Related Questions