如何在 jQuery DataTable 中绘制 Excel 样式的数据栏？答案

【问题标题】：How do I draw Excel-style data bars in a jQuery DataTable?如何在 jQuery DataTable 中绘制 Excel 样式的数据栏？
【发布时间】：2012-06-22 15:51:52
【问题描述】：

我希望在 jQuery DataTables 表的选定列中的值后面添加数据条，例如 Excel 中的 Data Bars Conditional Formatting option。

This answer 展示了如何使用 jqGrid 实现此类事情的解决方案。如何在 DataTables 中实现类似的效果？

【问题讨论】：

标签： javascript jquery jquery-datatables

【解决方案1】：

应该很简单，使用 fnRowCallback()。

我手头没有我的示例代码，但我只想说，如果您使用 datatables.net 上的示例进行 fnRowCallback，您可以使用数据值创建一个适当宽度的 div。让我尝试在没有实际测试的情况下一起破解它...

假设您的传入数据 (aData) 和呈现的 HTML 中的可见数据位于同一列中（即没有隐藏列）。让我们进一步假设该列是 4（从零开始）并且 aData 中的值代表一个百分比：

"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
  var myValue = aData[4];
  $('td:eq(4)', nRow).html( '<div class="excelBar" style="width:' + myValue + '"></div>' );
  return nRow;
},

这是一个超级简单的例子。它所做的是获取在当前行的第 4 列中找到的值（您可以在此处执行更多逻辑来转换；我假设它已经以百分比的形式出现），修改呈现的 HTML 中第 4 列的 html 以包含与已找到的值具有相同宽度的 div。修改后返回行的新值（即重新格式化的行）。

还有更多内容......必须已经有 CSS 来促进它成为一个条形（显示：块等......），但这是长和短。

【讨论】：

【解决方案2】：

尝试使用 fnRender 方法like this 怎么样，而是添加一个样式像这样的 div：

fnRender: function (object) {
    return "<div style=width: "+obj.data[0]+"%; />"
}

【讨论】：

【解决方案3】：

无法评论这么新的答案。我不得不对接受的答案做一个小改动，并在 div 宽度中添加“px”：

"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
  var myValue = aData[4];
  $('td:eq(4)', nRow).html( '<div class="excelBar" style="width:' + myValue + 'px"></div>' );
  return nRow;
},

【讨论】：

【解决方案4】：

Databar 开箱即用：

$("table").dataTable({}, $("table").databar());

【讨论】：