使用dynatable生成交互式表格遇列值undefined，求data-dynatable-ignore正确用法

我仔细看了你的代码和遇到的问题，核心问题出在两个关键点上：data-dynatable-ignore的使用场景搞错了，再加上表头列字段和API返回的数据不匹配，才导致部分列显示undefined。

一、先搞懂data-dynatable-ignore的正确用法 #

这个属性是用来告诉Dynatable忽略某一个具体的数据列，它需要加在实际承载数据的元素上，也就是你表头第二行的那些<th>，而不是加在合并的表头（colspan=2的那些<th>）上。合并的表头只是视觉上的分组，不属于Dynatable要处理的数据列，所以给它们加这个属性完全起不到作用。

如果你的需求是不想让某些数据列参与Dynatable的功能（比如排序、筛选），直接给对应的子<th>加上data-dynatable-ignore="true"就可以了，但看你的代码，这些列是要显示数据的，所以其实不需要给它们加这个属性。

二、列显示undefined的根本原因：字段不匹配 #

Dynatable是通过表头的data-dynatable-column值去匹配API返回的记录字段的，两者必须完全一致。看你的API返回数据，字段名是valor_inclusao、perc_inclusao、valor_confirmacao、perc_confirmacao，但你表头写的是ValorI、%I、ValorC、%C，Dynatable找不到对应的数据，自然就显示undefined了。

三、修正后的完整代码 #

HTML部分 #

<table id="example" cellspacing="0" width="100%" class="dynatable table table-condensed table-hover table-striped table-bordered">
  <thead>
    <tr>
      <!-- 字段与API返回的unidade、meta严格对应 -->
      <th rowspan="2" data-dynatable-column="unidade">Unidade</th>
      <th rowspan="2" data-dynatable-column="meta">Meta</th>
      <!-- 合并表头无需添加data-dynatable-ignore -->
      <th colspan="2">Inclusão</th>
      <th colspan="2">Confirmação</th>
    </tr>
    <tr>
      <!-- 字段严格匹配API返回的字段名 -->
      <th data-dynatable-column="valor_inclusao">Valor</th>
      <th data-dynatable-column="perc_inclusao">%</th>
      <th data-dynatable-column="valor_confirmacao">Valor</th>
      <th data-dynatable-column="perc_confirmacao">%</th>
    </tr>
  </thead>
</table>

JavaScript部分 #

$('#example').dynatable({
  features: {
    paginate: false,
    sort: true,
    pushState: false,
    search: false,
    recordCount: false,
    perPageSelect: false
  },
  dataset: {
    ajax: true,
    ajaxUrl: 'https://api.myjson.com/bins/n4ecd',
    ajaxOnLoad: true,
    records: []
  }
});

四、进阶：更灵活的列控制（可选） #

如果你需要对某些列进行精细控制（比如禁用排序、隐藏列），推荐在Dynatable的配置里通过columns选项设置，比直接用data-dynatable-ignore更灵活：

$('#example').dynatable({
  // 其他配置保持不变
  columns: {
    // 比如给perc_inclusao列设置禁用排序
    'perc_inclusao': {
      sortable: false,
      // 如果要完全忽略该列，设置ignore: true
      // ignore: true
    }
  }
});

这样调整后，你的表格就能正常显示所有数据，data-dynatable-ignore也能按预期生效啦。

内容的提问来源于stack exchange，提问作者Pv-Viana