jQuery DataTables展示MySQL多列表格时横向滚动失效无法显示全列

按以下步骤排查修复即可解决24列表格仅显示前13列、开启scrollX仍无横向滚动的问题：

1. 修正初始化配置参数 #

你当前的初始化代码滚动相关参数存在配置缺失和冲突，替换为如下配置：

var table = $('#elogbooktable').DataTable( {
  "ajax": {url: "testing_getdetaildata.php", dataSrc: ""},
  'scrollX': true, // 显式开启横向滚动
  'scrollCollapse': true, // 原配置设为false会导致宽高计算异常，改为true
  'autoWidth': false, // 关闭自动宽度计算，避免和父容器宽度规则冲突
  'deferRender': true,
  'scroller': true,
  'lengthMenu': [[50, 75, 100, 200, -1], [50, 75, 100, 200, 'ALL']],
  'iDisplayLength': 50,
  'order': [[ 4, "asc" ]],
  'orderCellsTop' : true,
  // 后续原有的columnDefs、filterDropDown等配置保持不变

2. 补充CSS样式强制触发滚动 #

外层容器默认溢出隐藏是横向滚动失效的常见原因，在页面全局样式中加入如下规则：

.dataTables_wrapper {
  width: 100%;
  overflow-x: auto;
  position: relative;
}
#elogbooktable {
  width: 100% !important;
}
#elogbooktable th, #elogbooktable td {
  white-space: nowrap;
}

3. 修复会中断渲染的代码bug #

你现有代码里有两个明显错误，会导致JS执行中断、表格宽度计算失败：

• MySQL查询语句里的ifnul是笔误，正确函数名是ifnull，缺了末尾的l，会导致查询返回字段缺失
• rowCallback中访问的data[42]不存在：你的查询总共只返回24个字段，数组下标范围是0-23，访问不存在的下标会直接抛JS错误，中断后续渲染。把这里的下标改成你实际需要判断的字段序号即可，比如时间字段对应下标9。

// 原错误代码
rowCallback: function(row, data, index){
  if(new Date(data[42]) < Date.now()){
  $(row).find('td:eq(42)').css('background-color', '#f8d7da');
  }
},

4. 修正列显隐初始化逻辑 #

这是你刚好只能看到前13列的核心原因：你嵌入的PHP代码从$i=13开始循环执行showHideColumn，而这个函数的逻辑是「如果列当前是显示状态，就直接设为隐藏」，等于页面一加载就自动把13列及之后的所有列全部隐藏了。
删掉页面加载时自动执行的这段showHideColumn循环调用即可，默认所有列保持显示状态，只在用户点击显隐按钮时触发列切换逻辑。

所有修改完成后清浏览器缓存刷新，就能正常显示横向滚动条，拖动查看全部列内容。

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