Search code examples
javascriptdatatables

Reset the value to 0 if it does not find any value with its currency symbol

Cordial greetings I have a problem I have a table with numeric data with monetary symbols that are dollars and soles (currency of my country), what I do is the general sum of the column depending on the monetary symbol that has, my issue is that when I filter by state and there is no value with the dollar symbol or soles brings me in general summed amount and I would like it to be the value of 0. I tried to improve the conditional but I can't find the solution.

$(document).ready(function(){
    var table = $('#servicios').DataTable({
      processing: true,
      serverSider: true,
      "pageLength": 50,
      "lengthMenu": [[5,10,50,-1], [5,10,50,"All"]],
      "language":{
        "url": "//cdn.datatables.net/plug-ins/1.10.21/i18n/Spanish.json"
      }
    });
    let  soles = 0.0;
    let  dollar = 0.0;
     table.column(3).data().each( value => {const [symbol, amount] = value.split(' ');
        if (symbol === "S/") {
            soles += parseFloat(amount.replace(/,/g, ""));$("#soles").text((+soles).toLocaleString('en-US'));
        } else if (symbol === "$") {
            dollar += parseFloat(amount.replace(/,/g, ""));$("#dollar").text((+dollar).toLocaleString('en-US'));
        };
    });
   // dropdown
    $('.filter-select').change(function(){
        table.column($(this).data('column')).search($(this).val()).draw();
        let  soles = 0.0;
        let  dollar = 0.0;
        table.column(3,{search:'applied'}).data().each( value => { const [symbol, amount] = value.split(' ');
            if (symbol === "S/") {
                soles += parseFloat(amount.replace(/,/g, ""));$("#soles").text((+soles).toLocaleString('en-US'));
            } else if (symbol === "$") {
                dollar += parseFloat(amount.replace(/,/g, ""));$("#dollar").text((+dollar).toLocaleString('en-US'));
            };
        });
     });
 });
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
  <title>JS Bin</title>
</head>
<body>
  <span><strong>STATE</strong></span>
  <select data-column="1" class="form-control filter-select">
        <option value="">All</option>
        <option value="&#10003;">&#10003;</option>
        <option value="&#9866;">&#9866;</option>
   </select>
<table id="servicios" class="display" style="width:100%">
        <thead>
          <tr>
              <th style="background: #fff;text-align: center;border: none;" colspan="3"></th>
                <th colspan="1">
                     <h5 style="font-size: 13px;" >S/ <span id="soles"></span></h5>
                     <h5 style="font-size: 13px;" >$  <span id="dollar"></span></h5>
                 </th>
            </tr>
            <tr>
                <th>Name</th>
                <th>State</th>
                <th>Date</th>
                <th>salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>&#10003;</td>
                <td>2011-04-25</td>
                <td>$ 14.00</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>&#10003;</td>
                <td>2011-07-25</td>
                <td>$ 11.00</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>&#9866;</td>
                <td>2009-01-12</td>
                <td>S/ 124.00</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>&#9866;</td>
                <td>2012-03-29</td>
                <td>S/ 124.00</td>
            </tr>
            <tr>
                <td>Airi Satou</td>
                <td>&#10003;</td>
                <td>2008-11-28</td>
                <td>$ 14.00</td>
            </tr>
            <tr>
                <td>Brielle Williamson</td>
                <td>&#9866;</td>
                <td>2012-12-02</td>
                <td>$ 14.00</td>
            </tr>
            <tr>
                <td>Herrod Chandler</td>
                <td>&#9866;</td>
                <td>2012-08-06</td>
                <td>S/ 124.00</td>
            </tr>
            <tr>
                <td>Rhona Davidson</td>
                <td>&#9866;</td>
                <td>2010-10-14</td>
                <td>$ 14.00</td>
            </tr>
            <tr>
                <td>Colleen Hurst</td>
                <td>&#9866;</td>
                <td>2009-09-15</td>
                <td>$ 14.00</td>
            </tr>
            <tr>
                <td>Sonya Frost</td>
                <td>&#9866;</td>
                <td>2008-12-13</td>
                <td>S/ 124.00</td>
            </tr>
        </tbody> 
    </table>
  <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/plug-ins/1.11.3/api/sum().js"></script>
</body>
</html>

Solution

  • Just output your values outside of the if block, this way, when filtering for ✓ it will display S/ 0

    $(document).ready(function(){
    var table = $('#servicios').DataTable({
      processing: true,
      serverSider: true,
      "pageLength": 50,
      "lengthMenu": [[5,10,50,-1], [5,10,50,"All"]],
      "language":{
        "url": "//cdn.datatables.net/plug-ins/1.10.21/i18n/Spanish.json"
      }
    });
    let  soles = 0.0;
    let  dollar = 0.0;
     table.column(3).data().each( value => {const [symbol, amount] = value.split(' ');
        if (symbol === "S/") {
            soles += parseFloat(amount.replace(/,/g, ""));$("#soles").text((+soles).toLocaleString('en-US'));
        } else if (symbol === "$") {
            dollar += parseFloat(amount.replace(/,/g, ""));$("#dollar").text((+dollar).toLocaleString('en-US'));
        };
    });
   // dropdown
    $('.filter-select').change(function(){
        table.column($(this).data('column')).search($(this).val()).draw();
        let  soles = 0.0;
        let  dollar = 0.0;
        table.column(3,{search:'applied'}).data().each( value => {
            const [symbol, amount] = value.split(' ');
            if (symbol === "S/") {
                soles += parseFloat(amount.replace(/,/g, ""));
                
            } else if (symbol === "$") {
                dollar += parseFloat(amount.replace(/,/g, ""));
            }
            
            // I SIMPLY MOVED THESE 2 LINES OUT OF THE IF BLOCK
            $("#soles").text((+soles).toLocaleString('en-US'));
            $("#dollar").text((+dollar).toLocaleString('en-US'));
        });
     });
 });
    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
  <title>JS Bin</title>
</head>
<body>
  <span><strong>STATE</strong></span>
  <select data-column="1" class="form-control filter-select">
        <option value="">All</option>
        <option value="&#10003;">&#10003;</option>
        <option value="&#9866;">&#9866;</option>
   </select>
<table id="servicios" class="display" style="width:100%">
        <thead>
          <tr>
              <th style="background: #fff;text-align: center;border: none;" colspan="3"></th>
                <th colspan="1">
                     <h5 style="font-size: 13px;" >S/ <span id="soles"></span></h5>
                     <h5 style="font-size: 13px;" >$  <span id="dollar"></span></h5>
                 </th>
            </tr>
            <tr>
                <th>Name</th>
                <th>State</th>
                <th>Date</th>
                <th>salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>&#10003;</td>
                <td>2011-04-25</td>
                <td>$ 14.00</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>&#10003;</td>
                <td>2011-07-25</td>
                <td>$ 11.00</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>&#9866;</td>
                <td>2009-01-12</td>
                <td>S/ 124.00</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>&#9866;</td>
                <td>2012-03-29</td>
                <td>S/ 124.00</td>
            </tr>
            <tr>
                <td>Airi Satou</td>
                <td>&#10003;</td>
                <td>2008-11-28</td>
                <td>$ 14.00</td>
            </tr>
            <tr>
                <td>Brielle Williamson</td>
                <td>&#9866;</td>
                <td>2012-12-02</td>
                <td>$ 14.00</td>
            </tr>
            <tr>
                <td>Herrod Chandler</td>
                <td>&#9866;</td>
                <td>2012-08-06</td>
                <td>S/ 124.00</td>
            </tr>
            <tr>
                <td>Rhona Davidson</td>
                <td>&#9866;</td>
                <td>2010-10-14</td>
                <td>$ 14.00</td>
            </tr>
            <tr>
                <td>Colleen Hurst</td>
                <td>&#9866;</td>
                <td>2009-09-15</td>
                <td>$ 14.00</td>
            </tr>
            <tr>
                <td>Sonya Frost</td>
                <td>&#9866;</td>
                <td>2008-12-13</td>
                <td>S/ 124.00</td>
            </tr>
        </tbody> 
    </table>
  <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/plug-ins/1.11.3/api/sum().js"></script>
</body>
</html>