2016-04-28 21 views
0

Ich versuche, den benutzerdefinierten Sortiermechanismus in Datatables zu verstehen. Was ich versuche, ist das Sortieren einer Spalte nach ihrem Wert und dem Wert anderer Spalten (die eine Gruppe enthalten), um eine gruppenweise Sortierung zu erhalten.Benutzerdefinierte (Gruppen-) Sortierung der Spalte in Datatables

Um dies zu tun, kam ich auf der anderen Sortier Plugin: https://datatables.net/plug-ins/sorting/

Nur als Beispiel (könnte eine andere sein) hatte ich einen Blick auf die „anti-das“ Plug-In. Um es zu actvate ich hinzugefügt:

targets = "_all", type = "anti-the" 

zum columnDefs

und verwendet

jQuery.extend(jQuery.fn.dataTableExt.oSort, { 
    "anti-the-pre": function (a) { 
     console.log("pre"); 
     return a.replace(/^the /i, ""); 
    }, 

    "anti-the-asc": function (a, b) { 
     console.log("asc"); 
     return ((a < b) ? -1 : ((a > b) ? 1 : 0)); 
    }, 

    "anti-the-desc": function (a, b) { 
     console.log("desc"); 
     return ((a < b) ? 1 : ((a > b) ? -1 : 0)); 
    } 
}); 

Der Plan ist, diese drei Funktionen zur Anpassung an die gewünschte gruppiert Sortierung zu erhalten.

  1. Interessanter „pre“ sich auf die Konsole jedesmal gedruckt werden, wenn die Tabellenüberschrift (und der Tisch gegriffen wird) angeklickt wird. Ich erwartete, dass "asc" und "desc" ebenfalls gedruckt werden (in alternierender Reihenfolge), aber nichts wird gedruckt, warum?

  2. Ist dies der richtige Ansatz, um das gewünschte Ergebnis der gruppierten Sortierung zu erhalten oder muss ich meinen eigenen "orderDataType" definieren, um dies zu erreichen?

Edit:

Nur um die Dinge etwas klarer: Nehmen wir an, ich habe eine Tabelle, die Informationen/Spalten über „Abteilung“ enthalten und „Boden“ Beim Sortieren „Boden“ Ich d wie es für jede Abteilung

vor dem sortieren sortiert für Boden werden: | Abteilung | Boden

|

| IT | 2 |

| IT | 1 |

| Verkauf | 1 |

| Verkauf | 2 |

nach Klick auf header ("Boden" -> auf)

| IT | 1 |

| IT | 2 |

| Verkauf | 1 |

| Verkauf | 2 |

Klick wieder (ab)

| IT | 2 |

| IT | 1 |

| Verkauf | 2 |

| Verkauf | 1 |

in den Daten Ich habe da keine Mischung zwischen Gruppen SIND (hier: Abteilungen) -> Zeilen für die gleiche Abteilung miteinander

+0

Wenn Sie beide Spalten anzeigen, können Ihre Benutzer zwei Spalten bestellen, indem Sie einfach die Umschalttaste drücken und auf die Kopfzeile klicken. In diesem Fall ist keine benutzerdefinierte Sortierung erforderlich. – DKSan

Antwort

1

nächste werden, wie Sie eine groupwise Sortierung von Daten zu tun versuchen i würde empfehlen, dass Sie Datatables "orthogonale Daten" in Kombination mit HTML5-Daten verwenden - * Attribute

Wie Sie hier lesen können (Datatables Website - Orthagonal Data - HTML5) mit dem benutzerdefinierten Attribut data-order sollte Ihre Waffe der Wahl sein.

Zum Beispiel:

Sie mögen Gruppe department und floor aber nur department den Benutzer zeigen. Dieses Beispiel soll zeigen Sie die gewünschte Ausgabe

(Die floornumber im Namen Zelle ein Helfer ist, die richtige Reihenfolge zu visualisieren und kann entfernt werden)

<table id="myTestTable" class="display"> 
    <thead> 
     <tr> 
      <th>Department</th><th>Surname</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td data-order="it 1">IT</td> <td>Daniel (1)</td> 
     </tr> 
     <tr> 
      <td data-order="sales 2">sales</td> <td>Sue (2)</td> 
     </tr> 
     <tr> 
      <td data-order="it 1">IT</td> <td>John (1)</td> 
     </tr> 
     <tr> 
      <td data-order="it 2">IT</td> <td>Mr. Miyagi (2)</td> 
     </tr> 
     <tr> 
      <td data-order="sales 2">sales</td> <td>Mel (2)</td> 
     </tr> 
     <tr> 
      <td data-order="sales 1">sales</td> <td>Marc (1)</td> 
     </tr> 
    </tbody> 
</table> 
<script> 
    $('#myTestTable').dataTable(); 
</script> 

Edit:

Die Sortierung in der ersten Beispiel wäre für Stockwerke 10 und höher falsch. Es wäre 1, 10, 2, 3, 4 und so weiter, weil Datentabellen streng die Zeichenfolge sortieren würden.

dieses Problem adressieren eine Sortier Plugin natural sorting auf der Website Datentabellen genannt wird.Wenn Sie diesen Code hinzufügen und { columnDefs: [ { type: 'natural' , targets: 0 } ] } zu der Tabellendefinition hinzufügen, wird die Sortierung auf einen weiteren human Weg korrigiert.

+0

Schöne Idee, aber ich würde gerne den Typ der angeklickten Spalten verwenden. Wenn Sie Ihren Ansatz verwenden, wird die IT in Floor 11 (Datenreihenfolge = "it 11") vor IT auf Floor 2 ("it 2") bestellt, oder? –

+0

Ja würde es. In diesem Fall müssten Sie orthogonale Daten und benutzerdefinierte Sortierung kombinieren. – DKSan

+0

irgendwelche Hinweise, wo/wie zu starten? (Übrigens habe ich in der ursprünglichen Frage noch einige Infos hinzugefügt, um das Problem ein wenig klarer zu machen) –

Verwandte Themen