Datatables footerCallback，排除行并用 JSON 数据求和

Question

本题基于

我实现了@andrewJames 的解决方案（谢谢）。

我正在尝试对 table 的最后一列求和，但 System Architect 和 Senior Javascript Developer

的薪水除外

但是现在我使用JSON数据的时候出现了问题。 sum 总是 0... 而不是 $9

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>
    </table>

  </div>

</div>

jQuery:

var salaryTable = {
    "data": [
        {
            "Seq": "1",
            "Name": "Tiger Nixon",
            "Position": "System Architect",
            "Salary": ""
        },
        {
            "Seq": "1",
            "Name": "Garrett Winters",
            "Position": "Accountant",
            "Salary": ""
        },
        {
            "Seq": "3",
            "Name": "Ashton Cox",
            "Position": "Junior Technical Author",
            "Salary": ""
        },
        {
            "Seq": "4",
            "Name": "Cedric Kelly",
            "Position": "Senior Javascript Developer",
            "Salary": ""
        },
        {
            "Seq": "5",
            "Name": "Airi Satou",
            "Position": "Accountant",
            "Salary": ""
        }
    ]
}; 
 
 
 $(document).ready(function() {
    var table = $('#example').DataTable( {
        rowReorder: {
        selector: 'td:nth-child(2)'
      },
      data: salaryTable.data,
            columns: [
            { data: "Seq" },
            { data: "Name" },
            { data: "Position" },
            { data: "Salary" }
        ],
      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;
            };
 
            filteredTotal = api.rows().data().reduce(function (a, b) {
              // 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]);

              return a + salary;
            }, 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(
                '$'+filteredTotal+'/ all $'+pageTotal
            );
        },
        buttons: ['pdf', 'print']
    } );
 
    table.buttons().container()
        .appendTo( '#example_wrapper .small-6.columns:eq(0)' );
} );
   $(document).foundation();

Fiddle 问题：https://jsfiddle.net/87360vyx/1/

Answer 1

此 Ajax 方法与您的方法的区别在于：

当 DataTables 直接从 HTML table 中提取数据时，一行数据被处理为 JavaScript 值数组：

[ '1', 'Tiger Nixon', 'System Architect', ... ]

但是对于您在此问题中使用的 JSON，等效的数据行作为 JavaScript 对象存储在 DataTables 中：

{ Seq: "1", Name: "Tiger Nixon", Position: "System Architect", ... }

因此您无法使用 b[2] 之类的代码访问行值。相反，您必须使用 b.Position。而不是 b[3] 你必须使用 b.Salary.

您可以通过在 rows().data().reduce(...) 代码中向每个不同版本的代码添加 console.log( b ); 语句来亲眼看到差异。这将准确地向您展示 DataTables 如何在内部处理其行数据。

你也可以在这里看官方例子：Ajax data source (objects)

Datatables footerCallback，排除行并用 JSON 数据求和

Datatables footerCallback, exclude rows and sum it with JSON data

html

jquery

json

datatables