Json 如何创建具有多个子行（嵌套表）的jQuery数据表？

问题： 我需要创建一个嵌套表格格式的表格。当用户单击加号按钮时，应显示嵌套表。如果他们点击减号按钮，它应该隐藏

我已经完成了jQueryDataTable，它工作得很好。但我无法为子表显示多行。我尝试了很多次，但都无法显示正确的格式

这是我提到的创建表的链接

数据库： 实际数据来自以下格式的数据库，我已将JSON格式转换为显示：

C#代码：

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

我需要这样一个带有嵌套表的输出：

用户界面代码：

/* 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');
    }
  } );
 } );

{"data":[
{"UserId":"ABC","UserName":"Peter","Email":"abc@gmail.com.com","CityName":"Chennai","Permission":"Manager,LocalUser"},
{"UserId":"ABC","UserName":"Peter","Email":"abc@gmail.com.com","CityName":"Bangalore","Permission":"Admin,LocalUser"},
{"UserId":"xyz","UserName":"Haiyan","Email":"abc2@gmail.com.com","CityName":"Bangalore","Permission":"LocalUser"},
{"UserId":"xyz","UserName":"Haiyan","Email":"abc2@gmail.com.com","CityName":"Chennai","Permission":"LocalUser,Manager"}]}

使用的技术：ASP.NETMVC5

---

我已经准备好使用linq或修改JSON数据格式

您可以这样给您的子表指定Id

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>';
}

---

在columns部分绑定json对象。

或者您也可以试试Hi Yash，谢谢您的快速回复。主要问题是子表循环。我将以JSON格式获取数据。如何创建循环？@YashSoni这是我得到的格式如何为子表创建循环？{“数据”：[{“用户ID”：“ABC”，“用户名”：“彼得”，“电子邮件”：”abc@gmail.com.com“，”城市名称“：”钦奈“，”权限“：”经理，本地用户“}，{”用户ID“：”ABC“，”用户名“：”彼得“，”电子邮件“：”abc@gmail.com.com“，”城市名称“：”班加罗尔“，”权限“：”管理员，本地用户“}，{”用户ID“：”xyz“，”用户名“：”海燕“，”电子邮件“：”abc2@gmail.com.com“，”城市名称“：”班加罗尔“，”许可证“：“LocalUser”}，{“UserId”：“xyz”，“UserName”：“Haiyan”，“Email”：abc2@gmail.com.com“，”城市名称“：”钦奈“，”权限“：”本地用户，管理员“}]}”在上面的链接中，看第三行，它有嵌套的rowsHi@Tech Yogesh示例。感谢您的回答。我的问题是如何将父表与子表关联。我想在子表中显示相关的父表详细信息。如果我按照您的步骤操作，关系（链接）在哪里？

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

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