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
-----------------------------------------------------------------------------------------------------
<table id="example" class="display nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th>Title</th>
</tr>
</thead>
<tbody>
<tr data-key-1="Task1 " data-key-2="2019-03-10">
<td class="details-control"></td>
<td>recommandation1</td>
</tr>
<tr data-key-1="Task2" data-key-2="2019-03-10">
<td class="details-control"></td>
<td>recommandation2</td>
</tr>
</tbody>
</table>
-----------------------------------------------------------------------------------------------------
Controller
-----------------------------------------------------------------------------------------------------
function format ( dataSource ) {
var html = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">';
for (var key in dataSource){
html += '<tr>'+
'<td>' + key +'</td>'+
'<td>' + dataSource[key] +'</td>'+
'</tr>';
}
return html += '</table>';
}
$(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