DataTables footerCallback and contenteditable

Question

我有一個DataTable，它使用footerCallback在每列上進行求和。這對每列中的數據都是完美的，但我也希望添加更改正在求和的每個單元值的功能。我已經嘗試向這些單元格添加「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); 
     }) 

    } 
}); 

我還發現了數據表編輯器（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節點值並據此採取行動。