Add filter html element outside of datatable tree?
Add filter html element outside of datatable tree?
dr3x
Posts: 12Questions: 1Answers: 0
**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).
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).
This discussion has been closed.
Replies
Allan