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

Question

我在 modal.when 中使用数据 table 我搜索然后关闭按钮打开 X（通过单击此按钮，输入的搜索文本将被清除）。正常工作

问题是当我点击关闭按钮时，当我 search.if 点击键盘上的退格键时它会保持 tbody 视图然后它显示数据 initially.but 我不想使用 keyboard.what 我想要的是当我清空搜索框时，它最初会自动显示数据。我尝试使用退格键触发 n 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', '.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 click change' 而不是 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();

对于那些想在搜索中清除输入的人。

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

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

Datatable search backspace trigger didnot work

datatable

search

triggers

backspace