如何访问数据表页脚的第二行

Question

我想在我的数据表的页脚添加第二个<tr> 以显示总计（在进行一些总和之后）。

所有的计算都已经开始了，我只想在页脚第二行j >= 12时注入rowSum的值。

所需结果的概念（裁剪图像）：

这是我尝试过的：

1. ✓ 向数据表添加第二个<tr>（工作）
2. ✗将rowSum的值注入到页脚第二行的最后一列（我猜我这里做错了）

这是我认为错误的代码部分：

$('#example > tfoot  > tr').each(function(index, tr) {
    var rowSum = 0;
    for (let j = 0; j < 12; j++) {
        if (j >= 2) {
            var tdCellValue = numberFromString(tr.cells[j].innerText);
            rowSum = rowSum + tdCellValue;
        }
        if (j >= 11) {
            tr.cells[12].innerText = rowSum;
            tr[1].cells[12].innerText = rowSum;
        }
    }
});

在这里我尝试访问页脚的第二行：tr[1].cells[12].innerText = rowSum;，我认为这是我犯错误的地方。

DEMO JS BIN

有谁知道如何访问数据表页脚的第二行并正确注入值？

Answer 1

只需将您的 JS 代码替换为以下内容。这是工作文件的Demo。

<script>
    $(document).ready(function() {
    
        
        var DT1 = $('#example').DataTable({
    
            columnDefs: [{
                orderable: false,
                className: 'select-checkbox',
                targets: 0,
            }],
            select: {
                style: 'os',
                selector: 'td:first-child'
            },
            order: [
                [1, 'asc']
            ],
            "language": {
                "info": "Showing _START_ to _END_ of _TOTAL_ Projects",
                "infoEmpty": "Showing 0 to 0 of 0 Projects",
                "infoFiltered": "(filtered from _MAX_ total Projects)"
            },
            "pagingType": "numbers",
            dom: 'rtip',
            initComplete: function(settings, json) {
                // calculate the sum when table is first created:
                doSum();
            }
        });
    
        $('#example').on('draw.dt', function() {
            // re-calculate the sum whenever the table is re-displayed:
            doSum();
        });
        $(".selectAll").on("click", function(e) {
            if ($(this).is(":checked")) {
                DT1.rows().select();
            } else {
                DT1.rows().deselect();
            }
        });
        
        // This provides the sum of all records:
        function doSum() {
            // get the DataTables API object:
            var table = $('#example').DataTable();
            // set up the initial (unsummed) data array for the footer row:
            var totals = ['', 'Total:', 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
            // iterate all rows - use table.rows( {search: 'applied'} ).data()
            // if you want to sum only filtered (visible) rows:
            totals = table.rows().data()
                // sum the amounts:
                .reduce(function(sum, record) {
                    for (let i = 2; i <= 12; i++) {
                        sum[i] = sum[i] + numberFromString(record[i]);
                    }
                    return sum;
                }, totals);
            // place the sum in the relevant footer cell:
            for (let i = 1; i <= 12; i++) {
                var column = table.column(i);
                $(column.footer()).html(formatNumber(totals[i]));
            }
            
            
            $('#example > tbody  > tr').each(function(index, tr) { 
         var rowSum=0;
            for(let j=0; j<12; j++)
            {               
                if(j>=2){
                 var tdCellValue=  numberFromString(tr.cells[j].innerText);
                 rowSum=rowSum+tdCellValue;
                }
                if(j >=11){
                 tr.cells[12].innerText=rowSum;          
                }
            }
        });
        var grandTotal=0;
       $('#example > tfoot  > tr').each(function(index, tr) {
              if(index<1){
              grandTotal=0;
                var rowSum = 0;
                for (let j = 0; j < 12; j++) {
                    if (j >= 2) {
                        var tdCellValue = numberFromString(tr.cells[j].innerText);
                        rowSum = rowSum + tdCellValue;
                    }
                    if (j >= 11) {
                        tr.cells[12].innerText = rowSum;                    
                        grandTotal=rowSum;
                    }
                }
              }else{
                 tr.cells[11].innerText = "Grand Total";
                 tr.cells[12].innerText = grandTotal;
              }
            });
        }
    
        function numberFromString(s) {
            return typeof s === 'string' ?
                s.replace(/[\$,]/g, '') * 1 :
                typeof s === 'number' ?
                s : 0;
        }
    
        function formatNumber(n) {
            return n.toLocaleString(); // or whatever you prefer here
        }
    });
    </script>

Answer 2

如果要计算最后一列的值，则需要获取该行中所有单元格的总和（不是 2 行 与 $('#example > tfoot > tr')。每个 -> 在 html 中，你有 2 tr )

$('#example > tfoot  > tr').each(function(index, tr) {
    if (index == 0) {
        var rowSum = 0;
        for (let j = 0; j < totalCol; j++) {
            if (j >= 2 && j < 12) {
                var tdCellValue = numberFromString(tr.cells[j].innerText);
                rowSum = rowSum + tdCellValue;
            }
            if (j >= 12) {
                tr.cells[12].innerText = rowSum;
                //    tr[1].cells[12].innerText = rowSum;
            }
        }
    }
});