Question

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

E.g。在Datatables row grouping example的场景中，我不希望KHTML位居榜首，因为Trident拥有最大的引擎版本（Internet Explorer 7）而且Internet Explorer 7将位于Trident的顶端，我希望Trident能够处于领先地位。 39;小组这可能吗？谢谢

Answer 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

享受！

jQuery数据表将另一列中具有最大数字的行分组，以便首先显示

1 个答案: