Topic: Data table, clear search input box
When submitting selected checked values in the data table, if the results have been filtered by a search then hidden checked items aren't posted to server. I realise that you can access them via the DOM but I was wondering if it's possible to clear the search input prior to submitting. Is there a way to access the search text input of the datatable via javascript?
Many thanks Shaun
the same for mdb 5 react cant clear the search bar
Kamila Pieńkowska staff commented 9 months ago
If you have a question regarding the React package you can post it in the dedicated category on the support forum.
This is not working for me. I can programatically clear the search box by setting the value to empty string. But the grid re-renders with the search values that were originally there.
Grzegorz Bujański staff commented 4 years ago
Hi. I understand that the page refreshes after pressing the button?
Robert Berenbaum free commented 4 years ago
The grid refreshes because I make a call to a method that refreshes the grid after I try to work with the search box.
If I set the value of the search box to empty string programatically, the grid does not refresh the way it does if I perform a search manually by changing values in the search box.
After the grid refreshes due to my function call, the fact that I programatically set the value to empty string, is ignored. The value is reset in the textbox and the grid appears filtered by the original search parameters.
How do I clear the search box and effect on the grid programatically? I tried simulating backspace clicks with focus on the search box, but I did not have luck.
Grzegorz Bujański staff commented 4 years ago
Can you show me this method that refreshes the grid? I will look at this.
Robert Berenbaum free commented 4 years ago
The method to refresh the grid is as follows:
export const actionCreators = { getAllTickets: (): AppThunkAction => async (dispatch, getState) => { //dispatch({ type: CORRELATION_ACTION.LOADING_CORRELATIONS } as BasicCorrelationAction); return await getAllTickets(getState) .then(response => { if (!response.ok) { return Promise.reject(response); } return response.json() as Promise }) .then(data => { dispatch({ type: TICKET_ACTION.GET_TICKETS, tickets: data } as TicketsLoadedAction); return data; //.sort((a, b) => a.CorrelationID - b.CorrelationID); }) .catch(error => { if (error.status === 401) { let t = error.text(); let u = error.body; } return Promise.reject(error.text() | error.body); }); },
Even if I disable this method call and try to programatically clear the search of the datatable, I can set the value of the search to empty string, but it doesn't update the datatable in any way. Sorry, the pasting of code does not keep the formatting.
Ok, posted too early, found this to work
var table = $('#dtMyTable').DataTable(); table.search(''); //clear search item table.draw(); //redraw table
this also preserves all checked items
Grzegorz Bujański staff commented 4 years ago
Hi. I'm glad you found a solution.
Best, Grzegorz
Shneka free commented 1 year ago
That's great!..Working fine
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.11.0
- Device: laptop
- Browser: chrome
- OS: windows 8
- Provided sample code: No
- Provided link: No