DataTables列过滤器的异常行为 [英] DataTables Column Filter Strange Behaviour

问题描述

我已经在 http://live.datatables.net/fizajopa/1

步骤:

1. 过滤任何导致表数据计数更改的列.

1. Filter any column which causing the table data count to changed.

单击该行. ->弹出窗口没有显示. [WRONG]

Click on the row. -> popup not shown. [WRONG]

再次单击该行. ->显示弹出窗口.

Click on the row again. -> popup shown.

使用列过滤器后，我需要使列过滤器失去焦点，然后才能触发行单击事件.

After using the column filter, I need to un-focus the column filter, then I can trigger the row click event.

问题:这是一个错误吗?如何解决?

Question: Is this a bug? How to fix?

推荐答案

这不是bug，它是预期的行为.您正在使用分页表格，然后

It is not a bug, it is the expected behaviour. You are using a paginated table, and then

$('#example td').click( function () {
   alert('x');
});

执行

时，实际上您只将点击处理程序附加到可见的<td>上，即第1页上的<td>上.您必须使用委派的事件处理程序，以便随时定位所有<td>，以及动态注入到DOM中的

is executed, you actually only attach the click handler to visible <td>'s, i.e <td>'s on page #1. You must use a delegated event handler in order to target all <td>'s at any time, also those injected to the DOM dynamically :

$('#example').on('click', 'td', function () {
  alert('x');
});

您的演示已编辑-> http://live.datatables.net/fizajopa /3/edit

your demo edited -> http://live.datatables.net/fizajopa/3/edit

更新，我看到了问题.只需在过滤器输入处理程序中调用blur()即可:

Update, I see the problem. Simply call blur() in the filter input handler :

$("#example thead th input[type=text]").on( 'keyup change', function () {
  table
    .column( $(this).parent().index()+':visible' )
    .search( this.value )
    .draw();
  $(this).blur() //<----
});

但是，这将在每次键入或更改任何内容时(甚至在用户想要键入更多内容时)从<input>中移出焦点.为避免这种情况，您可以使用类似 jQuery .keyup()延迟 的方法:

But that will remove focus from the <input> each time anything is typed or changed, also if the user wants to type more. To avoid that you can use an approach like this jQuery .keyup() delay :

var delay = (function(){
  var timer = 0;
  return function(callback, ms){
    clearTimeout (timer);
    timer = setTimeout(callback, ms);
  };
})();

// Apply the filter
$("#example thead th input[type=text]").on( 'keyup change', function () {
  var that = this;
  delay(function(){
    table
      .column( $(that).parent().index()+':visible' )
      .search( that.value )
      .draw();
    $(that).blur()
  }, 500);
});

$('body').on('click', 'td', function () {
  alert('x');
});

叉式演示-> http://live.datatables.net/xoyutune/1/修改

forked demo -> http://live.datatables.net/xoyutune/1/edit

不知道500ms是否合适，您可以尝试一下.

Dont know if 500ms is suitable, you can experiment with that.

这篇关于DataTables列过滤器的异常行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！