issue with ajax table in metronic standard template
im having table with the personalization of the ajax table in the standard metronic template for angular.
this is how i personalized the datatableConfig in my component:
this.datatableConfig = {
serverSide: false,
autoWidth: true,
lengthChange: true,
pageLength: 10,
lengthMenu: [10,25,50,100],
and in the app-crud module they are "seen" but the table isnt built with the option of choosing the lenght of the table.
Can someone help me into understanding how i could achieve the visualization of the table lenght modifier in the table?
Replies (8)
New patients at Rivia Mind can expect a welcoming and supportive environment from their first phone call or email, https://www.riviamind.com/. The staff is dedicated to making the experience comfortable, and the clinicians are committed to providing personalized care tailored to each patient's unique needs. With a focus on accessibility and affordability, Rivia Mind ensures that high-quality mental health care is within reach for everyone.
Hi Giacomo Cardillo
In Angular, it's generally a good practice to initialize UI-related components in ngAfterViewInit() rather than ngOnInit(). This is to make sure that the view and its elements are fully initialized before manipulating them. We will fix it from our side.
Hi Giacomo Cardillo
Sorry for the delay. With your current progress, how is the menu dropdown displaying right now?
The lengthMenu option you've defined should be correct. Please ensure that your DataTable is properly initialized and that the configuration options are being applied correctly. You can refer to the official DataTables documentation for the lengthMenu option here:
https://datatables.net/reference/option/lengthMenu
If the length menu is still not displaying, double-check the following:
- Ensure the DataTable is initialized in the ngAfterViewInit lifecycle hook.
- Verify that all necessary dependencies for DataTables are installed and correctly imported.
- Confirm that your HTML structure includes the DataTable directive and is properly set up.
If you need further assistance, please provide more details about your current setup or any specific errors you encounter.
Hi, this is how i initialize the datable in the page
ngOnInit(): void {
let self = this;
this.datatableConfig = {
serverSide: false,
autoWidth: true,
lengthChange: true,
pageLength: 10,
lengthMenu: [10,25,50,100],
ajax: (dataTablesParameters: any, callback) => {
this.userService.list(this.page,this.pageLength).subscribe(resp => {
console.log(resp);
const userList = {
draw: this.page,
recordsTotal: resp.totalRecords,
recordsFiltered: resp.usersList.length,
data: resp.usersList
}
callback(userList);
});
},
columns: [
{
title: 'Nome',
data: 'username',
orderData: [0],
orderSequence: ['asc', 'desc'],
type: 'string',
searchable: true,
render: function (data, type, full) {
return data || '';
}
},
{
title: 'Nome Completo', data: 'fullname', render: function (data, type, row) {
return data || '';
},
orderData: [1],
searchable: true,
orderSequence: ['asc', 'desc'],
type: 'string',
},
{
title: 'Indirizzo 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');
},
};
}
im doing it on the ngOnInit because i saw in the template doing so, do i have to move it in the ngAfterViewInit (that right now is empty)? or i am doing something wrong in my definition?
Hi Giacomo Cardillo
For DataTables implementation server-side, you need to structure your API call to handle the parameters passed by DataTables. This involves passing the dataTablesParameters object to your backend via a POST request and ensuring the backend handles these parameters appropriately to return the subset of data.
Here is our example API call.
/src/app/_fake/services/role.service.ts
dataTablesParameters need to pass into the POST request, and the backend code needs to handle it so the result return based on the length from dataTablesParameters
getRoles(dataTablesParameters?: any): Observable<DataTablesResponse> {
const url = `${this.apiUrl}-list`;
return this.http.post<DataTablesResponse>(url, dataTablesParameters);
}ok i knew that, but what i cannot accomplish is to render the datatables lenght with this code:
new DataTable('#example', {
lengthMenu: [
[10, 25, 50, -1],
[10, 25, 50, 'All']
]
});
in my angular metronic template i declared lenghtMenu but it doesnt work
Hi Giacomo Cardillo
Could you please check the console log for any error messages? If there are any errors.
Thank you
Hi there aren't any error messages in the console
