Bootstrap 5.2.1中Datatable分页时Modal自动隐藏的原因

问题原因 #

你的代码中shown.bs.modal事件绑定了错误的Modal选择器（#modal），但实际Modal的ID是#exampleModal，导致Modal显示后，Datatable的列宽调整、滚动区域计算逻辑完全没有执行。

Bootstrap v5.2.1优化了Modal的事件处理逻辑，当Modal内元素布局未正确初始化（比如Datatable滚动区域尺寸计算错误），点击分页按钮时，异常的布局变化会触发Modal的关闭机制；而v5.2.0的事件处理逻辑没有这类严格校验，因此不会出现自动关闭问题。

修复方案 #

将事件绑定的选择器修正为实际的Modal ID #exampleModal，确保Modal显示后能正确初始化Datatable布局：

$(document).ready(function() {

  $('#example').DataTable({
    scrollY: "40vh",
    scrollCollapse: true,
    scroller: true,
    responsive: true
  });

  // 修正选择器为#exampleModal
  $(document).on('shown.bs.modal', '#exampleModal', function() {
    $($.fn.dataTable.tables(true)).DataTable()
      .columns.adjust()
      .responsive.recalc()
      .scroller.measure();
  });

  $('#exampleModal').on('hide.bs.modal hidden.bs.modal', function(e) {
    //console.log(e);
  });

});

效果说明 #

修改后，Modal显示时Datatable会自动调整列宽和滚动区域，点击分页按钮时布局不会出现异常，也就不会触发Modal的关闭逻辑，恢复和Bootstrap v5.2.0一致的正常表现。

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