How to create jQuery datatable with multiple child rows(nested table)?

Question

Question: I need to create a table with a nested table format. When a user clicks plus button it should show the nested table. If they click minus button it should hide.

I have done jquery datatable its working fine. but I'm not able to display multiple rows for child table. I have tried so many times I'm not able to display proper format.

This is the link I have referred to create a table https://datatables.net/examples/api/row_details.html

Database: Actual data coming from the database as per the below format and I have converted JSON format to display :

C# Code:

 return new JsonResult { Data = new { data = test }, JsonRequestBehavior = 
JsonRequestBehavior.AllowGet };

I need an output like this with a nested table:

UI CODE:

/* Formatting function for row details - modify as you need */
 function format ( d ) {
   // `d` is the original data object for the row
  return '<table cellpadding="5" cellspacing="0" border="0" style="padding- 
left:50px;">'+
      '<tr>' +
            '<td>City Name</td>' +
            '<td>Permission</td>' +
        '</tr><tr>' +
            '<td>' + d.City+ '</td>' +
            '<td>' + d.Permission+ '</td>' +
        '</tr>' +
'</table>';
}

$(document).ready(function() {
var table = $('#example').DataTable( {
    "ajax": "../ajax/data/objects.txt",
    "columns": [
        {
            "className":      'details-control',
            "orderable":      false,
            "data":           null,
            "defaultContent": ''
        },
        { "data": "UserName" },
        { "data": "Email" },
        { "data": "UserId" },

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

JSON FORMAT:

{"data":[
{"UserId":"ABC","UserName":"Peter","Email":"[email protected]","CityName":"Chennai","Permission":"Manager,LocalUser"},
{"UserId":"ABC","UserName":"Peter","Email":"[email protected]","CityName":"Bangalore","Permission":"Admin,LocalUser"},
{"UserId":"xyz","UserName":"Haiyan","Email":"[email protected]","CityName":"Bangalore","Permission":"LocalUser"},
{"UserId":"xyz","UserName":"Haiyan","Email":"[email protected]","CityName":"Chennai","Permission":"LocalUser,Manager"}]}

Technology used: ASP.Net MVC5

Any other way I'm ready to use either linq or modify JSON data format.

Solution

You can give Id to your child table like this

function format ( d ) {
   // `d` is the original data object for the row
  return '<table id="childtable" cellpadding="5" cellspacing="0" border="0" style="padding- 
left:50px;">'+
      '<tr>' +
            '<td>City Name</td>' +
            '<td>Permission</td>' +
        '</tr><tr>' +
            '<td>' + d.City+ '</td>' +
            '<td>' + d.Permission+ '</td>' +
        '</tr>' +
'</table>';
}

and do the same thing which you did for your parent table

var childTable = $('#childtable').DataTable( {
    "ajax": "../ajax/data/objects.txt",
    "columns": [

    ],
    "order": [[1, 'asc']]
} );

bind your json object in columns section.

Comments

[SENA]

Hi @Tech Yogesh. Thanks for your reply. My question is how to relate the parent table to the child table. I want to show related parent details into child table. If i follow your steps where is the relation(link)?

[Neeraj]

yes, same question, where is the parent and child table link? @SENA why do you accept this answer if not satisfied with your question.