DataTables示例 子行(显示其他/详细信息)

DataTables API 有许多方法可用于将子行附加到 父母 数据表中的行。这可用于显示有关行的其他信息,对于案例很有用 您希望在其中传达有关行的更多信息,而不是主机表中有足够的空间。

以下示例利用了 row().childDT 首先检查一个 行已经显示,如果是的话,将其隐藏(row().child.hide()DT),否则请显示(row().child.show()DT)。子行的内容是, in this example, defined by the formatDetails() function, but you would replace that with 您想要显示所需内容的任何内容,例如,可能包括对Ajax的调用 服务器以获取要显示的额外信息。

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

下面显示的Javascript用于初始化此显示的表 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>Full name:</td>'+ '<td>'+d.name+'</td>'+ '</tr>'+ '<tr>'+ '<td>Extension number:</td>'+ '<td>'+d.extn+'</td>'+ '</tr>'+ '<tr>'+ '<td>Extra info:</td>'+ '<td>And any further details here (images etc)...</td>'+ '</tr>'+ '</table>'; } $(document).ready(function() { var table = $('#example').DataTable( { "ajax": "../ajax/data/objects.txt", "columns": [ { "class": 'details-control', "orderable": false, "data": null, "defaultContent": '' }, { "data": "name" }, { "data": "position" }, { "data": "office" }, { "data": "salary" } ], "order": [[1, 'asc']] } ); // Add event listener for opening 和 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'); } } ); } );

除上述代码外,以下Javascript库文件也已加载以供在本文档中使用。 example:

下面显示的HTML是原始HTML表格元素,之前已通过 DataTables:

除了从库中加载的内容外,此示例还使用了一些其他CSS 文件(如下),以便正确显示表格。显示了使用的其他CSS below:

td.details-control { background: url('../resources/details_open.png') no-repeat center center; cursor: pointer; } tr.shown td.details-control { background: url('../resources/details_close.png') no-repeat center center; }

加载以下CSS库文件以供本示例使用,以提供 table:

该表通过Ajax加载数据。下面显示了已加载的最新数据。这个数据 将在加载任何其他数据时自动更新。

下面显示了用于执行此表的服务器端处理的脚本。请注意 这只是使用PHP的示例脚本。服务器端处理脚本可以用任何形式编写 language, using 协议中描述的协议 DataTables文档.