DataTables footerCallback 및 contenteditable

Question

footerCallback을 사용하여 각 열에 대해 합계하는 DataTable을가집니다. 각 열의 데이터가 완벽하게 작동하지만 합계를 계산할 각 셀의 값을 변경하는 기능을 추가하고 싶습니다. 해당 셀에 "contenteditable"을 추가하려고 시도했지만 변경을 수행해도 바닥 글의 합계에는 영향을주지 않습니다. 여기

내가 겪고있어 동작을 보여주는 간단한 jsfiddle입니다 : https://jsfiddle.net/rantoun/552y9j90/6/

HTML :

<table id="table1"> 
    <thead> 
    <tr> 
     <th>Fruit</th> 
     <th># Eaten</th> 
     <th># Remaining</th> 
    </tr> 
    </thead> 
    <tfoot> 
    <tr> 
     <th align="right">Count</th> 
     <th align="left"></th> 
     <th align="left"></th> 
    </tr> 
    </tfoot> 
    <tbody> 
    <tr> 
     <td>Apples</td> 
     <td contenteditable>3</td> 
     <td contenteditable>8</td> 
    </tr> 
    <tr> 
     <td>Oranges</td> 
     <td contenteditable>6</td> 
     <td contenteditable>5</td> 
    </tr> 
    <tr> 
     <td>Bananas</td> 
     <td contenteditable>2</td> 
     <td contenteditable>9</td> 
    </tr> 
    </tbody> 
</table> 

jQuery를 :

$("#table1").DataTable({ 
    "paging": false, 
    "searching": false, 
    "info": false,  
    "footerCallback": function (row, data, start, end, display) { 

     var columns = [1, 2]; 
     var api = this.api(); 

     _.each(columns, function(idx) { 

      var total = api 
       .column(idx) 
       .data() 
       .reduce(function (a, b) { 
        return parseInt(a) + parseInt(b); 
       }, 0)   

       $('tr:eq(0) th:eq('+idx+')', api.table().footer()).html(total); 
     }) 

    } 
}); 

나는 또한 DataTables 편집기를 발견했다 (https://editor.datatables.net/examples/inline-editing/simple) 이 상황에 완벽 할 것입니다. 그러나 그것은 오픈 소스가 아닙니다. 이 인라인 편집 기능을 모방하는 방법에 대한 아이디어는 언제나 환영합니다. 나는 모달로 이것을하는 것을 피하고 싶다. 어떤 도움을 주셔서 감사합니다!

Answer 1

여기에 contenteditable로 편집 할 수있는 대답이 있습니다.

참고이는 dataTables KeyTable plugin

Working Fiddle here

/* Note - requires datatable.keys plugin */ 
    var table = $("#table1").DataTable({ 

     "keys": true,  

     "paging": false, 
     "searching": false, 
     "info": false,  
     "footerCallback": function (row, data, start, end, display) { 

      var columns = [1, 2]; 
      var api = this.api(); 

      _.each(columns, function(idx) { 

       var total = api 
        .column(idx) 
        .data() 
        .reduce(function (a, b) { 
         return parseInt(a) + parseInt(b); 
        }, 0)   

        $('tr:eq(0) th:eq('+idx+')', api.table().footer()).html(total); 
      }) 

     } 
    }); 

    // keys introduces the key-blur event where we can detect moving off a cell 
    table 
     .on('key-blur', function (e, datatable, cell) { 

     // The magic part - using the cell object, get the HTML node value, 
     // put it into the dt cell cache and redraw the table to invoke the 
     // footer function. 
      cell.data($(cell.node()).html()).draw() 
     }); 

주의를 필요로 - 당신이 입력 한 숫자가 아닌 데이터를 얻을 수 있음을 예견 할 수있다. dom-node 값을 테스트하고 그에 따라 행동 할 수있는 key-blur 이벤트에서이를 막아야합니다.