DataTables-在不使用Ajax的情况下展开子级详细信息 [英] DataTables - Expand Child details without using Ajax

问题描述

我正在使用jquery DataTables(版本1.10)的页面上工作. TableData源当前仅作为呈现页面上的HTML表发送，并且可以完美运行.但是，我希望能够扩展行以显示详细信息.

I'm working on a page that uses jquery DataTables (version 1.10). The TableData source is currently being sent as just an HTML table on the rendered page, and works perfect. However I want to be able to expand the rows to show detailed information.

非常类似于示例此处

但是，我正在使用的网站目前尚未设置任何Web服务，因此，我将无法进行Ajax调用来获取示例所使用的扩展信息.

However, the site I'm working with currently does not have any sort of web services set up on it yet, so I won't be able to make ajax calls to get the expanded information like the example uses.

有没有办法在完全渲染的页面上提供有关父子关系的所有必要信息?

Is there a way I can supply all of the necessary information for the parent child relationship on a fully rendered page?

我可以以某种方式嵌套表数据以获取此数据，还是告诉DataTables使每隔一个表行成为其上一个的子表?

Can I somehow nest the table data to get this, or tell DataTables to make every other table row a child of the one above it?

我在datatables论坛上发布了相同的问题:问题

I posted this same question on the datatables forums: Question

推荐答案

您可以将子行的数据存储在父行的data属性中，并相应地更改示例中的format方法.像

You can store the data for the child row in a data attribute of the parent row and change the format method from the example accordingly. Something like

在您的HTML中:

<tr data-child-name="test1" data-child-value="10">
    <td>ParentRow</td>
    <td>No. 1</td>
</tr>

在click处理程序中(示例中的第50行):

In the click handler (line 50 from the example):

row.child(format(tr.data('child-name'), tr.data('child-value'))).show();

和format方法一样:

function format (name, value) {
    return '<div>Name: ' + name + '<br />Value: ' + value + '</div>';
}

这篇关于DataTables-在不使用Ajax的情况下展开子级详细信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！