Is it possible to add a clear all button

PLZhelp

Link to test case: https://live.datatables.net/foqehowu/1/edit

Description of problem

Sorry this may be a very dumb question and I am quite new to all of this, so thank you in advance.

I was wondering if it is possible to add a "clear all" button that will remove any of the users filtering selection and/or search?

When I add links to https://cdn.datatables.net/searchpanes/2.2.0/js/dataTables.searchPanes.min.js and https://cdn.datatables.net/searchpanes/2.2.0/css/searchPanes.dataTables.min.css it breaks my current working table.

If someone could please help explain how or if it is possible to add a clear all button I would be extremely grateful.

colin

You just need something like this:

  $('#clear').on('click', function() {
    $('thead select').each(function(index) {
      $(this).val('')
    })
  })

It's iterating through the select elements using jQuery and clearing the value. See updated example here: https://live.datatables.net/pafuhimi/1/edit

Colin

allan

Code golf time

That can be shortened to:

$('#clear').on('click', () => $('thead select').val(''));

Allan

PLZhelp

Thanks @colin and @allan

However unfortunately I am needing it to reset the table back to the full version which it doesn't seem to do. Is this possible?

kthorngren

Use columns().search() with an empty string to reset all the column search values. For example:
https://live.datatables.net/pafuhimi/3/edit

Kevin

PLZhelp

Thanks @Kthorngren I really appreciate it - I am still learning JavaScript.

Unfortunately, the filters that didn't have a selection are only displaying selections from before it is cleared. Is there a way that it can display all options within the table?

Example: if i filter only age 23 then use the clear all button all other filters are only displaying the two age 23 results to select from. Where as i need it to display all options within the table.

colin

Ah, yep, we all missed that point. Here you go, it's clearing the filters as Kevin suggested, and the table as a whole - example here.

  $('#clear').on('click', () => {
    $('thead select').val('') 
    table.search('').columns().search('').draw()
    createDropdowns(table)
  })

Colin

PLZhelp

Perfect!! Thank you so much - I extremely appreciate it.

I know just need to fix the filter boxes for responsive and have seen a there is a tread for this already so will follow those instructions.

Thanks again