DataTables .draw() not firing properly

Question

Okay, so I have a DataTable that I'm trying to re-render when the clear button is clicked.

When I filter the table through my custom, filters, it works as expected. However, when I click 'Clear' all the inputs are cleared as expected, but the table doesn't get redrawn. Rather, the table still displays 'No Matching Records Found'. There are no errors being thrown in the console and the same code works in another template.

Any thoughts?

var table = $('#pages').DataTable({
  'ordering': true,
  "columnDefs": [
    { "name": "title", "targets" : 0},
    { "name": "path", "targets" : 1 },
    { "name": "created", "targets" : 2 },
    { "name": "updated", "targets" : 3 },
    { "name": "creator", "targets" : 4 },
    { "name": "templateName", "targets" : 5 },
    { "name": "status", "targets" : 6 },
    { "name": "includeOnMenu", "targets" : 7 },
  ],
    "dom": 'tip'  
});
$('.clear-filter').click(function() {
  $("#filter :input").each(function() {
    this.value = "";
  });
  table.draw();
});

Answer 1

I was having a very similar problem. This worked for me:

table.rows().invalidate().draw()

Answer 2

You should be able to use table.destroy(); immediately before table.draw();. It's likely that you're "filtering" somehow before you do the table draw, which is causing this problem. table.destroy(); will take out any filtering and then you can draw from scratch.

https://datatables.net/reference/api/destroy()