【发布时间】：2021-11-28 20:53:18
【问题描述】：
现在我正在创建一个连接到 mysql db 的小型测验网络应用程序，一切顺利.. 直到有问题要处理在模态弹出窗口中创建 table .. 当我将整个 table 放在 div class="modal-body" 中时，它会显示在主页上（在 modal 后面）而不是在 modal 内。
由于我上面遇到的问题，我使用不同的方法来创建表格，在整个网络论坛上进行了重新搜索之后，还有另一种方法可以创建没有表格标签的表格，据说我们可以使用 div 来创建表格。它确实并且运作良好。该表显示在模态中，其中包含一些来自数据库的数据。
现在似乎我看到了天堂之门，但是 分页 阻止了我，我尝试了一些代码但仍然没有运气，因为我使用 div 表我不能使用即时表数据表，因为它缺少节点（非表节点启动）既没有传统方式的url路径。
所有需要的是每页显示一个带有导航链接的问题（上一个 | 下一个）
如果您能提供任何帮助，我们将不胜感激
以下是用户登录后应用程序的屏幕截图，然后它允许用户选择他们准备进行的测验
以及它在用户选择测验后的外观
如上图所示，如何与可以处理 div 表的分页协作？
下面是来自 quiz.php 的一些代码
<div class="table-container clearfix">
<table id="tableInvoicesList" class="table table-list hidden">
<thead>
<tr>
<th>Upload Modul</th>
<th>Modul</th>
<th>Peserta</th>
<th>Dibuat</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<?php
$sql = $koneksi->query("select * from quiz_list where to_list='$_SESSION[tipe]' order by id_list desc");
while($data=$sql->fetch_assoc()){
?>
<tr>
<td><?php echo date("d-m-Y",strtotime($data['cr_list'])); ?></td>
<td><?php echo $data['nm_list']; ?></td>
<td><?php echo $data['to_list']; ?></td>
<td><?php echo $data['by_list']; ?></td>
<td>
<!--
<a href="?page=quiz&aksi=learn&id=<?php echo $data['kd_list'];?>" class="btn btn-info btn-xs" onclick="return confirm('ANDA YAKIN SUDAH SIAP\n -Isilah soal yg dianggap mudah\n -Pastikan sudah mengusai materi\n -Nilai kelulusan adalah 70');">Mulai Quiz</a>
-->
<!-- Button trigger modal -->
<a data-toggle="modal" data-id="<?php echo $data['kd_list'];?>" class="passingID">
<button type="button"
class="btn btn-primary btn-sm"
data-toggle="modal"
data-target="#showquiz<?php echo $data['kd_list'];?>">
<i class="fas fa-pencil-alt"></i> Quiz
</button>
</a>
</td>
</tr>
<!-- Modal -->
<div class="modal fade"
id="showquiz<?php echo $data['kd_list'];?>"
data-keyboard="false"
data-backdrop="static"
tabindex="-1"
role="dialog"
aria-labelledby="exampleModalCenterTitle"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle"><?php echo $data['nm_list']; ?></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!--
<input type="text" class="form-control" name="idkl" id="idkl" value="">
-->
<style type="text/css">
.divTable
{
display: table;
width:auto;
background-color:#eee;
border:1px solid #666666;
border-spacing:5px;/*cellspacing:poor IE support for this*/
/* border-collapse:separate;*/
}
.divRow
{
display:table-row;
width:auto;
}
.divCell
{
float:left;/*fix for buggy browsers*/
display: table-cell;
width:555px;
background-color:#ccc;
}
</style>
<?php
$batas = 1;
$halaman = @$_GET['halaman'];
if(empty($halaman)){
$posisi = 0;
$halaman = 1;
}
else{
$posisi = ($halaman-1) * $batas;
}
$no = $posisi+1;
$result = $koneksi->query("select * from bank_soal where kd_list= '$data[kd_list]';");
while($tampil = $result->fetch_assoc()){
?>
<div class="divTable" id="page<?php echo $no; ?>">
<div class="headRow">
<div class="divCell"><?php echo $tampil['soal']; ?></div>
</div>
<div class="divRow">
<div class="divCell">001</div>
</div>
<div class="divRow">
<div class="divCell">xxx</div>
</div>
<div class="divRow">
<div class="divCell">ttt</div>
</div>
<div class="divRow">
<div class="divCell">ttt</div>
</div>
</div>
<?php $no++; } ?>
<hr>
<?php
$query2 = $koneksi->query("select * from bank_soal where kd_list='$data[kd_list]';");
$jmldata = mysqli_num_rows($query2);
$jmlhalaman = ceil($jmldata/$batas);
?>
<div class="text-center">
<ul class="pagination">
<?php
for($i=1;$i<=$jmlhalaman;$i++) {
if ($i != $halaman) {
echo "<li class='page-item'><a class='page-link' href='index.php?halaman=$i'>$i</a></li>";
} else {
echo "<li class='page-item active'><a class='page-link' href='#'>$i</a></li>";
}
}
?>
</ul>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script>
function showPages(id){
var totalNumberOfPages = 1;
for(var i=1; i<=totalNumberOfPages; i++){
if (document.getElementById('page'+i)) {
document.getElementById('page'+i).style.display='none';
}
}
if (document.getElementById('page'+id)) {
document.getElementById('page'+id).style.display='block';
}
};
</script>
<script>
$(document).on("click", ".passingID", function () {
var ids = $(this).attr('data-id');
$(".modal-body #idkl").val( ids );
});
</script>
<?php } ?>
</tbody>
</table>
<div class="text-center" id="tableLoading">
<p><i class="fas fa-spinner fa-spin"></i> Sedang memuat...</p>
</div>
【问题讨论】：
标签： html pagination modal-dialog tags bootstrap-modal