How to right align numeric data to right in dataTablesDropdown filter jquery datatablesDataTables sorts strings instead of numericjQuery , datatables converting cellsSpecify column data type with a <th> attribute for DataTablesCustom sorting on values in a data-sort attribute with Jquery DatatablesjQuery DataTable title-numeric sortHow to redraw DataTable with new dataDataTables Plugin - Align buttons to the rightRight align JQuery Datatable cell using “columns.data” and JSON data?datatables align to right
How effective would a full set of plate armor be against wild animals found in temperate regions (bears, snakes, wolves)?
What did the 8086 (and 8088) do upon encountering an illegal instruction?
Can artificial satellite positions affect tides?
Does "aurea" have the second meaning?
Why not make one big cpu core?
Loop counter not interpreted as number
ISP is not hashing the password I log in with online. Should I take any action?
Is fission/fusion to iron the most efficient way to convert mass to energy?
My parents claim they cannot pay for my college education; what are my options?
Fastest way from 10 to 1 with everyone in between
Idiom for 'person who gets violent when drunk"
Why did the Death Eaters wait to reopen the Chamber of Secrets?
Parallelized for loop in Bash
Why did the AvroCar fail to fly above 3 feet?
Print the phrase "And she said, 'But that's his.'" using only the alphabet
How can religions without a hell discourage evil-doing?
How can I find out about the game world without meta-influencing it?
Past vs. present tense when referring to a fictional character
DBCC SHRINKFILE on the distribution database
Is there a term for someone whose preferred policies are a mix of Left and Right?
Why is C++ template use not recommended in space/radiated environment?
Nth term of Van Eck Sequence
Do Veracrypt encrypted volumes have any kind of brute force protection?
Is all-caps blackletter no longer taboo?
How to right align numeric data to right in dataTables
Dropdown filter jquery datatablesDataTables sorts strings instead of numericjQuery , datatables converting cellsSpecify column data type with a <th> attribute for DataTablesCustom sorting on values in a data-sort attribute with Jquery DatatablesjQuery DataTable title-numeric sortHow to redraw DataTable with new dataDataTables Plugin - Align buttons to the rightRight align JQuery Datatable cell using “columns.data” and JSON data?datatables align to right
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
6
I am using dataTables plugin. I see that numeric data is not right aligned.
- Is this how dataTables work?
- Have I incorrectly formatted in the data?
- How do I write functionality that checks the data type of each cell of a dataTable and aligns the data to right if it is numeric?
The plugin I used is from here: http://www.datatables.net/
datatables
edited Mar 25 at 1:42
Aran Mulholland
15.3k21119208
asked Mar 12 '15 at 9:28
prasadmsvsprasadmsvs
53931024
add a comment |
6
I am using dataTables plugin. I see that numeric data is not right aligned.
- Is this how dataTables work?
- Have I incorrectly formatted in the data?
- How do I write functionality that checks the data type of each cell of a dataTable and aligns the data to right if it is numeric?
The plugin I used is from here: http://www.datatables.net/
datatables
edited Mar 25 at 1:42
Aran Mulholland
15.3k21119208
asked Mar 12 '15 at 9:28
prasadmsvsprasadmsvs
53931024
1
Are you talking about jquery datatables? I've edited the tag but the question is so vague I'm beginning to doubt my decision.
– markpsmith
Mar 12 '15 at 9:34
Please show an example of a table with data (rows). Incorporate the HTML the question.
– davidkonrad
Mar 12 '15 at 11:24
add a comment |
6
6
6
I am using dataTables plugin. I see that numeric data is not right aligned.
- Is this how dataTables work?
- Have I incorrectly formatted in the data?
- How do I write functionality that checks the data type of each cell of a dataTable and aligns the data to right if it is numeric?
The plugin I used is from here: http://www.datatables.net/
datatables
edited Mar 25 at 1:42
Aran Mulholland
15.3k21119208
asked Mar 12 '15 at 9:28
prasadmsvsprasadmsvs
53931024
I am using dataTables plugin. I see that numeric data is not right aligned.
- Is this how dataTables work?
- Have I incorrectly formatted in the data?
- How do I write functionality that checks the data type of each cell of a dataTable and aligns the data to right if it is numeric?
The plugin I used is from here: http://www.datatables.net/
datatables
datatables
edited Mar 25 at 1:42
Aran Mulholland
15.3k21119208
asked Mar 12 '15 at 9:28
prasadmsvsprasadmsvs
53931024
edited Mar 25 at 1:42
Aran Mulholland
15.3k21119208
asked Mar 12 '15 at 9:28
prasadmsvsprasadmsvs
53931024
edited Mar 25 at 1:42
Aran Mulholland
15.3k21119208
edited Mar 25 at 1:42
Aran Mulholland
15.3k21119208
edited Mar 25 at 1:42
Aran Mulholland
15.3k21119208
15.3k21119208
asked Mar 12 '15 at 9:28
prasadmsvsprasadmsvs
53931024
asked Mar 12 '15 at 9:28
prasadmsvsprasadmsvs
53931024
asked Mar 12 '15 at 9:28
prasadmsvsprasadmsvs
53931024
53931024
1
Are you talking about jquery datatables? I've edited the tag but the question is so vague I'm beginning to doubt my decision.
– markpsmith
Mar 12 '15 at 9:34
Please show an example of a table with data (rows). Incorporate the HTML the question.
– davidkonrad
Mar 12 '15 at 11:24
add a comment |
1
Are you talking about jquery datatables? I've edited the tag but the question is so vague I'm beginning to doubt my decision.
– markpsmith
Mar 12 '15 at 9:34
Please show an example of a table with data (rows). Incorporate the HTML the question.
– davidkonrad
Mar 12 '15 at 11:24
1
1
Are you talking about jquery datatables? I've edited the tag but the question is so vague I'm beginning to doubt my decision.
– markpsmith
Mar 12 '15 at 9:34
Are you talking about jquery datatables? I've edited the tag but the question is so vague I'm beginning to doubt my decision.
– markpsmith
Mar 12 '15 at 9:34
Please show an example of a table with data (rows). Incorporate the HTML the question.
– davidkonrad
Mar 12 '15 at 11:24
Please show an example of a table with data (rows). Incorporate the HTML the question.
– davidkonrad
Mar 12 '15 at 11:24
add a comment |
8 Answers
8
active
oldest
votes
5
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;
answered Mar 12 '15 at 17:33
Rick SchmidtRick Schmidt
43429
No what I want is, If a cell has a numeic data it has to right aligned and if it has a string data it has to be left aligned. It should work on entire table. We can do this using external jquery. I wanted to know if there's a clean way to do this in dataTables
– prasadmsvs
Mar 13 '15 at 9:54
This is a clean way to do it in datatables if you want total control over the appearance. There is another option which I added as a comment where you set the sType property to 'numeric'. However if that does not achieve the total appearance you were after set a custom css class.
– Rick Schmidt
Mar 13 '15 at 12:38
This is much better for rendering (td & text-align): td.numericCol text-align: right;
– xnagyg
Oct 18 '17 at 20:53
add a comment |
3
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
answered Dec 14 '18 at 9:41
DuefectuDuefectu
3721716
add a comment |
1
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...
answered Jan 4 '17 at 8:59
S37HUS37HU
112
add a comment |
1
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' ],
- Column Number 3, 4, 5, 6, 7 aligned to the right side
- Column Number 0, 1, 2 is aligned to the center
OR
By directly applying class
'data': 'TotalMaleFarmers',className: "text-center" ,
answered Mar 2 at 8:00
subramanya4subramanya4
11916
add a comment |
0
Here is my solution that work with version 1.10.16 with any column:
$.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()
);
);
;
answered Jan 26 '18 at 12:01
jcubicjcubic
35.6k33135241
add a comment |
0
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.
answered Aug 20 '18 at 13:01
Jari TurkiaJari Turkia
3921713
add a comment |
0
It's been a few hours now, I've been racking my brains to get the numbers aligned to the right in "print" mode. Someone knows how to get the alignment to the right of the numbers when printing.
The html I have it well formatted, but when printing everything goes to the left.
You can use some function that when detecting a type of label such as "" everything that is inside it can be assigned an alignment. This way we could put numbers inside that label and align them to the right.
Thank you very much for the help you can give me.
answered Sep 7 '18 at 6:54
Andrés SepcidAndrés Sepcid
11
add a comment |
0
It seems from your comments you are talking about actually printing the table data via a printer. If so you need to make a print stylesheet and/or set the @media query to print within your custom css stylesheet.
I prefer to do both
<link rel="stylesheet" type="text/css" media="print" href="/assets/print.css">
@media print
imgdisplay:none;
.text-rightfloat: right; clear:none;
etc...
As per the data table's class identification it is very simple.
$("#table1").dataTable(
columns: [
data: "account name"
data: "balance", className: "text-right"
]
);
answered Mar 2 at 8:21
yardpenaltyyardpenalty
89111323
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f29005984%2fhow-to-right-align-numeric-data-to-right-in-datatables%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
8 Answers
8
active
oldest
votes
8 Answers
8
active
oldest
votes
active
oldest
votes
active
oldest
votes
5
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;
answered Mar 12 '15 at 17:33
Rick SchmidtRick Schmidt
43429
No what I want is, If a cell has a numeic data it has to right aligned and if it has a string data it has to be left aligned. It should work on entire table. We can do this using external jquery. I wanted to know if there's a clean way to do this in dataTables
– prasadmsvs
Mar 13 '15 at 9:54
This is a clean way to do it in datatables if you want total control over the appearance. There is another option which I added as a comment where you set the sType property to 'numeric'. However if that does not achieve the total appearance you were after set a custom css class.
– Rick Schmidt
Mar 13 '15 at 12:38
This is much better for rendering (td & text-align): td.numericCol text-align: right;
– xnagyg
Oct 18 '17 at 20:53
add a comment |
5
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;
answered Mar 12 '15 at 17:33
Rick SchmidtRick Schmidt
43429
No what I want is, If a cell has a numeic data it has to right aligned and if it has a string data it has to be left aligned. It should work on entire table. We can do this using external jquery. I wanted to know if there's a clean way to do this in dataTables
– prasadmsvs
Mar 13 '15 at 9:54
This is a clean way to do it in datatables if you want total control over the appearance. There is another option which I added as a comment where you set the sType property to 'numeric'. However if that does not achieve the total appearance you were after set a custom css class.
– Rick Schmidt
Mar 13 '15 at 12:38
This is much better for rendering (td & text-align): td.numericCol text-align: right;
– xnagyg
Oct 18 '17 at 20:53
add a comment |
5
5
5
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;
answered Mar 12 '15 at 17:33
Rick SchmidtRick Schmidt
43429
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;
answered Mar 12 '15 at 17:33
Rick SchmidtRick Schmidt
43429
edited Mar 13 '15 at 12:33
answered Mar 12 '15 at 17:33
Rick SchmidtRick Schmidt
43429
answered Mar 12 '15 at 17:33
Rick SchmidtRick Schmidt
43429
answered Mar 12 '15 at 17:33
Rick SchmidtRick Schmidt
43429
43429
No what I want is, If a cell has a numeic data it has to right aligned and if it has a string data it has to be left aligned. It should work on entire table. We can do this using external jquery. I wanted to know if there's a clean way to do this in dataTables
– prasadmsvs
Mar 13 '15 at 9:54
This is a clean way to do it in datatables if you want total control over the appearance. There is another option which I added as a comment where you set the sType property to 'numeric'. However if that does not achieve the total appearance you were after set a custom css class.
– Rick Schmidt
Mar 13 '15 at 12:38
This is much better for rendering (td & text-align): td.numericCol text-align: right;
– xnagyg
Oct 18 '17 at 20:53
add a comment |
No what I want is, If a cell has a numeic data it has to right aligned and if it has a string data it has to be left aligned. It should work on entire table. We can do this using external jquery. I wanted to know if there's a clean way to do this in dataTables
– prasadmsvs
Mar 13 '15 at 9:54
This is a clean way to do it in datatables if you want total control over the appearance. There is another option which I added as a comment where you set the sType property to 'numeric'. However if that does not achieve the total appearance you were after set a custom css class.
– Rick Schmidt
Mar 13 '15 at 12:38
This is much better for rendering (td & text-align): td.numericCol text-align: right;
– xnagyg
Oct 18 '17 at 20:53
No what I want is, If a cell has a numeic data it has to right aligned and if it has a string data it has to be left aligned. It should work on entire table. We can do this using external jquery. I wanted to know if there's a clean way to do this in dataTables
– prasadmsvs
Mar 13 '15 at 9:54
No what I want is, If a cell has a numeic data it has to right aligned and if it has a string data it has to be left aligned. It should work on entire table. We can do this using external jquery. I wanted to know if there's a clean way to do this in dataTables
– prasadmsvs
Mar 13 '15 at 9:54
This is a clean way to do it in datatables if you want total control over the appearance. There is another option which I added as a comment where you set the sType property to 'numeric'. However if that does not achieve the total appearance you were after set a custom css class.
– Rick Schmidt
Mar 13 '15 at 12:38
This is a clean way to do it in datatables if you want total control over the appearance. There is another option which I added as a comment where you set the sType property to 'numeric'. However if that does not achieve the total appearance you were after set a custom css class.
– Rick Schmidt
Mar 13 '15 at 12:38
This is much better for rendering (td & text-align): td.numericCol text-align: right;
– xnagyg
Oct 18 '17 at 20:53
This is much better for rendering (td & text-align): td.numericCol text-align: right;
– xnagyg
Oct 18 '17 at 20:53
add a comment |
3
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
answered Dec 14 '18 at 9:41
DuefectuDuefectu
3721716
add a comment |
3
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
answered Dec 14 '18 at 9:41
DuefectuDuefectu
3721716
add a comment |
3
3
3
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
answered Dec 14 '18 at 9:41
DuefectuDuefectu
3721716
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
$("#tabDatos").dataTable(
columns: [
data: "fecha" ,
data: "importe", className: "text-right"
]
);$("#tabDatos").dataTable(
columns: [
data: "fecha" ,
data: "importe", className: "text-right"
]
);answered Dec 14 '18 at 9:41
DuefectuDuefectu
3721716
answered Dec 14 '18 at 9:41
DuefectuDuefectu
3721716
answered Dec 14 '18 at 9:41
DuefectuDuefectu
3721716
answered Dec 14 '18 at 9:41
DuefectuDuefectu
3721716
3721716
add a comment |
add a comment |
1
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...
answered Jan 4 '17 at 8:59
S37HUS37HU
112
add a comment |
1
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...
answered Jan 4 '17 at 8:59
S37HUS37HU
112
add a comment |
1
1
1
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...
answered Jan 4 '17 at 8:59
S37HUS37HU
112
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...
$('#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>$('#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>answered Jan 4 '17 at 8:59
S37HUS37HU
112
answered Jan 4 '17 at 8:59
S37HUS37HU
112
answered Jan 4 '17 at 8:59
S37HUS37HU
112
answered Jan 4 '17 at 8:59
S37HUS37HU
112
112
add a comment |
add a comment |
1
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' ],
- Column Number 3, 4, 5, 6, 7 aligned to the right side
- Column Number 0, 1, 2 is aligned to the center
OR
By directly applying class
'data': 'TotalMaleFarmers',className: "text-center" ,
answered Mar 2 at 8:00
subramanya4subramanya4
11916
add a comment |
1
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' ],
- Column Number 3, 4, 5, 6, 7 aligned to the right side
- Column Number 0, 1, 2 is aligned to the center
OR
By directly applying class
'data': 'TotalMaleFarmers',className: "text-center" ,
answered Mar 2 at 8:00
subramanya4subramanya4
11916
add a comment |
1
1
1
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' ],
- Column Number 3, 4, 5, 6, 7 aligned to the right side
- Column Number 0, 1, 2 is aligned to the center
OR
By directly applying class
'data': 'TotalMaleFarmers',className: "text-center" ,
answered Mar 2 at 8:00
subramanya4subramanya4
11916
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' ],
- Column Number 3, 4, 5, 6, 7 aligned to the right side
- Column Number 0, 1, 2 is aligned to the center
OR
By directly applying class
'data': 'TotalMaleFarmers',className: "text-center" ,
answered Mar 2 at 8:00
subramanya4subramanya4
11916
edited Apr 19 at 6:28
answered Mar 2 at 8:00
subramanya4subramanya4
11916
answered Mar 2 at 8:00
subramanya4subramanya4
11916
answered Mar 2 at 8:00
subramanya4subramanya4
11916
11916
add a comment |
add a comment |
0
Here is my solution that work with version 1.10.16 with any column:
$.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()
);
);
;
answered Jan 26 '18 at 12:01
jcubicjcubic
35.6k33135241
add a comment |
0
Here is my solution that work with version 1.10.16 with any column:
$.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()
);
);
;
answered Jan 26 '18 at 12:01
jcubicjcubic
35.6k33135241
add a comment |
0
0
0
Here is my solution that work with version 1.10.16 with any column:
$.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()
);
);
;
answered Jan 26 '18 at 12:01
jcubicjcubic
35.6k33135241
Here is my solution that work with version 1.10.16 with any column:
$.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()
);
);
;
answered Jan 26 '18 at 12:01
jcubicjcubic
35.6k33135241
answered Jan 26 '18 at 12:01
jcubicjcubic
35.6k33135241
answered Jan 26 '18 at 12:01
jcubicjcubic
35.6k33135241
answered Jan 26 '18 at 12:01
jcubicjcubic
35.6k33135241
35.6k33135241
add a comment |
add a comment |
0
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.
answered Aug 20 '18 at 13:01
Jari TurkiaJari Turkia
3921713
add a comment |
0
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.
answered Aug 20 '18 at 13:01
Jari TurkiaJari Turkia
3921713
add a comment |
0
0
0
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.
answered Aug 20 '18 at 13:01
Jari TurkiaJari Turkia
3921713
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.
answered Aug 20 '18 at 13:01
Jari TurkiaJari Turkia
3921713
answered Aug 20 '18 at 13:01
Jari TurkiaJari Turkia
3921713
answered Aug 20 '18 at 13:01
Jari TurkiaJari Turkia
3921713
answered Aug 20 '18 at 13:01
Jari TurkiaJari Turkia
3921713
3921713
add a comment |
add a comment |
0
It's been a few hours now, I've been racking my brains to get the numbers aligned to the right in "print" mode. Someone knows how to get the alignment to the right of the numbers when printing.
The html I have it well formatted, but when printing everything goes to the left.
You can use some function that when detecting a type of label such as "" everything that is inside it can be assigned an alignment. This way we could put numbers inside that label and align them to the right.
Thank you very much for the help you can give me.
answered Sep 7 '18 at 6:54
Andrés SepcidAndrés Sepcid
11
add a comment |
0
It's been a few hours now, I've been racking my brains to get the numbers aligned to the right in "print" mode. Someone knows how to get the alignment to the right of the numbers when printing.
The html I have it well formatted, but when printing everything goes to the left.
You can use some function that when detecting a type of label such as "" everything that is inside it can be assigned an alignment. This way we could put numbers inside that label and align them to the right.
Thank you very much for the help you can give me.
answered Sep 7 '18 at 6:54
Andrés SepcidAndrés Sepcid
11
add a comment |
0
0
0
It's been a few hours now, I've been racking my brains to get the numbers aligned to the right in "print" mode. Someone knows how to get the alignment to the right of the numbers when printing.
The html I have it well formatted, but when printing everything goes to the left.
You can use some function that when detecting a type of label such as "" everything that is inside it can be assigned an alignment. This way we could put numbers inside that label and align them to the right.
Thank you very much for the help you can give me.
answered Sep 7 '18 at 6:54
Andrés SepcidAndrés Sepcid
11
It's been a few hours now, I've been racking my brains to get the numbers aligned to the right in "print" mode. Someone knows how to get the alignment to the right of the numbers when printing.
The html I have it well formatted, but when printing everything goes to the left.
You can use some function that when detecting a type of label such as "" everything that is inside it can be assigned an alignment. This way we could put numbers inside that label and align them to the right.
Thank you very much for the help you can give me.
answered Sep 7 '18 at 6:54
Andrés SepcidAndrés Sepcid
11
answered Sep 7 '18 at 6:54
Andrés SepcidAndrés Sepcid
11
answered Sep 7 '18 at 6:54
Andrés SepcidAndrés Sepcid
11
answered Sep 7 '18 at 6:54
Andrés SepcidAndrés Sepcid
11
11
add a comment |
add a comment |
0
It seems from your comments you are talking about actually printing the table data via a printer. If so you need to make a print stylesheet and/or set the @media query to print within your custom css stylesheet.
I prefer to do both
<link rel="stylesheet" type="text/css" media="print" href="/assets/print.css">
@media print
imgdisplay:none;
.text-rightfloat: right; clear:none;
etc...
As per the data table's class identification it is very simple.
$("#table1").dataTable(
columns: [
data: "account name"
data: "balance", className: "text-right"
]
);
answered Mar 2 at 8:21
yardpenaltyyardpenalty
89111323
add a comment |
0
It seems from your comments you are talking about actually printing the table data via a printer. If so you need to make a print stylesheet and/or set the @media query to print within your custom css stylesheet.
I prefer to do both
<link rel="stylesheet" type="text/css" media="print" href="/assets/print.css">
@media print
imgdisplay:none;
.text-rightfloat: right; clear:none;
etc...
As per the data table's class identification it is very simple.
$("#table1").dataTable(
columns: [
data: "account name"
data: "balance", className: "text-right"
]
);
answered Mar 2 at 8:21
yardpenaltyyardpenalty
89111323
add a comment |
0
0
0
It seems from your comments you are talking about actually printing the table data via a printer. If so you need to make a print stylesheet and/or set the @media query to print within your custom css stylesheet.
I prefer to do both
<link rel="stylesheet" type="text/css" media="print" href="/assets/print.css">
@media print
imgdisplay:none;
.text-rightfloat: right; clear:none;
etc...
As per the data table's class identification it is very simple.
$("#table1").dataTable(
columns: [
data: "account name"
data: "balance", className: "text-right"
]
);
answered Mar 2 at 8:21
yardpenaltyyardpenalty
89111323
It seems from your comments you are talking about actually printing the table data via a printer. If so you need to make a print stylesheet and/or set the @media query to print within your custom css stylesheet.
I prefer to do both
<link rel="stylesheet" type="text/css" media="print" href="/assets/print.css">
@media print
imgdisplay:none;
.text-rightfloat: right; clear:none;
etc...
As per the data table's class identification it is very simple.
$("#table1").dataTable(
columns: [
data: "account name"
data: "balance", className: "text-right"
]
);
answered Mar 2 at 8:21
yardpenaltyyardpenalty
89111323
answered Mar 2 at 8:21
yardpenaltyyardpenalty
89111323
answered Mar 2 at 8:21
yardpenaltyyardpenalty
89111323
answered Mar 2 at 8:21
yardpenaltyyardpenalty
89111323
89111323
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f29005984%2fhow-to-right-align-numeric-data-to-right-in-datatables%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Are you talking about jquery datatables? I've edited the tag but the question is so vague I'm beginning to doubt my decision.
– markpsmith
Mar 12 '15 at 9:34
Please show an example of a table with data (rows). Incorporate the HTML the question.
– davidkonrad
Mar 12 '15 at 11:24