DataTables示例 行详细信息

此示例说明了使用DataTables来显示和隐藏附加到其上的子行的功能。 主机表中的父行。通常用于显示有关行的其他信息, 特别是当您希望传达有关行的更多信息而主机中没有足够的空间时 table.

下面的示例显示服务器端处理与具有事件的第一列一起使用 附加到它的侦听器,它将切换子行的显示。这是使用 columns.dataDTcolumns.defaultContentDT, 结合 与CSS一起显示带有背景图像的空白单元格,可以单击该单元格。

事件处理程序利用 row().childDT 首先检查一个 行已经显示,如果显示则隐藏它,否则显示它。子行的内容在此 example, defined by the formatDetails() function, but you would replace that with whatever 您想要显示所需的内容,例如,可能包括对服务器的Ajax调用,以 获取要显示的额外信息。请注意,格式详细信息功能可以访问完整数据 该行的源对象,包括表中未实际显示的信息(工资 参数)。

此外,此示例显示了与 客户端行详细信息示例 在其中使行自动重新打开 重新绘制表格时,我们需要为每一行跟踪一个唯一的标识符-在这种情况下,该行 id。这是必需的,因为在服务器端处理模式下,行自动 在每次抽奖中销毁并重新创建。

名字 位置 办公室
名字 位置 办公室

下面显示的Javascript用于初始化此显示的表 example:

function format ( d ) { return 'Full name: '+d.first_name+' '+d.last_name+'<br>'+ 'Salary: '+d.salary+'<br>'+ 'The child row can contain any data you wish, including links, images, inner tables etc.'; } $(document).ready(function() { var dt = $('#example').DataTable( { "processing": true, "serverSide": true, "ajax": "scripts/ids-objects.php", "columns": [ { "class": "details-control", "orderable": false, "data": null, "defaultContent": "" }, { "data": "first_name" }, { "data": "last_name" }, { "data": "position" }, { "data": "office" } ], "order": [[1, 'asc']] } ); // Array to track the ids of the details displayed rows var detailRows = []; $('#example tbody').on( 'click', 'tr td:first-child', function () { var tr = $(this).closest('tr'); var row = dt.row( tr ); var idx = $.inArray( tr.attr('id'), detailRows ); if ( row.child.isShown() ) { tr.removeClass( 'details' ); row.child.hide(); // Remove from the 'open' array detailRows.splice( idx, 1 ); } else { tr.addClass( 'details' ); row.child( format( row.data() ) ).show(); // Add to the 'open' array if ( idx === -1 ) { detailRows.push( tr.attr('id') ); } } } ); // On each draw, loop over the `detailRows` array 和 show any child rows dt.on( 'draw', function () { $.each( detailRows, function ( i, id ) { $('#'+id+' td:first-child').trigger( 'click' ); } ); } ); } );

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

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

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

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

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

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

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