2013-03-02 19 views
5

Używam Datatables do reprezentowania danych z JSON. Moje JSON jest następująca:Jak umieścić wiele danych w kolumnie danych?

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

W DataTables mogę łatwo pokazać te 3 kawałki informacji w 3 diff kolumnami przy użyciu następujących:

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

Ale problem jest, że chcę, aby wyświetlić " nazwa "i" e-mail "w pierwszej kolumnie, a następnie" adres "w drugiej kolumnie. Jak mogę to zrobić? Proszę przewodnika.

+2

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

+0

@PSR Dzięki za pokazanie drogi. +1 – LittleLebowski

+0

Ten jest również pomocny: http://stackoverflow.com/questions/19777075/datatables-merge-columns-together –

Odpowiedz

11

Zamiast umieszczać nazwisko lub adres e-mail w pierwszej kolumnie w definicji kolumny, można użyć funkcji, aby uzyskać i wydrukować dowolne dane. Zobacz sekcję mData na tej stronie, aby uzyskać więcej informacji: https://datatables.net/usage/columns. W moim przykładzie poniżej używam aoColumns, ponieważ przetestowałem swoją odpowiedź w ten sposób; ale w odsyłaczu do odsyłacza użyli aoColumnDefs i zapewnili opracowanie na polach type i dataToSet. Takie podejście powinno pomóc każdemu, kto czyta tę odpowiedź, niezależnie od tego, czy używasz aoColumns, czy aoColumnDefs.

Na przykład, używając aoColumns zamiast aoColumnDefs:

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

Następnie zdefiniować funkcję getNameAndEmail w zakresie JavaScript, który pobiera trzy parametry: dane przekazane z powrotem, rodzaj działania na danych, a jeżeli rodzaju jest "ustawiony", a następnie dane do ustawienia.

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

aby uczynić go bardziej krótki, można napisać go jak ten

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

a wynik

enter image description here

Powiązane problemy