updating dataTable search

Question

I use the dataTables plugin on my website and I am having some minor problems with my search bar, which is included in said plugin; I am using that code to clear the search bar emptying the input field:

    function tog(v){return v?'addClass':'removeClass';} 
$(document).on('input', '.clearable', function(){
    $(this)[tog(this.value)]('x');
}).on('mousemove', '.x', function( e ){
    $(this)[tog(this.offsetWidth-18 < e.clientX-this.getBoundingClientRect().left)]('onX');
}).on('touchstart click', '.onX', function( ev ){
    ev.preventDefault();
    $(this).removeClass('x onX').val('').change().submit();
 });

which is taken from this stackoverflow question

Now to the problem: whenever I click on the cross that I asigned for the clearing of the input, said input gets cleared like it should, however, the dataTable table keeps displaying only table rows, which correspond to the search input. How can I clear the dataTable search when clicking the cross. I noticed that it only takes the pressing of a key like backspace, arrow down, ... to update the search.

After clearing input field, just call `oTable.fnDraw()` .. – mmushtaq Aug 18 '16 at 16:23 — mmushtaq, Aug 18 '16 at 16:23
`oTable` is object of your DataTable.. – mmushtaq Aug 18 '16 at 16:25 — mmushtaq, Aug 18 '16 at 16:25

score 0 · Accepted Answer · answered Aug 18 '16 at 16:29

0

you have two options

tell dataTable that search field has been changed by triggering keyup event
```
// on 'touchstart click' event
$(this).keyup();
```

reDraw table manually

var table = $('#example').DataTable();
table.search('').draw();

answered Aug 18 '16 at 16:29

Ja9ad335h

4,995
2
21
29

updating dataTable search

1 Answers1