jQuery DataTables Spalte "Rendern" Daten

Ich bin mit der jQuery DataTables zur Anzeige von Informationen, die aus JSON-kodierte PHP-Antwort. Die JSON-Antwort enthält das Objekt "name". "name" enthält "Vollständiger Name", "Nachname", "ID". Ich habe mit columns zum anzeigen der Daten, wie ich will, aber habe ich lief in ein problem, das ich nicht herausfinden können.

In den folgenden code Beispiel 1 funktioniert gut und die Anzeige "Full Name", während die Sortierung nach "Nachname". Jedoch, Beispiel 2 funktioniert nicht. Die gewünschte Ausgabe wäre mit HTML gerendert angezeigt und sortiert nach "Nachnamen". In Beispiel 3 der Anzeige gerendert wird, die Art, wie ich es gerne hätte, aber nicht richtig sortiert ist.

Weiß jemand wie man das einstellen Beispiel 2 ausgeben, was ich Suche (gerendert und sortiert Daten)?

var oTable = $('#table').DataTable({
'ajax': {
    url: 'PHP-file-returns-JSON.php',
    type: "POST",
    dataSrc: function ( data ) {
            return data.cols;
        },       
    data: function(d) {

       ///send additional values to POST
       var frm_data = $('#val1, #val2').serializeArray();
       $.each(frm_data, function(key, val) {
             d[val.name] = val.value;
       });
     }
},
'columns':[

        //exapmle 1 - works but not rendered with HTML
        { data: {
                _:    "name.Full Name",
                sort: "name.Last Name",
                } 
        },

        //example 2 not working at all
        { data: 'name', "render": function ( data, type, row ) {
                return '<span id="'+data.ID+'">'+data.Full Name+'</span>';
            },
            "sort" : "name.Last Name",
        },

        //example 3 works fine with HTML rendered display but not sorted
        { data: 'name', "render": function ( data, type, row ) {
                return '<span id="'+data.ID+'">'+data.Full Name+'</span>';
            } 
        },
]
});

UPDATE:

HIER ist das JSFiddle zeigt, dass die Daten-Struktur, mit dem ich arbeite. Das Beispiel zeigt nur den Vollständigen Namen nach dem Nachnamen sortiert. Ich bin versucht, herauszufinden, wie man die Anzeige enthält ein span-element mit der ID als id-Attribut.

von allen Beispielen, die ich gefunden, das problem ist, dass zu ermöglichen, um von datatables Sie es nicht schaffen, alle extra-tag in der Zelle, also warum Sie versuchen, fügen Sie einfach die id an den td und nicht mit dem span?, bei deinem Beispiel 1
Könnten Sie arbeiten, eine einfache JSFiddle zu veranschaulichen, Ihren Fall bitte? Hat deine Tabelle habe mit 3 Spalten, zum Beispiel? Sie können die mock-ajax zurück, die nur mit einem einfachen JSON-Objekt als Datenquelle.
Ich bin mir nicht sicher, wie Sie Sie einrichten eine JSON-Antwort mit JSFiddle. Allerdings ist mein code-Beispiel sollte nur die Anzeige einer Spalte mit dem vollständigen Namen als HTML gerendert. Ich zeigte einfach die 3 Beispiele, damit die Menschen eine bessere Vorstellung von dem, was ich versuche zu tun.

InformationsquelleAutor Austin | 2017-02-01

Stellt sich heraus, dass die Verwendung name.Full Name wird nicht funktionieren. Es muss name.FullName ohne den Raum. Hier ist, was schließlich für mich arbeiten.

  'columns': [
        { 
            "data": "name",                   
            "render": function ( data, type, row ) {
                if(type === 'display'){
                    return '<span id="'+data.ID+'">'+data.FullName+'</span>';
                }else if(type === 'sort'){
                    return data.LastName;
                }else{
                    return data;
                }
            }
        }
   ]

InformationsquelleAutor Austin

-1

Wenn Sie brauchen, um die Spalte zu Sortieren, die auf den letzten Namen dieser arbeiten soll:

$.extend($.fn.dataTableExt.oSort, {
  "last-name-pre": function(a) {
    return $(a).data("lastname");
  },
  "last-name-asc": function(a, b) {
    return ((a < b) ? -1 : ((a > b) ? 1 : 0));
  },
  "last-name-desc": function(a, b) {
    return ((a < b) ? 1 : ((a > b) ? -1 : 0));
  }
});


$("#example").DataTable({
  "data": data,
  "columns": [{
    "title": "Full Name",
    "data": "Full Name",
    "render": function(data, type, row) {
      return $("<span></span>", {
        "text": data,
        "data-lastname": row["Last Name"]
      }).prop("outerHTML");
    },
    "type": 'last-name'
  }]
});

Es funktioniert hier. Man könnte Sie auch entfernen Sie die render-Funktion und passen nur die last-name Funktion zum aufteilen des vollständigen namens und der Rückkehr der letzten name:

$.extend($.fn.dataTableExt.oSort, {
  "last-name-pre": function(a) {
    return a.split(" ")[1];
  },
  "last-name-asc": function(a, b) {
    return ((a < b) ? -1 : ((a > b) ? 1 : 0));
  },
  "last-name-desc": function(a, b) {
    return ((a < b) ? 1 : ((a > b) ? -1 : 0));
  }
});


$("#example").DataTable({
  "data": data,
  "columns": [{
    "title": "Full Name",
    "data": "Full Name",
    "type": 'last-name'
  }]
});

Ist hier. Hoffe, das hilft, und dass ich verstanden habe deine Anforderungen richtig.

Ich fügte hinzu, ein Beispiel der Datenstruktur, mit dem ich arbeite. Ich versuchte Ihren code verwenden, aber ich konnte es nicht zu funktionieren.
Versuchen Sie dies: jsfiddle.net/annoyingmouse/k4gtbm1L
"data" nur kann ich Full Name. Es wird nicht lassen Sie mich hinzufügen, eine HTML-Formatierung. Ich bin auf der Suche für die Anzeige zu Rendern als: <span id="'+ID+"'>'+Full Name+'</span>'
Versuchen Sie es erneut aktualisiert, die JSFiddle für die Ausgabe der richtigen span. Hoffe, das hilft.

InformationsquelleAutor annoyingmouse

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.