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

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

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

1 个答案: