我需要你的帮助,请,我使用的数据表,我已经设法做了我的两列(ACOUNT和TOTAL)的总和,但当我做了一个按用户过滤我希望总和被更新,只显示该用户的总和数据.

$(document).ready(function(){
          var table = $('#table_id').DataTable({
            processing: true,
            ordering: true,
            "pageLength": 50,
            "lengthMenu": [[5,10,50,-1], [5,10,50,"All"]],
            "order": [[ 1, "asc" ]],
            "autoWidth": false,
            "language":{
              "url": "//cdn.datatables.net/plug-ins/1.10.21/i18n/Spanish.json"
            }
          });

          //SUMA
          //ACOUNT
          var arrSalePriceOne = table.column(1).data().sum();
          $("#tblProfit").text((+arrSalePriceOne).toLocaleString('en-US'));
          //TOTAL
          var arrSalePriceTwo = table.column(2).data().sum();
          $("#sumados").text((+arrSalePriceTwo).toLocaleString('en-US'));

          // dropdown
          $('.filter-select').change(function(){
          table.column($(this).data('column'))
          .search($(this).val())
          .draw();
          });
        });
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
</head>
<body>
    <div class="text-center">
        <div class="row  mt-1">
            <div class="col-6">
                <div class="card text-center">
                    <div class="card-header p-1">
                        ACOUNT
                    </div>
                    <div class="card-body p-1" style="background: #76b8da">
                        <h5>S/ <span id="tblProfit"></span></h5>
                    </div>
                </div>
            </div>
            <div class="col-6">
                <div class="card text-center">
                    <div class="card-header p-1">
                        <div class="row">
                            <div class="col-sm-8">
                               TOTAL
                            </div>
                        </div>
                    </div>
                    <div class="card-body p-1" style="background: #4ef3ae">
                    <h5>S/ <span id="sumados"></span></h5>
                    </div>
                </div>
            </div>
        </div>  
    </div>
    <div class="card card-body">
        <div class="row mb-3 mt-2">
            <div class="col-2">
                <span><strong>User</strong></span>
                <select data-column="0" class="form-control filter-select">
                    <option value="">Todos</option>
                    <option value="Jose">Jose</option>
                    <option value="Carlos">Carlos</option>
                </select>
            </div>
        </div>
    </div>        
    <table id="table_id" class="display">
        <thead>
            <tr>
                <th>User</th>
                <th>Account</th> 
                <th>Total</th> 
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Carlos</td>
                <td>100</td>
                <td>223.24</td>
            </tr>
            <tr>
                <td>Carlos</td>
                <td>100</td>
                <td>321</td>
            </tr>
            <tr>
                <td>Carlos</td>
                <td>100</td>
                <td>321</td>
            </tr>
            <tr>
                <td>Jose</td>
                <td>200</td>
                <td>221</td>
            </tr>
            <tr>
                <td>Jose</td>
                <td>10</td>
                <td>100</td>
            </tr>
            <tr>
                <td>Carlos</td>
                <td>30</td>
                <td>100</td>
            </tr>
            <tr>
                <td>Jose</td>
                <td>50</td>
                <td>100</td>
            </tr>
            <tr>
                <td>Carlos</td>
                <td>14</td>
                <td>100</td>
            </tr>
            <tr>
                <td>Carlos</td>
                <td>26</td>
                <td>100</td>
            </tr>
            <tr>
                <td>Jose</td>
                <td>76</td>
                <td>24</td>
            </tr>
            <tr>
                <td>Jose</td>
                <td>86</td>
                <td>100</td>
            </tr>
            <tr>
                <td>Jose</td>
                <td>12</td>
                <td>120</td>
            </tr>
        </tbody>
    </table>
    <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js"></script>
    <script src="https://cdn.datatables.net/plug-ins/1.11.3/api/sum().js"></script> 
</body>
</html>

谢谢你的帮助

推荐答案

您可以使用DataTables {search:'applied'} selector modifier来确保只对过滤后的列值求和.

下面是一个修订的下拉更改事件,显示了以下内容:

// dropdown
$('.filter-select').change(function(){
  table.column($(this).data('column'))
  .search($(this).val())
  .draw();
            
  var account = table.columns( 1, {search:'applied'} ).data().sum();
  $("#tblProfit").text((+account).toLocaleString('en-US'));
            
  var total = table.columns( 2, {search:'applied'} ).data().sum();
  $("#sumados").text((+total).toLocaleString('en-US'));
            
});

更新:下面是一个可运行的代码片段.第一次显示表格时,它显示总计(无过滤):

        $(document).ready(function(){
          var table = $('#table_id').DataTable({
            processing: true,
            ordering: true,
            "pageLength": 50,
            "lengthMenu": [[5,10,50,-1], [5,10,50,"All"]],
            "order": [[ 1, "asc" ]],
            "autoWidth": false,
            "language":{
              "url": "https://cdn.datatables.net/plug-ins/1.10.21/i18n/Spanish.json"
            }
          });

          //SUMA
          //ACOUNT
          var arrSalePriceOne = table.column(1).data().sum();
          $("#tblProfit").text((+arrSalePriceOne).toLocaleString('en-US'));
          //TOTAL
          var arrSalePriceTwo = table.column(2).data().sum();
          $("#sumados").text((+arrSalePriceTwo).toLocaleString('en-US'));

          // dropdown
          $('.filter-select').change(function(){
            table.column($(this).data('column'))
            .search($(this).val())
            .draw();
            
            var account = table.columns( 1, {search:'applied'} ).data().sum();
            $("#tblProfit").text((+account).toLocaleString('en-US'));
            
            var total = table.columns( 2, {search:'applied'} ).data().sum();
            $("#sumados").text((+total).toLocaleString('en-US'));
            
          });
          
        });
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js"></script>
    <script src="https://cdn.datatables.net/plug-ins/1.11.3/api/sum().js"></script> 
</head>
<body>
    <div class="text-center">
        <div class="row  mt-1">
            <div class="col-6">
                <div class="card text-center">
                    <div class="card-header p-1">
                        ACOUNT
                    </div>
                    <div class="card-body p-1" style="background: #76b8da">
                        <h5>S/ <span id="tblProfit"></span></h5>
                    </div>
                </div>
            </div>
            <div class="col-6">
                <div class="card text-center">
                    <div class="card-header p-1">
                        <div class="row">
                            <div class="col-sm-8">
                               TOTAL
                            </div>
                        </div>
                    </div>
                    <div class="card-body p-1" style="background: #4ef3ae">
                    <h5>S/ <span id="sumados"></span></h5>
                    </div>
                </div>
            </div>
        </div>  
    </div>
    <div class="card card-body">
        <div class="row mb-3 mt-2">
            <div class="col-2">
                <span><strong>User</strong></span>
                <select data-column="0" class="form-control filter-select">
                    <option value="">Todos</option>
                    <option value="Jose">Jose</option>
                    <option value="Carlos">Carlos</option>
                </select>
            </div>
        </div>
    </div>        
    <table id="table_id" class="display">
        <thead>
            <tr>
                <th>User</th>
                <th>Account</th> 
                <th>Total</th> 
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Carlos</td>
                <td>100</td>
                <td>223.24</td>
            </tr>
            <tr>
                <td>Carlos</td>
                <td>100</td>
                <td>321</td>
            </tr>
            <tr>
                <td>Carlos</td>
                <td>100</td>
                <td>321</td>
            </tr>
            <tr>
                <td>Jose</td>
                <td>200</td>
                <td>221</td>
            </tr>
            <tr>
                <td>Jose</td>
                <td>10</td>
                <td>100</td>
            </tr>
            <tr>
                <td>Carlos</td>
                <td>30</td>
                <td>100</td>
            </tr>
            <tr>
                <td>Jose</td>
                <td>50</td>
                <td>100</td>
            </tr>
            <tr>
                <td>Carlos</td>
                <td>14</td>
                <td>100</td>
            </tr>
            <tr>
                <td>Carlos</td>
                <td>26</td>
                <td>100</td>
            </tr>
            <tr>
                <td>Jose</td>
                <td>76</td>
                <td>24</td>
            </tr>
            <tr>
                <td>Jose</td>
                <td>86</td>
                <td>100</td>
            </tr>
            <tr>
                <td>Jose</td>
                <td>12</td>
                <td>120</td>
            </tr>
        </tbody>
    </table>
        
</body>
</html>

Javascript相关问答推荐

IMDB使用 puppeteer 加载更多按钮(nodejs)

Javascript,部分重排序数组

将状态向下传递给映射的子元素

将字符串UTC Date转换为ngx—counting leftTime配置值的数字

如何在文本字段中输入变量?

ChartJs未呈现

如何修复我的数据表,以使stateSave正常工作?

如何将未排序的元素追加到数组的末尾?

如何在.NET Core中将chtml文件链接到Java脚本文件?

VSCode中出现随机行

如何将zoom 变换应用到我的d3力有向图?

如何在Java脚本中对数据进行签名,并在PHP中验证签名?

无法检索与Puppeteer的蒸汽游戏的Bundle 包价格

在渲染turbo流之后滚动到元素

react 路由如何使用从加载器返回的数据

P5.js中矩形内的圆弧

如何在TransformControls模式下只保留箭头进行翻译?

Angel Auth Guard-用户只有在未登录时才能访问登录页面,只有在登录时才能访问其他页面

如何缩小函数中联合返回类型的范围

在Reaction Native中,ScrolltoIndex在结束时不一致地返回到索引0