Row grouping using Server side = true with Ajax Post method not working

[Ankitapatelit]

I am using below data table option in Angular application. I want to achieve Row grouping like this example using below code. https://datatables.net/examples/advanced_init/row_grouping.html . But it doesn't do row group. Any help is appreciated. Thank you.

Type Script:
var groupColumn = 1;

this.dtOptions = {
serverSide: true,
processing: true,
dom: 'QBfrtip',
drawCallback: function (settings: any) {
var api = this.api();
var rows = api.rows({ page: 'current' }).nodes();
var last: any = null;
api.column(groupColumn, { page: 'current' })
.data()
.each(function (group: string, i: number) {
if (last !== group) {
$(rows).eq(i).before('' + group + '');
last = group;
}
});
},
ajax: (dataTablesParameters: any, callback: any) => {
that.http
.post(
'https://xtlncifojk.eu07.qoddiapp.com/',
dataTablesParameters, {}
).subscribe(resp => {
that.persons = resp.data;
callback({
recordsTotal: resp.recordsTotal,
recordsFiltered: resp.recordsFiltered,
data: []
});
});
},
columns: [ { data: 'id' }, { data: 'firstName' }, { data: 'lastName' }]
};

HTML:

	ID	First name	Last name
	{{ person.id }}	{{ person.firstName }}	{{ person.lastName }}
No data!

[shanmukhateja]

Hi,

This is because your ajax callback's data property is empty. This indicates to datatables library that there is no data to render.

Please look at Angular Pipes or TemplateRef example in the documentation for recommended way.