如何获取要在aspx中使用的jquery datatables列的总和？

如何解决如何获取要在aspx中使用的jquery datatables列的总和？

我在.cs文件后面的代码中为数据表生成代码。我有一些带有货币值的列。如何汇总整列并抓取它，以便可以在.cs文件中使用它填充标签？

如果使用searchfilter，是否还可以仅获取显示结果的值？例如。在搜索过滤器中键入了某些内容，因此行被隐藏了，我只需要可见行的总和即可。

谢谢

aspx：

<div id="DIV_Table" runat="server"> </div> //the content will be filled code-behind
<asp:Label ID="lbl_Sum" runat="server"></asp:Label> //Label to show the sum

cs：

//datatable dt is the source
string html = "<table id='liste' class='display' cellspacing='0' style='width:100%'><thead>";
        //add header row
        html += "<tr>";

        for (int i = 0; i <= dt.Columns.Count - 1; i++)
        {
            html += "<th>" + dt.Columns[i].ColumnName + "</th>";
        }
        html += "</tr></thead><tbody>";

        //add rows
        for (int i = 0; i < dt.Rows.Count; i++)
        {
            html += "<tr>";
        for (int y = 0; y <= dt.Columns.Count - 1; y++)
            {
            html += "<td>" + dt.Rows[i][y].ToString() + "</td>";
            }
            html += "</tr>";
          }

        //footer
        html += "</tbody><tfoot><tr>";
        foreach (DataColumn dc in dt.Columns) html += @"<th>" + dc.ColumnName + "</th>";
        html += "</tr></tfoot></table>";

        //javascript
        html += @"<script>
        $(document).ready(function() {

                      $('#liste').DataTable({                                    
                                fixedHeader: {
                                                header: true,footer: true
                                            },order: [[ 0,'desc' ]],paging: false,columnDefs: [{ type: 'currency',targets: 7 }
                                             { targets: 8,visible: false},],language: { 'decimal': ',','thousands': '.','sEmptyTable': 'Keine Daten in der Tabelle vorhanden','sInfo': '_START_ bis _END_ von _TOTAL_ Einträgen','sInfoEmpty': '0 bis 0 von 0 Einträgen','sInfoFiltered': '(gefiltert von _MAX_ Einträgen)','sInfoPostFix': '','sInfoThousands': '.','sLengthMenu': '_MENU_ Einträge anzeigen','sLoadingRecords': 'Wird geladen...','sProcessing': 'Bitte warten...','sSearch': 'Suchen','sZeroRecords': 'Keine Einträge vorhanden.','oPaginate': {
                                            'sFirst': 'Erste','sPrevious': 'Zurück','sNext': 'Nächste','sLast': 'Letzte'
                                            },'oAria': {
                                            'sSortAscending': ': aktivieren,um Spalte aufsteigend zu sortieren','sSortDescending': ': aktivieren,um Spalte absteigend zu sortieren'
                                            }
                                         },rowCallback: function(row,data,index)
                                        {
                                            if(data[29] == 'Abgeschlossen') { $(row).css('background-color','#bfbfbf'); }
                                        },});
                    });
                   </script>";

DIV_Table.InnerHtml = html;

解决方法

将要更改为当前代码的大部分内容，您可以通过在数据表.sum()事件上运行search.dt数据表功能you linked来对其进行修改，然后在页面加载时为初始值。参见下文（仅javascript对您很重要-HTML和CSS仅用于演示。通过搜索字母“ c”或字母“ f”以查看基于第8列的值的总变化来进行测试）：>

var table;
$(document).ready(function() {

  $.fn.dataTable.Api.register('column().data().sum()',function() {
    return this.reduce(function(a,b) {
      var x = parseFloat(a) || 0;
      var y = parseFloat(b) || 0;
      return x + y;
    });
  });

  table = $('#liste').DataTable({
      fixedHeader: {
        header: true,footer: true
      },order: [
        [0,'desc']
      ],paging: false,columnDefs: [{
        type: 'currency',targets: 7
      },{
        targets: 8,visible: false
      }],language: {
        'decimal': ',','thousands': '.','sEmptyTable': 'Keine Daten in der Tabelle vorhanden','sInfo': '_START_ bis _END_ von _TOTAL_ Einträgen','sInfoEmpty': '0 bis 0 von 0 Einträgen','sInfoFiltered': '(gefiltert von _MAX_ Einträgen)','sInfoPostFix': '','sInfoThousands': '.','sLengthMenu': '_MENU_ Einträge anzeigen','sLoadingRecords': 'Wird geladen...','sProcessing': 'Bitte warten...','sSearch': 'Suchen','sZeroRecords': 'Keine Einträge vorhanden.','oPaginate': {
          'sFirst': 'Erste','sPrevious': 'Zurück','sNext': 'Nächste','sLast': 'Letzte'
        },'oAria': {
          'sSortAscending': ': aktivieren,um Spalte aufsteigend zu sortieren','sSortDescending': ': aktivieren,um Spalte absteigend zu sortieren'
        }
      },rowCallback: function(row,data,index) {
        if (data[29] == 'Abgeschlossen') {
          $(row).css('background-color','#bfbfbf');
        }
      },})
    .on('search.dt',function() {
      var total = table.column(7,{
        page: 'current'
      }).data().sum();
      $('.total-label').text(total);
    });

  var total = table.column(7,{
    page: 'current'
  }).data().sum();
  $('.total-label').text(total);
});

table {
  width: 100%;
  border-collapse: collapse;
}

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>

<h2>
  Total:
  <label class="total-label"></label>
</h2>
<hr>
<table id="liste">
  <thead>
    <tr>
      <td>Column 1</td>
      <td>Column 2</td>
      <td>Column 3</td>
      <td>Column 4</td>
      <td>Column 5</td>
      <td>Column 6</td>
      <td>Column 7</td>
      <td>Column 8</td>
      <td>Column 9</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>abc 1</td>
      <td>abc 1</td>
      <td>abc 1</td>
      <td>abc 1</td>
      <td>abc 1</td>
      <td>abc 1</td>
      <td>abc 1</td>
      <td>1</td>
      <td>hidden</td>
    </tr>
     <tr>
      <td>cdf 2</td>
      <td>cdf 2</td>
      <td>cdf 2</td>
      <td>cdf 2</td>
      <td>cdf 2</td>
      <td>cdf 2</td>
      <td>cdf 2</td>
      <td>2</td>
      <td>hidden</td>
    </tr>
     <tr>
      <td>fgh 3</td>
      <td>fgh 3</td>
      <td>fgh 3</td>
      <td>fgh 3</td>
      <td>fgh 3</td>
      <td>fgh 3</td>
      <td>fgh 3</td>
      <td>3</td>
      <td>hidden</td>
    </tr>
  </tbody>
</table>

您还需要将CssClass="total-label"添加到<asp:Label />或所需的任何类中，以便可以轻松地在javascript中引用它。