如何在dataTables中将数字数据右对齐
Posted
技术标签:
【中文标题】如何在dataTables中将数字数据右对齐【英文标题】：How to right align numeric data to right in dataTables 【发布时间】：2015-05-14 09:15:26 【问题描述】：我正在使用 dataTables 插件。我看到数字数据没有正确对齐。
dataTables 是这样工作的吗？ 我的数据格式是否错误？ 如何编写检查 dataTable 的每个单元格的数据类型并在数据为数字时将数据右对齐的功能？我使用的插件来自这里：http://www.datatables.net/
【问题讨论】：
你说的是 jquery 数据表吗？我已经编辑了标签，但问题太模糊了，我开始怀疑我的决定。 请展示一个包含数据（行）的表格示例。将问题包含在 html 中。 【参考方案1】：在列定义中你可以使用className：
$("#tabDatos").dataTable(
columns: [
data: "fecha" ,
data: "importe", className: "text-right"
]
);如果您不使用 Bootstrap，请定义 css 类“text-right”
【讨论】：
取决于版本，这也可能有所帮助：className: "dt-right"【参考方案2】：
定义数据表对象时，您可以选择自定义列类型，包括添加 css 类。然后，您可以使用该类对该列执行任何操作。
$('#myTable').dataTable(
"aoColumnDefs": [
"sClass": "numericCol", "aTargets": [ 0 ]
//You can also set 'sType' to 'numeric' and use the built in css.
]
);
aTargets 的值是要应用此类的列的索引。
在你的 CSS 中有一些类似于
的东西.numericCol
float:right;
【讨论】：
不，我想要的是，如果一个单元格有一个数字数据，它必须右对齐，如果它有一个字符串数据，它必须左对齐。它应该适用于整个桌子。我们可以使用外部 jquery 来做到这一点。我想知道在 dataTables 中是否有一种干净的方法来做到这一点 如果您想完全控制外观，这是在数据表中执行此操作的一种简洁方法。我添加了另一个选项作为注释，您将 sType 属性设置为“数字”。但是，如果这没有达到您在设置自定义 css 类之后的整体外观。 这更适合渲染（td & text-align）： td.numericCol text-align: right; 【参考方案3】：我使用 ColumnDefs 来对齐数据：
"columnDefs": [ targets: [3, 4, 5, 6, 7], className: 'dt-body-right' ,
targets: [0, 1, 2], className: 'dt-body-center' ],
或 通过直接应用类
'data': 'TotalMaleFarmers',className: "text-center" ,
【讨论】：
【参考方案4】：在 1.10.19 版本中，为了使我的第 2 列和第 3 列右对齐，我这样做：
$('#myDataTableHere').DataTable(
columnDefs: [
targets: [1, 2], className: "right-aligned-cell" ,
]
显然，我的 CSS 有一个 .right-aligned-cell 和 text-align: right; 的类来实际获得结果。
注意：
HTML 文档表明，使用 CSS 类 .dt-body-right 您也可以这样做。这不适用于 AJAX 方法。
【讨论】：
【参考方案5】：这是我的解决方案。
$('#itemTable1').dataTable(bPaginate: false, bFilter: false, bInfo: false, bSort: false);
$('#itemTable2').dataTable(bPaginate: false, bFilter: false, bInfo: false, bSort: false);
$('#itemTable3').dataTable(bPaginate: false, bFilter: false, bInfo: false, bSort: false);
$('#itemTable4').dataTable(bPaginate: false, bFilter: false, bInfo: false, bSort: false);
$('#itemTable5').dataTable(bPaginate: false, bFilter: false, bInfo: false, bSort: false);
//For fourth example
$('#itemTable4 td.numval').css('text-align', 'right');
//For fifth example
var tableData = [['5100','Bacon',1,'KG',400],['5101','Chilly',500,'GM',30],['5102','Pepper',1,'KG',250]];
$.each(tableData, function(i, item)
$('#itemTable5').DataTable().row.add([
tableData[i][0],
tableData[i][1],
tableData[i][2],
tableData[i][3],
tableData[i][4]
]).draw();
);
// after loading data
$("#itemTable5 tbody tr").each(function() $(this).find('td:eq(2)').addClass('numcol'); $(this).find('td:eq(4)').addClass('numcol');
);
$('#itemTable5 td.numcol').css('text-align', 'right');table td.numcol
text-align : right;
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet"/>
</head>
<body>
<h2>Example 1 : Using Align Attribute</h2>
<table id="itemTable1">
<thead>
<tr>
<th>Item Id</th>
<th>Item Name</th>
<th>Item Qty</th>
<th>Item Unit</th>
<th>Item Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>5100</td>
<td>Bacon</td>
<td align="right">1</td>
<td>KG</td>
<td align="right">400</td>
</tr><tr>
<td>5101</td>
<td>Chilly</td>
<td align="right">500</td>
<td>GM</td>
<td align="right">30</td>
</tr>
<tr>
<td>5102</td>
<td>Pepper</td>
<td align="right">1</td>
<td>KG</td>
<td align="right">250</td>
</tr>
</tbody>
</table>
<h2>Example 2 : Using Style </h2>
<table id="itemTable2">
<thead>
<tr>
<th>Item Id</th>
<th>Item Name</th>
<th>Item Qty</th>
<th>Item Unit</th>
<th>Item Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>5100</td>
<td>Bacon</td>
<td style="text-align:right;">1</td>
<td>KG</td>
<td style="text-align:right;">400</td>
</tr><tr>
<td>5101</td>
<td>Chilly</td>
<td style="text-align:right;">500</td>
<td>GM</td>
<td style="text-align:right;">30</td>
</tr>
<tr>
<td>5102</td>
<td>Pepper</td>
<td style="text-align:right;">1</td>
<td>KG</td>
<td style="text-align:right;">250</td>
</tr>
</tbody>
</table>
<h2>Example 3 : Using Class </h2>
<table id="itemTable3">
<thead>
<tr>
<th>Item Id</th>
<th>Item Name</th>
<th>Item Qty</th>
<th>Item Unit</th>
<th>Item Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>5100</td>
<td>Bacon</td>
<td class="numcol">1</td>
<td>KG</td>
<td class="numcol">400</td>
</tr><tr>
<td>5101</td>
<td>Chilly</td>
<td class="numcol">500</td>
<td>GM</td>
<td class="numcol">30</td>
</tr>
<tr>
<td>5102</td>
<td>Pepper</td>
<td class="numcol">1</td>
<td>KG</td>
<td class="numcol">250</td>
</tr>
</tbody>
</table>
<h2>Example 4 : Using JQuery for static table</h2>
<table id="itemTable4">
<thead>
<tr>
<th>Item Id</th>
<th>Item Name</th>
<th>Item Qty</th>
<th>Item Unit</th>
<th>Item Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>5100</td>
<td>Bacon</td>
<td class="numval">1</td>
<td>KG</td>
<td class="numval">400</td>
</tr><tr>
<td>5101</td>
<td>Chilly</td>
<td class="numval">500</td>
<td>GM</td>
<td class="numval">30</td>
</tr>
<tr>
<td>5102</td>
<td>Pepper</td>
<td class="numval">1</td>
<td>KG</td>
<td class="numval">250</td>
</tr>
</tbody>
</table>
<h2>Example 5 : Using JQuery for dynamic table</h2>
<table id="itemTable5">
<thead>
<tr>
<th>Item Id</th>
<th>Item Name</th>
<th>Item Qty</th>
<th>Item Unit</th>
<th>Item Price</th>
</tr>
</thead>
</table>
</body>
</html>我希望你能从上面的代码中找到有用的东西......干杯......
【讨论】：
【参考方案6】：这是我的解决方案，适用于任何列的 1.10.16 版：
$.fn.table = function()
return this.each(function()
var self = $(this);
self.DataTable(
columnDefs: self.find('th').map(function()
var self = $(this);
return
render: function(data, type, row, meta)
if (data === (+data).toString())
return '<div style="text-align: right">' + data + '</div>';
else
return data;
,
targets: self.index()
;
).get()
);
);
;
【讨论】：
【参考方案7】：现在已经过去了几个小时，我一直在绞尽脑汁让数字在“打印”模式下对齐到右侧。有人知道如何在打印时使数字右侧对齐。
我的 html 格式很好，但是打印时所有内容都向左移动。
您可以使用一些功能，当检测到诸如“”之类的标签类型时，可以为其中的所有内容分配对齐方式。这样我们就可以将数字放入该标签中并将它们向右对齐。
非常感谢您给予我的帮助。
【讨论】：
【参考方案8】：从您的 cmets 看来，您正在谈论通过打印机实际打印表格数据。如果是这样，您需要在您的自定义 CSS 样式表中制作 打印样式表 和/或将 @media 查询设置为打印。
我更喜欢两者都做
<link rel="stylesheet" type="text/css" media="print" href="/assets/print.css">
@media print
imgdisplay:none;
.text-rightfloat: right; clear:none;
etc...
根据数据表的类标识，很简单。
$("#table1").dataTable(
columns: [
data: "account name"
data: "balance", className: "text-right"
]
);
【讨论】：
【参考方案9】： "columnDefs": [
"targets": 4, // target column
"className": "text-right",
"width": "15%"
]
创建样式：
.text-right
text-align: right;
【讨论】：
以上是关于如何在dataTables中将数字数据右对齐的主要内容，如果未能解决你的问题，请参考以下文章