Question

我正在使用jQuery和Ajax填充数据表。我可以使用columnDefs来应用dt-body-right和dt-head-right之类的表标题和主体单元格中的文本。

我使用常用的回调函数在页脚中填充总计。但是，文本在页脚行中未对齐。

  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

dynamic

> end

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

页脚中的jQuery数据表文本对齐

1 个答案: