jQuery DataTables - 在分组内对列求和

Question

jQuery DataTables - 在分组内对列求和

jquerydatatables

6

我距离实现我想要的东西非常接近，只需要一点帮助。

我已经实现了分组。现在我想为每个组求和并在组头部显示总数。这是一个 jsfiddle 示例，因为它更容易展示我想做什么：

http://jsfiddle.net/RgKPZ/123/

相关代码：

$(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, Matt

- Matt

你想要哪一列的总数以及分组是什么？ - Lakshmana Kumar

要添加第5列中的所有单元格，请使用以下代码：$("table tr td:nth-child(4)").each(function() { total += parseFloat($(this).text()); }); - Lakshmana Kumar

谢谢你的帮助。我离成功更近了，但还没有到达目标。我已经更新了我的jsfiddle以展示当前进展。http://jsfiddle.net/RgKPZ/126/ - Matt

查看这个编辑器（fiddle）时，您会看到有分组的内容（任务1、任务2等）。直接在下面是一个“0”，我正试图把“分钟求和”列的总和放在那里。取消注释js中的第48行是我卡住的地方。它不能正确求和（返回NaN），并且替换整行而不是我想要放置总和的div。它似乎只做了前两个组，而不是所有三个组。我已经尝试了很长时间调整选择器和其他jquery内容，但还是无法解决。 - Matt

我会检查并更新您。 - Lakshmana Kumar

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Lakshmana Kumar · Accepted Answer

试一下这个...

将所有的<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);
                }
            });
            //-------------------------------------------------
        }
    });
});