jQuery DataTables - 不使用 Ajax 扩展子细节
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23566754/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
DataTables - Expand Child details without using Ajax
提问by AaronS
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.
我正在处理一个使用 jquery DataTables（版本 1.10）的页面。TableData 源目前仅作为渲染页面上的 HTML 表格发送，并且工作完美。但是我希望能够展开行以显示详细信息。
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.
但是，我正在使用的站点目前还没有设置任何类型的 Web 服务，因此我将无法进行 ajax 调用来获取示例使用的扩展信息。
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?
我可以以某种方式嵌套表数据以获取此信息，或者告诉 DataTables 将所有其他表行都设为其上方行的子行吗？
I posted this same question on the datatables forums: Question
我在数据表论坛上发布了同样的问题：问题
回答by Raidri supports Monica
You can store the data for the child row in a dataattribute of the parent row and change the formatmethod from the example accordingly. Something like
您可以将子行的数据存储在data父行的属性中，并相应地更改format示例中的方法。就像是
In your HTML:
在您的 HTML 中：
<tr data-child-name="test1" data-child-value="10">
<td>ParentRow</td>
<td>No. 1</td>
</tr>
In the clickhandler (line 50 from the example):
在click处理程序中（示例中的第 50 行）：
row.child(format(tr.data('child-name'), tr.data('child-value'))).show();
And as formatmethod something like:
作为format方法，例如：
function format (name, value) {
return '<div>Name: ' + name + '<br />Value: ' + value + '</div>';
}
回答by Nick Poulos
While technically this example isn't exactly using AJAX, it is essentially exactly the same concept. You are still forced to add rows using a format function, whether than format function builds the HTML getting values from AJAX or hard-coded into your data-attributes, what is the difference.
虽然从技术上讲，这个示例并没有完全使用 AJAX，但它本质上是完全相同的概念。您仍然被迫使用格式函数添加行，无论是格式函数构建从 AJAX 获取值的 HTML 还是硬编码到您的数据属性中，有什么区别。
As far as I know, there is no way to have the child rows inserted into your HTML from the start and just have the expand controls just SHOW the already existing HTML for the child rows, not build the child row HTML, insert it into the DOM and show it.
据我所知，没有办法从一开始就将子行插入到 HTML 中，而只有展开控件显示子行已经存在的 HTML，而不是构建子行 HTML，将其插入到DOM 并显示它。
