Bootstrap模态框中Div模拟表格的分页实现问题（MySQL在线测验Web应用开发求助）

我来帮你一步步搞定这两个问题，先从最开始的表格错位问题说起，再重点实现你需要的单题分页导航。

一、解决原生表格在模态框外显示的问题 #

你之前把完整<table>放入modal-body却显示在模态框后方，大概率是模态框的层级（z-index）被表格的CSS样式覆盖，或者modal-body没有正确处理溢出内容。可以试试这两个修复方案：

1. 给modal-body添加overflow-auto类，让表格在模态框内滚动：

<div class="modal-body overflow-auto">
  <!-- 你的table代码 -->
</div>

2. 检查表格是否有自定义的position: absolute或z-index样式，这类样式会让表格脱离模态框的文档流，把它们去掉即可。

不过既然你已经改用div模拟表格，我们重点来看分页功能的实现。

二、实现模态框内单题分页（上一页/下一页） #

你的核心需求是每个模态框内每页显示一道题，支持上/下页切换，不需要依赖DataTables或URL分页（因为模态框是局部弹窗，URL参数会影响全局页面状态），用纯前端JavaScript就能搞定。

修改后的代码示例（关键部分） #

我会基于你的现有代码调整，重点修改分页逻辑：

<!-- 模态框部分 -->
<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">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <!-- 题目容器：每个题目用统一的类，初始全部隐藏 -->
        <?php 
        $result = $koneksi->query("select * from bank_soal where kd_list= '$data[kd_list]';");
        $totalQuestions = mysqli_num_rows($result);
        $no = 1;
        while($tampil = $result->fetch_assoc()){ 
        ?>
        <div class="quiz-page divTable" style="display: none;" 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>
        <div class="d-flex justify-content-between">
          <button type="button" class="btn btn-secondary prev-btn" disabled>上一页</button>
          <span class="align-self-center">第 <span class="current-page">1</span> 页 / 共 <?php echo $totalQuestions; ?> 页</span>
          <button type="button" class="btn btn-primary next-btn" <?php echo $totalQuestions <= 1 ? 'disabled' : ''; ?>>下一页</button>
        </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>

对应的JavaScript逻辑（放在页面底部） #

// 监听模态框显示事件，初始化分页状态
$('.modal').on('shown.bs.modal', function() {
  const modal = $(this);
  const totalPages = modal.find('.quiz-page').length;
  let currentPage = 1;

  // 显示第一页
  modal.find(`#page${currentPage}`).show();
  
  // 上一页按钮点击事件
  modal.find('.prev-btn').click(function() {
    if (currentPage > 1) {
      // 隐藏当前页
      modal.find(`#page${currentPage}`).hide();
      currentPage--;
      // 显示新页面
      modal.find(`#page${currentPage}`).show();
      // 更新状态文本
      modal.find('.current-page').text(currentPage);
      // 启用/禁用按钮
      modal.find('.next-btn').prop('disabled', false);
      if (currentPage === 1) {
        $(this).prop('disabled', true);
      }
    }
  });

  // 下一页按钮点击事件
  modal.find('.next-btn').click(function() {
    if (currentPage < totalPages) {
      // 隐藏当前页
      modal.find(`#page${currentPage}`).hide();
      currentPage++;
      // 显示新页面
      modal.find(`#page${currentPage}`).show();
      // 更新状态文本
      modal.find('.current-page').text(currentPage);
      // 启用/禁用按钮
      modal.find('.prev-btn').prop('disabled', false);
      if (currentPage === totalPages) {
        $(this).prop('disabled', true);
      }
    }
  });
});

// 模态框关闭时重置状态（可选，防止下次打开时保留之前的页码）
$('.modal').on('hidden.bs.modal', function() {
  const modal = $(this);
  // 隐藏所有页面
  modal.find('.quiz-page').hide();
  // 重置按钮状态
  modal.find('.prev-btn').prop('disabled', true);
  modal.find('.next-btn').prop('disabled', modal.find('.quiz-page').length <= 1);
  // 重置页码文本
  modal.find('.current-page').text('1');
});

代码说明 #

1. 题目容器：给每个题目的div添加quiz-page类，初始设置display: none隐藏，模态框打开时只显示第一页。
2. 分页导航：替换原来的数字分页列表为「上一页/下一页」按钮，同时显示当前页码和总页数，更符合测验场景的需求。
3. JavaScript逻辑：
   • 监听模态框的shown.bs.modal事件，初始化当前页码为1，显示第一页。
   • 点击上/下页按钮时，切换当前页码，隐藏旧页面、显示新页面，同时更新按钮的禁用状态（比如第一页时上一页不可点击）。
   • 模态框关闭时重置状态，确保下次打开时从第一页开始。

这样就完美实现了你需要的模态框内单题分页功能，不需要依赖DataTables，也不会影响全局页面的URL参数。

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