Having trouble aligning data in footer

chappcc

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 ))
              ];
            }
      });
    });

allan

$(api.table().footer()).find('td').addClass("text-right");

Do you have a text-right class 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

chappcc

Here is a test case: https://live.datatables.net/jajafive/1/edit

kthorngren

If you right click on a footer cell and inspect you will see the following CSS:

table.dataTable thead th, table.dataTable thead td, table.dataTable tfoot th, table.dataTable tfoot td {
    text-align: left;
}

Looks like you can add !important to your CSS to override, for example:

    td, th {
      border: 1px solid #dddddd;
      text-align: right !important;
      padding: 8px;
    }

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:

    table.dataTable tfoot th {
      text-align: right;
    }

https://live.datatables.net/yudasuka/1/edit

Kevin

chappcc

Kevin,
Thanks - Both work! I am going with:

table.dataTable tfoot td {
  text-align: right;
}