Ajax datatable with child row | Bonitasoft Community

Hello,

First of all, I am sorry that the question is too broad.

I want to create a custom widget with a data table. The JSON format is as follows.
I want to follow the data table example: https://www.datatables.net/examples/api/row_details.html

[
{
"persistenceId": 1254,
"persistenceId_string": "1254",
"persistenceVersion": 0,
"persistenceVersion_string": "0",
"recommandation": "r1",
"timerTask": [
{
"persistenceId": 1668,
"persistenceId_string": "1668",
"persistenceVersion": 0,
"persistenceVersion_string": "0",
"title": "t1",
"startdate": "2019-03-04",
"enddate": "2019-03-14",
"statusTask": "Pending",
"declineReason": "test test",
"comment": "sdasdasdasdasdasdas"
}
],
"statusRec": "Pending"
}
]

timerConvert
[
{
"recommandation": "Recommandation 1",
"title": "Task 1 of Recommendation 1",
"startdate": "2019-03-04",
"enddate": "2019-03-08"
},
{
"recommandation": "Recommandation 1",
"title": "Task 2 of Recommendation 1",
"startdate": "2019-03-04",
"enddate": "2019-03-07"
},
{
"recommandation": "Recommendation 2",
"title": "Task 1 of Recommendation 2",
"startdate": "2019-03-04",
"enddate": "2019-03-06"
},
{
"recommandation": "Recommendation 2",
"title": "Task 2 of Recommendation 2",
"startdate": "2019-03-08",
"enddate": "2019-03-12"
}
]

I would like to know how to create a data table by using AJax,

I need some guides on how I can implement this task.

I created a custom widget however, I am not clear how to use Ajax in Bonita UI.

-----------------------------------------------------------------------------------------------------

Template

-----------------------------------------------------------------------------------------------------

Title

recommandation1

recommandation2

-----------------------------------------------------------------------------------------------------

Controller

-----------------------------------------------------------------------------------------------------

function format ( dataSource ) {
var html = '

';
for (var key in dataSource){
html += '
'+
' ' + key +'

'+
'

' + dataSource[key] +'

'+
'

';
}
return html += '

';
}

$(function () {

var table = $('#example').DataTable({});

// Add event listener for opening and closing details
$('#example').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({
'Title' : tr.data('key-1'),
'End date' : tr.data('key-2')
})).show();
tr.addClass('shown');
}
});
});

-----------------------------------------------------------------------------------------------------

CSS

-----------------------------------------------------------------------------------------------------

@import url('//cdn.datatables.net/1.10.2/css/jquery.dataTables.css');
td.details-control {
background: url('http://www.datatables.net/examples/resources/details_open.png') no-repeat center center;
cursor: pointer;
}
tr.shown td.details-control {
background: url('http://www.datatables.net/examples/resources/details_close.png') no-repeat center center;
}

-----------------------------------------------------------------------------------------------------

Any help would be appreciated.

Thanks in advance

ajax

data table

child row