jQuery Datatables Date Sort with data-order and render

Question

I am using jQuery data tables to display an HTML table with 2 date columns. Each date column has the date as a unix time stamp. I use a render function and moment.js to change this dd-mm-yyyy. However, this does not sort nicely so I added data-order attributes. Unfortunately this breaks my render function as the render function now gets a type parameter of "type". I have included a sample below. Can anyone help?

<!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>

bobby kc · Accepted Answer · 2017-11-09 14:35:48Z

1

No need to use moment.js or any other plugin for data sort, instead use data-sort attribute. You need to convert your date to numeric value like below

eg:

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

This will sort the date correctly. i just implemented the same

answered Nov 9, 2017 at 14:35

bobby kc

262 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery Datatables Date Sort with data-order and render

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related