2016-07-27 19 views
1

Ich benutze dieses Plugin auf Python.jquery tablesorter benutzerdefinierte Reihenfolge

Ist es möglich, eine Spalte nach einer benutzerdefinierten Sequenz zu sortieren?

In der quality Spalte kann ich nur haben: "niedrig", "mittelmäßig", "gut", "groß" und ich möchte auf diese Weise bestellt (oder umgekehrt).

In der Name Spalte I (von der Ansicht) ein custum Auftrag haben, aber ich möchte die Möglichkeit geben, in alphabetischer Reihenfolge zu bestellen und dann wieder auf die ursprüngliche Reihenfolge ...

Mein 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) 

Mein 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> 

Mein script-jquery:

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

Edit:

Eine letzte Frage:

ich die Datei herunterladen und in static/js dekomprimiert, dann habe ich im Kopf meiner Vorlage schreiben:

<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" %}"> 

Damit sie funktionieren Ich muss den Namen der Themen von theme.# zu theme-# ändern und in meinem script-jquery.js hinzufügen:

theme : 'blue', 

Nur 'blau', nicht 'themenblau'. Es funktioniert, aber vielleicht mache ich etwas falsch.

+0

Wollen Sie die Spalte auf dem Server oder Client-Seite bestellen? – Mottie

+0

Auf der Client-Seite. – fabio

+1

Sie müssen einen Parser hinzufügen - [siehe Dokumentation] (http://tablesorter.com/docs/example-parsers.html). – Mottie

Antwort

1

die Gabel in dem Kommentar schlug ich meine Probleme auf diese Weise gelöst:

Mein 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' } } 
    }); 

});