如何对Datatable中的所有文本框求和

Question

我正在使用数据表并为一列使用文本框

render: function (data, type, row) {
return '<input class="form-control" id="itemId" name="itemId" maxlength="350" multiline="true" type="text" >';

对于这个特定的列，用户将手动输入数据，我该如何对所有这个文本框求和。

Answer 1

您可以使用 DataTables API 访问相关列中的每个 <td> 节点。从那里您可以访问为每个 <input> 字段设置的值，然后对这些值求和。

通过使用 DataTables API 执行此操作，您将确保对所有单元格求和，即使是那些未显示在当前页面中的单元格。

这是一个演示：

var dataSet = [
    {
      "id": "1",
      "amount": 1
    },
    {
      "id": "2",
      "amount": 3
    },
    {
      "id": "3",
      "amount": 5
    },
    {
      "id": "4",
      "amount": 2
    },
    {
      "id": "5",
      "amount": 3
    },
    {
      "id": "6",
      "amount": 1
    },
    {
      "id": "7",
      "amount": 4
    },
    {
      "id": "8",
      "amount": 3
    },
    {
      "id": "9",
      "amount": 1
    },
    {
      "id": "10",
      "amount": 2
    },
    {
      "id": "11",
      "amount": 2
    },
    {
      "id": "12",
      "amount": 3
    },
    {
      "id": "13",
      "amount": 1
    },
    {
      "id": "14",
      "amount": 1
    }
  ];
 
$(document).ready(function() {

  var table = $('#example').DataTable( {
    data: dataSet,
    columns: [
      { title: "ID", data: "id" },
      { title: "Amount", data: "amount",
        render: function (data, type, row) {
          return '<input type="number" value="' + data + '">';
        }
      }
    ],
    initComplete: function(settings, json) {
      doSum();
    }
  } );
  
  // This provides the sum of all "approved" records:
  function doSum() {
    // get the DataTables API object:
    var table = $('#example').DataTable();
    // access the <td> cell nodes for the relevant column:
    var nodes = table.column( 1 ).nodes();
    // get the value from each input field in each cell: 
    var total = table.column( 1 ).nodes()
      // and then sum up the integer values:
      .reduce( function ( sum, node ) {
        return sum + parseInt($( node ).find( 'input' ).val());
      }, 0 );
    // place the sum in the relevant footer cell:
    $( table.column( 1 ).footer() ).html( total );
  }
    
  // ensure all changes made by the user are reflected in the 
  // total field:
  $('#example').on( 'change', 'input', function () {
    doSum();
  } );

} );

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
  <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">

</head>

<body>

<div style="margin: 20px;">

    <table id="example" class="display dataTable cell-border" style="width:100%">
        <tfoot>
            <th style="text-align: right;">Total:</th><th></th>
        </tfoot>
    </table>

</div>


</body>
</html>

以上演示假定您在字段中有起始值。当然，如果它们与您的方案无关，您可以删除它们。

如何对Datatable中的所有文本框求和

How to do sum of all the textbox in Datatable

javascript

ajax

datatable

jquery

datatables