javascript - 将数据表行子级与通过 foreach 显示的列表一起使用

Question

我的数据表插件有问题。

在我的项目中，有一个表，我在其中使用 foreach 显示 Java 列表(我将其放在 Spring 的 session 中)。

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

这是我的 table :

<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 调用，因为详细信息元素已经在显示的对象(行)中。

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

我尝试单独使用该插件来学习它，但一无所获。

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

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

但是，我应该使用什么？

还有另一种方法，通过数据表，来做我想做的事情？

Answer 1

SOLUTION

您可以使用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');
        }
    } );
} );

DEMO

参见this jsFiddle用于代码和演示。