如何在Ajax股票DataTable中添加DOM数字排序与实时价格功能

问题详情 #

• 技术栈：使用jQuery、JavaScript、Ajax、WebSocket开发实时加密货币价格图表，采用DataTable实现表格排序功能
• 异常现象：实时加密货币价格在DataTable表格外的<input>中可正常实时更新，但将<input>放入表格内后，价格无法实时刷新
• 已知线索：需通过DOM函数获取表格内<input>的实时数值以支持排序，已获取DataTable官方DOM数字排序代码，但不清楚如何将其整合到Ajax/WebSocket脚本中
• 当前进展：已在Ajax脚本中添加<input>渲染代码，但表格内的<input>仍无实时价格更新，多次尝试均未解决

解决方案步骤 #

1. 配置DataTable DOM数字排序插件 #

先注册针对<input>内容的排序规则，让DataTable能识别表格内输入框的数值进行排序：

// 注册DOM文本转数字的排序预处理函数
$.fn.dataTable.ext.type.order['dom-text-numeric-pre'] = function (cellContent) {
  // 提取单元格内input的数值，转成浮点数，默认0
  return parseFloat($(cellContent).find('input').val()) || 0;
};

// 初始化DataTable时指定价格列的排序类型
const cryptoTable = $('#cryptoTable').DataTable({
  columnDefs: [
    // 假设价格列是第3列（索引从0开始），绑定自定义排序类型
    { targets: [2], type: 'dom-text-numeric' }
  ],
  columns: [
    { data: 'symbol' },
    { data: 'name' },
    { 
      data: 'price',
      // 渲染生成表格内的input
      render: function(price) {
        return `<input type="text" value="${price}" readonly>`;
      }
    }
  ]
});

2. 实时更新表格内input的正确姿势 #

在WebSocket/Ajax的回调中，通过DataTable API定位目标行，更新对应input的值后，通知DataTable数据已失效（保证排序状态同步）：

// 示例WebSocket消息处理逻辑
socket.onmessage = function(event) {
  const updateData = JSON.parse(event.data);
  // 根据币种标识找到对应行（这里假设数据里有symbol字段）
  const targetRow = cryptoTable.row(function(index, rowData) {
    return rowData.symbol === updateData.symbol;
  });

  if (targetRow.length) {
    // 获取目标单元格内的input元素
    const priceInput = targetRow.node().querySelector('td:nth-child(3) input');
    if (priceInput) {
      // 更新input值
      priceInput.value = updateData.price;
      // 通知DataTable该行数据已更新，重新计算排序状态
      targetRow.invalidate();
    }
  }
};

关键注意点 #

• 不要直接通过原生DOM遍历修改表格内容，必须通过DataTable API操作，避免表格内部状态混乱
• 更新input后必须调用row.invalidate()，让DataTable重新读取DOM中的最新值，确保排序、筛选功能正常工作

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