Jquery Datatable 在搜索时计算页脚中的总和：

Question

小提琴：http://jsfiddle.net/6qLwkwud/43/

我想在搜索数据表时添加过滤记录的总数。

将初始总计添加到页脚非常容易，但是在重新计算 search.dt 事件中的总和时我遇到了问题。

从日志中我看到了这个错误：

TypeError: table.api 不是函数

我认为initComplete 中的this 引用最初对我有用。 现在如何在 search.dt 事件中获取此参考？

注意：我已经通过了这个Summing a filtered column in DataTables。 但这并不能解决我的目的，因为我使用类来表示我想要应用的列。 & 在我的表中，我不知道有多少列具有该属性。

HTML：

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

脚本：

var table = $("#example").DataTable({
 "initComplete": function (settings, json) {
 var api = this.api();
 CalculateTableSummary(this);
}
});

$("#example").on('search.dt', function() {
    CalculateTableSummary(table);  
});



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

            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');
        console.log(e)
    }
}

Answer 1

通过添加footerCallbackFunction 并将{page:'current'} 传递给 sum 方法解决了这个问题。

http://jsfiddle.net/ubh6crqu/2/

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


console.log(sum);

            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');
        console.log(e)
    }
}

Answer 2

试试这个：

var table = $().Datatable({
  ...
  initComplete: function () {
    CalculateTableSummary(this.api());
  }
  ...
});

function CalculateTableSummary(api) {
  ...
  //var api = table.api();
  ...
}