Sortierung jquery Tables auf JSON-Objekt-Eigenschaft - mit Orthogonal Daten

Question

mit richtigem UI-Code aktualisiert - benutzerdefinierten Rendering unter Verwendung orthogonale Daten

Ich arbeite mit MVC C# im Rahmen 4.5.1 und ich bin ein Problem mit Erstellen benutzerdefinierter Sortierungen innerhalb einer Tabelle mit jquery-Datatabellen 1.10.7. Bootstrap wird auch innerhalb des Projekts verwendet.

Am Anfang funktionierte alles wie erwartet, aber das änderte sich, als ich mich entschied, eine Spalte benutzerdefiniert zu rendern, um ein Bild anzuzeigen. Das Bild wird zwar gut gerendert, aber die Sortierung funktioniert für diese neue Spalte überhaupt nicht. Der JSON, der als Datenquelle für diese Spalte zurückgegeben wird, ist ein Objekt mit drei Eigenschaften: Process.Id, Process.Description und Process.ImageUrl. Die Sortierung sollte basierend auf der Process.Id funktionieren. Das Rendern erstellt nur ein Bild-Tag und es gibt eine Logik darin, dem Titel dynamisch einige Informationen hinzuzufügen. Das letzte Rendern erstellt einen Schaltflächenlink, um weitere Details anzuzeigen.

Hier ist die Datentabelle Initialisierung meiner Meinung nach, die während doc bereit genannt wird:

UPDATE: columnDefs aktualisiert wurde richtig zu machen, wenn ich den benutzerdefinierten Sortierwert oder den Image-Tag benötigen.

function LoadDataTable() { 
    table = $('#accountsRequests').DataTable(
     { 
      "destroy": true, 
      "processing": true, 
      "ajax": 
       { 
        "type": "GET", 
        "url": "@Url.Action(MyActionName, MyControllerName)" 
       } 
      , "paging": true 
      , "columns": [ 
       { "data": "UserId" }, 
       { "data": "Process", title: "Status" }, 
       { "data": "LastName", "title": "Last Name" },     
       { "data": "UserId" } 
      ] 
      , "columnDefs": [ 
       { 
        "targets": 0, // hiding first column, userId 
        "visible": false, 
        "searchable": false, 
        "sortable": false 
       }, 
       { 
        "targets": 1, 
        "render": function (data, type, row) { 
         var element = "<img id='status_" + row["UserId"] + "' src='" + data["ImageUrl"] + "' data-order='" + data["Id"] + "' data-sort='" + data["Id"] + "' title='" + data["Description"] + ""; 

          if (type === "sort" || type === 'type') { 
           return data["Id"]; 
          } 
          else { 
           if (data["Id"] == "2") // add in-process name 
           { 
            var userId = row["ProcessUserId"].trim(); 
            element = element + " by " + userId; 
           } 
           return element + "'/>"; 
          }       }, 
        "searchable": false, 
        "sortable": true 
       },        
       { 
        "targets": 3, 
        "render": function (data, type, row) { 
         return "<a class='btn btn-default' role='button' href=\"@Url.Action(MyOtherAction, MyController)?userId=" + row["UserId"] + "\">View Details</a>" 
        }, 
        "searchable": false, 
        "sortable": false 
       } 
      ]   
     }); 
} 

Und das ist, wie es auf der Benutzeroberfläche aussieht:

Hier ist die Prozessobjektdefinition:

habe ich versucht, um dynamisch die Daten hinzufügen -sort und Daten-Reihenfolge HTML5-Attribute in meine Render-Anweisung, aber das scheint nichts zu tun. Dies fügt diese Attribute dem Bild selbst hinzu, das für das Sortieren möglicherweise nicht gültig ist.

Ich habe auch versucht, die createCell Callback-Funktion zu verwenden, die unten gezeigt wird und die überhaupt nicht funktioniert, egal was ich dort hineinlege. In meinem Beispiel versuche ich als schnellen Test, ALLEN Zellen etwas hinzuzufügen. Und ich bekomme nichts.

Nur um sicherzustellen, dass dies wie erwartet funktioniert, habe ich eine createRow-Funktion eingefügt, nur um sicherzustellen, dass. Ich habe schon früher damit gearbeitet, also wusste ich, wie es aussehen sollte, wenn ich arbeite. Funktioniert. Boooyah!

Hier ist die Ausgabe, die zeigt, dass die Funktion createdRow funktioniert, aber nichts für die createdCell.

Also, was mache ich falsch, und wie kann ich die Sortier Eigenschaft hinzufügen, die ich (die Process.Id) wollen, unabhängig davon, was tatsächlich angezeigt wird? Kann ich der Spaltendefinition eine Sortiereigenschaft hinzufügen? Ich habe etwas Ähnliches gesehen, aber ich bin mir nicht sicher. Jede Hilfe wird geschätzt! Bitte lassen Sie mich wissen, wenn in den obigen Erklärungen eine Klarstellung erforderlich ist.

Answer 1

Das Problem, das mir fehlte, ist die Tatsache, dass die RENDER-Funktion (ob in Column oder ColumnDefs) je nach TYPE (Sortieren, Anzeigen, Typ) mehrfach aufgerufen werden kann. Innerhalb der RENDER-Funktion musste ich Logik hinzufügen, die den Wert zurückgibt, den ich für den gegebenen Typ benötige, der gerendert wird.Wenn ich den benutzerdefinierten Sortierwert (die ID und nicht das benutzerdefinierte Bild-Tag) haben möchte, stelle sicher, dass ich Logik zum Rendern des SORT-Typs habe (und ich denke, auch TYPE = 'type'). Rendern Sie andernfalls meinen benutzerdefinierten IMG, den ich benötige. Einfach richtig?

Hier ist der neue Code, der die Sortierung und die Anzeige richtig behandelt, wie ich es benötige. Überprüfen Sie den Typ und das tun, was Sie brauchen, um ...

{ 
        "targets": 1, 
        "render": 
         function (data, type, row) { 
          var element = "<img id='status_" + row["UserId"] + "' src='" + data["ImageUrl"] + "' title='" + data["Description"] + ""; 

          if (type === "sort" || type === 'type') { 
           return data["Id"]; 
          } 
          else { 
           if (data["Id"] == "2") // add in-process name 
           { 
            var userId = row["ProcessUserId"].trim(); 
            element = element + " by " + userId; 
           } 
           return element + "'/>"; 
          } 
         }, 
        "searchable": false, 
        "sortable": true, 
       },