jQuery setInterval Ajax刷新Datatable导致下拉菜单失效怎么解决

问题根因 #

你遇到的下拉菜单自动关闭问题，本质是两个原因共同导致的：

1. 你当前的fetch_coinprices逻辑应该是每次拿到数据后全量重绘了整个Datatable，触发了全局DOM重排
2. Bootstrap的下拉菜单默认绑定了全局事件，只要页面DOM发生重排、或者监听到document级的点击/重绘事件，就会自动收起已展开的下拉菜单

解决方案（按优先级排序） #

方案1：改为Datatable局部刷新（最推荐） #

完全避免全量重绘Datatable，仅更新需要变动的数值单元格，不会触发全局DOM变动，完全不影响页面交互。
修改fetch_coinprices里的Datatable更新逻辑，用官方提供的局部单元格更新API：

function fetch_coinprices() {
  $.ajax({
    url: "你的币价接口地址",
    type: "GET",
    dataType: "json",
    success: function (priceList) {
      const table = $('#你的Datatable容器ID').DataTable()
      // 遍历接口返回的币价数据，仅更新对应行的价格列
      priceList.forEach((item, rowIndex) => {
        // 这里的2是价格列的索引，从0开始计数，根据你自己的表格结构修改
        table.cell(rowIndex, 2).data(item.currentPrice).draw(false)
        // draw(false)表示仅重绘修改的单元格，不重置表格的分页、排序、滚动条等状态
      })
    }
  })
}

方案2：下拉菜单展开时暂停刷新（改造成本最低） #

如果不想调整原有Datatable的重绘逻辑，可以在定时任务执行前判断是否有已展开的下拉菜单，有则跳过本次刷新，菜单关闭后自动恢复刷新：
修改你的定时任务代码即可：

$(document).ready(function(){
  fetch_coinprices()

  setInterval(function(){
    // 检测是否存在已展开的Bootstrap下拉菜单，无则执行刷新
    // 如果你用的是Bootstrap3，判断类名改为`.dropdown.open`
    if($('.dropdown.show').length === 0) {
      fetch_coinprices()
    }
  }, 1000);

  function fetch_coinprices() {
    // 原有逻辑不变
  }
});

方案3：手动维持下拉菜单状态 #

如果需要保证刷新不中断，也可以在每次Datatable重绘完成后，判断如果之前下拉菜单是展开状态，手动调用方法重新展开菜单：

// 在fetch_coinprices的Datatable重绘完成后执行以下逻辑
if($('.dropdown').hasClass('show')) {
  $('.dropdown.show .dropdown-toggle').dropdown('show')
}

额外优化建议 #

如果业务允许，推荐把轮询改为WebSocket推送，仅在币价实际发生变动时才更新表格，既降低服务器和前端性能损耗，也能从根源避免频繁刷新导致的交互问题。

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