jquery tablesorter custom order

Question

I'm using this plugin on python.

Is it possible to make it order a column by a custom sequence?

In the quality column I can have only: 'low', 'mediocre', 'good', 'great' and I want ordered in that way (or reversed).

In the Name column I have (by the view) a custum order but I want to give the possibility to order alphabetically too and then return on the original order...

My views.py:

def aff_list(request):
    context_dict = {}
    lista_aff_a=[]
    lista_aff_s=[]
    for aff in Aff.objects.all():
        if aff.price=='luxury':
            lista_aff_a.append(aff)
        elif aff.price=='cheap':
            lista_aff_s.append(aff)
    lista_aff=lista_aff_a + lista_aff_s   #this way is ordered before lista_aff_a, then lista_aff_s

    context_dict['lista_aff'] = lista_aff

return render(request, 'aff_list.html', context_dict)

My aff_list.html:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="{% static "js/jquery-tablesorter/jquery.tablesorter.js" %}"></script>    
<link rel="stylesheet" href="{% static "css/tablesorter.css" %}" type="text/css" />
<script src="{% static "js/script-jquery.js" %}"></script>

...
<div class="panel panel-default">
    <table id="lista_aff" class="tablesorter table table-hover table table-bordered table table-condensed">
      <thead>
        <tr>
          <th>Name</th>
          <th>Quality</th>
        </tr>
      </thead>

      <tbody>
        {% for aff in lista_aff %}
          <tr>
            <td>
                {{ aff.name }}
            </td>
            <td>
              {{ aff.quality }}                
            </td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
</div>

My script-jquery:

$(document).ready(function() {
  $("#lista_aff").tablesorter();
});

Edit:

A last question:

I download the file and decompressed in static/js, then I write in the head of my template:

<link href="{% static "js/tablesorter-master/css/theme-blue.css" %}" />
<link rel="stylesheet" href="{% static "css/dashboard.css" %}">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="{% static "js/tablesorter-master/js/jquery.tablesorter.js" %}">

To make they work I must change the name of the themes from theme.# to theme-# and add in my script-jquery.js:

theme : 'blue',

Just 'blue', not 'theme-blue'. It works but maybe I'm doing something wrong.

Are you trying to order the column on the server or client side? — Mottie
Thank you. And for the 'name' column? Is it possible to 'reset' the order and see the initial one? — fabio
The original version of tablesorter does not have a reset method built-in. You can check out my fork of tablesorter which has a sortReset option which will reset the sort on the third click. — Mottie
Good, thank you! I solved the problems but I edit my question with another doubt (little, I promise). And if you want you can write an answer so I will accept it. And compliments for your work! — fabio

fabio fabio · Accepted Answer · 2016-07-28T21:08:33

Using the fork suggested in the comment I solved my problems in this way:

My script-jquery:

$.tablesorter.addParser({
  id: 'quality',
  is: function(s) {
    // return false so this parser is not auto detected
    return false;
  },
  format: function(s) {
    // format your data for normalization
    return s.toLowerCase().replace(/great/,0).replace(/good/,1
        ).replace(/mediocre/,2).replace(/low/,3);
  }, 
  // set type, either numeric or text
  type: 'numeric'
});

$(document).ready(function() {

  $("#lista_Aff").tablesorter({    
    theme : 'blue',
    sortReset   : true,
    headers: { 1: { sorter: 'quality' } }
  });

});

jquery tablesorter custom order

1 Answers