Question

我太接近于得到我想要的东西，只需要一些帮助。

我有分组工作。现在，我想对每个组的列进行求和，并在组头中显示总计。这是一个jsfiddle，因为它更容易显示我正在尝试做什么：

相关代码：

$(function() {
            oTable = $('#job_history').dataTable({

                "aoColumnDefs": [
                    { "bVisible": false, "aTargets": [ 4,5,6 ] },
                ],
                "aLengthMenu": [[10, 25, 50, -1], ["Show 10 entries", "Show 25 entries", "Show 50 entries", "Show all entries"]], // options in the show rows selector
                "iDisplayLength" : -1, // show all rows by default
                "aaSortingFixed": [[ 5, 'asc' ]],
                "aaSorting": [[ 5, 'asc' ]],
                "bJQueryUI": true,
                "sDom": '<flip>', // filter, length, info, pagination

                "oLanguage": {
                    "sSearch": "", // label for search field - see function below for setting placeholder text
                    "sLengthMenu": "_MENU_", // label for show selector { "sLengthMenu": "Display _MENU_ jobs" }
                    "sInfo": "Showing _START_ to _END_ of _TOTAL_ entries.", // string for information display
                    "sInfoEmpty": "No entries to show", // what to show when info is empty
                    "sInfoFiltered": " (Filtering from _MAX_ entries.)",
                    "sEmptyTable": "There are no entries matching the search criteria.", // shown when table is empty, regardless of filtering
                    "sZeroRecords": "", // shown when nothing is left after filtering
                },

                "fnDrawCallback": function ( oSettings ) {
                    if ( oSettings.aiDisplay.length == 0 )
                    {
                        return;
                    }

                    var nTrs = $('#job_history tbody tr'); // get all table rows
                    var iColspan = nTrs[0].getElementsByTagName('td').length;
                    var sLastGroup = "";
                    var summed_minutes = 0;

                    for (var i = 0; i < nTrs.length; i++)
                    {
                        var iDisplayIndex = oSettings._iDisplayStart + i;
                        var sGroup = oSettings.aoData[ oSettings.aiDisplay[iDisplayIndex] ]._aData[ 5 ];

                        if ( sGroup != sLastGroup )
                        {
                            var nGroup = document.createElement( 'tr' );
                            var nCell = document.createElement( 'td' );
                            nCell.colSpan = iColspan;
                            nCell.className = "group";

                            summed_minutes += oSettings.aoData[ oSettings.aiDisplay[iDisplayIndex] ]._aData[ 7 ];
                            nCell.innerHTML = sGroup + summed_minutes;
                            nGroup.appendChild( nCell );
                            nTrs[i].parentNode.insertBefore( nGroup, nTrs[i] );
                            sLastGroup = sGroup;
                        }
                    }
                }

            });

        });

唯一的问题是我想要求和的列没有被加在一起。正在显示这些值，但是像字符串一样，而不是像数字一样加在一起。此外，并非所有值都显示为字符串 - 重复进行。我尝试使用Number（）和parseInt（）进行转换，但没有运气。我正在尝试将其放入回调函数（如分组函数），以便在每个表过滤器之后对值进行求和。

我确定我只是有一个变量错误或错误的地方或某事，但我无法弄明白。沮丧地关闭！： - （

TIA，马特

Answer 1

试试这个......

将所有<div id='group_sum'>0</div>更改为<div class='group_sum'></div>，因为ID应该是唯一的。所以使用class

在fiddle

中查看

  $(function() {
    var oTable = $('#job_history').dataTable({
        "aoColumnDefs": [{ "bVisible": false, "aTargets": [4, 5, 6]}],
        "aLengthMenu": [[10, 25, 50, -1], ["Show 10 entries", "Show 25 entries", "Show 50 entries", "Show all entries"]],
        "iDisplayLength": -1,
        "aaSortingFixed": [[5, 'asc']],
        "aaSorting": [[5, 'asc']],
        "bJQueryUI": true,
        "sDom": '<flip>',
        "fnDrawCallback": function(oSettings) {
            if (oSettings.aiDisplay.length == 0) {
                return;
            }

            // GROUP ROWS
            var nTrs = $('#job_history tbody tr');
            var iColspan = nTrs[0].getElementsByTagName('td').length;
            var sLastGroup = "";

            for (var i = 0; i < nTrs.length; i++) {
                var iDisplayIndex = oSettings._iDisplayStart + i;
                var sGroup = oSettings.aoData[oSettings.aiDisplay[iDisplayIndex]]._aData[5];

                if (sGroup != sLastGroup) {
                    var nGroup = document.createElement('tr');
                    var nCell = document.createElement('td');
                    nCell.colSpan = iColspan;
                    nCell.className = "group";
                    nCell.innerHTML = sGroup;
                    nGroup.appendChild(nCell);
                    nTrs[i].parentNode.insertBefore(nGroup, nTrs[i]);
                    sLastGroup = sGroup;
                }
            }
            //-------------------------------------------------
            // SUM COLUMNS WITHIN GROUPS
            var total = 0;
            $("#job_history tbody tr").each(function(index) {
                if ($(this).find('td:first.group').html()) {
                    total = 0;
                } else {
                    total = parseFloat(total) + parseFloat(this.cells[4].innerHTML);
                    $(this).closest('tr').prevAll('tr:has(td.group):first').find("div").html(total);
                }
            });
            //-------------------------------------------------
        }
    });
});

jquery datatables - 对组内的列求和

1 个答案: