Отображение вложенных объектов в DataTables

Question

[ 
{ 
    "name": "Tiger Nixon", 
    "position": "System Architect", 
    "salary": "$320,800", 
    "start_date": "/Date(1429653550233)/", 
    "IssueList": null 
}, 
{ 
    "name": "Tiger Nixon 1", 
    "position": "System Architect 1", 
    "salary": "$420,800", 
    "start_date": "2011/04/25", 
    "IssueList": [ 
     { 
      "Number": 1, 
      "IssueDate": "/Date(1429653550233)/", 
      "Issue": "Lots of Problems" 
     }, 
     { 
      "Number": 2, 
      "IssueDate": "/Date(1429185060000)/", 
      "Issue": "Lots of Problems here too" 
     } 
    ] 
}, 
{ 
    "name": "Tiger Nixon 2", 
    "position": "System Architect 2", 
    "salary": "$520,800", 
    "start_date": "2011/04/25", 
    "IssueList": [ 
     { 
      "Number": 3, 
      "IssueDate": "/Date(1429653550233)/", 
      "Issue": "Lots of Problems" 
     }, 
     { 
      "Number": 4, 
      "IssueDate": "/Date(1429185060000)/", 
      "Issue": "Lots of Problems here too" 
     } 
    ] 
}, 
{ 
    "name": "Tiger Nixon 3", 
    "position": "System Architect 3", 
    "salary": "$620,800", 
    "start_date": "2011/04/25", 
    "IssueList": null 
} 

]

Я хочу, чтобы отобразить над JSON в «DataTables». Вложенные объекты в IssueList должны отображаться в виде дочерней таблицы внутри основной таблицы, когда пользователь нажимает на строку.

Как это можно сделать в «Таблицах данных»? Я очень новичок в «DataTables» и JavaScript и ценю вашу помощь.

Answer 1

Я не уверен на 100%, что буду использовать Datatables таким образом. Я сделал что-то подобное, но вместо добавления таблицы в ячейку я добавил список определений ... Я думаю, что в противном случае вы рискуете сделать таблицу довольно занятой.

Но если вы уверены, что это так, как вы хотите идти, я бы смотреть на вызов визуализации на колонке и дают это функция для создания таблицы ... или дл ...

$("#myTable").DataTable({ 
    "data": data, 
    "columns": [ 
     { 
      "title": "Name", 
      "data": "name" 
     }, { 
      "title": "Position", 
      "data": "position" 
     }, { 
      "title": "Salary", 
      "data": "salary" 
     }, { 
      "title": "Start Date", 
      "data": "start_date" 
     }, { 
      "title": "Issue List", 
      "data": "IssueList", 
      "render": function(d){ 
       if(d !== null){ 
        var table = "<table>"; 
        $.each(d, function(k, v){ 
         table += "<tr><td>" + v.Issue + "</td><td>" + v.IssueDate + "</td><td>" + v.Number + "</td></tr>"; 
        }); 
        return table + "</table>"; 
       }else{ 
        return ""; 
       } 
      } 
     } 
    ] 
}); 

Working Example