How to do sum of all the textbox in Datatable-CodePudding

I am using datatable and use textbox for one column

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

For this particular column user will manually input the data, how can I do sum of all this textbox.

CodePudding user response：

You can use the DataTables API to access each <td> node in the relevant column. From there you can access the value which has been set for each <input> field and then sum those values.

By using the DataTables API to do this, you will ensure that all cells are summed, even those which are not displayed in the current page.

Here is a demo:

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>

The above demo assumes you have starting values in the fields. You can, of course, remove these if they are not relevant for your scenario.