Twig-Template 中数据表中的静态子行(附加信息)

Static child rows (additional info) in DataTables in Twig-Template

我将 Symfony2 与 Doctrine、Twig 和 DataTables 一起使用。在 DataTable 中,显示了我的实体的概述以及基本信息。单击一行我想显示实体的其他信息,如您所见 here

这是代码(其中应用程序是我的学说实体的集合):

 <tbody>
                    {% for application in applications %}
                        <tr id="application-{{ application.id }}" data-child-information="{{ application | json_encode | raw }}">
                            <td>
                                {{ application.name }}
                            </td>
                            <td>
                                {{ application.company.name | default("") }}
                            </td>
                            <td>
                                {{ application.events.count }}
                            </td>
                            <td>
                                {{ application.dateCreate | date('d.m.Y')  }}
                            </td>
                            <td>
                                {% if application.dateSent %}
                                    {{ application.dateSent | date('d.m.Y')  }}
                                {% else %}
                                    {{ application.readableStatus(constant('APPLICATION_STATUS_OPEN', application)) }}
                                {% endif %}
                            </td>
                    {% endfor %}
                    </tbody>

文档说 ajax 调用将用于获取数据。但是因为我已经有了我的实体的信息,所以我不想使用 AJAX 而是从头开始创建子行。最好的做法是什么?如您所见,我试图将 json 编码的实体保存在数据标签中,因此我可以在 javascript 函数中读取它(请参阅 DataTables 文档中的格式函数。

您不必使用文档中的方法,这只是一个建议。您可以简单地将 data-child-information 的内容注入到详细信息行中:

$('#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(tr.attr('data-child-information')).show();
       tr.addClass('shown');
    }
});

"work from home" 演示 -> http://jsfiddle.net/mgmL0f8c/