如何在添加左右侧边栏面板时让DataTable自动切换为移动端响应模式？

我明白你的问题了——当打开左侧或右侧侧边栏导致表格容器空间不足时，DataTables没有自动切换到移动端响应式模式对吧？这是因为DataTables的响应式模块默认只会在窗口resize事件或者表格初始化阶段计算列的显示状态，手动修改侧边栏导致容器宽度变化时，它不会自动检测到这个变化。

下面是具体的解决方案：

核心修改思路 #

在侧边栏的打开/关闭函数中，手动触发DataTables的响应式重计算和表格重绘，让它重新判断当前容器宽度下是否需要切换到响应式模式。

修改后的JavaScript代码 #

$(document).ready(function() {
  // 先把表格实例存储起来，方便后续调用API方法
  const table = $('#example').DataTable( {
    data: dataSet,
    columns: [
      { title: "Name" },
      { title: "Position" },
      { title: "Office" },
      { title: "Extn." },
      { title: "Start date" },
      { title: "Salary" }
    ],
    searching: false,
    lengthChange: false,
    responsive:true
  } );

  // 侧边栏打开/关闭函数挂载到window对象，确保HTML中的onclick能访问到
  window.openNavLeft = function() {
    document.getElementById("mySidebarLeft").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
    // 强制重新计算响应式状态并重绘表格
    table.responsive.recalc();
    table.draw();
  }

  window.openNavRight = function() {
    document.getElementById("mySidebarRight").style.width = "250px";
    document.getElementById("main").style.marginRight = "250px";
    // 移除了原来直接给#example加marginRight的冗余代码，表格会继承main容器的宽度变化
    table.responsive.recalc();
    table.draw();
  }

  window.closeNavLeft = function() {
    document.getElementById("mySidebarLeft").style.width = "0";
    document.getElementById("main").style.marginLeft= "0";
    table.responsive.recalc();
    table.draw();
  }

  window.closeNavRight = function() {
    document.getElementById("mySidebarRight").style.width = "0";
    document.getElementById("main").style.marginRight= "0";
    table.responsive.recalc();
    table.draw();
  }
} );

var dataSet = [
  [ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ],
  [ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" ],
  [ "Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000" ],
  [ "Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060" ],
  [ "Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700" ],
  [ "Brielle Williamson", "Integration Specialist", "New York", "4804", "2012/12/02", "$372,000" ],
  [ "Herrod Chandler", "Sales Assistant", "San Francisco", "9608", "2012/08/06", "$137,500" ],
  [ "Rhona Davidson", "Integration Specialist", "Tokyo", "6200", "2010/10/14", "$327,900" ],
  [ "Colleen Hurst", "Javascript Developer", "San Francisco", "2360", "2009/09/15", "$205,500" ],
];

关键修改点说明 #

1. 存储表格实例：把DataTables初始化后的返回值存在table变量中，这样可以方便调用它的API方法。
2. 手动触发响应式重计算：在每个侧边栏切换函数的最后，调用table.responsive.recalc()让DataTables重新检查当前容器宽度，判断哪些列需要隐藏；再调用table.draw()重新渲染表格，应用新的响应式布局。
3. 移除冗余样式代码：原来的openNavRight中给#example直接加marginRight是多余的，表格作为#main的子元素，会自动继承父容器的宽度变化，去掉这段代码可以避免样式冲突。

CSS和HTML部分无需修改 #

你的CSS侧边栏样式和HTML结构都没问题，直接保留原来的代码即可。

内容的提问来源于stack exchange，提问作者Samuel Cabal Lozano