3

I'm trying to customize the datatables search box in order to better integrate it into a bootstrap based UI. I have a table-controlbar 'horicontal_group' that contains other controls where I'd like to put the search box. It works as far as I can generate filtering events, however there is one very annoying problem:

the search box is loosing focus, every time the filter function is called.

This is a stopgap since I'd like typeahead functionality instead of letting the user click a button to search. I'd also implement a delay between keypresses and filter events of course, but first I have to deal with this focus issue.

This is how the dom looks like using the default 'f' option in datatable's sDom:

This is what I'd like to have: 

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

What I've tried so far (without any effect on the outcome):

  • use a freshly created input field instead of the field provided by the sDom-parameter 'f' (and delete 'f' from sDom)
  • use stopPropagation() on the event
  • unbind the events on the input field before binding the new ones
  • use .on('input' ..) instead of .bind('keypress keyup' ..)
  • append the whole dataTables_filter div to horicontal_group instead of just the input field
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 に答える