Example for custom external DOM input field table filtering

studioleland

Hey Allan,

I have a site here: http://vangelis1.31two.com/list/

I would like to add a simple dom filter text input field to the filter bar above the table that would perform the usual text filtering on the table below. However, this custom filtering container is outside of the datatables container structure. How do I properly use the fnFilter to do this? I searched around the forums but didnt find much in the way of examples.

allan

Hi,

I've put an example up here: http://live.datatables.net/ohefeg/edit#javascript,html

Basically the key thing to do here is to attach an event handler to your input which will call fnFilter with the filtering value you want:

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

Regards,
Allan

studioleland

Also really briefly,

Any idea why the tooltips show perfectly fine on page 1 of the table but when I begin paging they no longer display? Hovering over the "i" in the title column displays the js tooltip.

http://174.132.104.70/cooking-list/

studioleland

Getting odd errors here for the input filter described. Must be missing something:

http://vangelis1.31two.com/grid/list/

allan

> Any idea why the tooltips show perfectly fine on page 1 of the table but when I begin paging they no longer display? Hovering over the "i" in the title column displays the js tooltip.

Yes - this FAQ covers why this happens: http://datatables.net/faqs#events . How to fix it will depend a little upon the tooltip plug-in you use. Ideally it would provide a 'live' event, but the alternative in this case might be to simply initialise the tooltips before the table.

> Getting odd errors here for the input filter described. Must be missing something:

How do I activate the filter? I've tried the input box and the 'filter by' select element, but they doesn't appear to cause any errors.

Allan

studioleland

The filter input is the unlabeled empty text input box on the right side that should work on keyup using this:

[code]$('input[name=list_search]').keyup( function () {
oTable.fnFilter( this.value );
} );[/code]

The other dropdown filters will resort the actual queried data with ajax.

allan

Ah - everything looks okay apart from this:

> "bFilter": false,

You've turned filtering off - so DataTables isn't doing any filtering... :-)

You need to enable that option (or rather just remove the disabling of it) and then use sDom to configure the DOM elements that DataTables creates - which is why I presume you've disabled it? Just drop the 'f' option from sDom .

Allan

studioleland

Oh jesus. Haha, thanks for pointing out I need more sleep.

studioleland

So simply move the qtip init (http://craigsworks.com/projects/qtip2/) to the header above the table init would probably work. Although I believe the qtip script is bundled into a bunch of other js all loading in the footer. hmm.

allan

Yes - if you are using paging / filtering then special consideration needs to be given to the events. You might find visual event useful / interesting when dealing with this kind of thing: http://sprymedia.co.uk/article/Visual+Event+2

The events FAQ also notes ways to cope with it (ideally with live events, but depending on your exact setup qtip, then DataTables ordering, or fnDrawCallback could be used):
http://datatables.net/faqs#events .

Regards,
Allan