jQuery数据表在另一列中以最大的数字分组，以首先显示 - jQuery datatables grouped row with biggest number in another column to appear first

jQuery datatables grouped row with biggest number in another column to appear first

假设我有一个按浏览器分组的行分组表，我希望首先显示具有最新引擎版本的浏览器。有什么办法吗?我已经尝试了一些变化和"作弊"把引擎版本之前的浏览器，但它最终被分开....

。在数据表行分组示例的场景中，而不是KHTML在顶部，我希望三叉戟在顶部，因为三叉戟有最大的引擎版本(Internet Explorer 7)和Internet Explorer 7将在三叉戟组的顶部。这可能吗?谢谢你

这是可能的。要实现这一点，您需要添加另一列，其中将包含所有排序值。让我解释一下:你的Modified Table结构应该是这样的:

<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'
    });
} );

就是这样!你可以在这里找到脚本示例

享受吧!