时间戳

首页 > 解决方案 > 如何获取要在 aspx 中使用的 jquery 数据表列的总和？

asp.net - 如何获取要在 aspx 中使用的 jquery 数据表列的总和？

问题描述

我在代码隐藏 .cs 文件中生成数据表的代码。我有一些带有货币值的列。如何对整列求和并抓取它，以便我可以在 .cs 文件中使用它来填充标签？

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

谢谢

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;

标签： asp.netdatatablessum

解决方案

将更改为您当前的大部分代码，您可以通过在 datatables 事件上运行它来调整您链接.sum()的数据表函数，然后在页面加载时运行它以获得初始值。见下文（只有 javascript 对您很重要 - HTML 和 CSS 仅用于演示。通过搜索字母“c”或字母“f”来查看基于第 8 列值的总变化）：search.dt

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 中引用它。

推荐阅读