Bootstrap标签页中EasyUI DataGrid内容不显示的问题及解决

我使用 Bootstrap nav-tabs 搭建网站，创建了两个展示候选人列表的标签页，但点击「Entry Form TTD」标签页时，其中的内容空白不显示。

相关代码 #

HTML 结构

<div class="container-fluid d-flex flex-column border border-danger">
    <div class="container my-3">
        <ul class="nav nav-tabs" id="candidateTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button type="button" class="nav-link active" id="lolos-interview-tab" data-bs-toggle="tab" data-bs-target="#lolos-interview" role="tab" aria-controls="lolos-interview" aria-selected="true">Lolos Interview</button>
            </li>
            <li class="nav-item" role="presentation">
                <button type="button" class="nav-link" id="entry-form-tab" data-bs-toggle="tab" data-bs-target="#entry-form" role="tab" aria-controls="entry-form" aria-selected="false">Entry Form TTD</button>
            </li>
        </ul>

        <div class="tab-content" id="candidateTabsContent">
            <!-- Lolos Interview Tab -->
            <div class="tab-pane fade show active" id="lolos-interview" role="tabpanel" aria-labelledby="lolos-interview-tab">
                <div class="panel datagrid easyui-fluid my-3 border border-danger table-responsive">
                    <table id="tableCandidate" class="easyui-datagrid" style="max-height:610px; min-height:610px; width:100%">
                        <thead>
                            <tr>
                                <th width="30%" align="center" data-options="field:'fname', sortable:true">Nama</th>
                                <th width="10%" align="center" data-options="field:'gender'">Jenis Kelamin</th>
                                <th width="10%" align="center" data-options="field:'age', sortable:true">Usia</th>
                                <th width="10%" align="center" data-options="field:'religion'">Agama</th>
                                <th width="10%" align="center" data-options="field:'marital'">Pernikahan</th>
                                <th width="20%" align="center" data-options="field:'education'">Pendidikan Terakhir</th>
                                <th width="20%" align="center" data-options="field:'experience'">Pengalaman Kerja</th>
                                <th width="20%" align="center" data-options="field:'note'">Catatan</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>

            <!-- Sudah TTD Entry Form Tab -->
            <div class="tab-pane fade" id="entry-form" role="tabpanel" aria-labelledby="entry-form-tab">
                <div class="panel datagrid easyui-fluid my-3 border border-danger table-responsive">
                    <table id="signCandidate" class="easyui-datagrid" style="max-height:610px; min-height:610px; width:100%">
                        <thead>
                            <tr>
                                <th width="30%" align="center" data-options="field:'fname', sortable:true">Nama</th>
                                <th width="10%" align="center" data-options="field:'gender'">Jenis Kelamin</th>
                                <th width="10%" align="center" data-options="field:'age', sortable:true">Usia</th>
                                <th width="10%" align="center" data-options="field:'religion'">Agama</th>
                                <th width="10%" align="center" data-options="field:'marital'">Pernikahan</th>
                                <th width="20%" align="center" data-options="field:'education'">Pendidikan Terakhir</th>
                                <th width="20%" align="center" data-options="field:'experience'">Pengalaman Kerja</th>
                                <th width="20%" align="center" data-options="field:'note'">Catatan</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

JavaScript 初始化代码

// Initialize datagrid for showing candidates
$(function() {
    $('#tableCandidate').datagrid({
        url: 'includes/display.php',
        singleSelect: true,
        remoteSort: true,
        rownumbers: true,
        pagination: true,
        pageSize: 10,
        nowrap: false,
        remoteFilter: true,
        onClickRow: onRowClick
    });

    $('#signCandidate').datagrid({
        url: 'includes/submit.php',
        singleSelect: true,
        remoteSort: true,
        rownumbers: true,
        pagination: true,
        pageSize: 10,
        nowrap: false,
        remoteFilter: true,
        onClickRow: onRowClick
    });
});
// Function to handle row click
function onRowClick(index, row) {
    if (row.id) {  // Ensure the row has an id
        window.location.href = 'entry.php?id=' + row.id;
    } else {
        console.error("Row ID is missing.");
    }
}

问题现象 #

点击标签页后内容空白，但打开开发者工具或缩放页面时，表格会正常显示，说明数据已加载但未渲染。尝试过设置延迟、修改样式、调用.datagrid('reload')方法，均无法解决问题。

解决方案 #

已解决：通过监听 Bootstrap 的 shown.bs.tab 事件，在标签页完全显示后调用对应 DataGrid 的 resize 方法，触发表格渲染：

$('button[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
  var targetTab = $(e.target).attr("data-bs-target");
  if (targetTab === "#lolos-interview") {
     $('#tableCandidate').datagrid('resize');
  } else if (targetTab === "#entry-form") {
     $('#signCandidate').datagrid('resize');
  }
});

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