如何在jQuery DataTable中同时实现FixedColumns与列调整功能

问题背景 #

尝试在jQuery DataTable中同时实现列调整（基于ColResize插件）和固定列（FixedColumns插件）功能，ColResize单独使用时正常，但启用FixedColumns后固定列功能异常。已知ColReorder是官方支持插件，ColResize虽非官方，但适配最新版jQuery与DataTable，需解决两者兼容问题。

兼容解决方案 #

• 调整插件加载顺序：FixedColumns需在ColReorderWithResize之后初始化，避免列调整事件被固定列渲染覆盖。
• 修复列宽同步问题：ColResize默认仅处理主表列宽，需手动同步FixedColumns生成的克隆列宽度。
• 规避Responsive冲突：Responsive插件会动态修改列显示状态，与FixedColumns布局逻辑冲突，建议禁用responsive: true。

修改后的完整代码 #

HTML部分 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdn.datatables.net/2.3.0/css/dataTables.dataTables.min.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/5.0.4/css/fixedColumns.dataTables.min.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/4.0.1/css/fixedHeader.dataTables.min.css">
  
  <script src="https://cdn.datatables.net/2.3.0/js/dataTables.min.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/jeffreydwalter/ColReorderWithResize@9ce30c640e394282c9e0df5787d54e5887bc8ecc/ColReorderWithResize.js"></script>
  <script src="https://cdn.datatables.net/fixedcolumns/5.0.4/js/dataTables.fixedColumns.min.js"></script>
  <script src="https://cdn.datatables.net/fixedheader/4.0.1/js/dataTables.fixedHeader.min.js"></script>
 
  <title>Document</title>
</head>
<body>
  <h3>jQuery DataTables: Column reordering and resizing</h3>

  <table id="example" class="display" cellspacing="0" width="100%">
     <thead>
        <tr>
           <th>Name</th>
           <th>Position</th>
           <th>Office</th>
           <th>Extn</th>
           <th>Start date</th>
           <th>Salary</th>
           <th>Name</th>
           <th>Position</th>
           <th>Office</th>
           <th>Extn</th>
           <th>Start date</th>
           <th>Start date</th>
        </tr>
     </thead>
     <tbody>
        <tr>
           <td>Tiger Nixon</td>
           <td>System Architect</td>
           <td>Edinburgh</td>
           <td>5421</td>
           <td>2011/04/25</td>
           <td>$320,800</td>
           <td>Tiger Nixon</td>
           <td>System Architect</td>
           <td>Edinburgh</td>
           <td>5421</td>
           <td>2011/04/25</td>
           <td>2011/04/25</td>
        </tr>
        <tr>
           <td>Garrett Winters</td>
           <td>Accountant</td>
           <td>Tokyo</td>
           <td>8422</td>
           <td>2011/07/25</td>
           <td>$170,750</td>
           <td>Garrett Winters</td>
           <td>Accountant</td>
           <td>Tokyo</td>
           <td>8422</td>
           <td>2011/07/25</td>
           <td>2011/04/25</td>
        </tr>
         <tr>
            <td>Ashton Cox</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
            <td>1562</td>
            <td>2009/01/12</td>
            <td>$86,000</td>
            <td>Ashton Cox</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
            <td>1562</td>
            <td>2009/01/12</td>
            <td>2011/04/25</td>
          </tr>
          </tbody>
          </table>

</body>
</html>

JavaScript部分 #

$(document).ready(function (){
    var table = $('#example').DataTable({
        'dom': 'Rlfrtip',
        fixedColumns: {
          start: 3,
          end: 0
      },
        scrollY: 300,
        scrollX: true,
        scrollCollapse: true,
        columnDefs: [
        { targets: "_all", className: "dt-center" },
        { width: 200, targets: 1 }
    ]  
    });

    // 监听列调整事件，同步固定列与主表列宽
    table.on('column-resized', function(e, settings, column, width) {
        $('.dtfc-leftHeadWrapper th:eq('+column+'), .dtfc-leftBodyWrapper td:eq('+column+')').css('width', width+'px');
        table.fixedColumns().relayout();
    });
});

关键说明 #

• 插件加载遵循核心→列调整→固定列的顺序，确保依赖关系正确。
• 通过column-resized事件捕获列宽变化，同步FixedColumns克隆元素的宽度并重新计算布局。
• 移除Responsive配置可避免动态列切换与固定列的布局冲突。

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