I am just starting to explore MDBootstrap and I'm currently focused on grasping how to utilize the DataTables. While I've browsed through the examples on their website regarding Async table updates, I've found it a bit challenging to adapt it to my specific scenario.
My main goal is to understand the async table update technique in detail, as I want my table to be able to dynamically update four columns based on filters obtained from Dropdowns.
Essentially, I aim for the table to fetch its data by making a call to a PHP endpoint that responds with JSON data. However, I'm struggling to comprehend how to implement the asyncTable.update() method as demonstrated in their example.
To simplify, let's assume the JSON returned by the PHP endpoint looks something like this:
[ { "a": "a string", "b": "another string", "c": "another string", "d": "another string" }, { "a": "a string", "b": "another string", "c": "another string", "d": "another string" }]Given the code snippet from the MDBootstrap site (provided below), how can I adjust the code to connect to my own endpoint? I'm having trouble with the JavaScript syntax within the .update() method in the example:
const columns = [
{ label: 'A', field: 'a' },
{ label: 'B', field: 'b' },
{ label: 'C', field: 'c' },
{ label: 'D', field: 'd' },
];
const asyncTable = new mdb.Datatable(
document.getElementById('datatable'),
{
columns,
}
);
//var url = 'MY OWN PHP ENDPOINT URL';
var url = 'https://jsonplaceholder.typicode.com/users';
fetch(url)
.then((response) => response.json())
.then((data) => {
asyncTable.update(
{
rows: data.map((user) => ({
...user,
address: `${user.address.city}, ${user.address.street}`,
company: user.company.name,
})),
},
{ loading: false }
);
});
});
I would greatly appreciate guidance on incorporating this method with my own endpoint rather than the example provided. Thank you.
Best regards