Topic: Data table, clear search input box

needledrag free asked 4 years ago

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

AmineMazars priority answered 5 months ago

the same for mdb 5 react cant clear the search bar

Kamila Pieńkowska staff commented 5 months ago

If you have a question regarding the React package you can post it in the dedicated category on the support forum.

Robert Berenbaum free answered 4 years ago

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.

needledrag free answered 4 years ago

Ok, posted too early, found this to work

var table = $('#dtMyTable').DataTable();''); //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 11 months ago

That's great!..Working fine

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • 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