jQuery数据表将另一列中数字最大的行分组到第一个出现答案

【问题标题】：jQuery datatables grouped row with biggest number in another column to appear firstjQuery数据表将另一列中数字最大的行分组到第一个出现
【发布时间】：2014-05-09 20:14:59
【问题描述】：

假设我有一个按浏览器分组的行分组表，并且我希望首先显示具有最新引擎版本的浏览器。有什么办法吗？我通过将引擎版本放在浏览器之前尝试了一些变体和“作弊”，但最终被分开了......

例如在Datatables row grouping example 的场景中，我希望 Trident 不是最重要的，而是最重要的，因为 Trident 拥有最大的引擎版本（Internet Explorer 7），而 Internet Explorer 7 将在 Trident 组的顶部。这可能吗？谢谢

【问题讨论】：

是否需要按照其他列的最大值排序，或者是否可以插入另一个组值最大的隐藏列？

标签： php jquery datatables jquery-datatables

【解决方案1】：

是的，这是可能的。为此，您需要添加另一列，其中将包含您的所有订购值。让我解释一下：您修改后的表结构如下：

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
    <thead>
    <tr>
        <th>Rendering engine</th>
        <th>Rendering engine Max V</th>
        <th>Browser</th>
        <th>Platform(s)</th>
        <th>Engine version</th>
        <th>CSS grade</th>
    </tr>
    </thead>
    <tbody>
    <tr class="gradeX">
        <td>Trident</td>
        <td>7</td>
        <td>Internet Explorer 4.0</td>
        <td>Win 95+</td>
        <td class="center">4</td>
        <td class="center">X</td>
    </tr>
    </tbody>
</table>

此处第二列将包含渲染引擎组的最大版本号

你的 JavaScript 代码应该是这样的：

$(document).ready(function() {
    oTable = $('#example').dataTable({
        "fnDrawCallback": function ( oSettings ) {
            if ( oSettings.aiDisplay.length == 0 )
            {
                return;
            }

            var nTrs = $('tbody tr', oSettings.nTable);
            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[0];
                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;
                }
            }
        },
        "aoColumnDefs": [
            { "bVisible": false, "aTargets": [ 0 ] },
            { "bVisible": false, "aTargets": [ 1 ] }
        ],
        "aaSortingFixed": [[ 1, 'desc' ], [ 0, 'asc' ]],
        "aaSorting": [[ 1, 'asc' ]],
        "sDom": 'lfr<"giveHeight"t>ip'
    });
} );

就是这样！你可以找到Script Example here

享受吧！

【讨论】：