I'm currently working with jQuery datatables and I'm attempting to align the filter/search box on the same row as the header of the container holding the datatable.
Attached is a screenshot for reference:
https://i.stack.imgur.com/nzbIl.png
Here's the HTML 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>
The title "Funding Summary" serves as the header, and my goal is to have the filter box positioned to the right of it, aligned perfectly against the right edge of the table.