数据表搜索退格触发器不起作用

Question

我正在使用模态数据表。当我搜索时，关闭按钮将打开X（通过单击此按钮，输入的搜索文本将被清除）。它正常工作

问题是，当我单击关闭按钮时，它会在搜索时保持tbody视图。如果在键盘上单击退格键，则它将最初显示数据。但是我不想使用键盘。当我清空时，我想要的是什么搜索框，它会自动自动显示最初的数据。我尝试使用退格触发器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

数据表声明：

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


      }



  });

在上面的代码中，我添加change，这意味着on（'touchstart单击更改'] >>而不是on（'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;}