Having trouble aligning data in footer
Having trouble aligning data in footer
chappcc
Posts: 3Questions: 1Answers: 0
The following code works with the exception that I cannot alter the alignment of the data in the footer. Currently it is aligns left and I'd like right alignment. Any suggestions are much appreciated.
var table = $('#posSymList').DataTable({
"paging": true,
"ordering": true,
"info": true,
"footerCallback": function (row, data, start, end, display) {
var api = this.api();
// Remove the formatting to get integer data for summation
var decVal = function (i) {
return typeof i === 'string' ? i.replace(/[\$,]/g, '') * 1 : typeof i === 'number' ? i : 0;
};
// Calculate sum for column 6
var column6Total = api
.column(6)
.data()
.reduce(function (a, b) {
return decVal(a) + decVal(b);
}, 0);
// Calculate sum for column 7
var column7Total = api
.column(7)
.data()
.reduce(function (a, b) {
return decVal(a) + decVal(b);
}, 0);
// Calculate sum for column 9
var column9Total = api
.column(9)
.data()
.reduce(function (a, b) {
return decVal(a) + decVal(b);
}, 0);
var column12Total = column9Total / column6Total * 100;
$(api.table().footer()).find('td').addClass("text-right");
return [
$(api.column(0).footer()).text( "Totals" ),
$(api.column(6).footer()).html(DataTable.render.number(',', '.', 2, '$ ', '').display( column6Total )),
$(api.column(7).footer()).html(DataTable.render.number(',', '.', 2, '$ ', '').display( column7Total )),
$(api.column(9).footer()).html(DataTable.render.number(',', '.', 2, '$ ', '').display( column9Total )),
$(api.column(12).footer()).html(DataTable.render.number(',', '.', 2, '', ' %').display( column12Total ))
];
}
});
});
This question has an accepted answers - jump to answer
Answers
Do you have a
text-rightclass in your CSS? Is something overriding it perhaps?Can you link to a test case showing the issue as requested in the forum rules so I can debug it and offer some help.
Allan
Here is a test case: https://live.datatables.net/jajafive/1/edit
If you right click on a footer cell and inspect you will see the following CSS:
Looks like you can add
!importantto your CSS to override, for example:Updated test case:
https://live.datatables.net/jajafive/2/edit
Or you can override with a more specific selector that matches the above, for example:
https://live.datatables.net/yudasuka/1/edit
Kevin
Kevin,
Thanks - Both work! I am going with: