DataTables footerCallback и 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); 
     }) 

    } 
}); 

Я также нашел редактор DataTables (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() 
     }); 

Примечание - Я могу предвидеть, что вы можете получить нечисловых данных, введенных. Вам нужно будет это сделать в событии размывания ключевых слов, где вы можете проверить значение узла dom и действовать соответствующим образом.