【问题标题】:jquery-datatables multi-column sort directionjquery-datatables 多列排序方向
【发布时间】: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 ------------------- --

想要的结果图片

【问题讨论】:

    标签: javascript sorting jquery-datatables


    【解决方案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 中添加属性。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2012-04-30
      • 2014-10-08
      • 2012-12-29
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多