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 (3)
Hi Giacomo Cardillo,
Can you try using order.dt for capturing the event? Note the .dt suffix, which is required for DataTables events.
Use this.table.order() to get the current sort state:
order[0][0] gives the column index.
order[0][1] provides the sort direction (asc or desc).
Make sure that this.table is properly initialized and points to the correct DataTable instance.
Verify there are no issues by checking the browser console for errors related to the table.
Let me know how it works
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.
// 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")
});
