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...
JS
[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...
TXT
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?