我正在使用 dataTables 插件。我看到数字数据没有正确对齐。
我使用的插件来自这里：http://www.datatables.net/
【问题讨论】：
标签： datatables
在列定义中你可以使用className：
$("#tabDatos").dataTable({
columns: [
{ data: "fecha" },
{ data: "importe", className: "text-right" }
]
});如果您不使用 Bootstrap，请定义 css 类“text-right”
【讨论】：
className: "dt-right"
定义数据表对象时，您可以选择自定义列类型，包括添加 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;
}
【讨论】：
我使用 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" },
【讨论】：
在 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 方法。
【讨论】：
这是我的解决方案。
$('#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>我希望你能从上面的代码中找到有用的东西......干杯......
【讨论】：
这是我的解决方案，适用于任何列的 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()
});
});
};
【讨论】：
现在已经过去了几个小时，我一直在绞尽脑汁让数字在“打印”模式下对齐到右侧。有人知道如何在打印时使数字右侧对齐。
我的 html 格式很好，但是打印时所有内容都向左移动。
您可以使用一些功能，当检测到诸如“”之类的标签类型时，可以为其中的所有内容分配对齐方式。这样我们就可以将数字放入该标签中并将它们向右对齐。
非常感谢您给予我的帮助。
【讨论】：
从您的 cmets 看来，您正在谈论通过打印机实际打印表格数据。如果是这样，您需要在您的自定义 CSS 样式表中制作 打印样式表 和/或将 @media 查询设置为打印。
我更喜欢两者都做
<link rel="stylesheet" type="text/css" media="print" href="/assets/print.css">
@media print{
img{display:none;}
.text-right{float: right; clear:none;}
etc...
}
根据数据表的类标识，很简单。
$("#table1").dataTable({
columns: [
{ data: "account name"}
{ data: "balance", className: "text-right" }
]
});
【讨论】：
"columnDefs": [{
"targets": 4, // target column
"className": "text-right",
"width": "15%"
}]
创建样式：
.text-right {
text-align: right;
}
【讨论】：