数据表 - 不使用 Ajax 扩展子细节 [英] DataTables - Expand Child details without using Ajax

问题描述

我正在处理一个使用 jquery DataTables(1.10 版)的页面.TableData 源目前仅作为渲染页面上的 HTML 表格发送，并且工作完美.但是，我希望能够展开行以显示详细信息.

非常像这里

但是，我正在使用的站点目前还没有设置任何类型的 Web 服务，因此我将无法进行 ajax 调用来获取示例中使用的扩展信息.

有没有一种方法可以在完全呈现的页面上为父子关系提供所有必要的信息?

我能否以某种方式嵌套表数据来获取此信息，或者告诉 DataTables 将所有其他表行都设为其上方行的子行?

我在数据表论坛上发布了同样的问题:问题

解决方案

您可以将子行的数据存储在父行的data属性中并更改格式 方法.类似的东西

在您的 HTML 中:

<td>ParentRow</td><td>没有.1/td</tr>

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

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

和 format 方法类似:

函数格式(名称，值){return '<div>名称:'+名称+'<br/>值:'+值+'</div>';}

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.

Very much like the example Here

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?

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?

I posted this same question on the datatables forums: Question

解决方案

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

In your HTML:

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

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

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

And as format method something like:

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

这篇关于数据表 - 不使用 Ajax 扩展子细节的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！