のjQueryのDataTableを計算合計検索中：

Question

フィドル：http://jsfiddle.net/6qLwkwud/43/

を私はデータテーブルでの検索時濾過したレコードに合計を追加したいです。

フッタに最初の合計を追加するのは非常に簡単でしたが、イベントで合計を再計算する際に問題に直面しています。

私はこのエラーが表示ログから：

TypeError: table.api is not a function

私が最初に私のために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'}です。

http://jsfiddle.net/ubh6crqu/2/あなたは `のDataTable（）` `そうするvar API = table.api（）で初期化されている

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(); 
 
    ... 
 
}