具有动态行生成的数据表

Question

我正在使用数据表1.10.18来显示从查询生成的一些数据。我循环遍历第一个查询并显示一些数据，然后在第一个查询内执行另一个查询，以将子行带到主查询。如果我只是通过常规的HTML表显示数据，则它会正确显示，例如，它可能输出20行，也许5行有子行，并且将它们分组在一起。如果我将该表连接到数据表，则子行首先显示在表中。我只使用这个简单的代码来初始化databtables：

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

这是我的表格代码：

<cfoutput query="get_ic" group="stakeholder_id">
    <cfoutput group="sh_contact_id">
        <CFQUERY name="getfollowups" datasource="#datasource#">
            SELECT followup_id,followup_date,followup_who,followup_type,followup_action,followup_close,followup_contact_id,followup_additional,type_of_contact_nm
            FROM followup
                LEFT join type_of_contact ON followup.followup_type = type_of_contact.toc_id
            where followup_contact_id = #get_ic.sh_contact_id#
            order by followup_contact_id asc
        </CFQUERY>
        <tr >
            <td <cfif getfollowups.recordcount GT 0>class='row-border-top'</cfif>>Contact</td>
            <td <cfif getfollowups.recordcount GT 0>class='row-border-top'</cfif>><strong>#full_name#</strong></td>
            <td <cfif getfollowups.recordcount GT 0>class='row-border-top'</cfif>>#sh_contact_id#</td>
            <td <cfif getfollowups.recordcount GT 0>class='row-border-top'</cfif>>#dateformat(sh_contact_date, 'M/D/YY')#</td>
            <td <cfif getfollowups.recordcount GT 0>class='row-border-top'</cfif>>#type_of_contact_nm#</td>
            <td <cfif getfollowups.recordcount GT 0>class='row-border-top'</cfif>>
                <cfset type_of_issue_contact_list = "">
                <cfoutput>
                  <cfset type_of_issue_contact_list = listappend(type_of_issue_contact_list,TYPE_OF_ISSUE_name) >
                </cfoutput>
                #TYPE_OF_ISSUE_contact_LIST#
            </td>
            <td <cfif getfollowups.recordcount GT 0>class='row-border-top'</cfif>><cfif followup_required 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 getfollowups.recordcount GT 0>class='row-border-top'</cfif>><cfif follow_up_date eq "">N/A<cfelse>#dateformat(follow_up_date, 'M/D/YY')#</cfif></td>
        </tr>
        <cfloop query="getfollowups">
            <tr>
                <td <cfif getfollowups.currentrow eq getfollowups.recordcount>class='row-border-bottom'</cfif>>Followup</td>
                <td <cfif getfollowups.currentrow eq getfollowups.recordcount>class='row-border-bottom'</cfif>>##</td>
                <td <cfif getfollowups.currentrow eq getfollowups.recordcount>class='row-border-bottom'</cfif>>#getfollowups.followup_id#</td>
                <td <cfif getfollowups.currentrow eq getfollowups.recordcount>class='row-border-bottom'</cfif>>#dateformat(followup_date, 'M/D/YY')#</td>
                <td <cfif getfollowups.currentrow eq getfollowups.recordcount>class='row-border-bottom'</cfif>>#type_of_contact_nm#</td>
                <td <cfif getfollowups.currentrow eq getfollowups.recordcount>class='row-border-bottom'</cfif>>#followup_action#</td>
                <td <cfif getfollowups.currentrow eq getfollowups.recordcount>class='row-border-bottom'</cfif>>##</td>
                <td <cfif getfollowups.currentrow eq getfollowups.recordcount>class='row-border-bottom'</cfif>>##</td>
            </tr>
        </cfloop>
    </cfoutput>
</cfoutput>

关于发生这种情况的任何想法？

谢谢，

史蒂夫

Answer 1

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

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

1. 上面的代码是一种非常糟糕的入门方法。获取get_ic查询的工作需要更简单。您可能会加载不需要的各种数据。

2. 跳到<cfquery很奇怪。这进一步表明get_ic未获取您需要的数据。

3. 表中所有这些CSS可能对最终产品有用，但为了调试起见，请删除它。

4. 说到要摆脱的事情，在第一轮开发中，甚至不用理会Datatables。在此阶段，HTML可能不正确。正确获取HTML，然后担心数据表。

5. 或者更好的方法是，将数据加载到JSON中，并将其应用于Datatables，它将更好地扩展，并且您将数据的表示形式与数据分离。

6. 说到呈现，Datatables具有各种呈现功能。根据原因3，摆脱CSS。

7. 说到调试，请尝试使get_ic生成10行。看看是否可以使10行正常工作。从那里可以建立所需的数百或数千。