Data table, clear search input box

Topic: Data table, clear search input box

needledrag 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

Add comment

needledrag answered 4 years ago

0 0 Best answer

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 commented 9 months ago

That's great!..Working fine

Add comment

Robert Berenbaum answered 4 years ago

0 0 Best answer

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 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 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.

Add comment

AmineMazars pro premium priority answered 3 months ago