【问题标题】:jQuery Datatables Date Sort with data-order and renderjQuery Datatables Date Sort with data-order and render
【发布时间】:2017-10-13 19:52:46
【问题描述】:

我正在使用 jQuery 数据表来显示一个带有 2 个日期列的 HTML 表。每个日期列都有日期作为 unix 时间戳。我使用渲染函数和 moment.js 来更改这个 dd-mm-yyyy。但是,这并不能很好地排序,所以我添加了数据顺序属性。不幸的是,这破坏了我的渲染函数,因为渲染函数现在获得了“类型”的类型参数。我在下面包含了一个示例。有人可以帮忙吗?

<!DOCTYPE html>

<body>
    <table class="tablesaw table-bordered table-hover table" id="list-tbl" data-tablesaw-mode="sort" data-tablesaw-sortable data-tablesaw-sortable-switch>
        <thead>
            <tr>
                <th scope="col" data-tablesaw-sortable-col data-tablesaw-sortable-default-col data-tablesaw-priority="persist">Date 1</th>
                <th scope="col">Text</th>       
                <th scope="col">Date 2</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td data-order="1510185600a">1510185600</td>
                <td>4: 09-11-2017 --- </td>
                <td data-order="1512777600">1512777600</td>
            </tr>
            <tr>
                <td data-order="1491264000a">1491264000</td>
                <td>1: 04-04-2017 --- </td>
                <td data-order="1493856000">1493856000</td>
            </tr>
            <tr>
                <td data-order="1504569600a">1504569600</td>
                <td>3: 05-09-2017 ---</td>
                <td data-order="1507161600">1507161600</td>
            </tr>
            <tr>
                <td data-order="1498780800a">1498780800</td>
                <td>2: 30-06-2017 --- </td>
                <td data-order="1498780800">1498780800</td>
            </tr>
        </tbody>
    </table>
    <script>
        $(document).ready(function() {
            $('#list-tbl').DataTable({
                "columnDefs": [
                    {
                        targets: [0],
                        //data: 0,
                        render: function (data, type, row) {
                            if (type === 'sort')
                                return data;
                            if (type === 'filter')
                            {
                                row[0].display='1';
                                return 'frd';
                            }
                            if (type === 'type' || type === 'sort' || type === 'filter')
                            {
                                row[0].display='1';
                                return 'test';
                            }                                   return 'kev';
                            //if (type === 'type')
                            //{
                                //row[0].display = moment.unix(row[0].display).format("DD-MM-YYYY");
                                //row[2].display = moment.unix(row[2].display).format("DD-MM-YYYY");
                                //var s = moment.unix(data).format("DD-MM-YYYY");
                                //return s;
                            //}
                            //return data;
                            //return moment.unix(data).format("DD-MM-YYYY");
                            if (type === 'display')
                                return 'kev';

                        }
                    }
                ],
                "aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
                "pageLength": 25
            });
        } );
    </script>
</body>

【问题讨论】:

    标签: datatables


    【解决方案1】:

    无需使用 moment.js 或任何其他插件进行数据排序,而是使用 数据排序属性。您需要将日期转换为数值,如下所示

    例如:

    <td scope="row" data-sort="' + Date.parse(<your date>)).valueOf() + '">Your date </td>'
    

    这将正确排序日期。我刚刚实现了同样的

    【讨论】:

      猜你喜欢
      • 2019-02-08
      • 2014-06-29
      • 1970-01-01
      • 2022-12-27
      • 2019-05-03
      • 2017-12-07
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多