Datatable search backspace trigger didnot work

Question

i am using data table in modal.when i search then a close button open X (by clicking this button,input search text will be cleared). It works properly

the problem is that when i click the close button,it hold the tbody view when i search.if click backspace in keyboard then it shows data initially.but i don't want to use keyboard.what i want is when i empty the search box,it will automatically shows the data initially. i try to use backspace trigger n datatable draw but nothing worked...please help me .

when search

after clear the search box

my code for search empty using close button

$('div.dataTables_filter input').addClass('clearable');

  function tog(v){
    return v?'addClass':'removeClass';
  } 
  $(document).on('div.dataTables_filter 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();
  **//i try to add here backspace trigger code**

  });

Answer 1

datatable declare:

 var rtable = $('#table1').DataTable();

// ------CLEARABLE INPUT Code---------------------------------------

 $('div.dataTables_filter input').addClass('clearable');

  function tog(v){
    return v?'addClass':'removeClass';
  } 
  $(document).on('div.dataTables_filter 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 change', '.onX', function( ev ){


    var temp =  $(this).removeClass('x onX').val('');


      console.log(temp.length);

      if(temp.length == 1){

          rtable
              .search( '' )
              .columns().search( '' )
              .draw();

        ptable.search('')
      .columns().search( '' )
      .draw();


      }



  });

in upper code i add change that means on('touchstart click change' instead of on('touchstart click'

var temp = $(this).removeClass('x onX').val('');

      console.log(temp.length);

      if(temp.length == 1){

          rtable
              .search( '' )
              .columns().search( '' )
              .draw();

        ptable.search('')
      .columns().search( '' )
      .draw();

And for them who want to clear input in search.

css code

 .clearable{
          background: #fff url(data:image/gif;base64,R0lGODlhBwAHAIAAAP///5KSkiH5BAAAAAAALAAAAAAHAAcAAAIMTICmsGrIXnLxuDMLADs=) no-repeat right -10px center;
          border: 1px solid #999;
          padding: 3px 18px 3px 4px; /* Use the same right padding (18) in jQ! */
          border-radius: 3px;
          transition: background 0.4s;
        }
    .clearable.x  { background-position: right 5px center; }
    .clearable.onX{ cursor: pointer; }
    .clearable::-ms-clear {display: none; width:0; height:0;}