时间戳

首页 > 解决方案 > 将字符串值排序到数据表中日期类型列的表底部

jquery - 将字符串值排序到数据表中日期类型列的表底部

问题描述

我正在使用数据表，并且我有一个包含空值的日期列。我已将所有空值替换为“尚未尝试”字符串。日期必须按降序排列；将最新的放在顶部，将“尚未尝试”放在底部。我用过absoluteOrder 。它已将“尚未尝试”置于底部，但日期现在被排序为字符串而不是日期类型。请告诉我如何实现所需的功能。TIA

var nonDate= $.fn.dataTable.absoluteOrder( [
        { value: 'Not yet attempted', position: 'bottom' }
    ] );

    $(document).ready(function () {
        dataTable = $("#candidate-table").DataTable({
            "bAutoWidth": false,
            "columnDefs": [
            { targets: 3, type: nonDate },
            {
                type: 'natural-ci',
                targets: [0,2]
            }],
            "order": [[3, "desc"]]
        });
    });

在此处输入图像描述

标签： jquerysortingdatatable

解决方案

终于找到了解决办法。我们必须在每个标签中为空单元格和非空单元格设置数据顺序。对于日期值，我将日期转换为 YYYYMMDDHHMMSS格式并将其设置为数据顺序。然后在函数中添加“order”：[[3，“desc”]] 来呈现该列。

dataTable = $("#candidate-table").DataTable({
        "bAutoWidth": false,
        "columnDefs": [
            {
                type: 'natural-ci',
                targets: [0, 2]
            },
            {
                targets: 3,
                createdCell: function (td, cellData, rowData, row, col) {
                    if (cellData == "Not yet attempted")
                        $(td).attr('data-order', 0)
                    else
                        $(td).attr('data-order', ((new Date(cellData)).toISOString().replace(/[^0-9]/g, "").slice(0, -3)))
                },
                render: function (data, type, full, meta) {
                    if (type === "sort") {
                        var api = new $.fn.dataTable.Api(meta.settings);
                        var td = api.cell({ row: meta.row, column: meta.col }).node();
                        data = $(td).attr('data-order');
                    }
                    return data;
                }
            }],
        "order": [[3, "desc"]],
        dom: 'Bfrtip',
        buttons: [
            {
                extend: 'csv',
                text: 'Export',
                title: 'Candidates',
                exportOptions: {
                    columns: ':not(:last-child)',
                    modifier: {
                        search: 'none'
                    }
                },
                className: 'btn btn-primary glyphicon glyphicon-save-file csvbtn'
            }
        ],
    });

推荐阅读