Question

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

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

在页脚中添加初始总数非常简单，但在重新计算search.dt事件中的总和时遇到问题。

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

TypeError：table.api不是函数

我认为this中的initComplete引用最初适用于我。现在如何在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＆amp;将{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

试试这个：

＆＃13;

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

＆＃13;

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

2 个答案: