Javascript Datatables在没有Ajax的情况下显示子行的信息

我试图在不使用ajax的情况下显示子行的额外信息，问题是它工作得很好，但我希望以列表方式显示多个值。

有什么建议吗

我正在使用web2py获取数据并填充表格，这是我的尝试：

<script>
            var tabla;
        $(document).ready(function(){
           tabla= $('#tablaGenerica').DataTable( {
            } );

        function format(value) {
              return '<div>Hidden Value: ' + value + '</div>';
          }

        $('#tablaGenerica').on('click', 'td.details-control', function () {
                  var tr = $(this).closest('tr');
                  var row = tabla.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(tr.data('child-value'))).show();
                      tr.addClass('shown');
                  }
              });

</script>

<table id="tablaGenerica" class="tablaC table-striped hover cell-border" cellspacing="0" width="100%" >
        <thead>
            <tr>
                 <th></th>
                 <th class="select-filter">Name</th>
                 <th class="select-filter">Age</th>
                 <th class="select-filter">Country</th>
                 <th class="select-filter">Level</th>
            </tr>
        </thead>
            <tbody>
                   {{for person in formList:}}
                 <tr data-child-value="{{=person.Person.salary}}">
                   <td class="details-control"></td>
                   <td>{{=person.Person.name}}</td>
                   <td>{{=person.Person.age}}</td>
                   <td>{{=person.Person.country}}</td>
                   <td>{{=person.Person.level}}</td>
                </tr>
                {{pass}}
            </tbody>
</table>

塔布拉变种；
$（文档）.ready（函数（）{
tabla=$（'#tablaGenerica'）。数据表（{
} );
函数格式（值）{
返回“隐藏值：”+值+“”；
}
$（'tablaGenerica'）。在（'click'，'td.details control'，函数（）{
var tr=$（this.nexist（'tr'）；
var行=表行（tr）；
if（row.child.isShown（））{
//此行已打开-关闭它
row.child.hide（）；
tr.removeClass（“显示”）；
}否则{
//打开这一排
row.child（格式（tr.data（'child-value'））.show（）；
tr.addClass（“显示”）；
}
});
名称
年龄
国家
水平仪
{{对于表单列表中的人员：}}
{{=person.person.name}
{{=person.person.age}
{{=person.person.country}
{{=person.person.level}
{{pass}}

这里有一个

/*行详细信息的格式化功能-根据需要进行修改*/
函数格式（d）{
//`d`是该行的原始数据对象
返回“”+
''+
'全名：'+
''+d.name+''的+
''+
''+
'分机号码：'+
“+d.extn+”+
''+
''+
'额外信息：'+
'以及此处的任何进一步细节（图像等）…'+
''+
'';
}
$（文档）.ready（函数（）{
风险值数据=[{
“id”：“1”，
“名字”：“老虎尼克松”，
“职位”：“系统架构师”，
“工资”：“$320800”，
“开始日期”：“2011/04/25”，
“办公室”：“爱丁堡”，
“extn”：“5421”
},
{
“id”：“2”，
“姓名”：“Garrett Winters”，
“职位”：“会计”，
“工资”：“$170750”，
“开始日期”：“2011/07/25”，
“办公室”：“东京”，
“extn”：“8422”
}];
变量表=$（“#示例”）。数据表（{
“数据”：数据，
“栏目”：[
{
“className”：“详细信息控制”，
“可订购”：错误，
“数据”：空，
“defaultContent”：”
},
{“数据”：“名称”}，
{“数据”：“位置”}，
{“数据”：“办公室”}，
{“数据”：“工资”}
],
“订单”：[[1，‘asc']]
} );
//为打开和关闭详细信息添加事件侦听器
$（#示例tbody'）。在（'click'，'td.details control'，函数（）{
var tr=$（this.nexist（'tr'）；
var行=表.行（tr）；
if（row.child.isShown（））{
//此行已打开-关闭它
row.child.hide（）；
tr.removeClass（“显示”）；
}
否则{
//打开这一排
row.child（格式（row.data（））.show（）；
tr.addClass（“显示”）；
}
} );
}）；

td.details-control{
背景：url（'https://datatables.net/examples/resources/details_open.png“）无重复中心；
光标：指针；
}
tr.所示td.详细信息-控制{
背景：url（'https://datatables.net/examples/resources/details_close.png“）无重复中心；
}

名称
位置
办公室
薪水
名称
位置
办公室
薪水

我建议您稍微重构一下应用程序，因为您实际上不需要编写HTML服务器端，DataTables可以在客户端为您处理

您可以简单地准备对象数组，其中每个条目对应于表行，每个对象属性/内部数组元素对应于相应的列（或详细信息条目）：

为了将这些对象属性/内部数组项链接到表列，您可以使用DataTables选项

columns

或

columnDefs

：

$('#tablaGenerica').DataTable({
    ...
    columns: [
        {title: 'ID', data: 'id'},
        {title: 'Name', data: 'name'},
        ...
    ]
});

之后（这是答案的基本部分），为了在子行中显示多个详细信息，只需修改

format（）

函数，使其返回子行的HTML标记以及所有必要的详细信息：

const format = data => `
    <div>Age: ${data.age}</div>
    <div>Country: ${data.country}</div>
    <div>Level: ${data.level}</div>
`;

const format = data => `
    <div>Age: ${data.age}</div>
    <div>Country: ${data.country}</div>
    <div>Level: ${data.level}</div>
`;