データテーブル検索バックスペーストリガーが動作しません

Question

私はデータテーブルを使用しています。私は検索ボタンをクリックしてクローズボタンをクリックします（このボタンをクリックすると、入力テキストがクリアされます）。これは正常に動作します

問題は、私がsearch.ifをキーボードのバックスペースをクリックするとtbodyビューを保持しているので、データが表示されます。私はkeyboard.whatを使用したくありません検索ボックスを空にすると、自動的に最初にデータが表示されます。 バックスペーストリガーnデータテーブルドローを使用しようとしましたが、何も機能しませんでした...助けてください。

ときに、検索

後に透明

検索ボックス

空の検索のための私のコード使用して閉じるボタン

$('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宣言：

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

// ------解除可能な入力コード---------------------- -----------------上部のコードで

$('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(); 


     } 



    }); 

私は「（（の代わりに'の変更をクリックしtouchstart' に関するを意味変更を追加しますタッチスタート '

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(); 

また、検索の入力をクリアしたい人は、

CSSコード

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