Unable to get Sum of Column values(Checkbox checked) using jQuery Datatables

Question

Unable to get Sum of Column values(Checkbox checked) using jQuery Datatables. I'm trying to add sum of amount columns dynamically. If we uncheck amount will reduce automatically. I tried below code. Could you please suggest what could be the issue

$(document).ready(function() {
var creditAmount =0
    $('#firstTable').DataTable();
        
    $("#firstTable").on('change', function(){
    
    var checkedCount = $("#firstTable input:checked").length;
  
    for (var i = 0; i < checkedCount; i++) {
    
       var amount =   $(this).find('td:eq(4)').text();   
         alert(amount);
       if (amount != "") {
        creditAmount += parseFloat(amount);
      } else {
        creditAmount = 0;
      }
     }
   $("#idSmofAmount").text(creditAmount);
    
    });

   
} );

<link href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
    <div>
        Count:: <span ="idSmofAmount"></span>
    </div>

<table id="firstTable" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
            <th><input type="checkbox"/></th>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Amount</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
 
        <tfoot>
            <tr>
               <th><input type="checkbox"/></th>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
 
        <tbody>
            <tr>
               <td><input type="checkbox"/></td>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
            <td><input type="checkbox"/></td>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
            <td><input type="checkbox"/></td>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
            <tr>
            <td><input type="checkbox"/></td>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
                <td>$433,060</td>
            </tr>
            <tr>
            <td><input type="checkbox"/></td>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008/11/28</td>
                <td>$162,700</td>
            </tr>
            <tr>
            <td><input type="checkbox"/></td>
                <td>Brielle Williamson</td>
                <td>Integration Specialist</td>
                <td>New York</td>
                <td>61</td>
                <td>2012/12/02</td>
                <td>$372,000</td>
            </tr>
            <tr>
            <td><input type="checkbox"/></td>
                <td>Herrod Chandler</td>
                <td>Sales Assistant</td>
                <td>San Francisco</td>
                <td>59</td>
                <td>2012/08/06</td>
                <td>$137,500</td>
            </tr>
            <tr>
            <td><input type="checkbox"/></td>
                <td>Rhona Davidson</td>
                <td>Integration Specialist</td>
                <td>Tokyo</td>
                <td>55</td>
                <td>2010/10/14</td>
                <td>$327,900</td>
            </tr>
            
        </tbody>
    </table>

Harshana · Accepted Answer · 2020-12-17 11:15:21Z

Found few issues in your code:

You refer to the first element of the table via this reference inside the amount variable
The creditAmount doesn't reset when the change event is triggered
The ID of the span element used to display the count wasn't properly defined

Code:

$(document).ready(function() {
  var creditAmount = 0
  $('#firstTable').DataTable();

  $("#firstTable").on('change', function() {

    var checkedCount = $("#firstTable input:checked").length;
    var creditAmount = 0

    for (var i = 0; i < checkedCount; i++) {

      var amount = $("#firstTable input:checked")[i].parentNode.parentNode.children[4].innerHTML

      if (amount != "") {
        creditAmount += parseFloat(amount);
      } else {
        creditAmount = 0;
      }
    }

    $("#idSmofAmount").text(creditAmount);

  });


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<div>
  Count::
  <span id="idSmofAmount"></span>
</div>

<table id="firstTable" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th><input type="checkbox" /></th>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Amount</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>

  <tfoot>
    <tr>
      <th><input type="checkbox" /></th>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </tfoot>

  <tbody>
    <tr>
      <td><input type="checkbox" /></td>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
    </tr>
    <tr>
      <td><input type="checkbox" /></td>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
    </tr>
    <tr>
      <td><input type="checkbox" /></td>
      <td>Ashton Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td>66</td>
      <td>2009/01/12</td>
      <td>$86,000</td>
    </tr>
    <tr>
      <td><input type="checkbox" /></td>
      <td>Cedric Kelly</td>
      <td>Senior Javascript Developer</td>
      <td>Edinburgh</td>
      <td>22</td>
      <td>2012/03/29</td>
      <td>$433,060</td>
    </tr>
    <tr>
      <td><input type="checkbox" /></td>
      <td>Airi Satou</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>33</td>
      <td>2008/11/28</td>
      <td>$162,700</td>
    </tr>
    <tr>
      <td><input type="checkbox" /></td>
      <td>Brielle Williamson</td>
      <td>Integration Specialist</td>
      <td>New York</td>
      <td>61</td>
      <td>2012/12/02</td>
      <td>$372,000</td>
    </tr>
    <tr>
      <td><input type="checkbox" /></td>
      <td>Herrod Chandler</td>
      <td>Sales Assistant</td>
      <td>San Francisco</td>
      <td>59</td>
      <td>2012/08/06</td>
      <td>$137,500</td>
    </tr>
    <tr>
      <td><input type="checkbox" /></td>
      <td>Rhona Davidson</td>
      <td>Integration Specialist</td>
      <td>Tokyo</td>
      <td>55</td>
      <td>2010/10/14</td>
      <td>$327,900</td>
    </tr>

  </tbody>
</table>

Collectives™ on Stack Overflow

Unable to get Sum of Column values(Checkbox checked) using jQuery Datatables

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related