Sortieren mit Tinysort und Datenattribut

Ich versuche, eine Liste basierend auf Datenattribute mit tinysort zu sortieren.Sortieren mit Tinysort und Datenattribut

Zuerst wird die Liste:

<ul id="late-services" class="list"> 
<li data-service-id="23" data-criticality="1000"> 
    <span>Service 23</span> 
    <span class="list-collapse ui-icon ui-icon-carat-1-s"></span> 
    <span class="service-zone">Cannes</span> 
    <div class="list-item-belly" style="display: none;"> 
     <div>Deadline dans 1 semaine.</div> 
     <div>Le client n'a pas confirmé.</div> 
    </div> 
</li> 
<li data-service-id="22" data-criticality="2000"> 
    <span>Service 22</span> 
    <span class="list-collapse ui-icon ui-icon-carat-1-s"></span> 
    <span class="service-zone">Cannes</span> 
    <div class="list-item-belly" style="display: none;"> 
     <div>Deadline dans 1 semaine.</div> 
     <div>Le client n'a pas confirmé.</div> 
    </div> 
</li> 
<li data-service-id="24" data-criticality="500"> 
    <span>Service 24</span> 
    <span class="list-collapse ui-icon ui-icon-carat-1-s"></span> 
    <span class="service-zone">Cannes</span> 
    <div class="list-item-belly" style="display: none;"> 
     <div>Deadline dans 1 semaine.</div> 
     <div>Le client n'a pas confirmé.</div> 
    </div> 
</li>    
</ul>

Und dann der Anruf an tinysort:

$('ul#late-services>li').tsort('li', {data:'serviceId'});

ich etwas falsch zu machen müssen, aber nicht wissen, was ...

Quelle

2012-03-23 Roubachof

Hiya Arbeits Demo des Codes: http://jsfiddle.net/wJzNE/15/

Aktualisiert: Implementierung mit data: (option) hier:. http://jsfiddle.net/wJzNE/49/ & http://jsfiddle.net/wJzNE/52/ [code] $ ('ul # Late-Dienste> li') tsort (‘ Spanne‘, {data: 'serviceid'});

Hilfreiche Link: http://tinysort.sjeiti.com/

iss ue war 1) innerhalb falsch attr Wert bemerkt und 2) innerhalb tsort kein li bemerken hier den Unterschied erforderlich: $('ul#late-services>li').**tsort({attr:'data-service-id'})**;

HTML

<!DOCTYPE html> 
<html dir="ltr"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script> 
    <script type="text/javascript" src="http://tinysort.sjeiti.com/scripts/jquery.tinysort.js"></script> 


    </head> 
    <body> 
<ul id="late-services" class="list"> 
<li data-service-id="23" data-criticality="1000"> 
    <span>Service 23</span> 
    <span class="list-collapse ui-icon ui-icon-carat-1-s"></span> 
    <span class="service-zone">Cannes</span> 
    <div class="list-item-belly" style="display: none;"> 
     <div>Deadline dans 1 semaine.</div> 
     <div>Le client n'a pas confirmé.</div> 
    </div> 
</li> 
<li data-service-id="22" data-criticality="2000"> 
    <span>Service 22</span> 
    <span class="list-collapse ui-icon ui-icon-carat-1-s"></span> 
    <span class="service-zone">Cannes</span> 
    <div class="list-item-belly" style="display: none;"> 
     <div>Deadline dans 1 semaine.</div> 
     <div>Le client n'a pas confirmé.</div> 
    </div> 
</li> 
<li data-service-id="24" data-criticality="500"> 
    <span>Service 24</span> 
    <span class="list-collapse ui-icon ui-icon-carat-1-s"></span> 
    <span class="service-zone">Cannes</span> 
    <div class="list-item-belly" style="display: none;"> 
     <div>Deadline dans 1 semaine.</div> 
     <div>Le client n'a pas confirmé.</div> 
    </div> 
</li>    
</ul> 


    </body> 
</html>

JqueryCode

$('ul#late-services>li').tsort({attr:'data-service-id'});

Hoffe, das hilft, Prost

Quelle

2012-03-24 00:06:54

Gleicher Kommentar hier, was stimmt nicht mit der Einstellung der Tinysort-Daten? – Roubachof

Ah, okies hier ist die Erklärung (ich habe dieses Plugin nicht viel benutzt, aber was ich gefunden habe): Die Arbeitsdaten finden Sie hier: http://jsfiddle.net/wJzNE/44/ ** Und ** eine andere Implementierung hier: http://jsfiddle.net/wJzNE/49/ so verwendet die winzige Sortierung die .data() -Api Abfrage, um Ihren Text zu finden, aber wenn Sie nicht Ihre Service-ID umschließen, .. in "" (Anführungszeichen) es nicht finden alles, was ich meine Antwort hoffe hoffe JSfiddle helfen Sie besser zu verstehen, Prost –

mmh in Ihrem Beispiel, wenn ich ersetzen $ ('ul # späte-Dienste> li'). tsort ('span', {Daten: 'foo'}) ; Von $ ('ul # späte-Dienste> li'). Tsort ({Daten: 'Dienst-ID'});, es funktioniert nicht besser. – Roubachof

In Ihrem Sollte dieser Fall funktionieren: $ ('ul # späte-Dienste'). tsort ('li', {attr: 'data-service-id'});

Quelle

2012-03-23 23:29:33 dzida

missbrauche ich die "Data" -Einstellung von tinysort? – Roubachof

Antwort

Verwandte Themen