【问题标题】:jQuery DataTables: how to sort by specific column? [closed]jQuery DataTables:如何按特定列排序? [关闭]
【发布时间】:2011-12-14 06:05:08
【问题描述】:

这是页面:

http://csuvscu.com/

我需要按日期列排序,现在它需要读取 11 月 6 日、11 月 5 日,最后是 10 月 7 日。

我该怎么做?

【问题讨论】:

  • 我建议在您的问题中添加一些适用的代码。是的,一个人可以访问您链接的页面并查看源代码,但我们的想法是,只要您在此处提供所需的信息,即使您的网站将来某个时候关闭,代码仍然可用.
  • 看看下面post
  • @KileyNaro 提出了一个很好的观点,该网站出现故障,我仍然会保留链接 - 对我来说不必在我的本地机器上重新创建这样的测试很好 - 确实这一切都在 Chrome javascript 控制台中:)
  • 那一刻已经到来......
  • 这个问题现在没用了。问题规范的链接已失效。

标签: jquery sorting datatables columnsorting


【解决方案1】:

您当前的代码:

$('table').dataTable({
    // display everything
    "iDisplayLength": -1
});

你能做什么:

oTable = $('table').dataTable({
    // display everything
    "iDisplayLength": -1
});

oTable.fnSort( [ [0,'desc'] ] ); // Sort by first column descending

但正如下面评论中所指出的,这可能是一种更清洁的方法:

$('table').dataTable({
    // display everything
    "iDisplayLength": -1,
    "aaSorting": [[ 0, "desc" ]] // Sort by first column descending
});

【讨论】:

  • 不客气...就像上面的@emmanual N linked_to,您可以不用使用我认为更清洁的表格$('table').dataTable({ "iDisplayLength": -1 "aaSorting": [[ 0, "desc" ]] });
  • 当我尝试在 Java 方法中设置选项时,我错过了一些东西。你能把它也添加到java端吗?
【解决方案2】:

DataTables 使用字母顺序作为默认排序方法。这实际上就是这里发生的事情。

有两种解决方案:

  • 定义您自己的日期排序方法
  • 使用包含 Unix 时间戳(自 1970 年 1 月 1 日以来经过的秒数)中的日期的隐藏列对表进行排序。

如果您希望您的用户能够自行对列进行排序,您可以使用第一个解决方案。

--------------- 第一个解决方案:

我们需要告诉 DataTable 插件如何处理我们的列。您需要使用“aoColumns”属性:

$('table').dataTable({
    // display everything
    "iDisplayLength": -1,
    "aoColumns":[
        {"sType": "shaheenery-date"},
        {"bSortable": true},
        {"bSortable": true},
        {"bSortable": true},
        {"bSortable": true}
    ]
});

然后定义“shaheenery-date-asc”和“shaheenery-date-desc”排序方法。您还需要一个函数“getDate”,将日期转换为数字格式:

function getDate(a){
        // This is an example:
        var a = "Sunday November 6, 2011";
        // your code =)
        // ...
        // ...
        // You should output the result as YYYYMMDD
        // With :
        //   - YYYY : Year
        //   - MM : Month
        //   - DD : Day
        //
        // Here the result would be:
        var x = 20111106
        return x;
}

jQuery.fn.dataTableExt.oSort['shaheenery-date-asc'] = function(a, b) {      
        var x = getDate(a);
        var y = getDate(b);
        var z = ((x < y) ? -1 : ((x > y) ? 1 : 0));
        return z;
};

jQuery.fn.dataTableExt.oSort['shaheenery-date-desc'] = function(a, b) {
        var x = getDate(a);
        var y = getDate(b);
        var z = ((x < y) ? 1 : ((x > y) ? -1 : 0));
        return z;
    };

--------------- 第二种解决方案:

我们也将使用“aoColumns”属性。这次我们告诉 DataTable 隐藏最后一列,它将包含 Unix Timestamp 中的日期。我们还需要将此列定义为使用“aaSorting”进行排序的默认列:

$('table').dataTable({
    // display everything
    "iDisplayLength": -1,
    "aaSorting": [[ 5, "desc" ]],
    "aoColumns":[
        {"bSortable": false},
        {"bSortable": true},
        {"bSortable": true},
        {"bSortable": true},
        {"bVisible": false}
    ]
});

【讨论】:

    【解决方案3】:
    oTable = $('#DataTables_Table_0').dataTable({   //table id -->DataTables_Table_0
    
        iVote: -1,  //field name 
        "bRetrieve":true
    
    });
    
     oTable.fnSort( [ [1,'desc'] ] );   // Sort by second column descending
    

    【讨论】:

      【解决方案4】:

      使用最新版本的数据表,您可以按列索引排序

      var data_table = $('#data-table').DataTable();
      data_table.order( [7,'desc'] ).draw();
      

      希望这会有所帮助。

      【讨论】:

        【解决方案5】:
         $('#id').dataTable( {
             “bSort”:是的,
             “aoColumnDefs”:[{
                 'bSortable':假,
                 “目标”:[1]}
              ]
        });
        

        【讨论】:

          【解决方案6】:

          现有答案使用旧版 DataTables 语法。 1.10+ 版本应使用以下语法:

          $('table').dataTable({
              "pageLength": -1,  //display all records
              "order": [[ 0, "desc" ]] // Sort by first column descending
          });
          

          参考:

          【讨论】:

            【解决方案7】:

            $('#id').dataTable( {

            ""aaSorting": [[ "0", ""]]

            });

            【讨论】:

            • 您能解释一下您的代码的用途吗?
            • 特别是因为没有问题要回答,因为链接已断开。
            猜你喜欢
            • 1970-01-01
            • 1970-01-01
            • 2014-08-29
            • 2015-12-15
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2020-08-18
            • 2016-03-17
            相关资源
            最近更新 更多