jquery-datatables 多列排序方向

Posted 2023-05-07

【中文标题】jquery-datatables 多列排序方向

【英文标题】：jquery-datatables multi-column sort direction

【发布时间】：2015-02-16 02:15:24

【问题描述】：

使用 jquery-datatables。

示例：http://jsfiddle.net/b2fLye17/17/

$('#example').DataTable(

    filter:false,
    columnDefs: [
                    
                        targets: [1],//when sorting age column
                        orderData: [1,2] //sort by age then by salary
                     
                ]
);

当您点击年龄列时，表格按年龄升序排序，然后按工资升序排序。

我有什么选择让它按年龄升序然后按薪水降序排序？

谢谢！

-------------------------- 编辑 1 ------------------- --

澄清：当年龄列按升序排序时，它应该按年龄升序排序，然后按薪水降序排序。当年龄列降序排序时，它应该按年龄降序排序，然后按薪水升序排序

-------------------------- 编辑 2 ------------------- --

想要的结果图片

【参考方案1】：

使用

$(document).ready(function() 

    $('#example').DataTable(

        filter:false,
        columnDefs: [
                        
                            orderData: [[1, 'asc'], [2, 'desc']]//sort by age then by salary
                        
                    ]
    );
);

JS 小提琴 http://jsfiddle.net/b2fLye17/13/

【讨论】：

正如您在此示例中看到的那样，它不起作用。 jsfiddle.net/b2fLye17/9感谢您的宝贵时间！

删除目标不会对薪水进行排序。在示例中，它看起来可以正常工作，因为 40 岁的人的薪水已经在 html 中排序。我换了 86 美元和 170 美元来测试它。示例：jsfiddle.net/b2fLye17/14

请查看 - jsfiddle.net/b2fLye17/18。设置排序的选项太多了）

aaSorting 在我对列进行排序之前完成了这个技巧。但是我需要做的是->当年龄列按升序排序（单击它）时，它应该按年龄升序排序，然后按薪水降序排序。当年龄列降序排序时，它应该按年龄降序排序，然后按工资升序排序。也再次感谢您的时间！我稍后会添加一个示例

这很有趣，我不知道如何使用 DataTable 选项进行配置，但我有解决方法的想法。 AFAIK 表按第一个元素内容排序，即使它是隐藏的。因此，您可以将一些事件绑定到排序并在您的薪水列中创建隐藏输入。当您需要逆序时，此输入将为 Salary * -1。

【参考方案2】：

感谢您提出这个问题，我也遇到了同样的问题，然后解决如下

var oTable=$('#example').dataTable(
filter:false
);

oTable.fnSort( [[1,"asc"], [2,"desc"]]);

希望对你有帮助

【讨论】：

我们在哪里配置数据表中的多排序设置？

【参考方案3】：

来了。它有点被黑了，但我一直在花费 HOURS 试图找出相同的最终目标 - 整理两列。 http://jsfiddle.net/b2fLye17/23/

<td data-age="40">$320</td>
//In custom sort:
var value = parseInt($(td).attr('data-age') + pad(td.innerHTML.substring(1), 10, '0'));

概念： 我还没有想出在 foreach 循环中访问列之外的其他单元格的方法，因此我在要排序的单元格中添加了一个“data-”属性。这个 data- 属性与我们关心的其他排序列具有相同的值......所以在我们弄清楚如何访问循环中的其他“相邻”单元格之前会有一些重复的数据。

我将这两个值（隐藏属性和可见值）组合起来，然后转换回一个 int 进行索引。由于值的长度不同，我用零填充了第二列（4086 与 40086）。

【讨论】：

通过你的例子，我已经能够通过一些调整来解决我的问题。非常感谢²！

【参考方案4】：

您可以通过var row = settings.aoData._aData[i]; 获取行中的所有数据并将其与 j0xue 解决方案相结合，这样您就可以按另一列排序，而无需在 html 中添加属性。