javascript - jQuery Datatables filter position -

i'm working jquery datatables , i'm trying position filter/search box on same row header of div that's holding datatable.

here's screenshot of page:

and here markup:

    <div      style="box-shadow: 2px 2px 10px 0px rgba(163,153,163,1); padding-top:5px; padding-left: 15px;  padding-right: 15px; padding-bottom: 15px; ">  <h2>funding summary</h2>  <asp:listview     id="lvfundingsummary"     onitemdatabound="lvfundingsummary_itemdatabound"      runat="server" >     <itemtemplate>         <tr>             <td style="width: 65%; text-align:left; padding-top: 5px; padding-bottom:5px;">                 <asp:label id="lblresearcharea" runat="server" text='<%# databinder.eval(container.dataitem, "plname")%>' />             </td>             <td style="width: 15%; text-align:right; padding-top: 5px; padding-bottom:5px;">                 <asp:label id="lblfundinggross" runat="server" text='<%# databinder.eval(container.dataitem, "fundinggross", "{0:c}")%>' />             </td>             <td style="text-align:right; padding-top: 5px; padding-bottom:5px;">                 <asp:label id="lblgross" runat="server" text='<%# databinder.eval(container.dataitem, "allgross", "{0:c}")%>' />             </td>         </tr>     </itemtemplate>      <layouttemplate>         <table              id="itemplaceholdercontainer"              style="width: 100%">              <thead>                 <tr>                     <th style="width: 65%; text-align:left; padding-bottom:10px;">research area</th>                     <th style="width: 15%; text-align:right; padding-bottom:10px;">gross</th>                     <th style="text-align:right; padding-bottom:10px;">all epri gross</th>                 </tr>             </thead>              <tfoot>                 <tr>                     <td style="width: 65%; text-align:left; padding-bottom:10px;"><b>total(s)</b></td>                     <td style="width: 15%; text-align:right; padding-bottom:10px;"><b><asp:label id="lbltotalfunding" runat="server" /></b></td>                     <td style="text-align:right; padding-bottom:10px;"><b><asp:label id="lbltotaleprigross" runat="server" /></b></td>                 </tr>                       </tfoot>              <tbody runat="server">                 <asp:placeholder id="itemplaceholder" runat="server" />             </tbody>          </table>                                 </layouttemplate>           </asp:listview>  </div>      <script type="text/javascript">        $(document).ready(function () {            var table = $('#itemplaceholdercontainer').datatable(                {                    "scrolly": "300px",                    "scrollx": true,                    "scrollcollapse": true,                    "paging": false,                    "autowidth": true,                     dom: 'frti<"floatright"b><"clear">',                    buttons: [                        'copy', 'csv', 'excel', 'pdf', 'print'                    ]                });         });  </script>   

funding summary header, want filter box line right of it, flush against right side of table.

found workaround here:

https://datatables.net/examples/advanced_init/dom_toolbar.html

i added style:

.filterpad{ padding-top:15px; } 

and added following function:

dom: '<"toolbar"><"filterpad"f>rti<"floatright"b><"clear">',