Get 2024 Templates Mega Bundle!19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets
Get for 99$

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?


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (7)


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


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(