DataTables.net 테이블 열 합계 바닥 글

Question

각 열의 합계 값을 클래스 "sum"과 함께 작은 꼬리말로 삽입하는 데 문제가 있습니다.

코드 (더 많거나 적은 DataTables.net에서 직접 찍은) 이동 :

var table = $('#example').DataTable(); 
 
     table.columns('.sum').each(function (el) { 
 
      var sum = table 
 
       .column(el) 
 
       .data() 
 
       .reduce(function (a, b) { 
 
        return parseInt(a, 10) + parseInt(b, 10); 
 
       }); 
 
      $(el).html('Sum: ' + sum); 
 
     });

"합"정확한 값을 가지고 있지만 어떻게 든 바닥 글 삽입되지 않습니다! 나는. 그것의 -element는 비어 있습니다.

아래 스 니펫은 정상적으로 작동하지만 각 열을 클래스 합계로 합산하려고합니다.

var table = $('#example').DataTable(); 
 
var column = table.column(4); 
 

 
$(column.footer()).html(
 
    column.data().reduce(function (a, b) { 
 
     return parseInt(a, 10) + parseInt(b, 10); 
 
    }) 
 
);

///////////////////////////////////// ///////////////////////////////

EDIT - 해결 방법 :

코드를 DataTable이 초기화 된 위치로 이동하고 대신 footerCallback을 사용하여 이동했습니다. 코드 아래 참조 :

"footerCallback": function (row, data, start, end, display) { 
 
        var api = this.api(), data; 
 
        
 
        // Remove the formatting to get integer data for summation 
 
        var intVal = function (i) { 
 
         return typeof i === 'string' ? 
 
          i.replace(/[\$,]/g, '') * 1 : 
 
          typeof i === 'number' ? 
 
          i : 0; 
 
        }; 
 

 
        // Total over this page 
 
        pageTotal = api 
 
         .column('.sum', { page: 'current' }) 
 
         .data() 
 
         .reduce(function (a, b) { 
 
          return intVal(a) + intVal(b); 
 
         }, 0); 
 

 
        // Update footer 
 
        $(api.column('.sum').footer()).html(pageTotal); 
 
       }

는 어떻게 든 지금 값이 바로 TFOOT 요소에 삽입됩니다. 아직도 그것이 어째서 작동하지 않을지 전혀 모르겠다. (그러나 JS 파일을 포함하는 주석 순서에 언급 된 것과 같이 그것의 일부와 관련이있을 수있다).

지금 난 그냥

Answer 1

테이블 조작 코드가 DataTable을 초기화하는 경우에만 실행해야 (initComplete 속성을 참조하십시오) 방법 클래스 = "합계"와 루프 여러 열을 ...에 파악해야한다.

<tfoot></tfoot> 블록을 <table>에 정의했는지 확인하십시오. 그렇지 않으면 바닥 글이 없습니다.

그렇지 않으면 당신이 솔루션을하는 듯, 수정 된 코드 아래 참조하십시오

var table = $('#ticketTable').DataTable({ 
    'initComplete': function (settings, json){ 
     this.api().columns('.sum').every(function(){ 
      var column = this; 

      var sum = column 
       .data() 
       .reduce(function (a, b) { 
        a = parseInt(a, 10); 
        if(isNaN(a)){ a = 0; }     

        b = parseInt(b, 10); 
        if(isNaN(b)){ b = 0; } 

        return a + b; 
       }); 

      $(column.footer()).html('Sum: ' + sum); 
     }); 
    } 
}); 

는 예를 들어 this JSFiddle를 참조하십시오.

UPDATE

당신이 모든 "그리기"이벤트에 호출됩니다 바닥 글 표시 콜백 함수를 정의 할 수 있습니다 footerCallback 속성도있다.

initComplete과 footerCallback의 차이점은 모든 "draw"이벤트에서 initComplete이 한 번 호출되고 footerCallback이 호출된다는 것입니다.

전체 테이블의 합계를 표시하려면 initComplete이면 충분합니다. 그렇지 않은 경우 현재 페이지와 관련된 푸터 데이터를 표시해야하는 경우 (Footer callback example처럼) footerCallback을 대신 사용하십시오.

Answer 2

믹스. 공백이 0으로 바뀝니다

"initComplete": function (settings, json) { 
     this.api().columns('.sum').every(function() { 
      var column = this; 

      var intVal = function (i) { 
       return typeof i === 'string' ? 
       i.replace(/[\$,]/g, '') * 1 : 
        typeof i === 'number' ? 
         i : 0; 
      }; 

      var sum = column 
       .data() 
       .reduce(function (a, b) { 
        return intVal(a) + intVal(b); 
       }); 

      $(column.footer()).html('Sum: ' + sum); 
     }); 
    }