Add filter html element outside of datatable tree?

Add filter html element outside of datatable tree?

dr3xdr3x Posts: 12Questions: 1Answers: 0
edited October 2013 in DataTables 1.9
**Update - seems to work on the DataTables live site using the plugin approach (#4 below); let me know if there is a better solution.**
http://live.datatables.net/efuyuc/edit#javascript,html

What's the best way of adding a filter element outside of the div+children that the datatable is defined on, but on the same page? I'm looking for a solution that will be pretty robust through future revisions of the DataTables library.

These appear to be my options:

1. Add the element and wire up the event handlers in code

Or leverage the existing API:

2. The sDom parameter appears to be only relevant to html within the datatable tree; I didn't see a way of using that.

3. Create an oSettings object and pass it to this internal method but there is a lot of manual / hard coding setup required to initialize the oSettings parameter; using this the element is created but the search function errors:
[code]
var searchNode = $.fn.dataTableExt.oApi._fnFeatureHtmlFilter( oSettings );
[/code]

4. Use the API wrapper to create a plugin because it should set up the oSettings parameter internally:
[code]
$.fn.dataTableExt.oApi.fnCreateHtmlFilter = function ( oSettings )
{
var searchNode = this.oApi._fnFeatureHtmlFilter( oSettings );
return searchNode;
}
[/code]

and then call it like this:

[code]
var oTable = $("p-table").dataTable();
var searchNode = oTable.fnCreateHtmlFilter();
$('#p-table-header').append(searchNode);
[/code]

5. Or modify the DT library to take a custom parameter in initialization specifying a jQuery selector to append the filter element to (but then we'd need to merge this customization forward anytime we updated to a new rev of the library).

Replies

  • allanallan Posts: 63,498Questions: 1Answers: 10,470 Site admin
    Just use fnFilter :-) that is what it is there for!

    Allan
This discussion has been closed.