Putting control in the datatables_wrapper

rjgoodman

I've currently got two controls on my page, a datatable and a select dropdown that uses the Chosen jQuery Plugin (http://harvesthq.github.io/chosen/) I'd like to put my dropdown to the left of the datatable's search box. Is there any way to insert my own html and controls in this space, in the datatables_wrapper div, above the table column headers where the search box is?

rjgoodman

Figured it out. Here's how I did it in case anyone else wants to insert their own controls into the space at the top of the table to the left of the search box:

1. Wrap the controls you want to insert into a div. I've named mine chosen_wrapper. Give it these styles:
[code]display: inline; float: left; text-align:left;[/code]
2. In the table constructor use sDom with a div for your "toolbar":
[code]"sDom": '<"toolbar">frtip<"bottom">',[/code]
3. Add the div wrapper using the fnInitComplete function, you declare in the constructor and is called when the table has finished loading:
[code]
"fnInitComplete": function(oSettings, json) {
$("#chosen_wrap").appendTo('.toolbar');
}
[/code]

And that's it!