I am creating a website using the bootstrap nav-tabs, i’m creating two tabs and this tabs showing a table list of candidates, but when i click the other tabs(“Entry Form TTD” tab) the content in it is not showing/blank
<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>
<script type="text/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.");
}
}
</script>
the result when clicking the tabs is like this:
entry form ttd tab
but when i tried open the devtools, or zoom out/in the screen page, the table is showing:
entry form ttd tab when opening the devtools
I already tried timeout for the screen, changing the style, or using .datagrid(‘reload’) function, but it still not solve my problem.