jQuery를 데이터 테이블 계산 합계를 검색하는 동안 :

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