具有重复单元格编号的 footerCallback

Question

我正在尝试在另一个单元格上使用带条件的 footerCallback。我看到并重播了这个问题：.

我在那里写道，当单元格具有相同的数字时，总和是错误的。在我的代码中，我不使用 _each。我试图在我的代码中实现它，但我需要对每个总和创建不同的算术运算。

下面是需要排除System Architect的薪水（这里为简单起见我删掉了零）的情况下总和错误的情况：

HTML:

<div class="row">

  <div class="large-12 columns">


  <table id="example" class="display nowrap table1" cellspacing="0" width="100%">
      <thead>
        <tr>
          <th>Seq.</th>
          <th>Name</th>
          <th>Position</th>
          <th>Salary</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <th>Seq.</th>
          <th>Name</th>
          <th>Position</th>
          <th>Salary</th>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <td>1</td>
          <td>Tiger Nixon</td>
          <td>System Architect</td>
          <td></td>
        </tr>
        <tr>
          <td>1</td>
          <td>Garrett Winters</td>
          <td>Accountant</td>
          <td></td>
        </tr>
        <tr>
          <td>3</td>
          <td>Ashton Cox</td>
          <td>Junior Technical Author</td>
          <td></td>
        </tr>
        <tr>
          <td>4</td>
          <td>Cedric Kelly</td>
          <td>Senior Javascript Developer</td>
          <td></td>
        </tr>
        <tr>
          <td>5</td>
          <td>Airi Satou</td>
          <td>Accountant</td>
          <td></td>
        </tr>
   
      </tbody>
    </table>

  </div>

</div>

jQuery:

 $(document).ready(function() {
    var table = $('#example').DataTable( {
        rowReorder: {
        selector: 'td:nth-child(2)'
      },
      responsive: true,
      scrollX: true,
      scrollY: "80vh",
        scrollCollapse: true,
            paging: true,
      lengthChange: false,
      lengthMenu: [ [10, 25, -1], [10, 25, "All"] ],
      "order": [[ 0, "asc" ]],
      "footerCallback": function ( row, data, start, end, display ) {
            var api = this.api(), data;
 
            // Remove the formatting to get integer data for summation
            var intVal = function ( i ) {
                return typeof i === 'string' ?
                    i.replace(/[$,]/g, '')*1 :
                    typeof i === 'number' ?
                        i : 0;
            };
 
            // Total over all pages
            total = api
                .column( 3 )
                .data()
      .reduce(function (a, b) {
            var cur_index = api.column(3).data().indexOf(b);
            if (api.column(2).data()[cur_index] != "System Architect") {
            return intVal(a) + intVal(b);
          }
          else { return intVal(a); }
      }, 0 );
 
            // Total over this page
            pageTotal = api
                .column( 3, { page: 'current'} )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );
 
            // Update footer
            $( api.column( 3 ).footer() ).html(
                '$'+total+'/ all $'+pageTotal
            );
        },
        buttons: ['pdf', 'print']
    } );
 
    table.buttons().container()
        .appendTo( '#example_wrapper .small-6.columns:eq(0)' );
} );
   $(document).foundation();

Fiddle 问题：https://jsfiddle.net/62bmu4so/

Answer 1

我会将您的过滤总数方法更改为：

filteredTotal = api.rows().data().reduce(function (a, b) {
  salary = b[2] === "System Architect" ? 0 : intVal(b[3]);
  return a + salary;
}, 0 );
              
console.log(filteredTotal); // just for demo/testing

因此，我不会只处理 reduce 函数中的一列，而是按 rows() 处理。

这意味着reduce函数中b的值是一个包含当前行数据的数组。使用它，我们可以检查 b[2] 中的职位是否与我们的过滤器值匹配 - 如果 b[2] 匹配，则强制 b[3] 为零。

这意味着：

您不再跳过需要在 reduce()
您不再需要执行额外的索引查找步骤。

评论：“其中“高级 Javascript 开发人员”也可以排除”：

您可以这样做 - 将过程分为 2 个步骤以使代码更清晰：

// filterMe will be true or false:
filterMe = b[2] === "System Architect" || b[2] === "Senior Javascript Developer";

// if filterMe is true then use 0, otherwise use the actual amount from b[3]:
salary = filterMe ? 0 : intVal(b[3]);

我还没有测试过，但应该可以。

具有重复单元格编号的 footerCallback

footerCallback with duplicate cell numbers

html

jquery

datatables