Menu
I am using dataTables plugin. I see that numeric data is not right aligned.
The plugin I used is from here: http://www.datatables.net/
942
To do that, you can use the "columnDefs" property and pass in the targets, which is the index value of the column, and specify the class that you want to apply to that column. $('#my-data-table'). DataTable({ columnDefs: [ { targets: [1, 2], className: "text-right" }, ] });
The alignment keyboard shortcut keys can vary depending on what program is used and the type of computer. However, generally speaking, use Ctrl + L to left align, Ctrl + E to center, Ctrl + R to right align, and Ctrl + J to justify text.
As columnDefs allows columns to be defined one or more times in different column definition objects (typically to define different aspects of the columns) conflicts can arise whereby a single property might be defined with different values for the same column.
In the columns definition you can use className:
$("#tabDatos").dataTable({
columns: [
{ data: "fecha" },
{ data: "importe", className: "text-right" }
]
});And define the css class "text-right" if you aren't using Bootstrap
113
When you define your datatables object you can optionally customize the column types including adding a css class. You can then use that class to do anything with that column.
$('#myTable').dataTable( {
"aoColumnDefs": [
{ "sClass": "numericCol", "aTargets": [ 0 ] }
//You can also set 'sType' to 'numeric' and use the built in css.
]
} );
The value for aTargets is the index of the column you want to apply this class to.
In your CSS have something along the lines of
.numericCol{
float:right;
}
I used ColumnDefs to align data:
"columnDefs": [{ targets: [3, 4, 5, 6, 7], className: 'dt-body-right' },
{ targets: [0, 1, 2], className: 'dt-body-center' }],
OR By directly applying class
{ 'data': 'TotalMaleFarmers',className: "text-center" },
here is my solution.
$('#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>i hope u find something useful from above code... cheers...
36
In version 1.10.19 to align my 2nd and 3rd column right, I do this:
$('#myDataTableHere').DataTable({
columnDefs: [
{ targets: [1, 2], className: "right-aligned-cell" },
]
}
Obviously, my CSS has a class .right-aligned-cell with text-align: right; to actually get the result.
Note:
HTML-documentation suggests, that using CSS class .dt-body-right you would be able to do the same. That does not work for AJAX-approach.
42
"columnDefs": [{
"targets": 4, // target column
"className": "text-right",
"width": "15%"
}]
Create style:
.text-right {
text-align: right;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
