Question

我的datatable插件有问题。

在我的项目中，有一个表格，我用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调用，因为详细信息元素已经显示在对象（行）中。

但我不知道怎么办呢。有可能吗？

我尝试将插件分开，学习它，但没有。

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

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

但是，我该怎么用？

还有另一种方法，在数据表上，做我正在尝试做的事情吗？

Answer 1

<强>解

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

查看ID为/* 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'); } } ); } );的表格的示例代码，根据您的需要进行调整。

a=[[1,43,2], [12,3,42]]

<强>样本

请参阅this jsFiddle以获取代码和演示。

使用带有foreach

1 个答案: