datatable order for column
Im using the datatable from the template angular of metronic v8, how can i capture the event of the user clicking on table column name?
this is how i generate the table:
generateTable()
{
this.datatableConfig = {
serverSide: true,
processing: true,
autoWidth: true,
lengthChange: true,
pageLength: 10,
lengthMenu: [10,25,50,100],
ajax: (dataTablesParameters: any, callback) => {
this.userService.list(dataTablesParameters.start / dataTablesParameters.length + 1, dataTablesParameters.length, this.filterParams).subscribe(resp => {
console.log("QUI" ,resp);
const userList = {
draw: dataTablesParameters.draw,
recordsTotal: resp.total,
recordsFiltered: resp.total,
data: resp.data
}
callback(userList);
});
},
columns: [
{
title: this.translate.instant("USER.USERNAME"),
data: 'username',
orderData: [0],
orderSequence: ['asc', 'desc'],
type: 'string',
searchable: true,
render: function (data, type, full) {
return data || '';
}
},
{
title: this.translate.instant("USER.FULLNAME"),
data: 'fullname',
render: function (data, type, row) {
return data || '';
},
orderData: [1],
searchable: true,
orderSequence: ['asc', 'desc'],
type: 'string',
},
{
title: this.translate.instant("USER.EMAIL"),
data: 'email',
render: function (data, type, row) {
return data || '';
},
orderData: [2],
searchable: true,
orderSequence: ['asc', 'desc'],
type: 'string',
}
],
createdRow: function (row, data, dataIndex) {
$('td:eq(0)', row).addClass('d-flex align-items-center');
},
};
this.table = $('#userTable').DataTable(this.datatableConfig)
}
Replies (2)
Hi Giacomo Cardillo
Sorry for the delay. To capture the event of a user clicking on a table column header in your DataTable, you can use the order event provided by DataTables. This event is triggered whenever the table's sorting order is changed, including when a user clicks on a column header.
https://datatables.net/reference/event/order
// Add order event listener
this.table.on("order", () => {
const order = this.table.order(); // Get current order state
console.log("Column index:", order[0][0]); // Column index
console.log("Sort direction:", order[0][1]); // Sort direction ("asc" or "desc")
});no its not working, the event is not caught
