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

Posted 2023-05-09

【中文标题】如何访问数据表页脚的第二行

【英文标题】：How to access to the second row of a Datatables footer

【发布时间】：2021-12-22 16:50:37

【问题描述】：

我想在我的数据表的页脚添加第二个<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

有谁知道并正确注入值？

【问题讨论】：

您可以使用“footerCallback”选项实现此目的

【参考方案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>

【参考方案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;
            
        
    
);

【讨论】：

感谢您的回答，该值已被计算并“存储”在rowSum 中，我只需要注入此值并在j >= 12 时以某种方式将其显示在第二个页脚行中跨度>