Twig模板中DataTables中的静态子行(附加信息)

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

本文关键字:信息 静态 DataTables Twig      更新时间:2023-09-26

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

以下是代码(其中应用程序是我的条令实体的集合):

 <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文档中的format函数。

您不必使用文档中的方法,这只是一个建议。您可以简单地将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');
    }
});

"在家工作"演示->http://jsfiddle.net/mgmL0f8c/