I have incorporated a Jquery Data Table Plugin that can be found at http://datatables.net/api. This plugin comes with its own search box, which is automatically added to the page when enabled. The search box is nested within its own div structure like this:
<div>
<!-- Search code -->
</div>
<table>
<!-- Table data -->
</table>
My goal is to implement a scroll bar for the table while keeping the search box always visible. I tried using overflow-y:scroll; on the table element, but it doesn't seem to work. However, it does work on a div. If I apply the style to the parent container, the search box disappears when the user scrolls down. My attempt to physically rearrange the elements as follows:
<div>
<!-- Search Code -->
</div>
<div style="overflow-y:scroll;"> <!-- This is just an example, should actually use a class. -->
<table>
<!-- Table data -->
</table>
</div>
As expected, this approach disrupts the functionality of the search box generated by the plugin. Hence, my question is whether I can achieve the desired result using the built-in search feature of the plugin, possibly through an argument like 'sdom', or if I need to develop my own search/filter mechanism?