jQuery выравнивание текста в нижних колонтитулах

Question

Я заполняю таблицу данных, используя jQuery и Ajax.Я могу выровнять текст в заголовках таблицы и ячейках тела, применяя классы, такие как dt-body-right и dt-head-right, используя columnDefs.

Я заполняю итоги в нижнем колонтитуле, используя обычные функции обратного вызова,Тем не менее, текст не выравнивается в строке нижнего колонтитула.

  function LoadTable2() {
    $.ajax({
        type: "POST",
        url: "casereporting2.aspx/GetTable2",
        data: "{dropdown1: '" + dropdown1 + "', processType: '" + processType + "', formNames: '" + formNames + "', sd: '" + startDateISO + "', ed: '" + endDateISO + "'}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (r) {
            var data = [];
            var dataLength = r.d[0].length;

            for (var i = 0; i < dataLength; i++) {
                data.push([r.d[0][i], r.d[1][i], r.d[2][i].substr(0, 10), r.d[3][i], r.d[4][i], r.d[5][i], r.d[6][i], r.d[7][i], r.d[8][i], r.d[9][i], r.d[10][i], r.d[11][i]]);
            }
            if (dataLength > 0) {
                var t = $('#ServiceSummaryTable').DataTable({
                    data: data,
                    pageLength: 1000,
                    //retrieve: true,
                    ordering: true,
                    deferRender: true,
                    columnDefs: [
                        { targets: [0, 1, 2, 4], className: 'dt-body-left dt-head-left' },
                        { targets: [3, 5, 6, 7, 8, 9, 10, 11], className: 'dt-body-right dt-head-right' }
                        ],
                    dom: 'tB',
                    destroy: true,
                    buttons: [
                        'copy', 'csv',
                        {
                            extend: 'excel',
                            test: 'Save current page',
                            footer: true,
                            exportOptions: {
                                modifier: {
                                    page: 'current'
                                }
                            },
                        }
                    ],

                    footerCallback: function (row, data, start, end, display) {
                        var api = this.api(), data;
                        var colNumber = [5, 6, 7, 8, 9, 10, 11];

                        var intVal = function (i) {
                            return typeof i === 'string' ?
                                i.replace(/[, ₹]|(\.\d{2})/g, "") * 1 :
                                typeof i === 'number' ?
                                    i : 0;
                        };
                        for (i = 0; i < colNumber.length; i++) {
                            var colNo = colNumber[i];
                            var total = api
                                .column(colNo, { page: 'current' })
                                .data()
                                .reduce(function (a, b) {
                                    return commaify(intVal(a) + intVal(b));
                                }, 0);
                            $(api.column(colNo).footer()).html(total);
                        }
                    }
                });
            }
        },
        failure: function (response) {
            alert('There was an error.');
        }
    });
}

Есть идеи почему?

Спасибо

Answer 1

var table = $("#example").DataTable({
  "initComplete": function(settings, json) {
    var api = this.api();
    CalculateTableSummary(this);
  },
  "footerCallback": function(row, data, start, end, display) {
    var api = this.api(),
      data;
    CalculateTableSummary(this);
    return;
  }
});



function CalculateTableSummary(table) {
  try {

    var intVal = function(i) {
      return typeof i === 'string' ?
        i.replace(/[\$,]/g, '') * 1 :
        typeof i === 'number' ?
        i : 0;
    };

    var api = table.api();
    api.columns(".sum").eq(0).each(function(index) {
      var column = api.column(index, {
        page: 'current'
      });

      var sum = column
        .data()
        .reduce(function(a, b) {
          //return parseInt(a, 10) + parseInt(b, 10);
          return intVal(a) + intVal(b);
        }, 0);


      if ($(column.footer()).hasClass("Int")) {
        $(column.footer()).html('' + sum.toFixed(0));
      } else {
        $(column.footer()).html('' + sum.toFixed(2));
      }

    });
  } catch (e) {
    // console.log('Error in CalculateTableSummary');
    //onsole.log(e)
  }
}

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

<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<table id="example">
  <thead>
    <tr>
      <th class="sum">a column</th>
      <th class="sum">b column</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>10</td>
      <td>15</td>
    </tr>
    <tr>
      <td>10</td>
      <td>18</td>
    </tr>
    <tr>
      <td>20</td>
      <td>20</td>
    </tr>
    <tr>
      <td>20</td>
      <td>25</td>
    </tr>
    <tr>
      <td>30</td>
      <td>28</td>
    </tr>
    <tr>
      <td>30</td>
      <td>30</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>

      </th>
      <th class="Int">

      </th>
    </tr>
  </tfoot>
</table>