2016-08-18 2 views
0

私はdataTablesプラグインを私のウェブサイトで使用していますが、上記のプラグインに含まれている検索バーに若干の問題があります。私は、入力フィールドを空に検索バーをクリアするには、そのコードを使用しています :データテーブルの更新

問題に今 this stackoverflow question

から取られ

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

:私は私がクリアするためasignedクロスをクリックしたときに入力は、入力がクリアされるように入力されますが、dataTableテーブルは検索入力に対応するテーブル行のみを表示し続けます。十字をクリックすると、データテーブルの検索をクリアするにはどうすればよいですか?私はそれがバックスペースのようなキーを押して、矢印を押し下げるだけで検索を更新することに気づいた。

+0

入力フィールドをクリアした後、 'oTable.fnDraw()'を呼び出すだけです.. – mmushtaq

+0

'oTable'はあなたのDataTableのオブジェクトです.. – mmushtaq

答えて

0

あなたは

  1. keyupイベントをトリガーすることによって変更されたフィールドを検索dataTableを伝える二つのオプション

    を持って

    // on 'touchstart click' event 
    $(this).keyup(); 
    
  2. reDrawテーブル手動

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

ありがとう! 1番目の解決策は私のために働いた:) – entlu

関連する問題