Having trouble aligning data in footer

Having trouble aligning data in footer

chappccchappcc 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

  • allanallan Posts: 61,451Questions: 1Answers: 10,055 Site admin

    $(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

  • chappccchappcc Posts: 3Questions: 1Answers: 0
  • kthorngrenkthorngren Posts: 20,147Questions: 26Answers: 4,736
    edited May 2023 Answer ✓

    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

  • chappccchappcc Posts: 3Questions: 1Answers: 0

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

    table.dataTable tfoot td {
      text-align: right;
    }
    
Sign In or Register to comment.