2013-03-02 11 views
5

Sto usando Datatables per rappresentare i dati da un JSON. mio JSON è la seguente:Come inserire più dati in una colonna datatable?

[{"name": "John Doe", "email": "[email protected]", "address" : "blah"}] 

In DataTable posso mostrare facilmente questi 3 pezzi di informazioni in 3 colonne diff utilizzando il seguente:

columnDefs = [ 
       { "mData": "name", "aTargets":[0] }, 
       { "mData": "email", "aTargets":[1] }, 
       { "mData": "address", "aTargets":[2] } 
      ]; 

Ma il problema è che voglio mostrare " nome "e" email "nella prima colonna e quindi" indirizzo "nella seconda colonna. Come posso farlo? Per favore guida.

+2

Vedi qui http://www.datatables.net/forums/discussion/13321/mdata-with-function-on-multiple-columns/p1 – PSR

+0

@PSR Grazie per aver mostrato la via. +1 – LittleLebowski

+0

Anche questo è utile: http://stackoverflow.com/questions/19777075/datatables-merge-columns-together –

risposta

11

Piuttosto che inserire il nome o l'e-mail nella prima colonna nella definizione della colonna, è possibile utilizzare una funzione per ottenere e stampare qualsiasi dato desiderato. Vedere la sezione mData in questa pagina per ulteriori dettagli: https://datatables.net/usage/columns. Nel mio esempio qui di seguito uso aoColumns perché ho testato la mia risposta in quel modo; ma nel link di riferimento hanno usato aoColumnDefs e forniscono l'elaborazione sui campi type e dataToSet. Si spera che questo approccio aiuti chiunque a leggere questa risposta sia che si usi aoColumns o aoColumnDefs.

Ad esempio, utilizzando aoColumns anziché aoColumnDefs:

aoColumns = [ 
    { "mData": getNameAndEmail }, 
    { "mData": "address" } 
]; 

Poi definire la funzione getNameAndEmail portata JavaScript che prende tre parametri: i dati passati indietro, il tipo di azione sui dati, e se il tipo è "impostato" quindi i dati da impostare.

function getNameAndEmail(data, type, dataToSet) { 
    return data.name + "<br>" + data.email; 
} 
5

per renderlo più breve, è possibile scrivere in questo modo

"aoColumns": [ 
    { "mData": "i_id" }, 
    { "mData": "i_name" }, 
    { "mData": function (data, type, dataToSet) { 
     return data.i_id + "<br/>" + data.i_name; 
    }} 
], 

e il risultato

enter image description here

Problemi correlati