Answers

• kthorngren Posts: 22,261Questions: 26Answers: 5,122

  September 1

  I built a simple test case:
  https://live.datatables.net/mozuviyo/1/edit

  Looks like the className: 'dt-head-left' option is applied to the footer. According to the styling docs this should only be applied to the header. This rule is being applied:

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

  One option is to use initComplete to remove the dt-head-left class from the footer, like this example:
  https://live.datatables.net/lukuyode/1/edit

  @allan can comment on whether this is exepcted behavior and if the code or documentation needs fixed.

  Kevin
• allan Posts: 65,056Questions: 1Answers: 10,772 Site admin

  September 1

  There is an example here.

  I'll need to have a little think about the right course for the class names. Thanks for highlighting that.

  Allan
• Wooly65 Posts: 98Questions: 30Answers: 1

  September 1

  While you are thinking through the issue I have a related question.

  If there is no data yet for the DataTable the sum value of 0 is shown, but it is aligned to the left and not the the right.

  Here is the example from @kthorngren with the workaround to remove the dt-head-left from the footer via initComplete. I have removed all the data.
  https://live.datatables.net/cifehabi/2/edit

  Here is the image from one of my panels
  
• allan Posts: 65,056Questions: 1Answers: 10,772 Site admin

  September 1

  I would expect that to be the case. It can only work out what class should be automatically applied when the data is loaded. Prior to that it will get default alignment. A class name needs to be set for the column in the initialisation or HTML if you know ahead of time what the type is and what the alignment should be.

  Allan
• kthorngren Posts: 22,261Questions: 26Answers: 5,122

  September 1

  Inspecting the th it looks like this rule is applied:

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

  You can create a custom CSS to overide the Datatables CSS, like this:

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

  Updated example.
  https://live.datatables.net/cifehabi/3/edit

  Kevin
• kthorngren Posts: 22,261Questions: 26Answers: 5,122

  September 1 edited September 2 Answer ✓

  Going back to my first test case the th has the class dt-type-numeric applied which causes the number to be right justified:

  <th class="dt-type-numeric" data-dt-column="3" rowspan="1" colspan="1">2415</th>
  

  It looks like with no data type detection doesn't run which means the dt-type-... classes aren't applied. Another option is to apply the dt-type-numeric class using columns.className, for example:
  https://live.datatables.net/cifehabi/4/edit

  I just realized the above selector applies to all the th in the footer. You could make it more specific to just the desired columns. For example:

  table.dataTable tfoot th.dt-footer-right, table.dataTable tfoot td.dt-footer-right {
      text-align: right;
  }
  

  Test case:
  https://live.datatables.net/cozuqule/1/edit

  Note I commented out the initComplete code. This might be a better overall solution.

  Kevin