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

我想在jQuery DataTables表的选定列中添加值后面的数据栏 ，如Excel中的数据栏条件格式选项 。

这个答案展示了如何用jqGrid实现这种事情的解决方案。 如何在DataTables中实现类似的效果？

Answer 1

应该很简单，使用fnRowCallback（）。

我没有自己的示例代码，但是如果你在datatables.net上使用fnRowCallback的例子就可以了，你可以使用数据值创建一个适当宽度的div。 让我尝试将它一起黑客攻击而不进行实际测试……

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

"fnRowCallback": function( nRow, aData, iDisplayIndex ) { var myValue = aData[4]; $('td:eq(4)', nRow).html( '
' ); return nRow; }, 

这是一个超简化的例子。 它的作用是获取当前行第4列中的值（你可以在这里做更多逻辑转换;我假设它已经以百分比forms出现），修改了渲染HTML中第4列的html以包含与已找到的值宽度相同的div。 修改后，它返回行的新值（即重新格式化的行）。

还有一点……它必须已经有了CSS来促进它成为一个酒吧（显示：块等等），但这是它的长短。

Answer 2

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

 fnRender: function (object) { return "
" } 

Answer 3

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

 "fnRowCallback": function( nRow, aData, iDisplayIndex ) { var myValue = aData[4]; $('td:eq(4)', nRow).html( '
' ); return nRow; }, 

Answer 4

Databar开箱即用：

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