jQuery DataTables rendre les données de la colonne

Je suis en utilisant jQuery DataTables pour afficher les informations du JSON codé en PHP réponse. La réponse JSON contient l'objet "nom". "nom" contient "Nom Complet", "Nom", "ID". J'ai été en utilisant columns pour afficher les données de la façon que je veux, mais, j'ai couru dans un problème que je n'arrive pas à comprendre.

Dans le code ci-dessous l'exemple 1 fonctionne très bien et affiche "Nom Complet" alors que le tri par "Nom de famille". Cependant, l'exemple 2 ne fonctionne pas du tout. La sortie désirée contiendrait rendu au format HTML d'affichage et classés par "Nom de famille". Dans l'exemple 3, l'affichage est rendu la façon dont je le voudrais, mais il n'est pas triés correctement.

Personne ne sait comment régler l'exemple 2, à la sortie de ce que je suis à la recherche d' (rendu et de trier les données)?

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

Mise à JOUR:

ICI est le JSFiddle qui montre la structure de données que je travaille avec. L'exemple montre seulement le Nom Complet triées par ordre de Nom de famille. Je suis en train d'essayer de comprendre comment faire de l'affichage contient un élément span avec l'ID de l'attribut id.

de tous les exemples que j'ai trouvé le problème, c'est que pour permettre à l'ordre de tables de données, ils ne créent aucune balise supplémentaire dans la cellule, alors pourquoi essayez-vous d'ajouter simplement l'id de la td et de ne l'utiliser à la plage?, avec votre exemple 1
Pourriez-vous travailler jusqu'à une simple JSFiddle pour illustrer votre cas d'utilisation, s'il vous plaît? Est-ce que votre tableau de 3 colonnes, par exemple? Vous pouvez vous moquer de l'ajax retour en utilisant simplement un simple objet JSON comme source de données.
Je ne suis pas sûr de savoir comment configurer une réponse JSON avec JSFiddle. Cependant, mon exemple de code ne devrait afficher une colonne contenant le nom complet rendu au format HTML. J'ai juste montré les 3 exemples afin que les gens puissent se faire une meilleure idée de ce que je suis en train de faire.

InformationsquelleAutor Austin | 2017-02-01

S'avère que l'utilisation de name.Full Name ne fonctionnera pas. Il doit être name.FullName sans l'espace. Voici ce qui a fini par travailler pour moi.

  '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

Si vous avez besoin de trier la colonne sur le nom de famille cela devrait fonctionner:

$.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'
  }]
});

Il travaille ici. Vous pouvez également supprimer la fonction rendu et simplement adapter le last-name fonction pour séparer le nom complet et retourner le nom:

$.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'
  }]
});

Qui est ici. Espère que ça aide, et que j'ai bien compris vos besoins correctement.

J'ai ajouté un exemple de la structure de données que je travaille avec. J'ai essayé à l'aide de votre code, mais je ne pouvais pas le faire fonctionner.
Essayez ceci: jsfiddle.net/annoyingmouse/k4gtbm1L
"data" seulement me permet d'utiliser Full Name. Il ne me laisse pas ajouter toute la mise en forme HTML. Je suis à la recherche de l'affichage est rendu comme: <span id="'+ID+"'>'+Full Name+'</span>'
Essayez de nouveau, mis à jour le JSFiddle à la sortie correcte span. Espérons que cela aide.

InformationsquelleAutor annoyingmouse

Vous devez vous connecter pour publier un commentaire.