数据表排序时间列答案

【问题标题】：Datatables sorting time column数据表排序时间列
【发布时间】：2016-06-02 10:12:24
【问题描述】：

我正在使用 jQuery DataTables，当我使用这种格式 mm:ss 对时间列进行排序时出现问题。例如，当我对这个00:08 进行排序时，排序会做一些事情，但这并不好。我的专栏中有：

所以排序不起作用。你知道如何对我的时间列进行排序吗？

这是我的代码：

$('#table').DataTable({
    dom: "t<'col-sm-5'i><'col-sm-7'p>",
    autoWidth: false,
    serverSide: true,
    aaSorting: [[0, 'desc']],
    rowId: 'id',
    lengthChange: false,
    ajax: {
        url: 'index',
        method: 'POST'
    }
    columns: [
        {data: "id", width: '5%'},
        {data: "name", width: '10%', orderData: [ 1, 0 ]},
        {data: "user_name", width: '10%', orderData: [ 2, 0 ]},
        {data: "email", width: '35%', orderData: [ 3, 0 ]},
        {data: "duration", render: duration_time, width: '10%', type: "time",orderData: [ 4, 0 ]},
        {data: "incomplete", render: incomplete, width: '30%', orderData: [ 5, 0 ]}
    ]
});

这里是渲染参数的函数：

function duration_time(data, type, dataToSet){
    var start =  dataToSet.date_start;
    var end =  dataToSet.date_end;
    var time = moment.utc(moment(end, "YYYY-MM-DD HH:mm:ss").diff(moment(start, "YYYY-MM-DD HH:mm:ss"))).format("mm:ss");

    return time;
}

function incomplete(data, type, dataToSet){
    return dataToSet.incomplete == 0 ? 'Complete' : 'Incomplete';
}

【问题讨论】：

你能显示执行排序的代码吗？
请您创建一个您使用的小提琴

标签： javascript jquery sorting datatables

【解决方案1】：

你必须使用Sorting plug-ins。

它允许您根据类型而不是仅根据数据对列进行排序。

你的代码会是这样的：

<script type="text/javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript" src="dataTables.numericComma.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#example').dataTable( {
            "columnDefs": [
                { "type": "time", targets: 3 }
            ]
        } );
    } );
</script>

【讨论】：

感谢您的回答，但对我来说没有任何变化
我是服务器端，所以这将很难构建我的小提琴，我会更新我的问题以向您展示我的代码。
我认为有问题，因为我没有持续时间数据服务器端。我只有开始日期时间和结束日期时间。持续时间在渲染函数中计算。这就是为什么对数据库的查询不能返回我对持续时间的排序。你有什么想法吗？
您是否尝试添加插件并将第 5 列设置为时间？

【解决方案2】：

我今天遇到了同样的问题并找到了解决方案。这是代码。

 <script type="text/javascript" src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
 <script type="text/javascript" src="//cdn.datatables.net/plug-ins/1.10.19/sorting/time.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $('#example').dataTable( {
                columnDefs: [
                         { type: 'time-uni', targets: 7 }
                    ]
            } );
        } );
    </script>

您也可以在这里查看其他排序插件：https://cdn.datatables.net/plug-ins/1.10.19/sorting/

【讨论】：