对数据表中的行分组进行排序

sort row groupings in datatables

本文关键字：排序 数据表      更新时间：2023-09-26

我正在使用datables和jquery行分组。

这是JSFIDDLE演示

如您所见，这是一个普通的表，但使用行分组时，绿色的表是行组，但是无法像使用"名称和分数"列那样单击对它们进行排序，对它们进行排序的唯一方法是在此代码中将sGroupingColumnSortDirection:更改为"asc"或"desc" 

$(document).ready(function () {
    $('#main').dataTable({
        "bLengthChange": false,
        "bPaginate": false,
        "bFilter": false,
        "bInfo": false
    }).rowGrouping({
        sGroupingColumnSortDirection: "asc", //this one is repsonsible for the group sortings
        bExpandableGrouping: true
    });
});

这样它就可以工作，但用户没有选项或方法来对分组进行排序。

我想做一个选择下拉列表，所以它会对与用户选择的内容相对应的分组进行排序。

<label>
Sort place by:
<select>
  <option value="place">Ascending</option>
  <option value="place">Descending</option>
</select>
</label>

那么是否可以使用此选择下拉列表对分组进行排序？

首先，为下拉列表提供一个 id，并为选项提供适当的值。然后，在下拉列表的"onchange"事件上，你需要调用数据表"fnSort"函数。

<select id="selectSort">
    <option value="Ascending">Ascending</option>
    <option value="Descending">Descending</option>
</select>

在 jquery document.ready 部分包含以下代码。 

$("#selectSort").change(function() {
    var oTable = $('#main').dataTable();
    var sOption = $(this).val();
    if(sOption == "Ascending") {
        var sType = 'asc';
    }
    else {
        var sType = 'desc';
    }
    //code for two columns, change if you have more columns.
    oTable.fnSort( [ [0,sType], [1,sType] ] );  

});

更新了小提琴：http://jsfiddle.net/d03ebwdj/1/

更新：在您的分组方法中，很难根据分组进行排序。您可以做的是，创建第三列作为"地点"。将其设置为隐藏。您可以使用"drawCallback"函数突出显示分组。请参考这里

相关文章：