Topic: way to indicate "search in progress..." in datatable search
When trying to filter a very large amount of data in a datatable on the client side. [20k records with 8 items each are 160k records to filter] I realize data will be processed on the computer/browser and may take a while to run. Is there a recommended way to indicate "search in progress..." or "searching..." while this is happening? Or maybe float a spinner above the table ?
Unfortunately, server-side filtering is not a practical option at the moment.
We don't have a recommended way. But check out this snippet: https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/5290220#js-tab-view
This is just a general idea of how you can use our built-in loader. But this solution forces you to create an asynchronous filter function yourself, which after returning the result (promise) will add the filtered data again
bpeterson pro premium priority commented 2 years ago
@Grzegorz, thanks. I was able to achieve this already, and was hoping more for guidance on how to incorporate an asynchronous filter function; are there any examples or snippets doing that?
kpienkowska staff commented 2 years ago
There are no snippets available. To accomplish the task, you simply need to incorporate a filtering function into the existing snippet mentioned above. This function will be responsible for filtering the rows based on the desired criteria. Once the filtering is applied, the resulting rows can then be passed to the update method..
bpeterson pro premium priority commented 2 years ago
I've tried the following; maybe you can help me finish the idea?
const search = async (value) => { async_computer_users_datatable.update( { rows: [] }, { loading: true } );
async function f() {
let [phrase, columns] = value.split(':').map((str) => str.trim());
if (columns) {
columns = columns.split(',').map((str) => str.toLowerCase().trim());
}
console.log(phrase);
console.log(columns);
async_computer_users_datatable.search(phrase, columns);
}
await f(() => {
async_computer_users_datatable.update(
//{ rows: data.rows },
{ loading: false }
)
})
}
I am not sure what you are trying to achieve. This code looks like an attempt to filter data on the client side. To search for data on the server side, you need to create an appropriate endpoint that will accept the search parameters. For example, the value by which you want to search the data. On the client side, you only query the API and pass data from response to the Datatable. For example like this:
const search = (value) => {
instance.update(
{ rows: [] },
{ loading: true }
);
// fetch searched data from your api
fetch('your_api_link')
.then((response) => response.json())
.then((data) => {
asyncTable.update(
{ rows: data },
{ loading: false }
);
});
}
You have to handle the entire search process on the server side. You must ensure that your endpoint provides filtered data in response.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 5.0.0
- Device: PC
- Browser: Chrome
- OS: Win10
- Provided sample code: No
- Provided link: No