使用带有 foreach 显示列表的数据表行子项

Question

我的数据表插件有问题。

在我的项目中，有一个表格，其中我使用 foreach 显示了一个 Java 列表（我将它放在与 Spring 的会话中）。

我正在尝试将此插件应用于我的表格，但没有成功。

这是我的桌子：

<table id="myTable">
    <thead>
        <tr>        
            <th>Detail</th> 
            <th>Name</th>
            <th>Surname</th>
            <th>Age</th>
            <th>City</th>
        </tr>
    </thead>
    <tbody>
        <tr th:each=" view_Object : ${list}">
            <td></td>
            <td>${view_Object.name}</td>
            <td>${view_Object.surname}</td>
            <td>${view_Object.age}</td>
            <td>${view_Object.city}</td>                                                            
        </tr>
    </tbody>
</table>

这个列表的每个对象，在他里面都有一个列表（这个列表包含我想要在单击详细信息按钮时显示的元素）。

所以，我不需要进行 Ajax 调用，因为详细元素已经在显示的对象（行）中。

但我不知道我该怎么做。有可能吗？

我尝试单独使用插件，学习它，但没有。

这是取自documentation 的jsfiddle。它不起作用，因为没有要显示的数据。文档使用：

"ajax": "../ajax/data/objects.txt"

但是，我应该使用什么？

除了数据表之外，还有另一种方法可以做我想做的事情吗？

Answer 1

解决方案

您可以使用columns.visible 选项隐藏包含额外详细信息的列，然后在format() 函数中显示该数据。

查看ID为example的表的示例代码，根据需要进行调整。

/* 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>Age:</td>'+
            '<td>'+d.age+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Start date:</td>'+
            '<td>'+d.start_date+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Sallary:</td>'+
            '<td>'+d.salary+'</td>'+
        '</tr>'+
    '</table>';
}

$(document).ready(function() {
    var table = $('#example').DataTable( {
        "columns": [
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "age", "visible": false },
            { "data": "start_date", "visible": false },
            { "data": "salary", "visible": false }
        ],
        "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');
        }
    } );
} );

演示

有关代码和演示，请参阅 this jsFiddle。