Place "Filter" input in existing element

tyman00

I may be missing something obvious, but is it possible to place the input box for filtering in an existing element? I was looking at sDom, but it looks like that element is dynamically generated by Javascript. I'd like to add the input to an existing div instead of having it created.

The reason is because I don't have a JSON or data feed for the ajax I am using a standard jQuery Ajax request and replacing a content div with the new data and then re-initializing dataTables. However when the table reloads it pulls focus from the Filter Input because it is being regenerated.

I tried adding a focus to the input as part of the ajax request, but it still creates a minor stutter. Any suggestions or alternatives to my methodology is welcome!

fbas

I don't think you can do it with DataTables directly, but you can always move/copy your filter after DataTables is initialized, using jquery/javascript.

tyman00

Thanks, my only concern is when I refresh the content with the ajax call (it's on an automatic loop) the field will be overwritten again. I was hoping that I could place the field in an element that already existed or create my own input for the filtering.

fbas

you can put your move/copy code into fnDrawCallback so it is re-applied on every refresh

http://www.datatables.net/ref#fnDrawCallback

or you could ditch the Filter in the sDom altogether and just write your own with the same functionality (it basically just calls .fnFilter()

http://www.datatables.net/ref#fnFilter

tyman00

Thanks, my fear is as the table is redrawn the filter will loose focus if you are typing in the filter input at the same time you are typing filter content.

I'll look into using .fnFilter. I'm assuming I would have to watch for changes in my new filter input and then apply the content of the filter input to the .fnFilter functionality. Thanks for the tip!

fbas

yes, but it's simple enough with jquery

[code]
$('#yourfilter').keyup( function() {
oTable.fnFilter(this.value);
} );
[/code]

or something like that.

tyman00

Pretty much what I was thinking. I'll give it a shot and report back when I have a chance to fully test everything. Thanks!