Having trouble moving the Filter box

dustinpn

I'm very new to every language being used to get this working so bear with me...

My code is below, not sure why it isn't working


The script. I think this is how you add in the fn.Filter part into the existing script?




$(document).ready(function(){

oTable = $('#datatables').dataTable({
"sPaginationType":"full_numbers",
"aaSorting":[[2, "desc"]],
"bJQueryUI":true,
"sDom": '<"search-box"r><"H"lf>t<"F"ip>'
});

})
$('#dtsearch').keypress(function(){
oTable.fnFilter( $(this).val() );
})





Text box for filter



Could you tell me why this isn't working? Are there any working examples where someone has completely moved the filter box?

dustinpn

I've found two solutions to this, but I seem to be missing something with the implementation. The first is in my first post, but I've also found one using sDom.

Default with search input in its own div:

sDom: '<"search-box"r>lftip'
If you use jQuery UI (bjQueryUI set to true):

sDom: '<"search-box"r><"H"lf>t<"F"ip>'

It says that: The above will put the search/filtering input element into it's own div with a class named search-box that is outside of the actual table.

What does that mean?

Do I just add:





somewhere? And then what?

dustinpn

I got this working with the below code:


var oTable;
$(document).ready(function(){

oTable = $('#datatables').dataTable({
"sPaginationType":"full_numbers",
"aaSorting":[[2, "desc"]],
"bJQueryUI":true,
"sDom": 'lrtip'
});


$('#myInputTextField').keypress(function(){
oTable.fnFilter( $(this).val() );
});
});





and




In case anyone else ever needs it.

dustinpn

Ok, I spoke too soon. This mostly works, but the instant filter behavior isn't working how it originally did. I can type John and johns will filter, but if I backspace snh it doesn't update and show Jo*. Keeps just johns up

dustinpn

Switching the keypress to keyup fixed that.