jQuery Datatables添加新行时货币字符串转为数字的问题

嘿，这个问题我之前也碰到过，根源其实是DataTables的自动数据类型检测机制在搞鬼——它会尝试识别列的数据类型，当Price列里既有带$的字符串（比如初始行的$23.15），又有看起来像数字的内容时，插件会把这一列的类型判定为数字，导致你新增的$1.00被自动解析成纯数字1，货币符号直接丢了。

下面给你几个靠谱的解决办法，你可以根据自己的需求选：

方法1：强制指定列类型为字符串 #

在初始化DataTables的时候，通过columns配置明确把Price列的类型设为string，阻止插件自动解析：

myDatatable = $("#myTable").DataTable({ 
  paging: false, 
  dom: '<"html5buttons"B>lTfgitp',
  columns: [
    { type: 'string' }, // Item # 列
    { type: 'string' }, // Desc 列
    { type: 'string' }  // Price 列，强制为字符串类型
  ]
});

这样不管你用数组还是对象添加新行，Price列的内容都会保持原始的字符串格式，不会被解析成数字。

方法2：用对象形式添加新行 #

比起数组，用键值对的对象来传递行数据，能更明确地指定每一列的内容，避免自动类型转换：

// 用对象代替数组，键对应列的索引（从0开始）
const rowDet = {
  0: '9876',
  1: 'Widget B',
  2: '$1.00'
};
myDatatable.row.add(rowDet).draw(false);

方法3：用render函数统一处理列显示 #

如果你的Price列可能混合了数字和带格式的字符串，可以通过列的render函数来统一格式化，确保不管输入是什么，都显示成货币格式：

myDatatable = $("#myTable").DataTable({ 
  paging: false, 
  dom: '<"html5buttons"B>lTfgitp',
  columns: [
    null, // Item # 用默认配置
    null, // Desc 用默认配置
    { 
      render: function(data, type, row) {
        // 如果是数字，转换成带$的两位小数格式；如果已经是字符串，直接返回
        if (typeof data === 'number') {
          return `$${data.toFixed(2)}`;
        }
        return data;
      }
    }
  ]
});

这个方法的好处是，哪怕某些场景下Price列传入的是纯数字，也能自动渲染成你想要的货币格式，兼容性更强。

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