var g_dataFull = [];/* 行详细信息的格式化功能 - 根据需要修改 */函数格式 ( d ) {var html = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;"宽度="100%">';var dataChild = [];var hasChildren = false;$.each(g_dataFull, function(){if(this.parent === d.name){html +='<tr><td>'+ $('<div>').text(this.name).html() + '</td>'+'<td>'+ $('
').text(this.position).html() + ''+'<td>'+ $('
').text(this.office).html() +''+'<td>'+ $('<div>').text(this.salary).html() + '</td></tr>';hasChildren = true;}});如果(！hasChildren){html += '<tr><td>此视图中没有项目.</td></tr>';}html += '</table>';返回html；}$(document).ready(function() {var table = $('#example').DataTable( {阿贾克斯":{"url": "https://api.myjson.com/bins/3mbye",数据源":函数(d){g_dataFull = d.data;var dataParent = []$.each(d.data, function(){if(this.parent === "null"){dataParent.push(this);}});返回数据父级；}},列": [{"className": '细节控制',可订购":假，数据":空，默认内容":''},{数据":名称"}，{数据":位置"}，{数据":办公室"}，{数据":工资"}],顺序":[[1, 'asc']]});//添加打开和关闭细节的事件监听器$('#example tbody').on('click', 'td.details-control', function () {var tr = $(this).closest('tr');var row = table.row( tr );如果(row.child.isShown()){//该行已经打开 - 关闭它row.child.hide();tr.removeClass('显示');}别的 {//打开这一行row.child( 格式(row.data()) ).show();tr.addClass('显示');}});});

td.details-control {背景:url('https://raw.githubusercontent.com/DataTables/DataTables/1.10.7/examples/resources/details_open.png') 无重复中心；光标:指针；}tr.shown td.details-control {背景: url('https://raw.githubusercontent.com/DataTables/DataTables/1.10.7/examples/resources/details_close.png') 无重复中心；}

<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="样式表"/><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script><table id="example" class="display"><头><tr><th></th><th>姓名</th><th>位置</th><th>办公室</th><th>薪水</th></tr></thead><脚><tr><th></th><th>姓名</th><th>位置</th><th>办公室</th><th>薪水</th></tr></tfoot></table>





I have a nested dataset. Few records in the dataset are child to other records in the same dataset. The records that have parent as null do not have any child elements, but ones that has value associated with is will indicate its parent in same dataset. How do I represent this in jQuery Datatable with Parent Child relationship.

I have just manipulated the common dataset to explain my requirements. As in the dataset example below, Record with Name - Tiger Nixon have two child records, which are as seperate records in the same dataset.

An example of how to achieve would be of great help. 
{
  "data": [
    {
      "name": "Tiger Nixon",
      "parent": "null",
      "position": "System Architect",
      "salary": "$320,800",
      "start_date": "2011/04/25",
      "office": "Edinburgh",
      "extn": "5421"
    },
    {
      "name": "Garrett Winters",
      "parent": "Tiger Nixon",
      "position": "Accountant",
      "salary": "$170,750",
      "start_date": "2011/07/25",
      "office": "Tokyo",
      "extn": "8422"
    },
    {
      "name": "Ashton Cox",
      "parent": "null",
      "position": "Junior Technical Author",
      "salary": "$86,000",
      "start_date": "2009/01/12",
      "office": "San Francisco",
      "extn": "1562"
    },
    {
      "name": "Cedric Kelly",
      "parent": "Tiger Nixon",
      "position": "Senior Javascript Developer",
      "salary": "$433,060",
      "start_date": "2012/03/29",
      "office": "Edinburgh",
      "extn": "6224"
    }
]
}






  
SOLUTION

You can use ajax.dataSrc to store original data in g_dataFull and filter and return data containing parents only to be displayed in the main table.

When child row is being in format() function you need to iterate full dataset g_dataFull and find and display rows containing children (this.parent === d.name).

  
DEMO




var g_dataFull = [];

/* Formatting function for row details - modify as you need */
function format ( d ) {
    var html = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;" width="100%">';
      
    var dataChild = [];
    var hasChildren = false;
    $.each(g_dataFull, function(){
       if(this.parent === d.name){
          html += 
            '<tr><td>' + $('<div>').text(this.name).html() + '</td>' + 
            '<td>' +  $('<div>').text(this.position).html() + '</td>' + 
            '<td>' +  $('<div>').text(this.office).html() +'</td>' + 
            '<td>' +  $('<div>').text(this.salary).html() + '</td></tr>';
         
          hasChildren = true;
       }
    });
  
    if(!hasChildren){
        html += '<tr><td>There are no items in this view.</td></tr>';
     
    }
  
 
    html += '</table>';
    return html;
}
 
$(document).ready(function() {
    var table = $('#example').DataTable( {
        "ajax": {
          "url": "https://api.myjson.com/bins/3mbye",
          "dataSrc": function(d){
            
             g_dataFull = d.data;
             var dataParent = []
             $.each(d.data, function(){
                if(this.parent === "null"){
                   dataParent.push(this);  
                }
             });
            
             return dataParent;
          }
        },
         
        "columns": [
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "salary" }
        ],
        "order": [[1, 'asc']]
    } );
     
    // Add event listener for opening and closing details
    $('#example tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );
 
        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }
    } );
} );


td.details-control {
    background: url('https://raw.githubusercontent.com/DataTables/DataTables/1.10.7/examples/resources/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url('https://raw.githubusercontent.com/DataTables/DataTables/1.10.7/examples/resources/details_close.png') no-repeat center center;
}


<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>

<table id="example" class="display">
<thead>
    <tr>
        <th></th>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Salary</th>
    </tr>
</thead>

<tfoot>
    <tr>
        <th></th>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Salary</th>
    </tr>
</tfoot>
</table>