如何在已上线DataTables中以最小改动实现货币列右对齐？

这个场景我太懂了——上线运行的代码能不动就不动，只改最必要的地方才是稳妥的！给你几个按优先级排序的最小改动方案，直接套进你的现有代码就行：

1. 用DataTables原生columnDefs配置（最推荐，最干净） #

既然你已经通过containerConfig.columnToTotal指定了货币列的索引，直接在DataTable初始化配置里加一段columnDefs，不用修改现有的vm.DataTableColumns数组，改动极小：

$(tableSelector).DataTable({ 
  data : [], 
  columns : vm.DataTableColumns, 
  order : containerConfig.SortOrder, 
  lengthMenu : [5, 10, 100], 
  deferRender : true,
  // 新增这一段配置
  columnDefs: [
    {
      targets: containerConfig.columnToTotal, // 目标就是你要合计的货币列
      className: 'text-right' // 给该列所有单元格加右对齐类
    }
  ],
  footerCallback : function ( row, data, start, end, display ) { 
    var api = this.api(), data; 
    // Remove the formatting to get integer data for summation 
    var intVal = function ( i ) { 
      return typeof i === 'string' ? i.replace(/[\$,]/g, '')*1 : typeof i === 'number' ? i : 0; 
    }; 
    // Total over all pages 
    total = api 
    .column( containerConfig.columnToTotal ) 
    .data() 
    .reduce( function (a, b) { 
      return intVal(a) + intVal(b); 
    }, 0 ); 
    // Update footer - 顺便给合计行也加右对齐
    $( api.column( containerConfig.columnToTotal ).footer() ).html( 'Total: ' + total ).addClass('text-right'); 
  } 
}).on('draw.dt', function (e, settings, processing) { 
  // Make sure the UserPresence is added every time the DataTable's data changes (paging, sorting, search,..) 
  spService.UserPresenceComponent.AddPresence(); 
}); 
// Make component visible 
$(componentSelector).css("visibility", "visible");

如果你的项目没用到Bootstrap，自己加一行CSS就行（放在全局样式里）：

.text-right {
  text-align: right !important; /* 加!important确保覆盖DataTables的默认单元格样式 */
}

2. 利用现有draw.dt事件补样式（零配置改动） #

要是连初始化配置都不想碰，直接在你已经有的draw.dt事件里加一行代码，每次表格重绘（分页、排序、搜索后）自动给货币列加样式：

.on('draw.dt', function (e, settings, processing) { 
  // Make sure the UserPresence is added every time the DataTable's data changes (paging, sorting, search,..) 
  spService.UserPresenceComponent.AddPresence();
  // 新增这一行：给货币列所有单元格加右对齐类
  $(this.api().column(containerConfig.columnToTotal).nodes()).addClass('text-right');
})

同样需要上面那行CSS来生效，这个方案完全不用动DataTable的初始化配置，改动最少。

3. 仅修改footerCallback（如果只需要内容右对齐） #

如果只是希望货币列的内容（包括合计）右对齐，也可以直接在footerCallback里给单元格加样式，同时给表体单元格补样式：

footerCallback : function ( row, data, start, end, display ) { 
  var api = this.api(), data; 
  // Remove the formatting to get integer data for summation 
  var intVal = function ( i ) { 
    return typeof i === 'string' ? i.replace(/[\$,]/g, '')*1 : typeof i === 'number' ? i : 0; 
  }; 
  // Total over all pages 
  total = api 
  .column( containerConfig.columnToTotal ) 
  .data() 
  .reduce( function (a, b) { 
    return intVal(a) + intVal(b); 
  }, 0 ); 
  // 给表体货币列加右对齐
  $(api.column(containerConfig.columnToTotal).nodes()).addClass('text-right');
  // Update footer并加右对齐
  $( api.column( containerConfig.columnToTotal ).footer() ).html( 'Total: ' + total ).addClass('text-right'); 
} 

这个方案也不用改其他地方，直接在现有回调里加两行代码就行。

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