问题：点击DataTable行无法填充Bootstrap模态框

点击DataTable表格行内单元格的链接后，Bootstrap模态框仅显示静态文本，无数据值；调试可见数据行已正确传递、标签也已赋值，但模态框打开后内容全为空。

原因分析 #

1. 链接上的data-toggle="modal"和data-target="#detailModal"会让Bootstrap立即触发模态框显示，而数据赋值操作在点击事件中执行，模态框先显示后完成赋值，导致看不到动态内容。
2. 模态框内的<label>标签使用了.val()方法赋值，该方法仅适用于表单输入元素（如input），标签需用.text()或.html()设置内容。
3. Bootstrap 5版本中，关闭按钮的data-dismiss属性需改为data-bs-dismiss，否则关闭功能失效。

解决方案 #

1. 移除链接上的data-toggle和data-target属性，通过JS在数据赋值完成后再打开模态框。
2. 替换<label>赋值方法，将.val()改为.text()。
3. 修正Bootstrap 5关闭按钮的属性名。
4. 给变量添加let声明，避免全局变量污染。

修改后的代码示例 #

JavaScript代码 #

function bindDataTable() {
  tblICS2 = $("#ics2Table").DataTable({
    jQueryUI: true,
    data: [], // 替换为你的实际数据源
    dom: '<Blf<t>ip>',
    orderCellsTop: true,
    scrollY: 430,
    scrollCollapse: true,
    autoWidth: true,
    paging: true,
    columns: [{
      data: "UPUBCD",
      render: function(data, type, row) {
        // 移除自动触发模态框的属性
        return "<span class=\"ml-2 rowDetail\"><a class=\"PageLink\" href='javascript:' title='Show Details'>" + data + "</a></span>";
      }
    }, {
      data: "OUTCOME"
    }, {}, {
      data: "ID"
    }],
    pageLength: 50,
    processing: true,
    deferRender: true,
  });
}

$('#ics2Table').on('click', '.rowDetail', function() {
  const rowData = $('#ics2Table').DataTable().row($(this).closest('tr')).data();
  showDetail(rowData);
});

function showDetail(rowData) {
  // 使用空值合并运算符简化判断，添加let声明
  let upu = rowData.UPUBCD ?? '';
  let outcome = rowData.OUTCOME ?? '';

  // 用text()给label赋值
  $("#lblUPU").text(upu);
  $("#lblOutcome").text(outcome);
  $('#lbldetailModalTitle').text('Record detail');

  // 赋值完成后再打开模态框
  $('#detailModal').modal({ backdrop: 'static', keyboard: false });
  $('#detailModal').modal('show');
}

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>

<div class="modal fade" id="detailModal" role="dialog" aria-labelledby="lbldetailModalTitle" style="z-index: 10000">
  <div class="modal-dialog modal-lg fade in" style="width: 50vw; max-width: 70vw; margin-top: 150px; margin-bottom: 100px">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">
          <label id="lbldetailModalTitle"></label>
        </h4>
        <!-- Bootstrap 5使用data-bs-dismiss关闭模态框 -->
        <button type="button" class="close" data-bs-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body" style="background-color: #CCE5FF">
        <div id="divDetail">
          <div class="row">
            <div class="col-md-3 text-right font-bold-small mt-2">UPU:</div>
            <div class="col-md-2">
              <label class="font-small" id="lblUPU"></label>
            </div>
            <div class="col-md-3 text-right font-bold-small mt-2">Outcome:</div>
            <div class="col-md-3">
              <label class="font-small" id="lblOutcome"></label>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <div class="w-100">
          <button class="btn btn-info" style="float: right" data-bs-dismiss="modal" aria-hidden="true" aria-label="Close">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>

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