Datatables plugin - how to render date column so it id more readable

Support Plugins
1

Hi. I have had some success using the Datatables plugin to access a database but there are two things I am struggling to achieve.

  • To render a column of dates that is in YYYY-MM-DD format so it is more readable (Wed 13th March 2024 for example).
  • To include a column with arrows to click on to show and hide a child row (rather than clicking anywhere on the row).

The datatables code I have in the page so far is…

[datatables autoWidth=false]
[sql-table]
SELECT performance_id,
               date_rung AS "Date Rung",
               association AS Association,
               place AS Place,
               Address AS Address,
               region AS Region,
               bells_type, tenor, duration, changes,
               title AS Title,
               method_details, composer, footnotes, bell_1_no, bell_1_ringer, bell_1_conductor, bell_2_no, bell_2_ringer, bell_2_conductor, bell_3_no, bell_3_ringer, bell_3_conductor, bell_4_no, bell_4_ringer, bell_4_conductor, bell_5_no, bell_5_ringer, bell_5_conductor, bell_6_no, bell_6_ringer, bell_6_conductor, bell_7_no, bell_7_ringer, bell_7_conductor, bell_8_no, bell_8_ringer, bell_8_conductor, bell_9_no, bell_9_ringer, bell_9_conductor, bell_10_no, bell_10_ringer, bell_10_conductor,Occasion,Association2
FROM ringingrecords
[/sql-table]
[dt-script]
    //create datatable with desired columns
    var table = $(selector).DataTable();
    table.columns([0,6,7,8,9,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45]).visible(false);
    //table.columns([1]).render.date();

    //show / hide child row with extra data when row is clicked
    $(selector + ' tbody').on( 'click', 'tr', function () {
        if (table.row(this).child.isShown()) {
            // This row is already open - close it
            table.row(this).child.hide();
        }
        else {
            //show the child row
            table.row(this).child(format(table.row(this).data())).show();
        }
    });
[/dt-script]
[/datatables]

This works fine as it is but when I uncomment the //table.columns([1]).render.date(); line, which is my attempt at rendering the date column from code in one of the examples, I get an error…

Uncaught TypeError 
table.columns(...).render.date is not a function

I’ve also seen examples on the Datatables site for including a clickable column but I can’t work out how to use them with the plugin.

Can someone point me in the right direction please?

2

I’m a bit later to the part here, but columns.render() is a function, and date() is not an attribute of the return type. If you want to format the column as a date I recommend you look into momentjs