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
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
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 11 months ago
Hi. I understand that the page refreshes after pressing the button?
Robert Berenbaum commented 11 months 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 11 months ago
Can you show me this method that refreshes the grid? I will look at this.
Robert Berenbaum commented 11 months 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.
Answered
- User: Free
- Premium support: No
- Technology: jQuery
- MDB Version: 4.11.0
- Device: laptop
- Browser: chrome
- OS: windows 8
- Provided sample code: No
- Provided link: No
- 1
- Search