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.

Hi Yash, Thanks for the quick reply. The main problem is the child table loop. I will get the data as JSON format. How to make a loop? — SENA
– SENA, Commented Nov 20, 2018 at 10:18
@YashSoni this is the format i'm getting how to do loop for child table? {"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"}]} — SENA
– SENA, Commented Nov 20, 2018 at 10:31
in the above link, look at the third row, it has example of nested rows — Yash Soni
– Yash Soni, Commented Nov 20, 2018 at 10:43

Tech Yogesh · Accepted Answer · 2018-11-20 13:32:19Z

1

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.

answered Nov 20, 2018 at 13:32

Tech Yogesh

4574 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SENA Over a year ago

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 Over a year ago

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

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related