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

    } 
}); 

私はまた、DataTableのエディタ（https://editor.datatables.net/examples/inline-editing/simple）を発見しましたこれはこの状況には完璧ですが、オープンソースではありません。こののインライン編集機能を模倣する方法に関するアイデアは大歓迎です。私はモーダルでこれを避けることを望みます。どんな助けもありがとう！

Answer 1

ここでは、コンテンツ編集可能な場所で編集できる回答があります。

注これは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() 
     }); 

注意が必要であることを - 私はあなたが入力した数値以外のデータを取得することを予見することができます。あなたはドンノードの値をテストし、それに応じて行動できる、キーブラーイベントでそれを警戒する必要があります。