3

我正在尝试自定义数据表搜索框，以便更好地将其集成到基于引导程序的 UI 中。我有一个表格控制栏“horicontal_group”，其中包含我想放置搜索框的其他控件。只要我能生成过滤事件，它就可以工作，但是有一个非常烦人的问题：

每次调用过滤器功能时，搜索框都会失去焦点。

这是权宜之计，因为我想要预先输入功能，而不是让用户单击按钮进行搜索。当然，我也会在按键和过滤事件之间实现延迟，但首先我必须处理这个焦点问题。

这是在数据表的 sDom 中使用默认 'f' 选项时 dom 的样子：

这就是我想要的： 

wrapper_div.find('.dataTables_filter input')
.addClass('form-control tableview-search')
.appendTo(horicontal_group) //if this is uncommented, it works fine
.bind('keypress keyup', function(e){
   datatable.fnFilter(searchTerm);
});

到目前为止我尝试过的（对结果没有任何影响）：

  • 使用新创建的输入字段而不是 sDom 参数“f”提供的字段（并从 sDom 中删除“f”）
  • 在事件上使用 stopPropagation()
  • 在绑定新事件之前取消绑定输入字段上的事件
  • 使用 .on('input' ..) 而不是 .bind('keypress keyup' ..)
  • 将整个 dataTables_filter div 附加到 horicontal_group 而不仅仅是输入字段
4

1 回答 1

1

Ok, while writing this I've thought about it some more and I came to a solution that I'm gonna leave here. Using the built-in wrapper-div and adapting it to bootstrap instead of recreating it from scratch, solved my issues. If you have more insight on why the focus is lost I'd still be glad for your input.

I now initialize the sDom like this:

sDom: '<"row"<"col-lg-12 col-tableview-controls"f>><"row"<"col-lg-12"RlrtiS>>'

After dt is initialized I fixup the dom like this (note that I also used the merged search box from this thread: Add Bootstrap Glyphicon to Input Box: 

var horicontal_group = wrapper_div.find('.dataTables_filter');
horicontal_group.addClass('input-group pull-right horicontal-group');
var merged_input = $("<div class='input-group merged'><span class='input-group-addon search-addon glyphicon glyphicon-search'></span></div>")
.appendTo(horicontal_group);
var input = horicontal_group.find('input');
input.addClass('form-control tableview-search')
.appendTo(merged_input)
.on("focus blur", function() {
    $(this).prev().toggleClass("focusedInput")
});
var label = horicontal_group.find('label');
label.remove();
于 2013-10-25T16:10:28.187 回答