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

Question

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

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

期望结果的概念（裁剪图像）：

这是我试过的：

✓ 添加第二个 <tr> 到数据表（工作）
✗ 将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

如果你想计算最后一列的值，你需要得到这一行中所有单元格的总和（不是 2 行 和 $('#example > tfoot > tr').each -> 在 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;
            }
        }
    }
});

Answer 2

只需将您的 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>

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

How to access to the second row of a Datatables footer

javascript

jquery

datatables