Total sum of filtered table

I'm trying to create a table that will be able to give the total sum of the value's column. However I am so far unsuccessful in making the sum after it has been filtered.

Anybody know a bit of jquery to solve this please ?

  <div class="form-group">
  <p id="totvalue"></p>
  <table id="table" class="table table-striped table-bordered" data-filter-control="true" data-show-search-clear-button="true">
     <thead>
        <tr class="titlerow">
           <th scope="col">ID</th>
           <th scope="col">Title</th>
           <th scope="col" data-field="Parent ID" data-filter-control="input">Parent ID</th>
           <th scope="col">Value</th>
        </tr>
     </thead>
     <tbody>
        <% csvList.forEach(function(csv) {%>
        <tr>
           <th scope="row" class="col1"><%=csv.id%></th>
           <td class="col2"><%=csv.title%></td>
           <td class="col3"><%=csv.parent_id%></td>
           <td class="col4 valor"><%=csv.value%></td>
        </tr>
        <% }) %>
     </tbody>
  </table>
  <span id="val"></span>

  <script>
     $(function() {
       $('#table').bootstrapTable()
     })
  </script>
  <script>
     $(document).ready(function(){
       var values;
       var totalvalue = 0;
       $('td:nth-child(4)').each(function(){
          values = $(this).html();
          totalvalue += parseFloat(values);
          $('#totvalue').text(totalvalue);
       });
     });
  </script>