嵌套FooTable无法正常工作，初始化子表后显示空白

问题说明 #

嵌套使用FooTable时，内部的servicetable初始化后，展开父表trackingtable会显示空白；移除子表的初始化代码后，展开父表至少能看到子表内容。曾找到2014年的相关issue，想确认嵌套FooTable是否本身不可行。

页面代码 #

<!--Table to show below-->
<div class="col-md-16">
    <div id="TrackList">
        <table class="trackingtable table table-bordered table-striped table-condensed flip-content footable footable-1 breakpoint breakpoint-lg" 
               data-show-toggle="true" id="tblOnlinePayments" data-paging-size="20" style="width: 100%; margin-bottom: 20px;">
            <thead class="flip-content bordered-palegreen">
                <tr class="footable-header" data-expanded="true">
                    <th class="footable-first-visible" style="display: table-cell;" data-type="string">
                        Service Description
                    </th>
                    <th class='innertableth' data-breakpoints="all" data-type="html"></th>
                </tr>
            </thead>
            <tbody>
                @foreach (var PackageStatus in Model.PackageStatus)
                {
                    if (PackageStatus.PackageID == item.PackageID)
                    {
                        <tr>
                            <td class="footable-first-visible">
                                @PackageStatus.Description
                            </td>
                            <td>
                                <table class="servicetable table table-bordered table-striped table-condensed flip-content footable footable-1 breakpoint breakpoint-lg" 
                                       data-show-toggle="true" style="width: 100%;">
                                    <thead>
                                        <tr>
                                            <th style="padding: 10px;text-align: center;">Service</th>
                                            <th style="padding: 10px;text-align: center;">Service Quantity</th>
                                            <th style="padding: 10px;text-align: center;">Availed So Far</th>
                                            <th class='innertableth' data-breakpoints="all" data-type="html"></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach (var service in PackageStatus.Services)
                                        {
                                            <tr>
                                                <td style="padding: 10px; display: table-cell;">@service</td>
                                                <td style="padding: 10px; display: table-cell;">@PackageStatus.Quantity</td>
                                                <td style="padding: 10px; display: table-cell;">@PackageStatus.AVAILED</td>
                                                <td>
                                                    <div class="custom-table" style="padding-bottom: 15px;padding-right: 12px;">
                                                        <div class="row header">
                                                            <div class="headerborder">Service</div>
                                                            <div class="headerborder">Availed Date</div>
                                                        </div>
                                                        @foreach (var availdate in PackageStatus.AvailedDates)
                                                        {
                                                            <div class="row" style="margin-top: -1px">
                                                                <div class="cell">@service</div>
                                                                <div class="cell">
                                                                    @if (availdate == null)
                                                                    {
                                                                        <span style="text-align: center">-</span>
                                                                    }
                                                                    else
                                                                    {
                                                                        <span style="color: green">@Utility.UtilityHelper.FormatDate(availdate)</span>
                                                                    }
                                                                </div>
                                                            </div>
                                                            break;
                                                        }
                                                    </div>
                                                </td>
                                            </tr>
                                        }
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                    }
                }
            </tbody>
        </table>
    </div>
</div>
<!--Table ENDS-->

原初始化脚本 #

jQuery(function ($) {
    $('.trackingtable').footable();
});
// 移除这段代码后子表可见
jQuery(function ($) {
    $('.servicetable').footable();
});

分析与解决方案 #

早期FooTable版本存在嵌套初始化的DOM冲突问题：父表初始化时会修改DOM结构，提前初始化子表会被父表的操作干扰，导致渲染异常（空白），这也是2014年相关issue提到的核心问题。但嵌套FooTable并非完全不可行，只需调整初始化时机：

不要在页面加载时直接初始化所有子表，而是在父表行展开时再初始化对应行内的子表，避免DOM操作冲突。修改后的初始化脚本如下：

jQuery(function ($) {
    // 初始化父表，并监听行展开事件
    $('.trackingtable').footable().on('footable_row_expanded', function(e) {
        // 找到当前展开行中未初始化的子表
        var $subTable = $(e.row).find('.servicetable:not(.footable-initialized)');
        if ($subTable.length) {
            $subTable.footable();
        }
    });
});

说明 #

• 利用footable_row_expanded事件，确保只有当用户展开某行时，才初始化该行内的子表
• 通过:not(.footable-initialized)避免重复初始化同一个子表
• 这种方式既解决了空白问题，也减少了页面初始加载时的资源消耗

内容的提问来源于stack exchange，提问作者Dragut