具有动态行生成的数据表

Question

我正在使用 datatables 1.10.18 来显示查询生成的一些数据。我遍历第一个查询并显示一些数据，然后我在第一个查询中执行另一个查询以将子行获取到主查询。如果我只是通过常规 HTML table 显示数据，它会正确显示，例如，它可能输出 20 行，可能有 5 行有子行，它们被组合在一起属性。如果我将 table 连接到数据 table，则子行首先显示在 table 中。我只使用这个简单的代码来初始化 databtables:

var table = $('.datatable-reporting').DataTable({
    autoWidth: true,
    scrollY: 300
});

这是我的 table 代码：

<div class="table-responsive">
    <table  class="table table-bordered table-xs datatable-reporting">
        <thead>
            <tr>
                <th>Type</th>
                <th>Name</th>
                <th>ID</th>
                <th>Date</th>
                <th>Method</th>
                <th>Issue/Action</th>
                <th>Status</th>
                <th>Response Deadline</th>
                <th>Assigned To</th>
            </tr>
        </thead>      
        <tbody>
            <cfoutput query="get_ic" group="stakeholder_id">
                <cfoutput group="sh_inquiry_id">
                    <CFQUERY name="getfollowups" datasource="#datasource#">
                    SELECT
                       followup_id, followup_date, followup_who, followup_type, followup_action, followup_close, followup_contact_id, followup_additional, followup_inquiry_id, type_of_contact_nm
                    FROM followup
                    LEFT join type_of_contact ON followup.followup_type = type_of_contact.toc_id
                    where followup_inquiry_id = '#get_ic.sh_inquiry_id#'
                    order by followup_inquiry_id asc
                    </CFQUERY>
                    <tr>
                        <td >Inquiry</td>
                        <td ><strong>#full_name#</strong></td>
                        <td >#sh_inquiry_id#</td>
                        <td >#dateformat(sh_inquiry_date, 'M/D/YY')#</td>
                        <td >#type_of_contact_nm#</td>
                        <td >
                            <cfset type_of_issue_inquiry_list = "">
                            <cfoutput>
                                <cfset type_of_issue_inquiry_list = listappend(type_of_issue_inquiry_list,TYPE_OF_ISSUE_name) >
                            </cfoutput>
                            #TYPE_OF_ISSUE_inquiry_LIST#
                        </td>
                        <td ><cfif sh_inquiry_fu eq 1><span class="badge badge-danger font-size-lg">Open</span><cfelse><span class="badge badge-info font-size-lg">Closed</span></cfif></td>
                        <td><cfif sh_inquiry_fudate eq "">N/A<cfelse>#dateformat(sh_inquiry_fudate, 'M/D/YY')#</cfif>
                        </td>
                        <td >#fullname#</td>
                    </tr>

                    <tr>
                        <td>Followup</td>
                        <td >##</td>
                        <td >#followup_id#</td>
                        <td >#dateformat(followup_date, 'M/D/YY')#</td>
                        <td >#type_of_contact_nm#</td>
                        <td >#followup_action#</td>           
                        <td >##</td>
                        <td >##</td>
                        <td >##</td>
                    </tr>

                </cfoutput>
            </cfoutput>      
        </tbody>       
    </table>
</div>

关于为什么会发生这种情况有什么想法吗？

这里有两个显示输出的屏幕截图：

这显示了应用了数据tables 的输出，请注意后续内容位于顶部

此为无数据tables，后续在正确查询下方

Answer 1

这不是答案，而是一系列建议。

<cfoutput query="get_ic" group="stakeholder_id">
    <cfoutput group="sh_contact_id">
        <CFQUERY name="getfollowups" datasource="#datasource#">

上面的代码是一个非常糟糕的入门方式。获取 get_ic 查询的工作需要更简单。您可能加载了各种不需要的数据。
跳进<cfquery很奇怪。这进一步表明 get_ic 没有获得您需要的数据。
表格中的所有这些CSS可能对最终产品有用，但为了调试，将其删除。
说说去掉，第一轮开发，Datatables都别管了。在这个阶段，HTML 很可能是不正确的。正确 HTML 然后担心数据表。
或者更好的是，将数据加载到 JSON，并将该数据应用到 Datatables，它将更好地扩展，并且您将把数据的表示与数据分开。
说到演示，Datatables 拥有各种演示工具。根据原因 3，去掉 CSS.
说到调试，尝试让 get_ic 生成 10 行。看看是否可以让 10 行正常工作。从那里你可以建立你需要的数百或数千个。

Answer 2

感谢提供图片，因为正如他们所说，它值一千个字，答案在图中。您会注意到，它默认在 Type 列上排序，"Followup" 排序在 "Inquiry" 之前。所以答案是通过添加 ordering: false 选项来关闭排序。

var table = $('.datatable-reporting').DataTable({
    ordering: false,
    autoWidth: true,
    scrollY: 300
});

具有动态行生成的数据表

Datatables with dynamic row generation

coldfusion

datatables

datatables-1.10