如何在DataTables的RowGroup分组行中显示对应国家的旗帜图片？

解决方案 #

rows.data()返回的是DataTables封装的类数组API对象，你调用的eq(0)是API集合的过滤方法，返回的还是集合实例而非单条原始数据。要获取分组内第一条行的原始数据，直接调用first()方法即可，同一个城市分组下所有行的国家旗帜信息一致，取第一条数据的字段即可满足需求。

你只需要修改startRender回调逻辑，修改后的代码如下：

rowGroup: {
  dataSrc: 'office',
  startRender: function ( rows, group ) {
    var collapsed = !!collapsedGroups[group];
    rows.nodes().each(function (r) {
      r.style.display = collapsed ? 'none' : '';
    });
    // 取分组内第一条数据的国旗链接
    var firstRowData = rows.data().first();
    var flagImg = '';
    if(firstRowData?.country?.flag) {
      flagImg = `<img src="${firstRowData.country.flag}" style="height: 18px; vertical-align: middle; margin-right: 6px;" alt="国旗">`
    }
    return $('<tr/>')
      .append(`<td colspan="8">${flagImg}${group} (${rows.count()})</td>`)
      .attr('data-name', group)
      .toggleClass('collapsed', collapsed);
  },
},

上述代码会先读取分组下第一条数据的国旗地址，渲染成图片放在城市名称左侧，你可以根据需要调整图片的样式参数适配页面效果。

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