テーブル内の計算を実行するDataTablesとjQuery

Question

セル内の入力値を変更し、jquery onkeyupイベントを使用してテーブル内で数学演算を実行したいとします。これを行うには

<table id="GVHabvar"> 
    <tbody> 
     <tr> 
      <td> 
       <input id="cantidad" name="cantidad" type="text" class = "calculo"> 
      </td> 
      <td> 
       <input id="precio" name="precio" type="text" class = "calculo"> 
      </td> 
      <td> 
       <input id="valor" name="valor" type="text"> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <input id="cantidad" name="cantidad" type="text" class = "calculo"> 
      </td> 
      <td> 
       <input id="precio" name="precio" type="text" class = "calculo"> 
      </td> 
      <td> 
       <input id="valor" name="valor" type="text"> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <input id="cantidad" name="cantidad" type="text" class = "calculo"> 
      </td> 
      <td> 
       <input id="precio" name="precio" type="text" class = "calculo"> 
      </td> 
      <td> 
       <input id="valor" name="valor" type="text"> 
      </td> 
     </tr> 
    </tbody> 
</table> 

これは私の試みですが、それは（例えばページネーションを持つ）のDataTableとうまく動作しない

$(document).ready(function() { 
     var filas = $("#GVHabvar tbody tr"); 
     filas.each(function (index) { 
      var fila = $(this); 
      fila.find('.calculo').on('keyup', function() { 
       var cantidad = ($.isNumeric(fila.find("#cantidad").val())) ? fila.find("#cantidad").val() : 0; 
       var precio = ($.isNumeric(fila.find("#precio").val())) ? fila.find("#precio").val() : 0; 
       var valor = parseInt(cantidad, 10) * parseInt(precio, 10); 
       fila.find('#valor').val(valor); 
      }); 
     }); 
    }); 

Answer 1

一つの方法は、DataTableのrowCallbackを使用することです。このイベントは、各行が描画された後に発生し、キーアップイベントをバインドするために使用できます。あなたが行ったやり方は、あなたが発見したように可視のテーブルデータにのみ影響していました。ここで

var table = $('#GVHabvar').DataTable({ 
    "rowCallback": function (row, data, index) { 
     var fila = $(row); 
     fila.find('.calculo').on('keyup', function() { 
      var cantidad = ($.isNumeric(fila.find("#cantidad").val())) ? fila.find("#cantidad").val() : 0; 
      var precio = ($.isNumeric(fila.find("#precio").val())) ? fila.find("#precio").val() : 0; 
      var valor = parseInt(cantidad, 10) * parseInt(precio, 10); 
      fila.find('#valor').val(valor); 
     }); 
    } 
}); 

は私が望むとおりに作業jsfiddle