如何不修改原JSON，将dynatable表格的id列显示为securityNumber

不用愁，Dynatable其实是支持自定义表头文本的，只是可能你没挖到文档里的这个配置点。下面给你两种靠谱的解决办法，还附了替代插件的方案：

方法一：直接用Dynatable的columns配置自定义表头 #

初始化Dynatable的时候，通过columns选项手动指定每个字段的表头标签，这样既不用修改原始JSON，又能把id显示成securityNumber。示例代码如下：

// 假设你的原始数据存在originalData变量里
$('#your-table-id').dynatable({
  dataset: {
    records: originalData
  },
  columns: [
    {
      attribute: 'id', // 对应原始JSON的属性名
      label: 'securityNumber', // 你想要显示的表头文本
      visible: true // 确保该列显示
    },
    // 把其他需要显示的字段也按这个格式列出来，比如：
    {
      attribute: 'username',
      label: 'Username'
    },
    {
      attribute: 'email',
      label: 'Email Address'
    }
    // 更多字段...
  ]
});

如果你的字段很多，不想手动一个个写，可以用动态生成columns数组的方式，自动替换id的表头：

const originalData = [/* 你的数据库返回的对象列表 */];
// 从第一条数据获取所有字段名，生成columns配置
const columns = Object.keys(originalData[0]).map(field => {
  return {
    attribute: field,
    label: field === 'id' ? 'securityNumber' : field
  };
});

$('#your-table-id').dynatable({
  dataset: {
    records: originalData
  },
  columns: columns
});

方法二：如果Dynatable不好用，换用DataTables插件 #

要是你觉得Dynatable的配置不够顺手，DataTables是个更流行的替代方案，它的表头自定义逻辑更直观：

$('#your-table-id').DataTable({
  data: originalData,
  columns: [
    { data: 'id', title: 'securityNumber' },
    { data: 'username', title: 'Username' },
    { data: 'email', title: 'Email Address' }
    // 更多字段...
  ]
});

同样支持动态生成columns：

const columns = Object.keys(originalData[0]).map(field => {
  return {
    data: field,
    title: field === 'id' ? 'securityNumber' : field
  };
});

$('#your-table-id').DataTable({
  data: originalData,
  columns: columns
});

这两种方法都完全不会修改你的原始JSON数据，只是在渲染表格的时候替换了表头文本，应该能完美解决你的问题。

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