如何在Datatables中渲染自定义HTML实现加密货币实时价格变动排序？

问题说明 #

我正在用jQuery和JavaScript开发加密货币实时价格变动百分比计算器，希望将其集成到Datatables表格插件中实现实时排序功能。已找到支持实时数据自动排序的表格示例，但不清楚如何在Datatables中添加自定义HTML结构，推测需要用到rendering功能，但不了解具体实现方法。项目中表格的第一个<td>包含百分比计算器的输入框，第二个<td>是实时计算结果的输入框。

现有代码 #

HTML #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> 
<table id="crypto-table">
    <thead>
        <tr>
            <th>价格计算器</th>
            <th>变动百分比</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="td-none">
                <input type="text" class="change-calculator calc-from" value="18000">
                <input type="text" id="btc-price" class="dsp-fxd-two change-calculator calc-to" value="">
            </td>
            <td><input type="text" class="calc-result"></td>
        </tr>
        <tr>
            <td class="td-none">
                <input type="text" class="change-calculator calc-from" value="55">
                <input type="text" id="ltc-price" class="dsp-fxd-two change-calculator calc-to" value="">
            </td>
            <td><input type="text" class="calc-result"></td>
        </tr>
    </tbody>
</table>

JavaScript/Jquery 计算逻辑 #

$(document).on("change keyup blur", ".change-calculator", e => {
  let $td = $(e.currentTarget).closest('td');
  let from = Number($td.find('.calc-from').val());
  let to = Number($td.find('.calc-to').val());
  if (from === 0) return; // 避免除以0错误
  let result = ((to - from) / from) * 100;
  let $resultInput = $td.next().find('.calc-result');
  $resultInput.val(result.toFixed(2));
  // 更新Datatables对应行的排序数据
  let row = $td.closest('tr');
  let table = $('#crypto-table').DataTable();
  let rowIndex = table.row(row).index();
  table.cell(rowIndex, 1).data(result); // 存储原始数值用于排序
});

JavaScript/Jquery WebSocket实时价格更新 #

const streams =  {
  'btcusdt@trade': { name: 'btc', input: document.getElementById('btc-price') },
  'ltcusdt@trade': { name: 'ltc', input: document.getElementById('ltc-price') },
};

const streamParams = Object.entries(streams).map(([streamId]) => streamId).join(`/`);
const streamUrl = `wss://stream.binance.com:9443/stream?streams=${streamParams}`;
const wss = new WebSocket(streamUrl);

wss.onmessage = (event) => {
  const eventData = JSON.parse(event.data);
  const streamId = eventData.stream;
  
  const latestPrice = Number.parseFloat(eventData.data.p);
  const lastPrice = streams[streamId].lastPrice || latestPrice;
  
  // 价格变动样式
  const inputClass = latestPrice > lastPrice
    ? 'inc'
    : latestPrice < lastPrice ? 'dec' : '';
  
  const input = streams[streamId].input;
  input.classList.remove('inc','dec');
  if (inputClass) input.classList.add(inputClass);
  input.value = latestPrice.toFixed(2);
  
  streams[streamId].lastPrice = latestPrice;
  
  // 触发计算并更新Datatables
  $('.change-calculator').change();
  $('#crypto-table').DataTable().draw(false); // 重绘表格，保留当前排序状态
};

核心解决方案：Datatables渲染与数据同步 #

1. 引入Datatables资源 #

在HTML中添加Datatables的CSS和JS文件：

<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>

2. 初始化Datatables并配置列渲染 #

关键是利用columns.render函数，既渲染自定义HTML（输入框），又提供用于排序的原始数值：

$(document).ready(function() {
  const table = $('#crypto-table').DataTable({
    columns: [
      { 
        data: null,
        render: function(data, type, row) {
          // 渲染计算器输入框，直接返回原始HTML结构
          return row[0];
        }
      },
      { 
        data: function(row, type, set) {
          // 存储排序用的原始数值
          if (type === 'set') {
            row[1] = set;
            return set.toFixed(2);
          }
          // 显示时渲染输入框，排序时用原始数值
          return type === 'display' 
            ? `<input type="text" class="calc-result" value="${row[1].toFixed(2)}">` 
            : row[1];
        }
      }
    ],
    // 默认按变动百分比降序排序
    order: [[1, 'desc']],
    paging: false // 根据需求关闭分页
  });
});

3. 关键要点 #

• 数据分离：Datatables内部存储用于排序的原始数值，前端显示自定义HTML元素，通过render函数实现两者的映射。
• 实时更新触发：每次价格变动或输入修改后，调用table.draw(false)重绘表格，false参数保留当前的排序和分页状态，避免页面跳转。
• 异常处理：在计算逻辑中加入from === 0的判断，防止出现NaN错误影响Datatables排序。

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