DataTable模态框中实现选中行高亮的问题求助

核心问题 #

自定义绑定的行click事件与DataTables Select插件的内置选中逻辑冲突，同时可能存在样式文件未正确引入或模态框样式覆盖高亮样式的情况。

修复方案 #

1. 替换自定义点击事件为DataTables内置选中事件 #

移除手动绑定的行点击事件，使用DataTables的select事件处理行点击逻辑，确保Select插件能正常触发高亮：

$(document).ready(function() {
  var table = $('#customerTable').DataTable({
    select: {
      style: 'single'
    }
  });

  // 监听行选中事件
  table.on('select', function(e, dt, type, indexes) {
    if (type === 'row') {
      var rowNode = dt.row(indexes).node();
      var userId = rowNode.dataset.userid;
      console.log("Clicked on row with userId:", userId);
      
      // 加载数据到textarea的逻辑写在这里
      // 示例：$('#targetTextarea').val(dt.row(indexes).data().content);
    }
  });
});

2. 确保Select插件资源完整引入 #

必须引入Select对应的CSS和JS文件，否则高亮样式和功能无法生效：

<!-- Select插件CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.7.0/css/select.dataTables.min.css">
<!-- Select插件JS -->
<script src="https://cdn.datatables.net/select/1.7.0/js/dataTables.select.min.js"></script>

3. 加强高亮样式优先级 #

模态框的默认样式可能覆盖DataTables的选中样式，添加自定义CSS确保高亮生效：

#customerTable tbody tr.selected {
  background-color: #17a2b8 !important;
  color: #fff !important;
}

4. 避免表格重复初始化 #

如果模态框多次打开，需先销毁旧表格实例再重新初始化，防止插件功能异常：

$('#yourModal').on('show.bs.modal', function() {
  // 销毁已存在的表格实例
  if ($.fn.DataTable.isDataTable('#customerTable')) {
    $('#customerTable').DataTable().destroy();
  }
  // 重新初始化表格
  var table = $('#customerTable').DataTable({
    select: { style: 'single' },
    // 其他配置项（如columns、data等）
  });
});

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