【问题标题】:Datatables sort date and datetime colums数据表对日期和日期时间列进行排序
【发布时间】:2021-04-13 22:51:40
【问题描述】:

我有一个包含多个数据表的页面。有些表只有一个日期字段,用于排序,而同一页面上的其他表有一个日期时间字段。日期/日期时间的语言环境是德语。

我可以让 Datatables 按日期 OR 日期时间正确排序,但我不能让它按任何一个排序。我用一个表创建了这个小提琴: https://jsfiddle.net/r23yfdz8/

$.fn.dataTable.moment( 'DD.MM.YYYY' ); // uncomment this to sort column 1 correctly
    //$.fn.dataTable.moment( 'DD.MM.YYYY HH:mm' ); // this sorts column 2 (date and time) correctly
    $('#example').DataTable()
body {
  font-family: sans-serif;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>
<link href="https://cdn.datatables.net/1.10.0/css/jquery.dataTables.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.19/sorting/datetime-moment.js"></script>
<table id="example">
        <thead>
            <tr>
                <th>date</th>
                <th>date + time</th>
            </tr>
        </thead>
        <tbody>
<tr><td>20.01.2018</td><td>20.01.2018 09:00</td></tr>                 
<tr><td>12.02.2019</td><td>12.02.2019 16:00</td></tr>                 
<tr><td>13.06.2017</td><td>13.06.2017 09:00</td></tr>                 
<tr><td>20.01.2018</td><td>20.01.2018 16:00</td></tr>                 
<tr><td>01.10.2016</td><td>01.10.2016 09:00</td></tr>        
<tr><td>12.10.2018</td><td>12.10.2018 16:00</td></tr>                
<tr><td>21.10.2017</td><td>21.10.2017 09:00</td></tr>           
<tr><td>04.10.2018</td><td>04.10.2018 16:00</td></tr>            
<tr><td>13.10.2018</td><td>13.10.2018 09:00</td></tr>        
<tr><td>01.11.2018</td><td>01.11.2018 16:00</td></tr>        

        </tbody>
    </table>
  1. 单击第二列标题“日期+时间”。您会注意到它正确地对表格进行了排序。
  2. 单击另一列标题“日期”。您会注意到日期到处都是,并且没有正确排序
  3. 在JS代码中,注释掉第二行,取消注释第一行。重新运行后,小提琴现在可以正确地对第 1 列进行排序,但无法对第 2 列进行排序。

我很想在 DOM 中添加一个类(“sort-datetime”和“sort-date”)到标签中,然后告诉数据表如何对值进行排序,但我没有足够的知识来弄清楚如何这样做。

感谢您的帮助!

【问题讨论】:

    标签: jquery datatables momentjs


    【解决方案1】:

    $.fn.dataTable.moment 插件可以在一个表格中多次使用,以适应不同的格式。

    如果我同时取消注释你的两个格式化程序,那么你的演示工作正常。

    【讨论】:

    • 天哪,你是对的!哇。我想有时最明显的解决方案是最好的解决方案哈哈
    • 这是一个不错的插件。它在幕后利用 DataTables 的built-in type detection 来对照每种格式检查列的数据。这就是它可以处理多种格式的原因(当然,只要每列中的数据是一致的)。然后,moment.js 完成剩下的工作。
    猜你喜欢
    • 2013-01-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-03-12
    • 1970-01-01
    • 2017-02-03
    • 2020-10-25
    相关资源
    最近更新 更多