datetime render on column not columnDefs

tonyaldo · September 2017

Hi,
All examples in datetime.js suggest that rendering should be on columnDefs. Is this really the case ?

I am trying to combine datetime plugin with the example in Child rows (show extra / detailed information)

but see** no impact on** datetime format server-side is sending e.g 2017-09-03T06:42:29.871Z

there is no errors

Any tips?
Thanks

        <script>
            /* Formatting function for row details */
            function format(d) {
                var childTable = '<table class="table table-sm">';
                // `d` is the original data object for the row
                Object.getOwnPropertyNames(d.details).forEach(
                    function (val, idx, array) {
                        childTable = childTable + '<tr>' + '<td>' + val + '</td><td>' + d.details[val] + '</td></tr>';
                    }
                );

                childTable = childTable + '</table>';
                console.log(childTable);
                return childTable;
            }

            $(document).ready(function () {

                var visitsAPIURL = '/api/visits/' + '<%= user.id %>' + '/' + '<%= QS.d %>' + '/?filter=none';
                var table = $('#visitHistory').DataTable({
                    "ajax": {
                        "url": visitsAPIURL,
                        "dataSrc": ""
                    },
                    deferRender: true,
                    dom: 'Bfrtip',
                    columns: [
                        {
                            className: 'details-control',
                            orderable: false,
                            data: null,
                            defaultContent: ''
                        },
                        {
                            data: "details.dateTimeIn",
                            render: $.fn.dataTable.moment('Do MMM YYYYY')
                        },
                        { data: "details.firstName" },
                        { data: "details.lastName" },
                        { data: "details.host" }
                    ],
                    "order": [[1, 'desc']]
                });

                table.buttons().action(function (e, dt, button, config) {
                    console.log('Button ' + this.text() + ' activated');
                    this.disable();
                });

                // Add event listener for opening and closing details
                $('#visitHistory tbody').on('click', 'td.details-control', function () {
                    var tr = $(this).closest('tr');
                    var row = table.row(tr);

                    if (row.child.isShown()) {
                        // This row is already open - close it
                        row.child.hide();
                        tr.removeClass('shown');
                    }
                    else {
                        // Open this row
                        row.child(format(row.data())).show();
                        tr.addClass('shown');
                    }
                });
            });
        </script>

allan · September 2017

rendering should be on columnDefs. Is this really the case ?

Or columns. Any property that can be used on one can be used on the other (with the exception of columnDefs.targets).

Can you give a link to the page in question or use the debugger please? The code above I think looks okay - as far as I can see initially anyway.

Allan

tonyaldo · September 2017

wow debugger is pretty cool! Here is the link, now I know I need to upgrade

https://debug.datatables.net/oxazur

allan · September 2017

I don't actually see a renderer being used on any of the columns in your table:

    "columns": [{
        "className": "details-control",
        "orderable": false,
        "data": null,
        "defaultContent": ""
    }, {
        "data": "details.dateTimeIn"
    }, {
        "data": "details.firstName"
    }, {
        "data": "details.lastName"
    }, {
        "data": "details.host"
    }],

Allan

tonyaldo · September 2017

Isnt that strange ? Shouldnt the code I have suffice ? I ran the debug code against the table output for the same code in my original post

allan · September 2017

It is odd. Are you able to link to the page so I can see it directly?

Thanks,
Allan

Dalex73 · September 2017

Hmm, is this line really correct date formating?

render: $.fn.dataTable.moment('Do MMM YYYYY')

allan · September 2017

Actually no - that doesn't look correct. It should be in the $.fn.dataTable.render object - see here.

Allan

tonyaldo · September 2017

This is the blog I followed https://datatables.net/blog/2014-12-18

tonyaldo · September 2017

I tried the example in

https://github.com/DataTables/Plugins/blob/master/dataRender/datetime.js

@example
// Convert ISO8601 dates into a simple human readable format
$('#example').DataTable( {
columnDefs: [ {
targets: 1,
render: $.fn.dataTable.render.moment( 'Do MMM YYYYY' )
} ]
} );

Now get

jQuery.Deferred exception: $.fn.dataTable.render.moment is not a function TypeError: $.fn.dataTable.render.moment is not a function

This is the order I load the JS in

allan · September 2017

The blog post you linked to discusses an ordering plug-in.

The GitHub page you linked to is a data renderer.

They are different things. They work in different ways.

Which is it you want to use? If you could link to the page you are working with or show a sample of the data you need to use that would be helpful.

Allan

tonyaldo · September 2017

I tried to re-create it with a simpler example adapted from one of your examples

Here is the fiddle

https://jsfiddle.net/z163pj9o/1/

If I uncomment the render code as per example

I get:

jquery-3.2.1.min.js:2 jQuery.Deferred exception: $.fn.dataTable.render.moment is not a function TypeError: $.fn.dataTable.render.moment is not a function

Dalex73 · September 2017

Just use the render function on the data instead, see my updated fiddle.

https://jsfiddle.net/vL3yw0z2/

Just change the date format to whatever you need. If you just need the displayed data then check for if (type === 'display')....

tonyaldo · September 2017

Thanks a lot! This worked!

tonyaldo · September 2017

I suppose I dont even need the plugin now

tonyaldo · September 2017

Maybe not as I need to 'format' and 'order' the datetime (most recent first) !

datetime render on column not columnDefs

datetime render on column not columnDefs

Answers

Howdy, Stranger!

Categories

DataTables

datetime render on column not columnDefs

datetime render on column not columnDefs

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables